fixed some padding stuff, added faster nudges, and new themes

startpage.html

@@ -37,7 +37,7 @@
 
       body {
         height: 100vh;
-        overflow: hidden;
+        margin: 0;
       }
       
 
@@ -368,7 +368,7 @@
             <p>
               <u>precise adjustments:</u>
               click on a container or settings slider to focus it, then use the arrow keys 
-              to make minute changes.
+              to make minute changes (hold shift for a speed boost when moving containers).
             </p>
             <hr />
             <p>
@@ -417,7 +417,6 @@
               layer's "text options" 
             </p>
           </div>
-
         </div>
 
         <div id="containerPage" class="tabContent">
@@ -472,7 +471,7 @@
         <div id="ioPage" class="tabContent">
           <div style="display: flex; flex-direction: column; margin: 2rem 0; gap: 1rem;align-items:center;">
             <p class="menuHeader">import theme file</p>
-            <input id="import-input" type="file" accept".txt" style="width: 45%; align-self: center" />
+            <input id="import-input" type="file" accept=".txt" style="width: 45%; align-self: center" />
             
             <button style="width: 100%; height: 3rem;" onclick="importData()" >
               set new theme
@@ -552,7 +551,7 @@
           <h2 class="menuHeader">audio</h2>
             <div class="containerOptionListing">
 
-              <label for=audioLinkInput">paste a direct URL to an audio file:</label>
+              <label for="audioLinkInput">paste a direct URL to an audio file:</label>
 
               <div style="display: flex; flex-direction: column; align-items: end;">
                 <input id="audioLinkInput" style="width: 80%" placeholder="paste file URL" />
@@ -584,13 +583,11 @@
 
             <div class="containerOptionListing">
               <label for="edit-toggle-alpha">set "edit mode" toggle opacity (%): </label>
-              <input id="edit-toggle-alpha"} type="range" min="0" max="100" />
+              <input id="edit-toggle-alpha" type="range" min="0" max="100" />
-            </div>
+            </div>
-           
+        </div>
-
       </div>
     </div>
-  </body>
 
     <script>
       // cookie holder for coordinates + size of settings menu
