feat: ✨ new design 😎

Signed-off-by: misilelaboratory <[email protected]>
MisileLab · Sep 12, 2024 · 357f1fb · 357f1fb
1 parent 882e24c
commit 357f1fb
Show file tree

Hide file tree

Showing 35 changed files with 79 additions and 1,200 deletions.
diff --git a/dist/_astro/index.Bvy4v-8v.css b/dist/_astro/index.Bvy4v-8v.css
diff --git a/dist/fastapi3/assets/index-BuoIx4yl.js b/dist/fastapi3/assets/index-BuoIx4yl.js
diff --git a/dist/fastapi3/assets/index-D7AQZV70.css b/dist/fastapi3/assets/index-D7AQZV70.css
diff --git a/dist/fastapi3/assets/jetbrains-mono-cyrillic-wght-normal-BptiBwAt.woff2 b/dist/fastapi3/assets/jetbrains-mono-cyrillic-wght-normal-BptiBwAt.woff2
diff --git a/dist/fastapi3/assets/jetbrains-mono-greek-wght-normal-BW1JPxja.woff2 b/dist/fastapi3/assets/jetbrains-mono-greek-wght-normal-BW1JPxja.woff2
diff --git a/dist/fastapi3/assets/jetbrains-mono-latin-ext-wght-normal-Com2F4yK.woff2 b/dist/fastapi3/assets/jetbrains-mono-latin-ext-wght-normal-Com2F4yK.woff2
diff --git a/dist/fastapi3/assets/jetbrains-mono-latin-wght-normal-Ajscav9D.woff2 b/dist/fastapi3/assets/jetbrains-mono-latin-wght-normal-Ajscav9D.woff2
diff --git a/dist/fastapi3/assets/jetbrains-mono-vietnamese-wght-normal-By-yputv.woff2 b/dist/fastapi3/assets/jetbrains-mono-vietnamese-wght-normal-By-yputv.woff2
diff --git a/dist/fastapi3/assets/manrope-cyrillic-wght-normal-C1zWlyYG.woff2 b/dist/fastapi3/assets/manrope-cyrillic-wght-normal-C1zWlyYG.woff2
diff --git a/dist/fastapi3/assets/manrope-greek-wght-normal--KUh6X2k.woff2 b/dist/fastapi3/assets/manrope-greek-wght-normal--KUh6X2k.woff2
diff --git a/dist/fastapi3/assets/manrope-latin-ext-wght-normal-D62tbE3i.woff2 b/dist/fastapi3/assets/manrope-latin-ext-wght-normal-D62tbE3i.woff2
diff --git a/dist/fastapi3/assets/manrope-latin-wght-normal-DWlqe-xm.woff2 b/dist/fastapi3/assets/manrope-latin-wght-normal-DWlqe-xm.woff2
diff --git a/dist/fastapi3/assets/manrope-vietnamese-wght-normal-CvPE_C53.woff2 b/dist/fastapi3/assets/manrope-vietnamese-wght-normal-CvPE_C53.woff2
diff --git a/dist/fastapi3/index.html b/dist/fastapi3/index.html
diff --git a/dist/favicon.svg b/dist/favicon.svg
diff --git a/dist/fonts/JetBrainsMono-Bold.woff2 b/dist/fonts/JetBrainsMono-Bold.woff2
diff --git a/dist/fonts/JetBrainsMono-BoldItalic.woff2 b/dist/fonts/JetBrainsMono-BoldItalic.woff2
diff --git a/dist/fonts/JetBrainsMono-ExtraBold.woff2 b/dist/fonts/JetBrainsMono-ExtraBold.woff2
diff --git a/dist/fonts/JetBrainsMono-ExtraBoldItalic.woff2 b/dist/fonts/JetBrainsMono-ExtraBoldItalic.woff2
diff --git a/dist/fonts/JetBrainsMono-ExtraLight.woff2 b/dist/fonts/JetBrainsMono-ExtraLight.woff2
diff --git a/dist/fonts/JetBrainsMono-ExtraLightItalic.woff2 b/dist/fonts/JetBrainsMono-ExtraLightItalic.woff2
diff --git a/dist/fonts/JetBrainsMono-Italic.woff2 b/dist/fonts/JetBrainsMono-Italic.woff2
diff --git a/dist/fonts/JetBrainsMono-Light.woff2 b/dist/fonts/JetBrainsMono-Light.woff2
diff --git a/dist/fonts/JetBrainsMono-LightItalic.woff2 b/dist/fonts/JetBrainsMono-LightItalic.woff2
diff --git a/dist/fonts/JetBrainsMono-Medium.woff2 b/dist/fonts/JetBrainsMono-Medium.woff2
diff --git a/dist/fonts/JetBrainsMono-MediumItalic.woff2 b/dist/fonts/JetBrainsMono-MediumItalic.woff2
diff --git a/dist/fonts/JetBrainsMono-Regular.woff2 b/dist/fonts/JetBrainsMono-Regular.woff2
diff --git a/dist/fonts/JetBrainsMono-SemiBold.woff2 b/dist/fonts/JetBrainsMono-SemiBold.woff2
diff --git a/dist/fonts/JetBrainsMono-SemiBoldItalic.woff2 b/dist/fonts/JetBrainsMono-SemiBoldItalic.woff2
diff --git a/dist/fonts/JetBrainsMono-Thin.woff2 b/dist/fonts/JetBrainsMono-Thin.woff2
diff --git a/dist/fonts/JetBrainsMono-ThinItalic.woff2 b/dist/fonts/JetBrainsMono-ThinItalic.woff2
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.15.4"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/_astro/index.Bvy4v-8v.css"><script type="module">function x(n,i){if("captureStackTrace"in Error)Error.captureStackTrace(n,i);else{const d=new Error().stack;n.stack=d||""}}class E extends Error{constructor(){super("nullValue"),x(this,E)}}class g extends Error{constructor(){super("NaNValue"),x(this,g)}}function h(n){if(n==null||n==null)throw new E;return n}function L(n){const i=Number.parseInt(n);if(isNaN(i))throw g;return i}function v(n,i,d){if(i<0||i>=n.length)throw new Error("Index out of bounds");const c=n.slice(0,i),r=n.slice(i+1);return c+d+r}function p(n,i,d=1){const c=[];if(d===0)throw new Error("Step cannot be zero.");if(d>0)for(let r=n;r<i;r+=d)c.push(r);else for(let r=n;r>i;r+=d)c.push(r);return c}function u(n,i,d,c,r){const o=n.innerText.length,e=p(0,o);for(let t=0;t<o;t++)r[i]=!0,setTimeout(()=>{const l=Math.floor(Math.random()*e.length),s=e[l];e.splice(l,1),n.innerText=v(n.innerText,s,"_"),t==o-1&&(r[i]=!1)},c+d*t)}function f(n,i,d,c,r,a){const o=n.innerText.length-1;for(let e=0;e<n.innerText.length;e++)a[i]=!0,setTimeout(()=>{console.debug("start"),n.innerText=v(n.innerText,d?o-e:e,"_"),e==o&&(a[i]=!1)},r+c*e)}function m(n,i,d,c,r,a){const e=n.innerText.length,t=p(0,e);for(let l=0;l<e;l++)a[i]=!0,setTimeout(()=>{console.log(`length: ${t}`);const s=Math.floor(Math.random()*t.length),w=t[s];t.splice(s,1),n.innerText=v(n.innerText,w,d[w]),l==e-1&&(a[i]=!1)},r+c*l)}function T(n,i,d,c,r,a,o){const e=n.innerText.length-1;for(let t=0;t<n.innerText.length;t++)o[i]=!0,setTimeout(()=>{console.debug("end"),n.innerText=v(n.innerText,c?e-t:t,d[c?e-t:t]),t==e&&(console.log("a"),o[i]=!1)},a+r*t)}class b extends HTMLElement{connectedCallback(){const i=L(h(this.dataset.initialtime))*1e3,d=h(this.dataset.hover),c=L(h(this.dataset.completetime))*1e3,r=h(this.dataset.animationtype);console.debug(this.dataset,this.childNodes);const a=[],o=[];for(let e=0;e<this.childNodes.length;e++){const t=this.childNodes[e],l=t.innerText;console.debug(l);const s=c/t.innerText.length;d=="reanimate"?r=="normal"||r=="rewind"?(t.addEventListener("mouseover",()=>{a[e]||o[e]||(f(t,e,r=="rewind",s/2,0,a),T(t,e,l,r=="rewind",s/2,s*(t.innerText.length/2),o))}),document.addEventListener("DOMContentLoaded",()=>{f(t,e,r=="rewind",s/2,i,a),T(t,e,l,r=="rewind",s/2,i+s*(t.innerText.length/2),o)})):(t.addEventListener("mouseover",()=>{a[e]||o[e]||(u(t,e,s/2,0,a),m(t,e,l,s/2,s*(t.innerText.length/2),o))}),document.addEventListener("DOMContentLoaded",()=>{u(t,e,s/2,i,a),m(t,e,l,s/2,i+s*(t.innerText.length/2),o)})):d=="hide"?r=="normal"||r=="rewind"?(t.addEventListener("mouseover",()=>{a[e]||o[e]||f(t,e,r=="rewind",s,0,o)}),t.addEventListener("mouseout",()=>{a[e]||o[e]||T(t,e,l,r=="rewind",s,0,o)})):(t.addEventListener("mouseover",()=>{a[e]||o[e]||u(t,e,s,0,o)}),t.addEventListener("mouseout",()=>{a[e]||o[e]||m(t,e,l,s,0,o)})):d=="show"&&(r=="normal"||r=="rewind"?(t.addEventListener("mouseover",()=>{a[e]||o[e]||T(t,e,l,r=="rewind",s,0,a)}),document.addEventListener("DOMContentLoaded",()=>{f(t,e,r=="rewind",s,i,o)}),t.addEventListener("mouseout",()=>{a[e]||o[e]||f(t,e,r=="rewind",s,0,o)})):(t.addEventListener("mouseover",()=>{a[e]||o[e]||m(t,e,l,s,0,a)}),document.addEventListener("DOMContentLoaded",()=>{u(t,e,s,i,o)}),t.addEventListener("mouseout",()=>{a[e]||o[e]||u(t,e,s,0,o)})))}}}customElements.define("astro-animation",b);
+</script></head> <body>   <title>Animatified Minimalism</title>  <div class="bg-gray w-full h-full flex flex-row"> <div class="w-full h-screen justify-center items-center flex flex-col bg-white"> <div class="flex flex-col"> <astro-animation data-initialTime="2" data-hover="reanimate" data-completeTime="1" data-animationType="normal"><p class="text-black text-6xl font-bold">Animatified Minimalism</p></astro-animation>  <div class="flex flex-row w-fit h-fit text-4xl font-normal text-gray"> <astro-animation data-initialTime="2" data-hover="reanimate" data-completeTime="1" data-animationType="random"><span>Beyond&nbsp;</span></astro-animation>  <astro-animation data-initialTime="0" data-hover="show" data-completeTime="1" data-animationType="rewind"><span class="text-blue">Minimalism</span></astro-animation>  </div> <astro-animation data-initialTime="2" data-hover="reanimate" data-completeTime="1" data-animationType="normal"><p class="text-red text-3xl font-thin">The next-generation of Minimalism</p></astro-animation>  </div> </div> </div>  </body></html>
diff --git a/templates/astrojs/src/components/enum.ts b/templates/astrojs/src/components/enum.ts
@@ -0,0 +1,12 @@
+export enum HoverType {
+  none = "none",
+  hide = "hide",
+  show = "show",
+  reanimate = "reanimate"
+}
+
+export enum AnimationType {
+  rewind = "rewind",
+  normal = "normal",
+  random = "random"
+}
diff --git a/templates/astrojs/src/components/text.astro b/templates/astrojs/src/components/text.astro
@@ -13,11 +13,11 @@ enum AnimationType {
 }
 
 export interface Props {
-  initialTime: number,
-  hover: HoverType,
-  completeTime: number,
-  animationType: AnimationType,
-  class: string
+  initialTime?: number,
+  hover?: HoverType,
+  completeTime?: number,
+  animationType?: AnimationType,
+  class?: string
 }
 const { initialTime = 2, hover = HoverType.reanimate, completeTime = 1, animationType = AnimationType.normal } = Astro.props;
 ---
