feat: SeasonalTheme;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chytanka",
-  "version": "0.14.31",
+  "version": "0.13.32",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/link-parser/data-access/link-parser-settings.service.ts

@@ -1,28 +1,67 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Injectable, PLATFORM_ID, WritableSignal, inject, signal } from '@angular/core';
+import { Injectable, PLATFORM_ID, WritableSignal, computed, inject, signal } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LinkParserSettingsService {
-  autoPasteLink: WritableSignal<boolean> = signal(false);
   platformId = inject(PLATFORM_ID)
 
+  autoPasteLink!: WritableSignal<boolean>;
+
   constructor() {
     this.initAutoPasteLink()
+    this.initSeasonalTheme()
   }
 
   initAutoPasteLink() {
-    if(!isPlatformBrowser(this.platformId)) return;
+    if (!isPlatformBrowser(this.platformId)) return;
 
     const n = Boolean(localStorage.getItem('autoPasteLink') == 'true');
-    this.autoPasteLink.set(n);
+    this.autoPasteLink = signal(n);
   }
 
   setAutoPasteLink(n: boolean) {
-    if(!isPlatformBrowser(this.platformId)) return;
-    
+    if (!isPlatformBrowser(this.platformId)) return;
+
     this.autoPasteLink.set(n);
     localStorage.setItem('autoPasteLink', n.toString())
   }
+
+  /**
+   * 
+   */
+  seasonalTheme!: WritableSignal<boolean>;
+
+  initSeasonalTheme() {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    const n = localStorage.getItem('seasonalTheme') === null ? true : Boolean(localStorage.getItem('seasonalTheme') == 'true');
+    this.seasonalTheme = signal(n);
+    this.setSeasonalTheme(n);
+  }
+
+  setSeasonalTheme(n: boolean) {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    this.seasonalTheme.update(v => n);
+    localStorage.setItem('seasonalTheme', n.toString())
+  }
+
+  getSeasonalTheme(): string {
+    const now = new Date();
+    const month = now.getMonth(); // 0-11
+    const day = now.getDate();
+
+    if (month === 5) return 'pride'; // June
+    if (month === 9 && day > 15) return 'halloween'; // second half of Oct
+    if (month === 11 || (month === 0 && day < 10)) return 'newyear';
+    if (month === 1 && day <= 15) return 'valentine';
+    return 'default';
+  }
+
+  theme = computed(() => {
+    if (!this.seasonalTheme) return '';
+    return this.seasonalTheme() ? this.getSeasonalTheme() : ''
+  })
 }

src/app/link-parser/link-parser/link-parser.component.scss

@@ -20,8 +20,35 @@
         }
     }
 