@@ -1884,7 +1881,9 @@
           if (!settings.enableDivider) {
             document.getElementById(this.id + "-divider").hidden = true;
             // if there are links in this container, add room under the divider
-          if (Object.keys(this.sections).length > 0) {
+            if (Object.keys(this.sections).length > 0 &&
+              (settings.enableDate || settings.enableClock)
+            ) {
               document.getElementById(this.id + "-header").style.marginBottom =
                 "18px";
             }
@@ -1976,11 +1975,16 @@
               targetSection.insertAdjacentHTML(
                 "beforeend",
                 `
-                <div id="${this.id}-section-${s}-link-${l}" >
+                  <div id="${this.id}-section-${s}-link-${l}" 
+                    ${l < sectionData[s].links.length - 1 ?
+                    `style="margin-bottom: .5rem"` : 
+                     `style="margin-bottom: 5px"`} 
+                  >
 
                     <a 
                       class="${this.id}-link" 
                       href="${sectionData[s].links[l].url}"
+                      
                     >
                       ${sectionData[s].links[l].label}
                     </a>
@@ -1991,7 +1995,9 @@
           }
 
           // ensure smooth ux when rerendering
-        if (!settings.enableDivider) {
+          if (!settings.enableDivider &&
+            (settings.enableDate || settings.enableClock)
+          ) {
             document.getElementById(this.id + "-header").style.marginBottom = "18px";
           }
 
@@ -2971,19 +2977,23 @@
         }
         // nudges
         if(keyDown.key == "ArrowUp") {
-        changingElement.style.top =`${currentY - 1}px`;
+          changingElement.style.top =
+            `${keyDown.shiftKey ? currentY - 5 : currentY - 1}px`;
           storeElementData();
         }
         if(keyDown.key == "ArrowRight") {
-        changingElement.style.left =`${currentX + 1}px`;
+          changingElement.style.left =
+            `${keyDown.shiftKey ? currentX + 5 : currentX + 1}px`;
           storeElementData();
         }
         if(keyDown.key == "ArrowDown") {
-        changingElement.style.top =`${currentY + 1}px`;
+          changingElement.style.top =
+            `${keyDown.shiftKey ? currentY + 5 : currentY + 1}px`;
           storeElementData();
         }
         if(keyDown.key == "ArrowLeft") {
-        changingElement.style.left =`${currentX - 1}px`;
+          changingElement.style.left =
+            `${keyDown.shiftKey ? currentX - 5 : currentX - 1}px`;
           storeElementData();
         }
       }
@@ -3342,6 +3352,15 @@
         container.settings.enableDate = checkboxChanged.target.checked;
         document.getElementById(containerId + "-date").style.display = 
           checkboxChanged.target.checked ? "inline" : "none";
+        
+        if (!checkboxChanged.target.checked && 
+          Object.keys(container.sections).length > 0 &&
+          container.settings.enableClock
+        ) {
+          document.getElementById(containerId + "-header").style.marginBottom = "18px";
+        } else {
+          document.getElementById(containerId + "-header").style.marginBottom = "0px";
+        }
       }
       function toggleClock(checkboxChanged) {
         let containerId = checkboxChanged.target.id.split("-settings")[0];
@@ -3350,6 +3369,15 @@
         container.settings.enableClock = checkboxChanged.target.checked;
         document.getElementById(containerId + "-clock").style.display = 
           checkboxChanged.target.checked ? "inline" : "none";
+
+        if (!checkboxChanged.target.checked && 
+          Object.keys(container.sections).length > 0 &&
+          container.settings.enableDate
+        ) {
+          document.getElementById(containerId + "-header").style.marginBottom = "18px";
+        } else {
+          document.getElementById(containerId + "-header").style.marginBottom = "0px";
+        }
       }
       function changeHeaderColor(colorChange) {
         let containerId = colorChange.target.id.split("-settings")[0];
@@ -3421,7 +3449,10 @@
         document.getElementById(containerId + "-divider").style.display = 
           checkboxChanged.target.checked ? "block" : "none";
 
-      if (!checkboxChanged.target.checked && Object.keys(container.sections).length > 0) {
+        if (!checkboxChanged.target.checked && 
+          Object.keys(container.sections).length > 0 &&
+          (container.settings.enableDate || container.settings.enableClock)
+        ) {
           document.getElementById(containerId + "-header").style.marginBottom = "18px";
         } else {
           document.getElementById(containerId + "-header").style.marginBottom = "0px";
@@ -3669,4 +3700,5 @@
         );
       }
     </script>
+  </body>
 </html>

themes/experiment.txt

@@ -1 +0,0 @@
-{"cursors":"{}","containerMapValues":"[{\"id\":\"container-2\",\"name\":\"horse clone\",\"x\":\"88px\",\"y\":\"322px\",\"height\":487,\"width\":690,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipart-library.com%2Fimages%2F5TRrgXbpc.gif&f=1&nofb=1&ipt=d33858e361adaf5dda2c98e4dcb165f4ed22a20915c3efe5cd201d7b0a6b3704\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,0.9)\",\"zIndex\":1,\"invertX\":false,\"invertY\":false}},{\"id\":\"container-1\",\"name\":\"image 2\",\"x\":\"928px\",\"y\":\"-10px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-3\",\"name\":\"test\",\"x\":\"136px\",\"y\":\"184px\",\"height\":337,\"width\":323,\"containerSettings\":{\"backgroundRgba\":\"rgba(255,255,255,.9)\",\"backgroundAlpha\":100,\"borderWidth\":\"5\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#c01c28\",\"sectionSize\":\"7\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#986a44\",\"linkSize\":\"16\",\"enableDate\":true,\"enableClock\":true,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":true,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"\",\"url\":\"\"}],\"label\":\"bingo\"},\"1\":{\"links\":[{\"label\":\"d\",\"url\":\"https://e\"}],\"label\":\"fs\"},\"2\":{\"links\":[{\"label\":\"ddd\",\"url\":\"https://ddd\"}],\"label\":\"fsd\"}},\"clockIntervalId\":2},{\"id\":\"container-4\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":4,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-5\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":5,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-6\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":6,\"invertX\":false,\"invertY\":true}}]","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-1\",\"3\":\"container-3\",\"4\":\"container-4\",\"5\":\"container-5\",\"6\":\"container-6\"}","audioLink":"\"\"","wallpaper":"\"https://i.imgur.com/3QYCOxV.jpeg\"","settingsMenuData":"{\"x\":\"1074px\",\"y\":\"191px\",\"width\":631,\"height\":458}","autoplayAudio":"false","activeTabId":"\"containerTab\""}

themes/green_moutains

@@ -1 +0,0 @@
-{"activeTabId":"\"containerTab\"","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"bookmark layer 1\",\"x\":\"179px\",\"y\":\"160px\",\"height\":191,\"width\":241,\"containerSettings\":{\"backgroundRgba\":\"rgba(65,90,54,0.16)\",\"backgroundAlpha\":100,\"borderWidth\":\"2\",\"borderRadius\":\"0\",\"borderColor\":\"#000000\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#000000\",\"linkSize\":\"16\",\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"95\",\"shadowRgba\":\"rgba(47,52,63,0.18)\",\"zIndex\":1},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://youtube.com\"},{\"label\":\"/wg/\",\"url\":\"https://4chan.org/wg/\"},{\"label\":\"github\",\"url\":\"https://github.com\"}],\"label\":\"\"}},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"clock\",\"x\":\"1271px\",\"y\":\"374px\",\"height\":112,\"width\":213,\"containerSettings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"\",\"headerSize\":\"20\",\"headerBold\":false,\"headerItalic\":true,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2},\"sections\":{},\"clockIntervalId\":3}]","wallpaper":"\"https://i.imgur.com/K48zGBm.png\"","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-1\",\"2\":\"container-2\"}","audioLink":"\"\"","settingsMenuData":"{\"x\":\"493px\",\"y\":\"131px\",\"width\":648,\"height\":408}","autoplayAudio":"false","cursors":"{}"}

themes/peaceful_horse.txt

@@ -1 +0,0 @@
-{"autoplayAudio":"false","containerMapValues":"[{\"id\":\"container-2\",\"name\":\"horse clone\",\"x\":\"259px\",\"y\":\"472px\",\"height\":304,\"width\":450,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipart-library.com%2Fimages%2F5TRrgXbpc.gif&f=1&nofb=1&ipt=d33858e361adaf5dda2c98e4dcb165f4ed22a20915c3efe5cd201d7b0a6b3704\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,0.9)\",\"zIndex\":1}}]","wallpaper":"\"https://i.imgur.com/3QYCOxV.jpeg\"","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-2\"}","audioLink":"\"\"","activeTabId":"\"containerTab\"","settingsMenuData":"{\"x\":\"803px\",\"y\":\"115px\",\"width\":644,\"height\":404}","cursors":"{}"}