@@ -95,14 +95,13 @@ const { initialTime = 2, hover = HoverType.reanimate, completeTime = 1, animatio
     init: number,
     hided: boolean[]
   ) {
-    const start = rewind?a.innerText.length:0;
-    const end = rewind?0:a.innerText.length;
-    for (let i=start;i<end;i++) {
+    const l = a.innerText.length-1;
+    for (let i=0;i<a.innerText.length;i++) {
       hided[index] = true;
       setTimeout(()=>{
         console.debug('start');
-        a.innerText=replaceCharacterAtIndex(a.innerText, i, '_')
-        if (i == end-1) {hided[index] = false;}
+        a.innerText=replaceCharacterAtIndex(a.innerText, rewind?l-i:i, '_')
+        if (i == l) {hided[index] = false;}
       }, init+complete*i);
     }
   }
@@ -140,14 +139,13 @@ const { initialTime = 2, hover = HoverType.reanimate, completeTime = 1, animatio
     init: number,
     showed: boolean[],
   ) {
-    const start = rewind?a.innerText.length:0;
-    const end = rewind?0:a.innerText.length;
-    for (let i=start;i<end;i++) {
+    const l = a.innerText.length-1;
+    for (let i=0;i<a.innerText.length;i++) {
       showed[index] = true;
       setTimeout(()=>{
         console.debug('end');
-        a.innerText=replaceCharacterAtIndex(a.innerText, i, original[i]);
-        if (i == end-1) {console.log('a');showed[index] = false;}
+        a.innerText=replaceCharacterAtIndex(a.innerText, rewind?l-i:i, original[rewind?l-i:i]);
+        if (i == l) {console.log('a');showed[index] = false;}
       }, init+complete*i);
     }
   }
@@ -190,6 +188,52 @@ const { initialTime = 2, hover = HoverType.reanimate, completeTime = 1, animatio
               randomShow(realv, i, org, aps/2, initialTime+aps*(realv.innerText.length/2), hided);
             });
           }
