Spaces:

Skyd3d
/

skydy

Running

App Files Files Community

Skyd3d commited on Apr 5

Commit

56eb434

verified ·

1 Parent(s): 9e05b36

Add 1 files

Browse files

Files changed (1) hide show

index.html +317 -1

index.html CHANGED Viewed

@@ -51,9 +51,16 @@
             height: 100%;
             background-color: rgba(0,0,0,0.5);
             z-index: 1000;
         }
         .upload-modal-content {
             animation: modalFadeIn 0.3s ease-out;
         }
         @keyframes modalFadeIn {
             from {
@@ -65,6 +72,12 @@
                 transform: translateY(0);
             }
         }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen">
@@ -130,5 +143,308 @@
                     </div>
                     <!-- Items Grid -->
-                    <div class="p
 </html>

             height: 100%;
             background-color: rgba(0,0,0,0.5);
             z-index: 1000;
+            justify-content: center;
+            align-items: center;
         }
         .upload-modal-content {
             animation: modalFadeIn 0.3s ease-out;
+            background-color: white;
+            padding: 2rem;
+            border-radius: 0.5rem;
+            width: 90%;
+            max-width: 500px;
         }
         @keyframes modalFadeIn {
             from {
                 transform: translateY(0);
             }
         }
+        #itemsGrid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 1rem;
+            padding: 1rem;
+        }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen">
                     </div>
                     <!-- Items Grid -->
