looking better

chdboy.html

@@ -12,6 +12,7 @@
 <div class="crt-toggle">
   <label>
     <input type="checkbox" id="crtSwitch">
+    <span></span>
     <span>CRT Mode</span>
   </label>
 </div>

index.html

@@ -13,13 +13,14 @@
 <div class="crt-toggle">
   <label>
     <input type="checkbox" id="crtSwitch">
+    <span></span>
     <span>CRT Mode</span>
   </label>
 </div>
 
 <header class="navbar">
   <div class="nav-left">
-    <img src="assets/logo_neon_robot.png" class="logo-img">
+    <img src="assets/logo.png" class="logo-img">
     <div class="logo-text">
       <span class="logo-main">izzy2lost</span>
       <span class="logo-sub">apps · ports · emulators</span>
@@ -30,8 +31,8 @@
 <main>
 <section class="hero">
   <div class="hero-inner">
-    <h1>Neon-powered apps & emulators</h1>
+    <h1>Izzy's Apps</h1>
-    <p>Retro vibes + modern Android tech.</p>
+    <p>Retro vibes meet modern tech.</p>
   </div>
 </section>
 

perfect_dark.html

@@ -12,6 +12,7 @@
 <div class="crt-toggle">
   <label>
     <input type="checkbox" id="crtSwitch">
+    <span></span>
     <span>CRT Mode</span>
   </label>
 </div>

psx2.html

@@ -12,6 +12,7 @@
 <div class="crt-toggle">
   <label>
     <input type="checkbox" id="crtSwitch">
+    <span></span>
     <span>CRT Mode</span>
   </label>
 </div>

script.js

@@ -1,4 +1,18 @@
-document.getElementById("crtSwitch")?.addEventListener("change",e=>{
+// Load saved CRT preference
- document.body.classList.toggle("crt-on",e.target.checked);
+const crtSwitch = document.getElementById("crtSwitch");
- document.body.classList.toggle("crt-off",!e.target.checked);
+const savedCrtState = localStorage.getItem("crtMode") === "true";
-});
+
+if (crtSwitch) {
+  // Apply saved state on page load
+  crtSwitch.checked = savedCrtState;
+  document.body.classList.toggle("crt-on", savedCrtState);
+  document.body.classList.toggle("crt-off", !savedCrtState);
+
+  // Save state when changed
+  crtSwitch.addEventListener("change", e => {
+    const isOn = e.target.checked;
+    document.body.classList.toggle("crt-on", isOn);
+    document.body.classList.toggle("crt-off", !isOn);
+    localStorage.setItem("crtMode", isOn);
+  });
+}

spaghetti.html

@@ -12,6 +12,7 @@
 <div class="crt-toggle">
   <label>
     <input type="checkbox" id="crtSwitch">
+    <span></span>
     <span>CRT Mode</span>
   </label>
 </div>

starfield.js

@@ -1,18 +1,41 @@
-const canvas=document.getElementById("starfield");
+const canvas = document.getElementById("starfield");
-const ctx=canvas.getContext("2d");
+const ctx = canvas.getContext("2d");
-let stars=[];
+let stars = [];
-function resize(){canvas.width=innerWidth;canvas.height=innerHeight;}
+
-resize();
+function initStars() {
-addEventListener("resize",resize);
+  stars = [];
-for(let i=0;i<300;i++){stars.push({x:Math.random()*canvas.width,y:Math.random()*canvas.height,z:Math.random()*3+1});}
+  for (let i = 0; i < 300; i++) {
-function loop(){
+    stars.push({
- ctx.fillStyle="#050810";ctx.fillRect(0,0,canvas.width,canvas.height);
+      x: Math.random() * canvas.width,
- stars.forEach(s=>{
+      y: Math.random() * canvas.height,
-   s.y+=s.z*0.6;
+      z: Math.random() * 3 + 1
-   if(s.y>canvas.height)s.y=0;
+    });
-   ctx.fillStyle="rgba(0,227,255,"+(0.2*s.z)+")";
+  }
-   ctx.fillRect(s.x,s.y,s.z,s.z);
- });
- requestAnimationFrame(loop);
 }
+
+function resize() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  initStars(); // Regenerate stars on resize
+}
+
+resize();
+window.addEventListener("resize", resize);
+window.addEventListener("orientationchange", resize);
+
+function loop() {
+  ctx.fillStyle = "#050810";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  stars.forEach(s => {
+    s.y += s.z * 0.6;
+    if (s.y > canvas.height) {
+      s.y = 0;
+      s.x = Math.random() * canvas.width; // Randomize x when wrapping
+    }
+    ctx.fillStyle = "rgba(0,227,255," + (0.2 * s.z) + ")";
+    ctx.fillRect(s.x, s.y, s.z, s.z);
+  });
+  requestAnimationFrame(loop);
+}
+
 loop();