+        } else if (hover == "hide") {
+          if (animationType == "normal" || animationType == 'rewind') {
+            realv.addEventListener('mouseover', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              normalHide(realv, i, animationType == 'rewind', aps, 0, hided);
+            })
+            realv.addEventListener('mouseout', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              normalShow(realv, i, org, animationType == 'rewind', aps, 0, hided);
+            })
+          } else {
+            realv.addEventListener('mouseover', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              randomHide(realv, i, aps, 0, hided);
+            })
+            realv.addEventListener('mouseout', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              randomShow(realv, i, org, aps, 0, hided);
+            })
+          }
+        } else if (hover == "show") {
+          if (animationType == "normal" || animationType == 'rewind') {
+            realv.addEventListener('mouseover', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              normalShow(realv, i, org, animationType == 'rewind', aps, 0, showed);
+            })
+            document.addEventListener('DOMContentLoaded', ()=>{
+              normalHide(realv, i, animationType == 'rewind', aps, initialTime, hided);
+            });
+            realv.addEventListener('mouseout', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              normalHide(realv, i, animationType == 'rewind', aps, 0, hided);
+            })
+          } else {
+            realv.addEventListener('mouseover', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              randomShow(realv, i, org, aps, 0, showed);
+            })
+            document.addEventListener('DOMContentLoaded', ()=>{
+              randomHide(realv, i, aps, initialTime, hided);
+            });
+            realv.addEventListener('mouseout', ()=>{
+              if (showed[i]||hided[i]) {return;}
+              randomHide(realv, i, aps, 0, hided);
+            })
+          }
         }
       }
     }

