Develop

src/app/app.component.ts

@@ -1,7 +1,9 @@
-import { Component, WritableSignal, signal } from '@angular/core';
+import { Component, HostListener, WritableSignal, signal } from '@angular/core';
 import { LangService } from './shared/data-access/lang.service';
 import { ActivatedRoute } from '@angular/router';
 
+const SCALE_GAP = 128;
+
 @Component({
   selector: 'app-root',
   template: `<router-outlet></router-outlet>`
@@ -13,6 +15,8 @@ export class AppComponent {
   }
 
   ngOnInit() {
+    this.initScaleDifference();
+
     this.route.pathFromRoot[0].queryParams.subscribe(q => {
       const l = q['lang']
       if (l && this.lang.manifests.has(l)) {
@@ -21,4 +25,15 @@ export class AppComponent {
       }
     })
   }
+
+  @HostListener('window:resize')
+  initScaleDifference() {
+    const w = document.documentElement.clientWidth;
+    const h = document.documentElement.clientHeight;
+    const scalex = 1 - ((w - SCALE_GAP) / w)
+    const scaley = 1 - ((h - SCALE_GAP) / h)
+
+    document.documentElement.style.setProperty('--scale-diff-x', scalex.toString())
+    document.documentElement.style.setProperty('--scale-diff-y', scaley.toString())
+  }
 }

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

@@ -0,0 +1,22 @@
+import { Injectable, WritableSignal, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LinkParserSettingsService {
+  autoPasteLink: WritableSignal<boolean> = signal(false);
+
+  constructor() {
+    this.initAutoPasteLink()
+  }
+
+  initAutoPasteLink() {
+    const n = Boolean(localStorage.getItem('autoPasteLink') == 'true') ?? false;
+    this.autoPasteLink.set(n);
+  }
+
+  setAutoPasteLink(n: boolean) {
+    this.autoPasteLink.set(n);
+    localStorage.setItem('autoPasteLink', n.toString())
+  }
+}

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

@@ -6,12 +6,14 @@ import { LinkParserComponent } from './link-parser/link-parser.component';
 import { SharedModule } from '../shared/shared.module';
 import { FormsModule } from '@angular/forms';
 import { FaqComponent } from './ui/faq/faq.component';
+import { SettingsComponent } from './ui/settings/settings.component';
 
 
 @NgModule({
   declarations: [
     LinkParserComponent,
-    FaqComponent
+    FaqComponent,
+    SettingsComponent
   ],
   imports: [
     CommonModule,

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

@@ -1,14 +1,18 @@
-<div>
-  @defer{ <app-text-embracer [text]="lang.phrases.shortTitle" /> }
-  <form (submit)="onSubmit()">
-    <input name="chtnk_url" type="url" required autofocus [placeholder]="lang.phrases.enterLink"
-      (input)="inputLink($event)" [value]="link()">
-  </form>
+<div class="form-wrapper">
+  <div style="grid-column: 2; display: grid; gap: 2ch; overflow: hidden; padding: 0px;">
+    @defer{ <app-text-embracer [text]="lang.phrases.shortTitle" /> }
+    <form (submit)="onSubmit()">
+      <input name="chtnk_url" type="url" required autofocus [placeholder]="lang.phrases.enterLink"
+        (input)="inputLink($event)" [value]="link()">
+      <!-- <input class="button empty" type="reset" value="🧹"> -->
+    </form>
+  </div>
 
-  <div style="display: grid; grid-template-columns: 1fr auto; align-items: center;">
-    <span style="font-family: 'EB Garamond', serif; font-style: italic; opacity: .72;">{{lang.phrases.slogan}}</span>
+  <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; grid-column: 2;">
+    <span
+      style="font-family: 'EB Garamond', serif; font-style: italic; opacity: .72; text-wrap: balance;">{{lang.phrases.slogan}}</span>
     @if (linkParams()) {
-    <a class="button primary small" [routerLink]="[linkParams()?.site, linkParams64()?.id]">
+    <a class="button primary" [routerLink]="[linkParams()?.site, linkParams64()?.id]">
       <span>{{lang.phrases.letsgo}} </span>
       <span class="site-name">{{linkParams()?.site}}</span>
       <span class="site-address" [title]="linkParams()?.id">{{'/'+linkParams()?.id | truncate}}</span>
@@ -22,38 +26,29 @@
 @defer{
 <app-overlay class="show top">
   <button title="F1" class="button tshadow" (click)="showHelp()">❔</button>
-  <app-view-mode-bar style="margin-left: auto;" (valueChange)="lang.setLang($event.code); lang.updateManifest()"
-    [options]="langOpt" [value]="optLangValue()" />
+  <button title="F2" class="button tshadow" (click)="showSettings()">⚙️</button>
+  <button title="F2" disabled class="button tshadow">📥</button>
+  <button title="F2" disabled class="button tshadow">📚</button>
+  <app-lang-toggle />
 </app-overlay>
 }
 @defer{
 <app-overlay class="show">
   <small>{{lang.phrases.shortTitle}}, &copy; 2024</small>
 
   @for (item of social; track $index) {
-    <a [href]="item.link" target="_blank" rel="noopener noreferrer">
-      <img style="width: 2ch;" [src]="item.logoSrc" [alt]="item.alt">
-    </a>
+  <a [href]="item.link" target="_blank" rel="noopener noreferrer">
+    <img style="width: 2ch;" [src]="item.logoSrc" [alt]="item.alt">
+  </a>
   }
 
   <made-in-ukraine />
 </app-overlay>
 }
+<app-dialog #faqDialog [title]="'🙋‍♂️ ' + lang.ph().faq">
+  @defer{ <app-faq /> }
+</app-dialog>
 
-<dialog #dialog (click)="closeDialog($event)">
-  <div class="dialog-wrapper">
-    <header>
-      <h2>🙋‍♂️ {{lang.ph().faq}}</h2>
-    </header>
-    <section>
-      @defer{ <app-faq /> }
-    </section>
-    <footer>
-      <form method="dialog">
-        <button class="button empty full">
-          {{lang.ph().ok}}
-        </button>
-      </form>
-    </footer>
-  </div>
-</dialog>
+<app-dialog #settingsDialog [title]="'⚙️ ' + lang.ph().settings">
+  @defer{ <app-settings /> }
+</app-dialog>

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

@@ -15,7 +15,6 @@
 
     &>div {
         display: grid;
-        place-content: center;
         gap: 2ch;
     }
 }
@@ -28,44 +27,73 @@ app-text-embracer {
     font-family: 'Rampart One', sans-serif;
     font-size: clamp(1rem, 8vw, 5rem);
 
-    @media (max-aspect-ratio: 1) or (max-width: 640px) {
+    -webkit-box-reflect: below 1.3rem linear-gradient(transparent 0%, #fff);
+    @media (max-width: 1080px) {
+        font-size: clamp(1rem, 7vw, 8rem);
+    }
+
+    @media ((orientation: portrait) and (max-aspect-ratio: 1)) {
         font-size: clamp(1rem, 10vw, 8rem);
     }
+
+
+
+    // grid-column: 2;
+}
+
+.form-wrapper {
+    grid-template-columns: auto minmax(auto, 80ch) auto;
+}
+
+form {
+    // grid-column: 2;
+    backdrop-filter: blur(var(--blur));
+    z-index: 3;
+    border-radius: .5ch;
+    max-width: 80ch;
+    width: 100%;
+    position: relative;
 }
 
 input[type=url] {
+    display: block;
     font: inherit;
-    padding: 1ch;
+    padding: 1.5ch 2ch;
     background: transparent;
     font-family: 'Courier New', Courier, monospace;
-    border: 0;
-    outline: 1px solid;
     color: inherit;
     width: 100%;
-    margin: auto;
-    transition: all .25s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: all var(--t) cubic-bezier(0.075, 0.82, 0.165, 1);
     border-radius: .5ch;
+    border: 2px solid #166496;
+    box-shadow: var(--shadow-elevation-medium);
+    background-color: #00274190;
+    color: #ffd60a;
+    // padding-right: 8ch;
+
+    &:focus {
+        border-color: #166496;
+        outline: unset;
+    }
 }
 
 input[type=url]::placeholder {
-    opacity: 0.5;
+    color: #ffd60a;
+    opacity: 0.6;
 }
 
+// input[type=reset] {
+//     position: absolute;
+//     right: 2px;
+//     top: 2px;
+//     height: 6ch;
+//     width: 6ch;
+// }
 
-
-@media (prefers-reduced-motion: no-preference) {
-    input[type=url]:focus {
-
-        outline-offset: .5ch;
-
-    }
-}
-
-// a {
-//     padding: 1ch;
-//     font-size: smaller;
-//     color: inherit;
-//     text-decoration: none;
+// @media (prefers-reduced-motion: no-preference) {
+//     input[type=url]:focus {
+//         outline-offset: .5ch;
+//     }
 // }
 
 .site-name {
@@ -79,7 +107,7 @@ input[type=url]::placeholder {
 .link {
     outline: 1px solid;
     border-radius: .5ch;
-    transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .25s;
+    transition: all cubic-bezier(0.075, 0.82, 0.165, 1) var(--t);
 
     &:hover {
         outline-offset: .5ch;
@@ -111,94 +139,17 @@ app-overlay {
     }
 }
 
-made-in-ukraine {
+made-in-ukraine, app-lang-toggle {
     margin-left: auto;
-
 }
 
-
-dialog {
-    --r: 1ch;
-    --b: 2px;
-    padding: 0;
-    max-width: min(calc(100vw - 4ch), 60ch);
-    max-height: calc(100dvh - 4ch);
-    border-radius: var(--r);
-    border: var(--b) solid #166496;
-    background-color: rgb(0, 15, 30);
-    color: inherit;
-
-    &::before {
-        content: 'esc';
-        position: fixed;
-        left: 2ch;
-        top: 2ch;
-        display: inline-grid;
-        place-content: center;
-        background-color: rgba(0, 39, 65, 1);
-        border: 1px solid #166496;
-        height: 3.5ch;
-        padding: 1ch .75ch;
-        font-size: smaller;
-        border-radius: .5ch;
-        margin: 0 .25ch;
-        font-family: monospace;
-        font-weight: bold;
-        line-height: 1ch;
-        box-shadow: 0 .35ch #166496;
-        color: #ffd60a;
-        opacity: .5;
-    }
-
-    &::backdrop {
-        backdrop-filter: blur(.5ch) brightness(.32);
-    }
-
-    .dialog-wrapper {
-        display: grid;
-        max-height: 100%;
-        grid-template: auto 1fr auto / 1fr;
-    }
-
-    header,
-    footer {
-        background-color: rgb(0, 39, 65);
-        padding: 1ch 2ch;
-    }
-
-    header {
-        border-top-left-radius: calc(var(--r) - var(--b));
-        border-top-right-radius: calc(var(--r) - var(--b));
-
-        h2,
-        h4 {
-            margin: 0;
-        }
-    }
-
-    footer {
-        border-bottom-left-radius: calc(var(--r) - var(--b));
-        border-bottom-right-radius: calc(var(--r) - var(--b));
-    }
-
-    section {
-        padding: 2ch;
-        overflow: auto;
-    }
-
-    &[open] {
-        display: flex;
-    }
-}
-
-
 :host {
-    transition: scale .1s ease-in-out;
+    transition: all var(--t) ease-in-out;
 }
 
 :host:has(dialog[open]) {
-    scale: .99;
-    overflow: hidden;
+    transform: scale(calc(1 - var(--scale-diff-x, .1)), calc(1 - var(--scale-diff-y, .1)));
+    filter: blur(var(--blur));
 }
 
 :host:has(input[type=url]:focus) {