+                    <div id="itemsGrid" class="p-6">
+                        <!-- Items will be loaded here dynamically -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Admin Modal -->
+    <div id="adminModal" class="upload-modal">
+        <div class="upload-modal-content">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold">Admin Panel</h3>
+                <button id="closeAdminModal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
+                    <select id="adminCategory" class="w-full p-2 border rounded">
+                        <option value="faceMask">Face Mask</option>
+                        <option value="pants">Pants</option>
+                        <option value="hair">Hair</option>
+                        <option value="cape">Cape</option>
+                        <option value="backpack">Backpack</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Item Name</label>
+                    <input type="text" id="adminItemName" class="w-full p-2 border rounded" placeholder="Enter item name">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
+                    <input type="text" id="adminImageUrl" class="w-full p-2 border rounded" placeholder="Enter image URL">
+                </div>
+                <div class="flex space-x-4">
+                    <button id="addItemBtn" class="bg-blue-600 text-white px-4 py-2 rounded flex-1">
+                        Add Item
+                    </button>
+                    <button id="removeItemBtn" class="bg-red-600 text-white px-4 py-2 rounded flex-1">
+                        Remove Item
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Sample data for character items
+        const characterItems = {
+            faceMask: [
+                { id: 'mask1', name: 'Surgical Mask', imageUrl: 'https://via.placeholder.com/150?text=Surgical+Mask' },
+                { id: 'mask2', name: 'Gas Mask', imageUrl: 'https://via.placeholder.com/150?text=Gas+Mask' },
+                { id: 'mask3', name: 'Ninja Mask', imageUrl: 'https://via.placeholder.com/150?text=Ninja+Mask' },
+                { id: 'mask4', name: 'Bandana', imageUrl: 'https://via.placeholder.com/150?text=Bandana' }
+            ],
+            pants: [
+                { id: 'pants1', name: 'Jeans', imageUrl: 'https://via.placeholder.com/150?text=Jeans' },
+                { id: 'pants2', name: 'Cargo Pants', imageUrl: 'https://via.placeholder.com/150?text=Cargo+Pants' },
+                { id: 'pants3', name: 'Shorts', imageUrl: 'https://via.placeholder.com/150?text=Shorts' },
+                { id: 'pants4', name: 'Leather Pants', imageUrl: 'https://via.placeholder.com/150?text=Leather+Pants' }
+            ],
+            hair: [
+                { id: 'hair1', name: 'Short Hair', imageUrl: 'https://via.placeholder.com/150?text=Short+Hair' },
+                { id: 'hair2', name: 'Long Hair', imageUrl: 'https://via.placeholder.com/150?text=Long+Hair' },
+                { id: 'hair3', name: 'Ponytail', imageUrl: 'https://via.placeholder.com/150?text=Ponytail' },
+                { id: 'hair4', name: 'Mohawk', imageUrl: 'https://via.placeholder.com/150?text=Mohawk' }
+            ],
+            cape: [
+                { id: 'cape1', name: 'Red Cape', imageUrl: 'https://via.placeholder.com/150?text=Red+Cape' },
+                { id: 'cape2', name: 'Black Cape', imageUrl: 'https://via.placeholder.com/150?text=Black+Cape' },
+                { id: 'cape3', name: 'Royal Cape', imageUrl: 'https://via.placeholder.com/150?text=Royal+Cape' },
+                { id: 'cape4', name: 'Tattered Cape', imageUrl: 'https://via.placeholder.com/150?text=Tattered+Cape' }
+            ],
+            backpack: [
+                { id: 'backpack1', name: 'School Backpack', imageUrl: 'https://via.placeholder.com/150?text=School+Backpack' },
+                { id: 'backpack2', name: 'Hiking Backpack', imageUrl: 'https://via.placeholder.com/150?text=Hiking+Backpack' },
+                { id: 'backpack3', name: 'Military Backpack', imageUrl: 'https://via.placeholder.com/150?text=Military+Backpack' },
+                { id: 'backpack4', name: 'Jetpack', imageUrl: 'https://via.placeholder.com/150?text=Jetpack' }
+            ]
+        };
+        // Current selections
+        const currentSelections = {
+            faceMask: null,
+            pants: null,
+            hair: null,
+            cape: null,
+            backpack: null
+        };
+        // DOM elements
+        const categoryButtons = document.querySelectorAll('.category-btn');
+        const itemsGrid = document.getElementById('itemsGrid');
+        const adminBtn = document.getElementById('adminBtn');
+        const adminModal = document.getElementById('adminModal');
+        const closeAdminModal = document.getElementById('closeAdminModal');
+        const randomizeBtn = document.getElementById('randomizeBtn');
+        const downloadBtn = document.getElementById('downloadBtn');
+        const addItemBtn = document.getElementById('addItemBtn');
+        const removeItemBtn = document.getElementById('removeItemBtn');
+        // Initialize the app
+        function init() {
+            // Load first category by default
+            loadCategoryItems('faceMask');
+            // Set up event listeners
+            setupEventListeners();
+        }
+        // Set up all event listeners
+        function setupEventListeners() {
+            // Category buttons
+            categoryButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const category = button.dataset.category;
+                    // Update active button
+                    categoryButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    // Load items for this category
+                    loadCategoryItems(category);
+                });
+            });
+            // Admin button
+            adminBtn.addEventListener('click', () => {
+                adminModal.style.display = 'flex';
+            });
+            // Close admin modal
+            closeAdminModal.addEventListener('click', () => {
+                adminModal.style.display = 'none';
+            });
+            // Randomize button
+            randomizeBtn.addEventListener('click', randomizeCharacter);
+            // Download button
+            downloadBtn.addEventListener('click', downloadCharacter);
+            // Add item button
+            addItemBtn.addEventListener('click', addNewItem);
+            // Remove item button
+            removeItemBtn.addEventListener('click', removeItem);
+        }
+        // Load items for a specific category
+        function loadCategoryItems(category) {
+            itemsGrid.innerHTML = '';
+            // Add "None" option
+            const noneItem = document.createElement('div');
+            noneItem.className = `item-thumbnail bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center cursor-pointer ${!currentSelections[category] ? 'selected' : ''}`;
+            noneItem.innerHTML = `
+                <div class="w-16 h-16 bg-gray-200 rounded-full mb-2 flex items-center justify-center">
+                    <i class="fas fa-times text-gray-500"></i>
+                </div>
+                <span class="text-sm font-medium">None</span>
+            `;
+            noneItem.addEventListener('click', () => {
+                // Remove selection
+                currentSelections[category] = null;
+                document.getElementById(`${category}Layer`).style.backgroundImage = '';
+                // Update selected state
+                document.querySelectorAll(`.item-thumbnail`).forEach(item => {
+                    item.classList.remove('selected');
+                });
+                noneItem.classList.add('selected');
+            });
+            itemsGrid.appendChild(noneItem);
+            // Add items for this category
+            characterItems[category].forEach(item => {
+                const itemElement = document.createElement('div');
+                itemElement.className = `item-thumbnail bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center cursor-pointer ${currentSelections[category] === item.id ? 'selected' : ''}`;
+                itemElement.innerHTML = `
+                    <img src="${item.imageUrl}" alt="${item.name}" class="w-16 h-16 object-contain mb-2">
+                    <span class="text-sm font-medium">${item.name}</span>
+                `;
+                itemElement.addEventListener('click', () => {
+                    // Update selection
+                    currentSelections[category] = item.id;
+                    document.getElementById(`${category}Layer`).style.backgroundImage = `url('${item.imageUrl}')`;
+                    // Update selected state
+                    document.querySelectorAll(`.item-thumbnail`).forEach(item => {
+                        item.classList.remove('selected');
+                    });
+                    itemElement.classList.add('selected');
+                });
+                itemsGrid.appendChild(itemElement);
+            });
+        }
+        // Randomize all character items
+        function randomizeCharacter() {
+            Object.keys(characterItems).forEach(category => {
+                if (characterItems[category].length > 0) {
+                    // Get random item from this category
+                    const randomIndex = Math.floor(Math.random() * characterItems[category].length);
+                    const randomItem = characterItems[category][randomIndex];
+                    // Update selection
+                    currentSelections[category] = randomItem.id;
+                    document.getElementById(`${category}Layer`).style.backgroundImage = `url('${randomItem.imageUrl}')`;
+                }
+            });
+            // Reload current category to update selected states
+            const currentCategory = document.querySelector('.category-btn.active').dataset.category;
+            loadCategoryItems(currentCategory);
+        }
+        // Download character image
+        function downloadCharacter() {
+            alert('Character downloaded! (This would normally generate and download an image)');
+        }
+        // Add new item to a category
+        function addNewItem() {
+            const category = document.getElementById('adminCategory').value;
+            const name = document.getElementById('adminItemName').value.trim();
+            const imageUrl = document.getElementById('adminImageUrl').value.trim();
+            if (!name || !imageUrl) {
+                alert('Please fill in all fields');
+                return;
+            }
+            // Generate ID
+            const id = `${category}${characterItems[category].length + 1}`;
+            // Add to our data
+            characterItems[category].push({
+                id,
+                name,
+                imageUrl
+            });
+            // Clear form
+            document.getElementById('adminItemName').value = '';
+            document.getElementById('adminImageUrl').value = '';
+            // Reload items if this is the current category
+            const currentCategory = document.querySelector('.category-btn.active').dataset.category;
+            if (currentCategory === category) {
+                loadCategoryItems(category);
+            }
+            alert('Item added successfully!');
+        }
+        // Remove item from a category
+        function removeItem() {
+            const category = document.getElementById('adminCategory').value;
+            const name = document.getElementById('adminItemName').value.trim();
+            if (!name) {
+                alert('Please enter the name of the item to remove');
+                return;
+            }
+            // Find item index
+            const itemIndex = characterItems[category].findIndex(item => item.name === name);
+            if (itemIndex === -1) {
+                alert('Item not found');
+                return;
+            }
+            // Remove item
+            characterItems[category].splice(itemIndex, 1);
+            // Clear selection if it was this item
+            if (currentSelections[category] === name) {
+                currentSelections[category] = null;
+                document.getElementById(`${category}Layer`).style.backgroundImage = '';
+            }
+            // Clear form
+            document.getElementById('adminItemName').value = '';
+            document.getElementById('adminImageUrl').value = '';
+            // Reload items if this is the current category
+            const currentCategory = document.querySelector('.category-btn.active').dataset.category;
+            if (currentCategory === category) {
+                loadCategoryItems(category);
+            }
+            alert('Item removed successfully!');
+        }
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Skyd3d/skydy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>