3.0 Beta 2

src/app/homepage/homepage.html

@@ -0,0 +1,268 @@
+@if (cookieConsentOpen) {
+  <div id="cookieConsent" tuiCardLarge>
+    <h1>
+      <tui-icon icon="@tui.cookie"></tui-icon>
+      {{'home.cookies'|translate}}
+    </h1>
+
+    <p>{{'home.cookiesDesc'|translate}}</p>
+
+    <button (click)="consent()" tuiButton iconStart="@tui.check">
+      {{'home.understood'|translate}}
+    </button>
+  </div>
+}
+
+<ng-template [(tuiDialog)]="androidBetaTestDialogOpen"
+             [tuiDialogOptions]="{label: translateService.instant('home.requestAlphaAccess'), size: 's'}">
+  <span>{{'home.joinGoogleGroupWhy'|translate}}</span>
+
+  <button (click)="enterGGroup()" style="width: 100%; margin-top: 10px" tuiButton iconStart="@tui.users">{{'home.joinGoogleGroup'|translate}}</button>
+
+</ng-template>
+
+<ng-template [(tuiDialog)]="appleBetaTestDialogOpen"
+             [tuiDialogOptions]="{label: translateService.instant('home.requestAlphaAccess'), size: 's'}">
+  <span>{{'home.testFlightDesc'|translate}}</span>
+
+  <button (click)="openTestFlight()" style="width: 100%; margin-top: 10px" tuiButton >
+    <i class="fa-brands fa-apple" style="font-size: 25px"></i>
+    {{'home.testFlight'|translate}}
+  </button>
+</ng-template>
+
+<ng-template [(tuiDialog)]="msBetaTestDialogOpen"
+             [tuiDialogOptions]="{label: translateService.instant('home.requestAlphaAccess'), size: 's'}">
+  <span>{{'home.microsoftStoreDesc'|translate}}</span>
+
+  <button (click)="openMsStore()" style="width: 100%; margin-top: 10px" tuiButton >
+    <i class="fa-brands fa-microsoft" style="font-size: 25px"></i>
+    {{'home.microsoftStore'|translate}}
+  </button>
+</ng-template>
+
+<main>
+  <section id="hero">
+    <div id="imgScroller" [style]="'opacity:'+scrollerOpacity">
+      <img [src]="'/images/homepage/new_customi_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
+      <img [src]="'/images/homepage/new_dm_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
+      <img [src]="'/images/homepage/new_network_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
+      <img [src]="'/images/homepage/new_network_discovery_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
+      <img [src]="'/images/homepage/new_picture_stats_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
+      <img [src]="'/images/homepage/new_pictures_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
+    </div>
+
+    <div id="introducer">
+      <svg viewBox="0 0 350 60" width="1000px" height="200px">
+        <text class="logo" x="50%" y="80%" text-anchor="middle">Chatenium</text>
+      </svg>
+
+      <div id="quickFeatures">
+        <h1>
+          {{ 'aChatProgram'|translate }}
+        </h1>
+
+        <p class="chtn_desc">
+          {{ 'whatIsChtn'|translate }}
+        </p>
+
+        <button style="width: 350px" routerLink="/chat" tuiButton iconStart="@tui.globe">
+          {{'home.enterChtnOnWeb'|translate}}
+        </button>
+
+        <button style="width: 350px" appearance="secondary" (click)="openRoadmap()" tuiButton iconStart="@tui.chart-no-axes-gantt">
+          Roadmap
+        </button>
+
+        <p style="display: flex; align-items: center; gap: 5px;">
+          <tui-icon icon="@tui.mouse"></tui-icon>
+          {{ 'scrollDownForMore'|translate }}
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section class="detailedFeature">
+    <div class="style">
+      <h1>{{ 'home.chtn'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.circle-gauge"></tui-icon>
+        {{ 'home.adaptsToYou'|translate }}</span></h1>
+      <p>{{ 'home.adaptsToYouDesc'|translate }}</p>
+
+      <div class="cardList">
+        <div tuiCardLarge>
+          <tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
+
+          <h2>{{ 'home.chtnOnWeb'|translate }}</h2>
+          <p>{{ 'home.chtnOnWebDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faAndroid"></fa-icon>
+
+          <h2>{{ 'home.chtnOnAndroid'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{ 'home.chtnOnAndroidDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faApple"></fa-icon>
+
+          <h2>{{ 'home.chtnOnApple'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{ 'home.chtnOnAppleDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faWindows"></fa-icon>
+
+          <h2>{{ 'home.chtnOnWindows'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{ 'home.chtnOnWindowsDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faLinux"></fa-icon>
+
+          <h2>{{ 'home.chtnOnLinux'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{ 'home.chtnOnLinuxDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faRecordVinyl"></fa-icon>
+
+          <h2>{{ 'home.chtnEcho'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{ 'home.chtnEchoDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faDesktop"></fa-icon>
+
+          <h2>{{ 'home.chtnReson'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{ 'home.chtnResonDesc'|translate }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="detailedFeature">
+    <div class="style">
+      <h1>{{ 'home.chtnIs'|translate }} <span style="color: var(--tui-status-positive)"><tui-icon icon="@tui.lock"></tui-icon>
+        {{ 'home.secure'|translate }}</span></h1>
+      <p>{{ 'home.secureDesc'|translate }}</p>
+
+      <div class="cardList">
+        <div tuiCardLarge>
+          <tui-icon icon="@tui.file"></tui-icon>
+
+          <h2>{{ 'home.secureCdn'|translate }}</h2>
+          <p>{{ 'home.secureCdnDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <tui-icon icon="@tui.message-circle"></tui-icon>
+
+          <h2>{{ 'home.encryptedText'|translate }}</h2>
+          <p>{{ 'home.encryptedTextDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <tui-icon icon="@tui.shredder"></tui-icon>
+
+          <h2>{{ 'home.zeroDataCollection'|translate }}</h2>
+          <p>{{ 'home.zeroDataCollectionDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <tui-icon icon="@tui.phone"></tui-icon>
+
+          <h2>{{ 'home.secureCalling'|translate }}</h2>
+          <p>{{ 'home.secureCallingDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <tui-icon icon="@tui.footprints"></tui-icon>
+
+          <h2>{{ 'home.zeroDigitalFootprint'|translate }}</h2>
+          <p>{{ 'home.zeroDigitalFootprintDesc'|translate }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="detailedFeature" style="margin-bottom: 5%;">
+    <div class="style">
+      <h1>{{ 'home.weAreExcitedFor'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
+        {{ 'home.you'|translate }}</span></h1>
+      <p>{{ 'home.weAreExcitedForYouDesc'|translate }}</p>
+
+      <div class="cardList">
+        <div tuiCardLarge>
+          <tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
+
+          <h2><a routerLink="/chat">{{ 'home.enterChtnOnWeb'|translate }}</a></h2>
+          <p>{{ 'home.enterChtnOnWebDesc'|translate }}</p>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faGooglePlay"></fa-icon>
+
+          <h2>{{ 'home.downloadChtnOnAndroid'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{'home.openBetaDesc'|translate}}</p>
+
+          <button (click)="androidBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faAppStoreIos"></fa-icon>
+
+          <h2>{{ 'home.downloadChtnOnApple'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{'home.openBetaDesc'|translate}}</p>
+
+          <button (click)="appleBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
+        </div>
+
+        <div tuiCardLarge>
+          <fa-icon [icon]="faMicrosoft"></fa-icon>
+
+          <h2>{{ 'home.downloadOnWindows'|translate }}</h2>
+          <div tuiBadge>{{'home.openBeta'|translate}}</div>
+          <p>{{'home.openBetaDesc'|translate}}</p>
+
+          <button (click)="msBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <h1>Chatenium</h1>
+  <span>2026 &copy;</span>
+
+  <div style="display: flex; gap: 10px; margin-top: 10px;">
+    <button routerLink="/privacy" tuiButton iconStart="@tui.lock">
+      {{'home.privacyPolicy'|translate}}
+    </button>
+
+    <button routerLink="/tos" tuiButton iconStart="@tui.scroll">
+      {{'home.tos'|translate}}
+    </button>
+
+    <button (click)="openHelp()" tuiButton iconStart="@tui.badge-question-mark">
+      {{'home.help'|translate}}
+    </button>
+
+    <button (click)="openBlog()" tuiButton iconStart="@tui.scroll-text">
+      {{'home.blog'|translate}}
+    </button>
+
+    <button (click)="openAPISpecs()" tuiButton iconStart="@tui.braces">
+      {{'home.apiSpecs'|translate}}
+    </button>
+  </div>
+</footer>