diff --git a/templates/astrojs/src/pages/index.astro b/templates/astrojs/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Base from "../components/base.astro"
 import Text from "../components/text.astro"
+import { AnimationType, HoverType } from "../components/enum";
 ---
 
 <Base>
@@ -12,10 +13,10 @@ import Text from "../components/text.astro"
       <div class="flex flex-col">
         <Text><p class="text-black text-6xl font-bold">Animatified Minimalism</p></Text>
         <div class="flex flex-row w-fit h-fit text-4xl font-normal text-gray">
-          <Text animationType="random"><span>Beyond&nbsp;</span></Text>
-          <Text><span class="text-blue">Minimalism</span></Text>
+          <Text animationType={AnimationType.random}><span>Beyond&nbsp;</span></Text>
+          <Text animationType={AnimationType.rewind} initialTime={0} hover={HoverType.show}><span class="text-blue">Minimalism</span></Text>
         </div>
-        <Text><p class="text-red text-3xl font-thin">This is red btw</p></Text>
+        <Text><p class="text-red text-3xl font-thin">The next-generation of Minimalism</p></Text>
       </div>
     </div>
 	</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.15.4"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/_astro/index.Bvy4v-8v.css"><script type="module">function x(n,i){if("captureStackTrace"in Error)Error.captureStackTrace(n,i);else{const d=new Error().stack;n.stack=d\|\|""}}class E extends Error{constructor(){super("nullValue"),x(this,E)}}class g extends Error{constructor(){super("NaNValue"),x(this,g)}}function h(n){if(n==null\|\|n==null)throw new E;return n}function L(n){const i=Number.parseInt(n);if(isNaN(i))throw g;return i}function v(n,i,d){if(i<0\|\|i>=n.length)throw new Error("Index out of bounds");const c=n.slice(0,i),r=n.slice(i+1);return c+d+r}function p(n,i,d=1){const c=[];if(d===0)throw new Error("Step cannot be zero.");if(d>0)for(let r=n;r<i;r+=d)c.push(r);else for(let r=n;r>i;r+=d)c.push(r);return c}function u(n,i,d,c,r){const o=n.innerText.length,e=p(0,o);for(let t=0;t<o;t++)r[i]=!0,setTimeout(()=>{const l=Math.floor(Math.random()e.length),s=e[l];e.splice(l,1),n.innerText=v(n.innerText,s,"_"),t==o-1&&(r[i]=!1)},c+dt)}function f(n,i,d,c,r,a){const o=n.innerText.length-1;for(let e=0;e<n.innerText.length;e++)a[i]=!0,setTimeout(()=>{console.debug("start"),n.innerText=v(n.innerText,d?o-e:e,"_"),e==o&&(a[i]=!1)},r+ce)}function m(n,i,d,c,r,a){const e=n.innerText.length,t=p(0,e);for(let l=0;l<e;l++)a[i]=!0,setTimeout(()=>{console.log(`length: ${t}`);const s=Math.floor(Math.random()t.length),w=t[s];t.splice(s,1),n.innerText=v(n.innerText,w,d[w]),l==e-1&&(a[i]=!1)},r+cl)}function T(n,i,d,c,r,a,o){const e=n.innerText.length-1;for(let t=0;t<n.innerText.length;t++)o[i]=!0,setTimeout(()=>{console.debug("end"),n.innerText=v(n.innerText,c?e-t:t,d[c?e-t:t]),t==e&&(console.log("a"),o[i]=!1)},a+rt)}class b extends HTMLElement{connectedCallback(){const i=L(h(this.dataset.initialtime))1e3,d=h(this.dataset.hover),c=L(h(this.dataset.completetime))1e3,r=h(this.dataset.animationtype);console.debug(this.dataset,this.childNodes);const a=[],o=[];for(let e=0;e<this.childNodes.length;e++){const t=this.childNodes[e],l=t.innerText;console.debug(l);const s=c/t.innerText.length;d=="reanimate"?r=="normal"\|\|r=="rewind"?(t.addEventListener("mouseover",()=>{a[e]\|\|o[e]\|\|(f(t,e,r=="rewind",s/2,0,a),T(t,e,l,r=="rewind",s/2,s(t.innerText.length/2),o))}),document.addEventListener("DOMContentLoaded",()=>{f(t,e,r=="rewind",s/2,i,a),T(t,e,l,r=="rewind",s/2,i+s(t.innerText.length/2),o)})):(t.addEventListener("mouseover",()=>{a[e]\|\|o[e]\|\|(u(t,e,s/2,0,a),m(t,e,l,s/2,s(t.innerText.length/2),o))}),document.addEventListener("DOMContentLoaded",()=>{u(t,e,s/2,i,a),m(t,e,l,s/2,i+s(t.innerText.length/2),o)})):d=="hide"?r=="normal"\|\|r=="rewind"?(t.addEventListener("mouseover",()=>{a[e]\|\|o[e]\|\|f(t,e,r=="rewind",s,0,o)}),t.addEventListener("mouseout",()=>{a[e]\|\|o[e]\|\|T(t,e,l,r=="rewind",s,0,o)})):(t.addEventListener("mouseover",()=>{a[e]\|\|o[e]\|\|u(t,e,s,0,o)}),t.addEventListener("mouseout",()=>{a[e]\|\|o[e]\|\|m(t,e,l,s,0,o)})):d=="show"&&(r=="normal"\|\|r=="rewind"?(t.addEventListener("mouseover",()=>{a[e]\|\|o[e]\|\|T(t,e,l,r=="rewind",s,0,a)}),document.addEventListener("DOMContentLoaded",()=>{f(t,e,r=="rewind",s,i,o)}),t.addEventListener("mouseout",()=>{a[e]\|\|o[e]\|\|f(t,e,r=="rewind",s,0,o)})):(t.addEventListener("mouseover",()=>{a[e]\|\|o[e]\|\|m(t,e,l,s,0,a)}),document.addEventListener("DOMContentLoaded",()=>{u(t,e,s,i,o)}),t.addEventListener("mouseout",()=>{a[e]\|\|o[e]\|\|u(t,e,s,0,o)})))}}}customElements.define("astro-animation",b);
		</script></head> <body> <title>Animatified Minimalism</title> <div class="bg-gray w-full h-full flex flex-row"> <div class="w-full h-screen justify-center items-center flex flex-col bg-white"> <div class="flex flex-col"> <astro-animation data-initialTime="2" data-hover="reanimate" data-completeTime="1" data-animationType="normal"><p class="text-black text-6xl font-bold">Animatified Minimalism</p></astro-animation> <div class="flex flex-row w-fit h-fit text-4xl font-normal text-gray"> <astro-animation data-initialTime="2" data-hover="reanimate" data-completeTime="1" data-animationType="random"><span>Beyond </span></astro-animation> <astro-animation data-initialTime="0" data-hover="show" data-completeTime="1" data-animationType="rewind"><span class="text-blue">Minimalism</span></astro-animation> </div> <astro-animation data-initialTime="2" data-hover="reanimate" data-completeTime="1" data-animationType="normal"><p class="text-red text-3xl font-thin">The next-generation of Minimalism</p></astro-animation> </div> </div> </div> </body></html>