add post-boot frame structure

scripts/bakeimgs

@@ -4,8 +4,9 @@
 
 # ===== Configuration ===== #
 IMGS_DIR="imgs"
-BAKE_DIR="bake"
+BAKE_DIR="www/baked"
 # ========================= #
 
 mkdir -p "$BAKE_DIR"
 magick -background '#000000' -size 100x100 "$IMGS_DIR/mirror-icon.svg" "$BAKE_DIR/mirror-icon.png"
+magick "$IMGS_DIR/c00L_y2k_g1rL.png" -resize 50% "$BAKE_DIR/avatar.png"

www/audio/README.md

@@ -0,0 +1,3 @@
+# Credit
+1. [me and my UNREGISTERED FIREARM](https://www.youtube.com/watch?v=5NWH-UmwWeM) by **@oranjate**
+2. [UNDO UNDO](https://www.youtube.com/watch?v=lCaun_EiJZQ) by **@Rolobi**

www/css/ppty.css

@@ -3,15 +3,6 @@
 /* =========================================================== */
 
 .ppty {
-  background-color: var(--theme-bg);
-  border: 0.5ch solid var(--theme-tty-border);
-  
-  margin: auto auto;
-  padding: 20px;
-
-  position: relative;
-  height: auto;
-  
   /* display: block; */
   /* flex-direction: column; */
   /* justify-content: start; */
@@ -19,6 +10,9 @@
   /* align-items: start; */
 
   overflow: hidden;
+
+  font-family: monospace;
+  font-weight: bold;
 }
 
 .ppty-block {

www/css/style.css

@@ -2,6 +2,11 @@ body {
   background-color: var(--theme-bg);
 }
 
+main {
+  visibility: hidden;
+  opacity: 0;
+}
+
 #bg-canvas {
   display:block;
   position: fixed;
@@ -12,7 +17,7 @@ body {
   z-index: -1;
 }
 
-.centered {
+.centered-container {
   position: absolute;
   inset: 0 0 0 0;
   margin: auto;
@@ -20,8 +25,22 @@ body {
   display: flex;
 }
 
-.heading {
-  font-family: monospace;
-  font-size: 2em;
-  font-weight: bold;
+.centered {
+  margin: auto auto;
+  position: relative;
+}
+
+/* like iframes but . . . wait what are iframes again? */
+.cryframe {
+  border: 0.5ch solid var(--theme-tty-border);
+  padding: 20px;
+
+  width: auto;
+  height: auto;
+  
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+
+  font-family: monospace;
+  font-size: 1.5em
 }

www/index.html

@@ -20,8 +20,8 @@
     <canvas id="bg-canvas"></canvas>
 
     <!-- Psuedo-Pseudo-Terminal -->
-    <div class="centered heading">
-      <div class="ppty" id="boot-ppty">
+    <div class="centered-container">
+      <div class="ppty centered cryframe" id="boot-ppty">
     
         <div class="ppty-block">
           <div class="ppty-prompt">
@@ -63,5 +63,20 @@
       </div>
     </div>
 
+    <main>
+      <audio autoplay>
+        <!-- <source src="audio/UNREGISTERED_FIREARM.mpeg" type="audio/mpeg"> -->
+        <source src="audio/UNDO_UNDO.mpeg" type="audio/mpeg">
+        Your browser does not support the audio element.
+      </audio>
+    
+      <div class="centered-container">
+        <div class="centered cryframe" style="display: flex; flex-direction: row; gap: 20px;">
+          <img src="baked/avatar.png" loading="eager" height="150">
+          <p>hi!! i'm cry (they/them)</p>
+        </div>
+      </div>
+    </main>
+
   </body>
 </html>

www/js/main.js

@@ -24,7 +24,21 @@ function endBoot(root) {
     }
   );
 
-  fade.onfinish = () => root.remove();
+  fade.onfinish = () => {
+    root.remove();
+    document
+      .querySelector("main")
+      .animate(
+        [
+          { visibility: "visible" },
+          { visibility: "visible", opacity: 1 }
+        ],
+        {
+          duration: 400,
+          fill: "forwards",
+        }
+      );
+  }
 }
 
 function main() {