new swag widget

amgno · Sep 24, 2024 · f69691b · f69691b
1 parent bd1cd18
commit f69691b
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 20 deletions.
diff --git a/admin.html b/admin.html
@@ -214,6 +214,84 @@
         #image-upload-area.highlight {
             background-color: #f0f0f0;
         }
+
+        /* Add these styles to the existing <style> section */
+        .widget {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            max-width: 800px;
+            max-height: 80vh;
+            background-color: white;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            overflow: hidden;
+        }
+
+        .widget-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px;
+            background-color: #f0f0f0;
+            border-bottom: 1px solid #ccc;
+        }
+
+        .widget-header h3 {
+            margin: 0;
+        }
+
+        .widget-content {
+            padding: 20px;
+            max-height: calc(80vh - 60px);
+            overflow-y: auto;
+        }
+
+        #image-preview {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .image-preview-item {
+            position: relative;
+            width: 150px;
+        }
+
+        .image-preview-item img {
+            width: 100%;
+            height: auto;
+        }
+
+        .image-preview-item button {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            background-color: rgba(255, 0, 0, 0.7);
+            color: white;
+            border: none;
+            padding: 5px;
+            cursor: pointer;
+        }
+
+        #image-upload-area {
+            border: 2px dashed #ccc;
+            border-radius: 20px;
+            width: 100%;
+            padding: 20px;
+            text-align: center;
+            cursor: pointer;
+        }
+
+        #image-upload-area.highlight {
+            background-color: #f0f0f0;
+        }
     </style>
 </head>
 
@@ -247,12 +325,17 @@ <h2>Projects Management</h2>
                         <button onclick="addProject()">Add New Project</button><br>
                         <button onclick="saveProjects()">Save Changes</button>
                     </div>
-                    <div id="image-management">
-                        <h3>Image Management</h3>
-                        <div id="image-preview"></div>
-                        <div id="image-upload-area">
-                            <p>Drag and drop images here or click to select files</p>
-                            <input type="file" id="file-input" multiple accept="image/*" style="display: none;">
+                    <div id="image-management-widget" class="widget">
+                        <div class="widget-header">
+                            <h3>IMG MNG</h3>
+                            <button onclick="closeImageManagement()">Close</button>
+                        </div>
+                        <div class="widget-content">
+                            <div id="image-preview"></div>
+                            <div id="image-upload-area">
+                                <p>Drag and drop images here or click to select files</p>
+                                <input type="file" id="file-input" multiple accept="image/*" style="display: none;">
+                            </div>
                         </div>
                     </div>
                 </div>

diff --git a/admin.js b/admin.js
@@ -220,7 +220,11 @@ function showImageManagement(index) {
         imagePreview.appendChild(imgElement);
     });
 
-    document.getElementById('image-management').style.display = 'block';
+    document.getElementById('image-management-widget').style.display = 'block';
+}
+
+function closeImageManagement() {
+    document.getElementById('image-management-widget').style.display = 'none';
 }
 
 function deleteImage(imgIndex) {

diff --git a/projects.js b/projects.js
@@ -16,7 +16,7 @@ const projects = [
     "name": "limitazione",
     "description": "Booklet made for Typographic Design at University, a guidebook to check if a coin is fake",
     "ptype": "Booklet",
-    "tools": "AI PS IN",
+    "tools": "Illustrator Photoshop InDesign",
     "date": "1st smst 2y // 2023",
     "bgcolor": "#0b5394",
     "images": [],
@@ -82,17 +82,5 @@ const projects = [
       "/works/06 - Rolli di Genova/images/tote3.png"
     ],
     "bgcolor": "#590202"
-  },
-  {
-    "number": "07",
-    "name": "New Project",
-    "description": "",
-    "ptype": "",
-    "tools": "",
-    "date": "",
-    "images": [],
-    "pdf": "",
-    "video": "",
-    "bgcolor": ""
   }
 ];