myxelium/Toju
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 2 Releases 37 Wiki Activity

Toju Website V2

Browse Source
This commit is contained in:
SocksOnHead
2026-03-12 13:21:33 +01:00
parent 106212ef3d
commit 45e0b09af8
51 changed files with 2333 additions and 1513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
website/src/app/components/header/header.component.html Normal file
View File

@@ -0,0 +1,184 @@
<header
class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
[class]="scrolled() ? 'glass shadow-lg shadow-black/20' : 'bg-transparent'"
>
<nav class="container mx-auto px-6 py-4 flex items-center justify-between">
<!-- Logo -->
<a
routerLink="/"
aria-label="Toju home"
class="flex items-center group"
>
<span class="flex items-center gap-1.5">
<img
src="/images/toju-logo-transparent.png"
alt="Toju"
class="h-9 w-auto object-contain drop-shadow-lg group-hover:opacity-90 transition-opacity"
/>
<span class="text-xl font-bold text-foreground">Toju</span>
</span>
<span
class="ml-2 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-purple-500/20 text-purple-400 border border-purple-500/30 uppercase tracking-wider"
>
Beta
</span>
</a>
<!-- Desktop nav -->
<div class="hidden md:flex items-center gap-8">
<a
routerLink="/"
routerLinkActive="text-primary"
[routerLinkActiveOptions]="{ exact: true }"
class="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Home
</a>
<a
routerLink="/what-is-toju"
routerLinkActive="text-primary"
class="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
What is Toju?
</a>
<a
routerLink="/downloads"
routerLinkActive="text-primary"
class="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Downloads
</a>
<a
routerLink="/philosophy"
routerLinkActive="text-primary"
class="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Our Philosophy
</a>
</div>
<!-- Right side -->
<div class="hidden md:flex items-center gap-4">
<a
href="https://buymeacoffee.com/myxelium"
target="_blank"
rel="noopener noreferrer"
class="text-sm text-muted-foreground hover:text-yellow-400 transition-colors flex items-center gap-1.5"
>
<img
src="/images/buymeacoffee.png"
alt=""
width="16"
height="16"
class="w-4 h-4 object-contain"
/>
Support Us
</a>
<a
href="https://web.toju.app/"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40"
>
Use Web Version
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
</div>
<!-- Mobile hamburger -->
<button
type="button"
class="md:hidden text-foreground p-2"
(click)="mobileOpen.set(!mobileOpen())"
aria-label="Toggle menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
@if (mobileOpen()) {
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
} @else {
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
}
</svg>
</button>
</nav>
<!-- Mobile nav -->
@if (mobileOpen()) {
<div
class="md:hidden glass border-t border-border/30 px-6 py-4 space-y-4"
(click)="mobileOpen.set(false)"
>
<a
routerLink="/"
class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>Home</a
>
<a
routerLink="/what-is-toju"
class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>What is Toju?</a
>
<a
routerLink="/downloads"
class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>Downloads</a
>
<a
routerLink="/philosophy"
class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>Our Philosophy</a
>
<hr class="border-border/30" />
<a
href="https://buymeacoffee.com/myxelium"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-yellow-400 transition-colors"
>
<img
src="/images/buymeacoffee.png"
alt=""
width="16"
height="16"
class="w-4 h-4 object-contain"
/>
Support Us
</a>
<a
href="https://web.toju.app/"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium"
>
Use Web Version
</a>
</div>
}
</header>

79
website/src/app/components/header/header.component.ts
View File

