chore: move link to a mat-card at the bottom of the list

LKL2017 · Dec 22, 2023 · 5b1002d · 5b1002d
1 parent 4196713
commit 5b1002d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,10 +1,7 @@
 <div class="app-container">
   <div class="app-header">
     <span class="title">P5 Lab</span>
-    <span class="description">A collection of creative coding with p5.js which is learned, inspired by
-    <a mat-raised-button href="https://www.youtube.com/watch?v=70MQ-FugwbI&list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM" target="_blank">{{ '@TheCodingTrain' }}</a>
-    and
-    <a mat-raised-button href="https://www.youtube.com/@Frankslaboratory" target="_blank">{{ '@Frankslaboratory' }}</a>
+    <span class="description">A collection of creative coding with p5.js
   </span>
   <a class="app-header-icon" href="https://github.com/LKL2017/P5Lab" target="_blank">
     <img src="assets/images/github-mark-white.svg"  alt="github-icon">

diff --git a/src/di/mock.ts b/src/di/mock.ts
@@ -1,10 +1,10 @@
 import {InjectionToken} from "@angular/core";
 
 export interface Artifact {
-  type: 'harmonic' | 'gravity' | 'pixel' | 'raining'
-  title: string;
+  type: 'harmonic' | 'gravity' | 'pixel' | 'raining' | 'possibility';
+  title?: string;
   description?: string;
-  preview: string;
+  preview?: string;
 }
 
 export const ArtifactToken = new InjectionToken<Artifact[]>('gallery-list');
@@ -13,5 +13,6 @@ export const MOCK_ARTIFACTS: Artifact[] = [
   {type: 'harmonic', title: 'Harmonic Motion', preview: 'assets/images/harmonic-preview.png'},
   {type: 'gravity', title: 'Gravity', preview: 'assets/images/gravity-preview.png'},
   {type: 'pixel', title: 'Pixels', preview: 'assets/images/image-preview.png'},
-  {type: 'raining', title: 'Raining', preview: 'assets/images/raining-preview.png'}
+  {type: 'raining', title: 'Raining', preview: 'assets/images/raining-preview.png'},
+  {type: 'possibility', title: 'Keep Exploring...' },
 ]
diff --git a/src/gallery/gallery-home/gallery-home.component.html b/src/gallery/gallery-home/gallery-home.component.html
@@ -7,12 +7,27 @@
       @if (artifact.preview) {
         <img [src]="artifact.preview"  mat-card-image alt="">
       } @else {
-        <mat-card-content>Developing</mat-card-content>
+        <mat-card-content>
+          <ng-container *ngTemplateOutlet="footDesc"></ng-container>
+        </mat-card-content>
       }
-      <mat-card-actions>
-        <button mat-raised-button color="primary" (click)="toDetail(artifact)" [disabled]="!artifact.preview">Detail</button>
+      <mat-card-actions *ngIf="artifact.preview">
+        <button mat-raised-button color="primary" (click)="toDetail(artifact)">Detail</button>
       </mat-card-actions>
     </mat-card>
   }
 </section>
 
+
+<ng-template #footDesc>
+  <p>These ideas were learned or inspired by
+  <p>
+    <a mat-raised-button color="accent" href="https://www.youtube.com/watch?v=70MQ-FugwbI&list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM" target="_blank">{{ '@TheCodingTrain' }}</a>
+  </p>
+  <p>and</p>
+  <p>
+    <a mat-raised-button color="accent" href="https://www.youtube.com/@Frankslaboratory" target="_blank">{{ '@Frankslaboratory' }}</a>
+  </p>
+  <p>Thanks to them and keep enjoying <span class="matter-text">creative coding</span>.</p>
+</ng-template>
+
diff --git a/src/gallery/gallery-home/gallery-home.component.scss b/src/gallery/gallery-home/gallery-home.component.scss
@@ -26,3 +26,23 @@
   }
 }
 
+.matter-text {
+  text-transform: uppercase;
+  display: inline-block;
+  font-weight: bold;
+
+  color: transparent;
+  background: linear-gradient(8deg, #da49e7 15%, #9154de, #2ac6d5, #1fea8e 85%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+
+  animation: bg-effect 2s alternate infinite;
+  @keyframes bg-effect {
+    from {
+      background-position: left;
+    }
+    to {
+      background-position: right;
+    }
+  }
+}