pushed with daily script

papierkorp · Oct 15, 2024 · 94d5a38 · 94d5a38
1 parent d0c8707
commit 94d5a38
Show file tree

Hide file tree

Showing 11 changed files with 565 additions and 403 deletions.
diff --git a/border_settings.html b/border_settings.html
@@ -4,15 +4,15 @@ <h3 class="text-lg font-semibold mb-4">Border Settings</h3>
   <div class="mb-4">
     <label class="block text-sm font-medium text-gray-700 mb-1">Border Sides</label>
     <div class="flex flex-wrap gap-2">
-      <label><input type="checkbox" value="top" /> Top</label>
-      <label><input type="checkbox" value="right" /> Right</label>
-      <label><input type="checkbox" value="bottom" /> Bottom</label>
-      <label><input type="checkbox" value="left" /> Left</label>
+      <label class="text-xs text-gray-600"><input type="checkbox" id="top" /> Top</label>
+      <label class="text-xs text-gray-600"><input type="checkbox" id="right" /> Right</label>
+      <label class="text-xs text-gray-600"><input type="checkbox" id="bottom" /> Bottom</label>
+      <label class="text-xs text-gray-600"><input type="checkbox" id="left" /> Left</label>
     </div>
   </div>
 
-  <div class="mb-4">
-    <label for="borderType" class="block text-sm font-medium text-gray-700 mb-1">Border Type</label>
+  <div class="mb-4 flex justify-between items-center">
+    <label for="borderType" class="text-xs text-gray-600">Border Type</label>
     <select id="borderType" class="w-full p-2 border rounded">
       <option value="solid">Solid</option>
       <option value="dotted">Dotted</option>
@@ -22,65 +22,98 @@ <h3 class="text-lg font-semibold mb-4">Border Settings</h3>
       <option value="ridge">Ridge</option>
       <option value="inset">Inset</option>
       <option value="outset">Outset</option>
-      <option value="none">None</option>
-      <option value="hidden">Hidden</option>
     </select>
   </div>
 
-  <div class="mb-4">
-    <div class="flex justify-between items-center mb-1">
-      <label for="borderRadius" class="text-sm font-medium text-gray-700">Rounded Corners</label>
-      <span id="borderRadiusValue" class="text-sm text-gray-500">0px</span>
+  <div class="mb-4 flex space-x-4">
+    <div class="flex-1">
+      <div class="flex justify-between items-center mb-1">
+        <label for="borderSize" class="text-xs text-gray-600">Border Size</label>
+        <div class="flex items-center">
+          <span id="borderSizeValue" class="text-sm text-gray-500">1</span>
+          <span class="text-sm text-gray-500 ml-1">px</span>
+        </div>
+      </div>
+      <input type="range" id="borderSize" min="0" max="20" value="1" class="w-full accent-lime-400" />
+    </div>
+    <div class="flex-1">
+      <div class="flex justify-between items-center mb-1">
+        <label for="borderRadius" class="text-xs text-gray-600">Rounded Corners</label>
+        <span id="borderRadiusValue" class="text-sm text-gray-500">0</span
+        ><span class="text-sm text-gray-500 ml-1">px</span>
+      </div>
+      <input type="range" id="borderRadius" min="0" max="50" value="0" class="w-full accent-lime-400" />
     </div>
-    <input type="range" id="borderRadius" min="0" max="50" value="0" class="w-full accent-lime-400" />
+  </div>
+
+  <div class="mb-4">
+    <label for="borderColor" class="block text-sm font-medium text-gray-700 mb-1">Border Color</label>
+    <input type="color" id="borderColor" value="#000000" class="w-full h-10 p-1 border rounded" />
   </div>
 
   <div class="mb-4">
     <h4 class="text-sm font-medium text-gray-700 mb-2">Shadow Settings</h4>
     <div class="flex space-x-4 mb-2">
-      <label><input type="checkbox" id="shadowEnabled" /> Shadow</label>
-      <label><input type="checkbox" id="shadowInset" /> Inset Shadow</label>
+      <label class="text-xs text-gray-600"><input type="checkbox" id="shadowEnabled" /> Shadow</label>
+      <label class="text-xs text-gray-600"><input type="checkbox" id="shadowInset" /> Inset Shadow</label>
     </div>
     <div class="grid grid-cols-2 gap-4">
       <div>
         <div class="flex justify-between items-center mb-1">
           <label for="shadowRight" class="text-xs text-gray-600">Shift Right</label>