@@ -12,87 +12,14 @@ import { isPlatformBrowser } from '@angular/common';
selector: 'app-header',
standalone: true,
imports: [RouterLink, RouterLinkActive],
template: `
<header
class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
[class]="scrolled() ? 'glass shadow-lg shadow-black/20' : 'bg-transparent'"
>
<nav class="container mx-auto px-6 py-4 flex items-center justify-between">
<!-- Logo -->
<a routerLink="/" class="flex items-center gap-3 group">
<div class="w-9 h-9 rounded-lg bg-gradient-to-br from-purple-500 to-violet-600 flex items-center justify-center font-bold text-white text-lg shadow-lg shadow-purple-500/25 group-hover:shadow-purple-500/40 transition-shadow">
T
</div>
<span class="text-xl font-bold text-foreground">Toju</span>
<span class="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-purple-500/20 text-purple-400 border border-purple-500/30 uppercase tracking-wider">Beta</span>
</a>
<!-- Desktop nav -->
<div class="hidden md:flex items-center gap-8">
<a routerLink="/" routerLinkActive="text-primary" [routerLinkActiveOptions]="{exact: true}" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Home</a>
<a routerLink="/what-is-toju" routerLinkActive="text-primary" class="text-sm text-muted-foreground hover:text-foreground transition-colors">What is Toju?</a>
<a routerLink="/downloads" routerLinkActive="text-primary" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Downloads</a>
<a routerLink="/philosophy" routerLinkActive="text-primary" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Our Philosophy</a>
</div>
<!-- Right side -->
<div class="hidden md:flex items-center gap-4">
<a
href="https://buymeacoffee.com/myxelium"
target="_blank"
rel="noopener noreferrer"
class="text-sm text-muted-foreground hover:text-yellow-400 transition-colors flex items-center gap-1.5"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.062 2.014.13l.04.005c.394.04.781.098 1.172.166.063.011.121.029.182.044.088.03.18.043.252.087a.556.556 0 01.272.476c.014.09.042.217.068.343.082.397.162.79.24 1.184.048.26.092.52.122.782.017.163.047.414-.076.556-.163.178-.49.132-.702.096a48.146 48.146 0 00-1.553-.22 30.38 30.38 0 00-3.346-.234c-1.108 0-2.217.066-3.315.2a25.855 25.855 0 00-1.578.244c-.156.03-.313.062-.469.097-.288.065-.564.195-.754.441-.131.17-.18.383-.134.596.046.213.167.396.34.525.294.215.626.358.976.454 1.015.285 2.087.38 3.136.397 1.21.018 2.42-.04 3.618-.177 1.004-.114 2-.3 2.95-.593.082-.025.165-.05.246-.078.224-.073.458-.142.676-.233.378-.157.727-.397.856-.795a1.38 1.38 0 00.048-.353v-.015c0-.049-.01-.096-.014-.144l-.018-.121c-.028-.179-.055-.362-.1-.539l-.025-.115-.038-.186c-.022-.11-.044-.22-.07-.327l-.061-.283c-.02-.096-.042-.19-.067-.284-.02-.074-.037-.15-.058-.224a2.98 2.98 0 00-.09-.3c-.034-.095-.078-.225-.148-.308zm-11.8 6.56a.612.612 0 00-.35.177.614.614 0 00-.17.343l-.14.697-.147.726c-.012.065-.018.13-.026.194l-.13.653c-.012.065-.018.13-.026.195l-.13.652c-.024.119-.042.24-.07.358-.018.073-.037.147-.05.222l-.087.437c-.024.12-.042.24-.07.359-.018.073-.037.146-.05.221l-.088.437c-.011.058-.022.117-.03.176-.01.06-.014.119-.025.178a.474.474 0 00.147.422c.105.1.24.153.378.154l1.06.005c.037 0 .073-.003.11-.009l.053-.009c.151-.03.293-.109.364-.255.043-.09.058-.186.065-.282v-.003l.05-.259.052-.259.023-.117c.01-.051.019-.103.03-.153l.005-.025.026-.132.027-.131.026-.131.052-.259.052-.259.013-.064.013-.064.024-.12.024-.121c.012-.062.007-.127-.003-.189a.57.57 0 00-.044-.15.538.538 0 00-.094-.14.596.596 0 00-.23-.155c-.07-.032-.147-.052-.226-.057-.118-.008-.236-.008-.355-.008h-.007c-.154 0-.308 0-.462.003-.107.002-.216.002-.323.006zm13.7-2.974a.53.53 0 01.128.378c-.004.064-.02.128-.048.186a.684.684 0 01-.097.148l-.012.014-.016.016a.585.585 0 01-.13.098.612.612 0 01-.21.075 1.378 1.378 0 01-.26.024h-.037c-.086 0-.132.093-.094.161a.3.3 0 01.032.063c.018.045.018.093.009.14-.011.059-.048.11-.09.154a.332.332 0 01-.145.1.375.375 0 01-.173.03.505.505 0 01-.152-.036.43.43 0 01-.123-.082.456.456 0 01-.085-.11.435.435 0 01-.044-.138 1.01 1.01 0 01-.017-.134.66.66 0 01.005-.133c.008-.053.032-.1.065-.143.035-.044.078-.08.126-.107a.498.498 0 01.163-.059c.05-.007.1-.007.15-.002h.015a.08.08 0 00.076-.048.083.083 0 00-.023-.096.568.568 0 01-.123-.15.516.516 0 01-.056-.185.582.582 0 01.013-.196.592.592 0 01.075-.176.538.538 0 01.198-.182.567.567 0 01.247-.07c.08-.003.16.011.232.044a.56.56 0 01.187.14z"/></svg>
Support Us
</a>
<a
href="https://web.toju.app/"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40"
>
Use Web Version
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
</a>
</div>
<!-- Mobile hamburger -->
<button
class="md:hidden text-foreground p-2"
(click)="mobileOpen.set(!mobileOpen())"
aria-label="Toggle menu"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@if (mobileOpen()) {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
} @else {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
}
</svg>
</button>
</nav>
<!-- Mobile nav -->
@if (mobileOpen()) {
<div class="md:hidden glass border-t border-border/30 px-6 py-4 space-y-4" (click)="mobileOpen.set(false)">
<a routerLink="/" class="block text-sm text-muted-foreground hover:text-foreground transition-colors">Home</a>
<a routerLink="/what-is-toju" class="block text-sm text-muted-foreground hover:text-foreground transition-colors">What is Toju?</a>
<a routerLink="/downloads" class="block text-sm text-muted-foreground hover:text-foreground transition-colors">Downloads</a>
<a routerLink="/philosophy" class="block text-sm text-muted-foreground hover:text-foreground transition-colors">Our Philosophy</a>
<hr class="border-border/30">
<a href="https://buymeacoffee.com/myxelium" target="_blank" rel="noopener noreferrer" class="block text-sm text-muted-foreground hover:text-yellow-400 transition-colors">Support Us</a>
<a href="https://web.toju.app/" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium">Use Web Version</a>
</div>
}
</header>
`
templateUrl: './header.component.html'
})
export class HeaderComponent {
private readonly platformId = inject(PLATFORM_ID);
readonly scrolled = signal(false);
readonly mobileOpen = signal(false);
private readonly platformId = inject(PLATFORM_ID);
@HostListener('window:scroll')
onScroll(): void {
if (isPlatformBrowser(this.platformId)) {