starship.html

@@ -12,6 +12,7 @@
 <div class="crt-toggle">
   <label>
     <input type="checkbox" id="crtSwitch">
+    <span></span>
     <span>CRT Mode</span>
   </label>
 </div>

style.css

@@ -8,6 +8,15 @@
   }
 }
 
+@keyframes flicker {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.95;
+  }
+}
+
 /* Base Styles - Mobile First */
 * {
   box-sizing: border-box;
@@ -34,7 +43,7 @@ body {
   right: 12px;
   z-index: 20;
   color: white;
-  font-size: 14px;
+  font-size: 13px;
   background: rgba(0, 0, 0, 0.5);
   padding: 8px 12px;
   border-radius: 8px;
@@ -44,31 +53,92 @@ body {
 .crt-toggle label {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   cursor: pointer;
+  user-select: none;
 }
 
+/* Hide default checkbox */
 .crt-toggle input {
+  position: absolute;
+  opacity: 0;
   cursor: pointer;
+  width: 0;
+  height: 0;
+}
+
+/* Custom CRT TV checkbox using image */
+.crt-toggle label span:first-of-type {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  display: block;
+  flex-shrink: 0;
+  background-image: url('assets/crt.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: all 0.3s ease;
+}
+
+/* Blue screen glow behind when checked */
+.crt-toggle label span:first-of-type:before {
+  content: "";
+  position: absolute;
+  inset: 8px;
+  background: radial-gradient(circle at center, rgba(0, 227, 255, 0) 0%, rgba(0, 227, 255, 0) 100%);
+  z-index: -1;
+  transition: all 0.3s ease;
+}
+
+.crt-toggle input:checked + span:before {
+  background: radial-gradient(circle at center, rgba(0, 227, 255, 0.9) 0%, rgba(0, 227, 255, 0.6) 40%, rgba(0, 227, 255, 0) 70%);
+  box-shadow: 0 0 10px rgba(0, 227, 255, 0.5);
 }
 
 .crt-on {
   position: relative;
+  animation: flicker 0.15s infinite;
 }
 
+/* Scanlines */
 .crt-on:after {
   content: "";
   pointer-events: none;
   position: fixed;
   inset: 0;
   background: repeating-linear-gradient(
-    transparent,
+    0deg,
-    transparent 2px,
+    rgba(0, 0, 0, 0.15),
-    rgba(255, 255, 255, 0.04) 3px
+    rgba(0, 0, 0, 0.15) 1px,
+    transparent 1px,
+    transparent 2px
   );
   z-index: 10;
 }
 
+/* Screen curvature and vignette */
+.crt-on:before {
+  content: "";
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0) 50%,
+    rgba(0, 0, 0, 0.3) 100%
+  );
+  z-index: 10;
+}
+
+/* RGB shift effect on text */
+.crt-on * {
+  text-shadow: 
+    0.5px 0 0 rgba(255, 0, 0, 0.3),
+    -0.5px 0 0 rgba(0, 255, 255, 0.3);
+}
+
 /* Navbar */
 .navbar {
   padding: 16px;
@@ -87,6 +157,7 @@ body {
   width: 40px;
   height: 40px;
   object-fit: contain;
+  border-radius: 28%;
 }
 
 .logo-text {
@@ -123,7 +194,12 @@ body {
 .hero-inner p {
   font-size: 16px;
   margin: 0;
-  color: rgba(255, 255, 255, 0.8);
+  color: #ff2a9d;
+  text-shadow: 
+    0 0 10px rgba(255, 42, 157, 0.8),
+    0 0 20px rgba(255, 42, 157, 0.6),
+    0 0 30px rgba(255, 42, 157, 0.4);
+  font-weight: 500;
 }
 
 /* Projects Section */
@@ -173,6 +249,7 @@ body {
   width: 64px;
   height: 64px;
   object-fit: contain;
+  border-radius: 28%;
   filter: drop-shadow(0 0 10px rgba(0, 227, 255, 0.4));
   animation: neonPulse 3s ease-in-out infinite;
 }
@@ -232,6 +309,7 @@ body {
   display: block;
   margin: 0 auto 24px;
   object-fit: contain;
+  border-radius: 28%;
   filter: drop-shadow(0 0 20px rgba(0, 227, 255, 0.4));
   animation: neonPulse 3s ease-in-out infinite;
 }

torch.html

@@ -12,6 +12,7 @@
 <div class="crt-toggle">
   <label>
     <input type="checkbox" id="crtSwitch">
+    <span></span>
     <span>CRT Mode</span>
   </label>
 </div>