-          <span id="shadowRightValue" class="text-xs text-gray-500">0px</span>
+          <div class="flex items-center">
+            <span id="shadowRightValue" class="text-xs text-gray-500">0</span>
+            <span class="text-sm text-gray-500 ml-1">px</span>
+          </div>
         </div>
         <input type="range" id="shadowRight" min="-50" max="50" value="0" class="w-full accent-lime-400" />
       </div>
       <div>
         <div class="flex justify-between items-center mb-1">
           <label for="shadowDown" class="text-xs text-gray-600">Shift Down</label>
-          <span id="shadowDownValue" class="text-xs text-gray-500">0px</span>
+          <div class="flex items-center">
+            <div class="flex items-center">
+              <span id="shadowDownValue" class="text-xs text-gray-500">0</span>
+              <span class="text-sm text-gray-500 ml-1">px</span>
+            </div>
+          </div>
         </div>
         <input type="range" id="shadowDown" min="-50" max="50" value="0" class="w-full accent-lime-400" />
       </div>
       <div>
         <div class="flex justify-between items-center mb-1">
           <label for="shadowSpread" class="text-xs text-gray-600">Spread</label>
-          <span id="shadowSpreadValue" class="text-xs text-gray-500">0px</span>
+          <div class="flex items-center">
+            <span id="shadowSpreadValue" class="text-xs text-gray-500">0</span>
+            <span class="text-sm text-gray-500 ml-1">px</span>
+          </div>
         </div>
         <input type="range" id="shadowSpread" min="0" max="50" value="0" class="w-full accent-lime-400" />
       </div>
       <div>
         <div class="flex justify-between items-center mb-1">
           <label for="shadowBlur" class="text-xs text-gray-600">Blur</label>
-          <span id="shadowBlurValue" class="text-xs text-gray-500">0px</span>
+          <div class="flex items-center">
+            <span id="shadowBlurValue" class="text-xs text-gray-500">0</span>
+            <span class="text-sm text-gray-500 ml-1">px</span>
+          </div>
         </div>
         <input type="range" id="shadowBlur" min="0" max="50" value="0" class="w-full accent-lime-400" />
       </div>
     </div>
     <div class="mt-4">
       <div class="flex justify-between items-center mb-1">
         <label for="shadowOpacity" class="text-xs text-gray-600">Opacity</label>
-        <span id="shadowOpacityValue" class="text-xs text-gray-500">100%</span>
+        <div class="flex items-center">
+          <span id="shadowOpacityValue" class="text-xs text-gray-500">100</span>
+          <span class="text-sm text-gray-500 ml-1">%</span>
+        </div>
       </div>
       <input type="range" id="shadowOpacity" min="0" max="100" value="100" class="w-full accent-lime-400" />
     </div>
     <div class="mt-4">
       <label for="shadowColor" class="block text-xs text-gray-600 mb-1">Shadow Color</label>
-      <input type="color" id="shadowColor" value="#000000" class="w-full" />
+      <input type="color" id="shadowColor" value="#000000" class="w-full h-10 p-1 border rounded" />
     </div>
   </div>
 </div>
diff --git a/card_settings.html b/card_settings.html
@@ -33,12 +33,6 @@ <h3 class="text-lg font-semibold mb-4">Card Dimensions</h3>
         <option value="bottom">Bottom Edge</option>
         <option value="left">Left Edge</option>
         <option value="middle1">Middle Section 1</option>
-        <option value="middle2">Middle Section 2</option>
-        <option value="middle3">Middle Section 3</option>
-        <option value="middle4">Middle Section 4</option>
-        <option value="middle5">Middle Section 5</option>
-        <option value="middle6">Middle Section 6</option>
-        <option value="middle7">Middle Section 7</option>
       </select>
     </div>
   </div>

diff --git a/content_settings.html b/content_settings.html
@@ -44,4 +44,14 @@ <h4 class="text-md font-semibold mb-2">Content Editor</h4>
     <label for="backgroundColor" class="block text-sm font-medium text-gray-700 mb-1">Background Color</label>
     <input type="color" id="backgroundColor" value="#ffffff" class="w-full" />
   </div>
+
+  <!-- New buttons for adding and deleting middle sections, initially hidden -->
+  <div id="middleSectionButtons" class="flex justify-between mt-4" style="display: none">
+    <button id="addMiddleSection" class="bg-green-600 text-white px-3 py-1 text-sm rounded hover:bg-green-700">
+      Add Middle Section
+    </button>
+    <button id="deleteMiddleSection" class="bg-red-600 text-white px-3 py-1 text-sm rounded hover:bg-red-700">
+      Delete Middle Section
+    </button>
+  </div>
 </div>
diff --git a/js/core/state.js b/js/core/state.js