update

Author: SharkooC

index.html

@@ -76,7 +76,7 @@
         <div class="note-inner">
           <div class="note-title">Note</div>
           <div class="note-body">
-            If you're free at 15:00, lets have lunch together. Meet me at the university. 🇱🇧
+            If you're free at 15:00, lets have lunch together. Meet me at the university. 🇱🇧 🍽️
           </div>
           <div class="note-sign">- Alfred</div>
         </div>

script.js

@@ -16,6 +16,7 @@ const modalOk = $("#modalOk");
 const valentine = $("#valentine");
 const heartsRoot = $("#hearts");
 let llCleanup = null;
+let heartDone = false;
 
 function sleep(ms) {
   return new Promise((r) => setTimeout(r, ms));
@@ -196,13 +197,64 @@ function drawHeartAnimated(canvas, onDone) {
       }
       ctx.stroke();
       ctx.restore();
+      heartDone = true;
       onDone?.();
     }
   }
 
   requestAnimationFrame(frame);
 }
 
+function drawHeartFull(canvas) {
+  if (!canvas) return;
+  const ctx = setupCanvasHiDPI(canvas);
+  const w = canvas.clientWidth || 920;
+  const h = canvas.clientHeight || 520;
+
+  const pts = computeImplicitHeartPoints(1200);
+  const padding = 34;
+  let minX = Infinity,
+    maxX = -Infinity,
+    minY = Infinity,
+    maxY = -Infinity;
+  for (const p of pts) {
+    if (p.x < minX) minX = p.x;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const spanX = Math.max(1e-6, maxX - minX);
+  const spanY = Math.max(1e-6, maxY - minY);
+  const scale = Math.min((w - padding * 2) / spanX, (h - padding * 2) / spanY);
+  const ox = w / 2 - ((minX + maxX) / 2) * scale;
+  const oy = h / 2 + ((minY + maxY) / 2) * scale;
+
+  const toCanvas = (p) => ({ cx: ox + p.x * scale, cy: oy - p.y * scale });
+
+  const gradient = ctx.createLinearGradient(0, 0, w, h);
+  gradient.addColorStop(0, "#ff4d8d");
+  gradient.addColorStop(0.6, "#7c5cff");
+  gradient.addColorStop(1, "#ff7ab0");
+
+  drawAxes(ctx, w, h);
+  ctx.save();
+  ctx.lineWidth = 4;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = gradient;
+  ctx.shadowColor = "rgba(124,92,255,0.30)";
+  ctx.shadowBlur = 10;
+  ctx.beginPath();
+  const pStart = toCanvas(pts[0]);
+  ctx.moveTo(pStart.cx, pStart.cy);
+  for (let i = 1; i < pts.length; i++) {
+    const pi = toCanvas(pts[i]);
+    ctx.lineTo(pi.cx, pi.cy);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+
 function initLLRunAway() {
   // Make LL move across the website (viewport), not just inside the paper.
   // We'll keep the original LL button as a placeholder in the layout,
@@ -413,3 +465,13 @@ window.addEventListener("load", () => {
   runSequence();
 });
 
+// Keep the graph crisp when the viewport changes (mobile rotation, etc.).
+let resizeRaf = 0;
+window.addEventListener("resize", () => {
+  if (!heartDone) return;
+  if (document.body.classList.contains("is-valentine")) return;
+  if (!graph?.isConnected) return;
+  cancelAnimationFrame(resizeRaf);
+  resizeRaf = requestAnimationFrame(() => drawHeartFull(graph));
+});
+

styles.css

@@ -279,6 +279,8 @@ canvas#graph {
   display: block;
   border-radius: 12px;
   background: linear-gradient(180deg, rgba(12, 16, 48, 0.04), rgba(12, 16, 48, 0.0));
+  aspect-ratio: 920 / 520;
+  max-height: 48vh;
 }
 
 .graph-caption {
@@ -474,6 +476,9 @@ canvas#graph {
   opacity: 0;
   transition: transform 700ms cubic-bezier(.2,.85,.2,1), opacity 700ms ease;
   pointer-events: auto;
+  max-height: 86vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 .valentine.is-on .note {
   transform: translateY(0) scale(1);
@@ -502,4 +507,30 @@ canvas#graph {
   text-align: right;
 }
 
+/* Mobile layout tweaks */
+@media (max-width: 520px) {
+  .stage { padding-top: 14px; }
+  .scene { height: 94vh; }
+
+  .envelope { top: 26px; }
+
+  .paper-face { padding: 18px 16px 16px; }
+  .paper-title { font-size: 16px; }
+  .fn-text { font-size: 12px; padding: 8px 10px; }
+  .graph-wrap { padding: 10px; }
+  .graph-caption { font-size: 11px; }
+
+  .next-btn { right: 14px; bottom: 14px; padding: 10px 12px; }
+
+  .paper-back { padding: 26px 18px 18px; }
+  .back-title { font-size: 22px; }
+  .big-letters { letter-spacing: 0.08em; }
+
+  .choices { flex-direction: column; width: 100%; }
+  .choice { width: 100%; max-width: 320px; }
+
+  .note-inner { padding: 18px 16px 16px; }
+  .note-body { line-height: 1.22; }
+}
+