+    &.pride {
+        --pride-red: oklch(from #e40303 0.2624 0.064157 h);
+        --pride-ora: oklch(from #ff8c00 0.2624 0.064157 h);
+        --pride-yel: oklch(from #ffed00 0.2624 0.064157 h);
+        --pride-gre: oklch(from #008026 0.2624 0.064157 h);
+        --pride-blu: oklch(from #004dff 0.2624 0.064157 h);
+        --pride-fio: oklch(from #750787 0.2624 0.064157 h);
+        background: linear-gradient(120deg, var(--pride-red), var(--pride-ora), var(--pride-yel), var(--pride-gre), var(--pride-blu), var(--pride-fio));
+    }
+
+    &.halloween {
+        background: #222;
+    }
+
     @media (prefers-color-scheme: light) {
         background: #eceff2;
+
+        &.pride {
+            --pride-red: oklch(from #e40303 0.96 0.0128 h);
+            --pride-ora: oklch(from #ff8c00 0.96 0.0128 h);
+            --pride-yel: oklch(from #ffed00 0.96 0.0128 h);
+            --pride-gre: oklch(from #008026 0.96 0.0128 h);
+            --pride-blu: oklch(from #004dff 0.96 0.0128 h);
+            --pride-fio: oklch(from #750787 0.96 0.0128 h);
+        }
+
+        &.halloween {
+            background: #f9ece5;
+        }
     }
 }
 
@@ -81,6 +108,7 @@ lp-header {
 }
 
 :host:has(input[type=url]:focus) {
+
     lp-footer,
     lp-header,
     #createListLink {

src/app/link-parser/link-parser/link-parser.component.ts

@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, HostBinding, inject } from '@angular/core';
 import { LangService } from '../../shared/data-access/lang.service';
 import { MetaTagsService } from '../../shared/data-access/meta-tags.service';
 import { LinkParserService } from '../data-access/link-parser.service';
+import { LinkParserSettingsService } from '../data-access/link-parser-settings.service';
 
 @Component({
   selector: 'app-link-parser',
@@ -11,12 +12,16 @@ import { LinkParserService } from '../data-access/link-parser.service';
     './link-parser.dual-screen.component.scss'
   ],
   standalone: false,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'this.setts.theme()'
+  }
 })
 export class LinkParserComponent {
   private meta: MetaTagsService = inject(MetaTagsService);
   private lang: LangService = inject(LangService)
   public parser: LinkParserService = inject(LinkParserService)
+  public setts = inject(LinkParserSettingsService)
 
   constructor() {
     this.initMeta()

src/app/link-parser/ui/parser-form/parser-form.component.html

@@ -1,9 +1,9 @@
 <div class="form-wrapper">
-  <h1 class="logo-text"> <app-text-embracer [text]="lang.ph().shortTitle" /> </h1>
+  <h1 class="logo-text"> <app-text-embracer [ngClass]="setts.theme()" [text]="lang.ph().shortTitle" /> </h1>
   <div style="display: flex; gap: 1ch;  align-items: center;">
     <form (submit)="onSubmit()">
-      <input name="chtnk_url" type="url" required autofocus
-        [placeholder]="lang.ph().enterLink" (input)="inputLink($event)" [value]="link()">
+      <input name="chtnk_url" type="url" required autofocus [placeholder]="lang.ph().enterLink"
+        (input)="inputLink($event)" [value]="link()">
     </form>
   </div>
   <div style="display: flex; gap: 1ch; align-items: center;">
@@ -13,10 +13,21 @@ <h1 class="logo-text"> <app-text-embracer [text]="lang.ph().shortTitle" /> </h1>
 </div>
 
 <div class="slogan-wrapper">
-  <h2 class="slogan-header">{{lang.ph().slogan}}</h2>
+  <h2 class="slogan-header">
+    @if (setts.seasonalTheme != undefined && setts.seasonalTheme()) {
+    @switch (setts.theme()) {
+    @case ('pride') {<span class="slogan-rainbow"> {{lang.ph().sloganPride}}</span> 🏳️‍🌈}
+    @case ('halloween') {<span class="slogan-halloween"> {{lang.ph().sloganHalloween}}</span> 🕷️}
+    @case ('newyear') {<span class="slogan-newyear"> {{lang.ph().sloganNewYear}}</span> 🎇}
+    @case ('valentine') {<span class="slogan-valentine"> {{lang.ph().sloganValentine}}</span> ❤️📖}
+    }
+    }
+    @else {
+    {{lang.ph().slogan}}
+    }
+  </h2>
   @if (linkParams()) {
-  <a class="button primary large go-btn"
-    [routerLink]="['',linkParams()?.site, linkParams64()?.id]">
+  <a class="button primary large go-btn" [routerLink]="['',linkParams()?.site, linkParams64()?.id]">
     <span>{{lang.ph().letsgo}} </span>
     <img class="favicon" [src]="favicons[linkParams()?.site]" [alt]="linkParams()?.site">
     <small class="site-address" [title]="linkParams()?.id">{{linkParams()?.id | truncate}}</small>

src/app/link-parser/ui/parser-form/parser-form.component.scss

@@ -42,6 +42,105 @@ app-text-embracer {
     }
 }
 
+::ng-deep app-text-embracer.pride>span {
+    --theme-base: #166496;
+    --shc: oklch(from var(--theme-base) var(--avarage-l-2) c h);
+    --border-color: oklch(from var(--theme-base) .64 0.2 h);
+    --dot-color: oklch(from var(--theme-base) .7 0.2 h);
+    color: oklch(from var(--theme-base) .7 0.2 h);
+    -webkit-text-stroke: var(--shc) var(--border-width);
+
+    // --gl: radial-gradient(circle 1px at 0px 0px, var(--dot-color) 1px, transparent 0);
+
+    border-image: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
+    border-image-slice: 1;
+
+    &:nth-of-type(2),
+    &:nth-of-type(1) {
+        --theme-base: #e40303;
+    }
+
+    &:nth-of-type(3) {
+        --theme-base: #ff8c00;
+    }
+
+    &:nth-of-type(4) {
+        --theme-base: #ffed00;
+    }
+
+    &:nth-of-type(5) {
+        --theme-base: #008026;
+    }
+
+    &:nth-of-type(6) {
+        --theme-base: #004dff;
+    }
+
+    &:nth-of-type(7) {
+        --theme-base: #750787;
+    }
+}
+
+::ng-deep app-text-embracer.pride:has(span:nth-of-type(8))>span {
+
+    &:nth-of-type(3),
+    &:nth-of-type(1),
+    &:nth-of-type(2) {
+        --theme-base: #e40303;
+    }
+
+    &:nth-of-type(4) {
+        --theme-base: #ff8c00;
+    }
+
+    &:nth-of-type(5) {
+        --theme-base: #ffed00;
+    }
+
+    &:nth-of-type(6) {
+        --theme-base: #008026;
+    }
+
+    &:nth-of-type(7) {
+        --theme-base: #004dff;
+    }
+
+    &:nth-of-type(8) {
+        --theme-base: #750787;
+    }
+}
+
+@property --halloween-base {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FF7518;
+}
+
+::ng-deep app-text-embracer.halloween>span {
+    --shc: oklch(from var(--halloween-base) var(--avarage-l-2) c h);
+    --border-color: oklch(from var(--halloween-base) .64 0.2 h);
+    --dot-color: oklch(from var(--halloween-base) .7 0.2 h);
+    color: oklch(from var(--halloween-base) .7 0.2 h);
+    -webkit-text-stroke: var(--shc) var(--border-width);
+
+    animation: halloween 5s steps(3) alternate infinite;
+}
+
+@keyframes halloween {
+    0% {
+        --halloween-base: #A0FF00;
+
+    }
+
+    50% {
+      --halloween-base: #FF7518;
+    }
+
+    100% {
+          --halloween-base: #6C2DC7;
+    }
+}
+
 .form-wrapper {
     grid-column: 2;
     display: grid;
@@ -72,7 +171,7 @@ textarea {
     border: 2px solid #166496;
     box-shadow: var(--flat-shadow-medium);
     border: 0;
-    background-color: #16649680;
+    // background-color: #16649680;
     color: #ffd60a;
 
     @media (prefers-color-scheme: light) {
@@ -125,6 +224,22 @@ input[type=url]::placeholder {
     text-wrap: balance;
 }
 
+.slogan-rainbow {
+    background: linear-gradient(90deg, #ff826e, #ff9600, #d5c100, #54de68, #78b8ff, #f68dff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bold;
+    filter: brightness(1.25);
+
+    @media (prefers-color-scheme: light) {
+        filter: brightness(0.8);
+    }
+}
+
+.slogan-halloween {
+    color: #FF7518;
+}
+
 .go-btn {
     display: flex;
     gap: 1ch;

src/app/link-parser/ui/parser-form/parser-form.component.ts

@@ -8,11 +8,11 @@ import { ImgurLinkParser, MangadexLinkParser, TelegraphLinkParser, RedditLinkPar
 import { ComickLinkParser } from '../../utils/comick-link-parser';
 
 @Component({
-    selector: 'app-parser-form',
-    templateUrl: './parser-form.component.html',
-    styleUrl: './parser-form.component.scss',
-    standalone: false,
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-parser-form',
+  templateUrl: './parser-form.component.html',
+  styleUrl: './parser-form.component.scss',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ParserFormComponent {
   private router: Router = inject(Router);
@@ -85,7 +85,7 @@ export class ParserFormComponent {
     if (queryParamUrl) {
       this.link.set(queryParamUrl ?? '')
     } else {
-      if (this.setts.autoPasteLink()) this.initFromclipboard();
+      if (this.setts.autoPasteLink && this.setts.autoPasteLink()) this.initFromclipboard();
     }
   }
 

src/app/link-parser/ui/settings/settings.component.html

@@ -47,6 +47,23 @@
         </div>
         <input type="checkbox" [checked]="setts.autoPasteLink()" (input)="setAutoPasteLink($event)" id="autoPasteLink">
     </section>
+
+    <section [class]="!setts.seasonalTheme()? 'inactive': ''">
+        <div>
+            <p style="display: flex; justify-content: space-between; align-items: center;">
+                <label class="label" for="seasonalTheme">🎨 {{lang.ph().seasonalTheme}}</label>
+                @if(setts.seasonalTheme()) {
+                <small class="on">ON</small>
+                } @else {
+                <small class="off">OFF</small>
+                }
+            </p>
+            <p>
+                <small>{{lang.ph().seasonalThemeDesc}}</small>
+            </p>
+        </div>
+        <input type="checkbox" [checked]="setts.seasonalTheme()" (input)="setSeasonalTheme($event)" id="seasonalTheme">
+    </section>
 </fieldset>
 
 <fieldset>

src/app/link-parser/ui/settings/settings.component.ts

@@ -28,6 +28,12 @@ export class SettingsComponent {
 
   }
 
+  setSeasonalTheme(e: Event) {
+    this.setts.setSeasonalTheme((e.target as HTMLInputElement).checked)
+    //
+
+  }
+
   setSaveFileToHistory(e: Event) {
     this.fileSetts.setSaveFileToHistory((e.target as HTMLInputElement).checked)