Add educators explanation

src/app/pages/transfer/transfer.component.html

@@ -12,7 +12,7 @@ <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl
   <div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:px-6">
     <div class="items-center gap-8 lg:grid xl:gap-16">
       <div class="text-gray-500 sm:text-lg dark:text-gray-400">
-        <p class="mb-4"><transloco key="transfer.visit_old" [params]="{oldUrl: '/transfer'}" /></p>
+        <p class="mb-6"><transloco key="transfer.visit_old" [params]="{oldUrl: '/transfer'}" /></p>
         <form class="max-w-sm mx-auto" [formGroup]="form" (ngSubmit)="transfer()">
           <div class="mb-2">
             <label for="source_api_key" class="block mb-2 font-medium text-gray-900 dark:text-white">{{'transfer.source_api_key' | transloco}}</label>
@@ -35,7 +35,7 @@ <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl
           </div>
           @if (educatorAccounts()) {
             <div class="dark:text-white text-gray-900" [class.mb-5]="form.value.targetUserValidated !== false" [class.mb-1]="form.value.targetUserValidated === false">
-              <p class="mb-1"><small>{{'transfer.donate' | transloco}}</small></p>
+              <p class="mb-1"><small>{{'transfer.donate' | transloco}}<sup><a routerLink="/transfer-v2" fragment="note1" class="text-blue-600 dark:text-green-400">1</a></sup></small></p>
 
               <select formControlName="educatorAccount" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                 @for (user of educatorAccounts(); track user.id) {
@@ -74,6 +74,11 @@ <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl
             [class.text-white]="form.valid"
             type="submit" class="hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
         </form>
+
+        <p id="note1" class="mt-6" [class.active]="fragment() === 'note1'">
+          <sup>1</sup>
+          {{'educators.explanation' | transloco}}
+        </p>
       </div>
     </div>
   </div>

src/app/pages/transfer/transfer.component.ts

@@ -16,6 +16,7 @@ import {AiHordeService} from "../../services/ai-horde.service";
 import {HordeUser} from "../../types/horde-user";
 import {toSignal} from "@angular/core/rxjs-interop";
 import {FormatNumberPipe} from "../../pipes/format-number.pipe";
+import {ActivatedRoute, RouterLink} from "@angular/router";
 
 @Component({
   selector: 'app-transfer',
@@ -28,7 +29,8 @@ import {FormatNumberPipe} from "../../pipes/format-number.pipe";
     ToggleCheckboxComponent,
     ReactiveFormsModule,
     JsonPipe,
-    FormatNumberPipe
+    FormatNumberPipe,
+    RouterLink
   ],
   templateUrl: './transfer.component.html',
   styleUrl: './transfer.component.scss'
@@ -55,6 +57,7 @@ export class TransferComponent implements OnInit, OnDestroy {
     return this.currentUser()!.kudos;
   });
   public educatorAccounts = toSignal(this.aiHorde.getEducatorAccounts());
+  public fragment = signal<string|null>(null);
 
   public form = new FormGroup({
     apiKey: new FormControl<string>('', [Validators.required]),
@@ -75,6 +78,7 @@ export class TransferComponent implements OnInit, OnDestroy {
     private readonly footerColor: FooterColorService,
     private readonly database: DatabaseService,
     private readonly aiHorde: AiHordeService,
+    public readonly activatedRoute: ActivatedRoute,
   ) {
   }
 
@@ -160,6 +164,13 @@ export class TransferComponent implements OnInit, OnDestroy {
 
       this.sentSuccessfully.set(null);
     }));
+
+    this.subscriptions.add(this.activatedRoute.fragment.subscribe(fragment => {
+      this.fragment.set(fragment);
+      if (fragment) {
+        document.querySelector(`#${fragment}`)?.scrollIntoView();
+      }
+    }));
   }
 
   public ngOnDestroy(): void {

src/assets/i18n/en.json

@@ -90,5 +90,6 @@
   "transfer.too_many_kudos": "Eh, you don't have that many kudos",
   "transfer.donate": "or donate them to one of the educator accounts:",
   "option.empty": "-- none --",
-  "transfer.account.kudos_amount": "has {{amountFormatted}} kudos"
+  "transfer.account.kudos_amount": "has {{amountFormatted}} kudos",
+  "educators.explanation": "An educator account provides teachers and educational institutions with access to AI Horde for generating AI images."
 }