feat: replace pile divs with canvas, remove filmstrip elements, unified polaroid frame

public/index.html

@@ -6,7 +6,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="mobile-web-app-capable" content="yes">
-  <meta name="theme-color" content="#0f0f1a">
+  <meta name="theme-color" content="#1a1510">
   <title>Frambe</title>
   <link rel="icon" type="image/png" sizes="128x128" href="/img/icon.png">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
@@ -41,23 +41,14 @@
 
   <div id="slideshow-screen" class="screen" style="display:none">
     <div id="bg-blur" class="bg-blur"></div>
+    <canvas id="pile-canvas"></canvas>
     <div class="bg-vignette"></div>
 
-    <div id="photo-pile">
-      <div class="pile-frame" id="pile-0"><div class="pile-inner"></div></div>
-      <div class="pile-frame" id="pile-1"><div class="pile-inner"></div></div>
-      <div class="pile-frame" id="pile-2"><div class="pile-inner"></div></div>
-      <div class="pile-frame" id="pile-3"><div class="pile-inner"></div></div>
-      <div class="pile-frame" id="pile-4"><div class="pile-inner"></div></div>
-    </div>
-
-    <div id="main-frame" class="main-frame polaroid">
+    <div id="main-frame" class="main-frame">
       <div class="frame-border">
         <img id="main-photo" class="frame-media" alt="">
         <video id="main-video" class="frame-media" muted playsinline style="display:none"></video>
       </div>
-      <div class="filmstrip-top"></div>
-      <div class="filmstrip-bottom"></div>
     </div>
 
     <div id="overlay" class="overlay">