JEMM: Web Application Showcase Platform
Browse filesCore Design Philosophy
Universal platform for showcasing web applications
Clean, modern, and intuitive interface
Minimal dependencies
Responsive and interactive design
UI/UX Design Principles
Dark Theme Aesthetic
Background: Deep charcoal (#1A1A1A)
Text: Soft white (#E0E0E0)
Accent Colors:
Lime Green (#2ECC71)
Electric Blue (#3498DB)
Layout Structure
Sidebar Navigation
Main Content Grid
Floating Action Buttons
Responsive Design
Key Features
Drag and Drop File Upload
Code Preview
Instant Rendering
Tagging System
Search Functionality
Proposed HTML Structure
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JEMM - Web Application Showcase</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-container">
<aside class="sidebar">
<div class="logo">JEMM</div>
<nav>
<ul>
<li>Dashboard</li>
<li>Upload</li>
<li>Browse</li>
<li>Settings</li>
</ul>
</nav>
</aside>
<main class="main-content">
<header>
<input type="search" placeholder="Search applications...">
<button class="upload-btn">+ Upload</button>
</header>
<section class="app-grid">
<!-- Dynamic app showcase grid will be populated here -->
</section>
</main>
<div class="upload-modal hidden">
<div class="modal-content">
<h2>Upload Web Application</h2>
<div class="dropzone">
<p>Drag and Drop Files Here</p>
<input type="file" multiple>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Proposed CSS (styles.css)
Copy
:root {
--bg-dark: #1A1A1A;
--text-light: #E0E0E0;
--accent-green: #2ECC71;
--accent-blue: #3498DB;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: var(--bg-dark);
color: var(--text-light);
line-height: 1.6;
}
.app-container {
display: grid;
grid-template-columns: 250px 1fr;
height: 100vh;
}
.sidebar {
background-color: #252525;
padding: 20px;
}
.main-content {
overflow-y: auto;
padding: 20px;
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.upload-btn {
background-color: var(--accent-green);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.upload-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: flex;
justify-content: center;
align-items: center;
}
.hidden {
display: none;
}
Proposed JavaScript (app.js)
Copy
document.addEventListener('DOMContentLoaded', () => {
const uploadBtn = document.querySelector('.upload-btn');
const uploadModal = document.querySelector('.upload-modal');
const dropzone = document.querySelector('.dropzone');
uploadBtn.addEventListener('click', () => {
uploadModal.classList.remove('hidden');
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('dragover');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
handleFiles(files);
});
function handleFiles(files) {
// Process uploaded files
console.log(files);
uploadModal.classList.add('hidden');
}
});
Design Philosophy Notes
Universal platform that can adapt to any web application
Minimal initial complexity
Easy to extend and customize
Focus on user experience
Clean, modern interface
Next Steps
Implement basic file upload logic
Create app preview functionality
Add search and filtering
Develop tagging system
Enhance responsive design
- README.md +7 -4
- index.html +302 -18
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
colorFrom: green
|
| 5 |
colorTo: green
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: WebApp Showcase Wizardry ✨
|
| 3 |
+
colorFrom: yellow
|
|
|
|
| 4 |
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
|
@@ -1,19 +1,303 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>WebApp Showcase Wizardry</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
.dropzone {
|
| 13 |
+
border: 2px dashed #2ECC71;
|
| 14 |
+
transition: all 0.3s ease;
|
| 15 |
+
}
|
| 16 |
+
.dropzone.dragover {
|
| 17 |
+
background-color: rgba(46, 204, 113, 0.1);
|
| 18 |
+
transform: scale(1.02);
|
| 19 |
+
}
|
| 20 |
+
.app-card:hover {
|
| 21 |
+
transform: translateY(-5px);
|
| 22 |
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
| 23 |
+
}
|
| 24 |
+
#vanta-bg {
|
| 25 |
+
position: fixed;
|
| 26 |
+
top: 0;
|
| 27 |
+
left: 0;
|
| 28 |
+
width: 100%;
|
| 29 |
+
height: 100%;
|
| 30 |
+
z-index: -1;
|
| 31 |
+
opacity: 0.3;
|
| 32 |
+
}
|
| 33 |
+
</style>
|
| 34 |
+
</head>
|
| 35 |
+
<body class="bg-gray-900 text-gray-100">
|
| 36 |
+
<div id="vanta-bg"></div>
|
| 37 |
+
|
| 38 |
+
<div class="flex h-screen overflow-hidden">
|
| 39 |
+
<!-- Sidebar -->
|
| 40 |
+
<aside class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
|
| 41 |
+
<div class="p-6">
|
| 42 |
+
<h1 class="text-2xl font-bold text-lime-400 flex items-center">
|
| 43 |
+
<i data-feather="zap" class="mr-2"></i> WizShow
|
| 44 |
+
</h1>
|
| 45 |
+
<p class="text-gray-400 mt-1 text-sm">Your web app showcase platform</p>
|
| 46 |
+
</div>
|
| 47 |
+
|
| 48 |
+
<nav class="flex-1 px-4">
|
| 49 |
+
<ul class="space-y-2">
|
| 50 |
+
<li>
|
| 51 |
+
<a href="#" class="flex items-center px-4 py-3 rounded-lg bg-gray-700 text-lime-400">
|
| 52 |
+
<i data-feather="layout" class="mr-3"></i> Dashboard
|
| 53 |
+
</a>
|
| 54 |
+
</li>
|
| 55 |
+
<li>
|
| 56 |
+
<a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors">
|
| 57 |
+
<i data-feather="upload" class="mr-3"></i> Upload
|
| 58 |
+
</a>
|
| 59 |
+
</li>
|
| 60 |
+
<li>
|
| 61 |
+
<a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors">
|
| 62 |
+
<i data-feather="grid" class="mr-3"></i> Browse
|
| 63 |
+
</a>
|
| 64 |
+
</li>
|
| 65 |
+
<li>
|
| 66 |
+
<a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors">
|
| 67 |
+
<i data-feather="settings" class="mr-3"></i> Settings
|
| 68 |
+
</a>
|
| 69 |
+
</li>
|
| 70 |
+
</ul>
|
| 71 |
+
</nav>
|
| 72 |
+
|
| 73 |
+
<div class="p-4 border-t border-gray-700">
|
| 74 |
+
<div class="flex items-center">
|
| 75 |
+
<img src="http://static.photos/people/200x200/42" alt="User" class="w-10 h-10 rounded-full">
|
| 76 |
+
<div class="ml-3">
|
| 77 |
+
<p class="font-medium">John Doe</p>
|
| 78 |
+
<p class="text-gray-400 text-xs">Admin</p>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</div>
|
| 82 |
+
</aside>
|
| 83 |
+
|
| 84 |
+
<!-- Main Content -->
|
| 85 |
+
<main class="flex-1 overflow-y-auto p-8">
|
| 86 |
+
<header class="flex justify-between items-center mb-8">
|
| 87 |
+
<div class="relative w-96">
|
| 88 |
+
<input type="search" placeholder="Search applications..."
|
| 89 |
+
class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent">
|
| 90 |
+
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
|
| 91 |
+
</div>
|
| 92 |
+
<button id="upload-btn" class="bg-lime-500 hover:bg-lime-600 text-white px-6 py-2 rounded-lg flex items-center transition-colors">
|
| 93 |
+
<i data-feather="upload" class="mr-2"></i> Upload
|
| 94 |
+
</button>
|
| 95 |
+
</header>
|
| 96 |
+
|
| 97 |
+
<section>
|
| 98 |
+
<h2 class="text-xl font-semibold mb-6">Featured Applications</h2>
|
| 99 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
| 100 |
+
<!-- App Cards -->
|
| 101 |
+
<div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400">
|
| 102 |
+
<div class="h-48 bg-gradient-to-r from-blue-500 to-blue-600 relative">
|
| 103 |
+
<span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">React</span>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="p-4">
|
| 106 |
+
<h3 class="font-bold text-lg mb-1">E-Commerce Dashboard</h3>
|
| 107 |
+
<p class="text-gray-400 text-sm mb-3">Interactive product management system</p>
|
| 108 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 109 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Dashboard</span>
|
| 110 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">React</span>
|
| 111 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Analytics</span>
|
| 112 |
+
</div>
|
| 113 |
+
<div class="flex justify-between items-center">
|
| 114 |
+
<div class="flex items-center">
|
| 115 |
+
<i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i>
|
| 116 |
+
<span class="text-gray-400 text-xs">1.2k</span>
|
| 117 |
+
</div>
|
| 118 |
+
<button class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
|
| 119 |
+
Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
|
| 120 |
+
</button>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
|
| 125 |
+
<div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400">
|
| 126 |
+
<div class="h-48 bg-gradient-to-r from-purple-500 to-purple-600 relative">
|
| 127 |
+
<span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">Vue</span>
|
| 128 |
+
</div>
|
| 129 |
+
<div class="p-4">
|
| 130 |
+
<h3 class="font-bold text-lg mb-1">Task Manager</h3>
|
| 131 |
+
<p class="text-gray-400 text-sm mb-3">Collaborative team task organization</p>
|
| 132 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 133 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Productivity</span>
|
| 134 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Vue</span>
|
| 135 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Team</span>
|
| 136 |
+
</div>
|
| 137 |
+
<div class="flex justify-between items-center">
|
| 138 |
+
<div class="flex items-center">
|
| 139 |
+
<i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i>
|
| 140 |
+
<span class="text-gray-400 text-xs">856</span>
|
| 141 |
+
</div>
|
| 142 |
+
<button class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
|
| 143 |
+
Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
|
| 144 |
+
</button>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
|
| 149 |
+
<div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400">
|
| 150 |
+
<div class="h-48 bg-gradient-to-r from-amber-500 to-amber-600 relative">
|
| 151 |
+
<span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">Angular</span>
|
| 152 |
+
</div>
|
| 153 |
+
<div class="p-4">
|
| 154 |
+
<h3 class="font-bold text-lg mb-1">Fitness Tracker</h3>
|
| 155 |
+
<p class="text-gray-400 text-sm mb-3">Personal health and workout monitoring</p>
|
| 156 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 157 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Health</span>
|
| 158 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Angular</span>
|
| 159 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Charts</span>
|
| 160 |
+
</div>
|
| 161 |
+
<div class="flex justify-between items-center">
|
| 162 |
+
<div class="flex items-center">
|
| 163 |
+
<i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i>
|
| 164 |
+
<span class="text-gray-400 text-xs">1.5k</span>
|
| 165 |
+
</div>
|
| 166 |
+
<button class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
|
| 167 |
+
Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
|
| 168 |
+
</button>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
|
| 173 |
+
<div class="app-card bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition-all duration-300 hover:border-lime-400">
|
| 174 |
+
<div class="h-48 bg-gradient-to-r from-emerald-500 to-emerald-600 relative">
|
| 175 |
+
<span class="absolute top-4 left-4 bg-gray-900 bg-opacity-50 text-white text-xs px-2 py-1 rounded">Svelte</span>
|
| 176 |
+
</div>
|
| 177 |
+
<div class="p-4">
|
| 178 |
+
<h3 class="font-bold text-lg mb-1">Recipe Explorer</h3>
|
| 179 |
+
<p class="text-gray-400 text-sm mb-3">Interactive cooking recipe database</p>
|
| 180 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 181 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Food</span>
|
| 182 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">Svelte</span>
|
| 183 |
+
<span class="bg-gray-700 text-xs px-2 py-1 rounded">API</span>
|
| 184 |
+
</div>
|
| 185 |
+
<div class="flex justify-between items-center">
|
| 186 |
+
<div class="flex items-center">
|
| 187 |
+
<i data-feather="eye" class="text-gray-400 mr-1 w-4 h-4"></i>
|
| 188 |
+
<span class="text-gray-400 text-xs">2.3k</span>
|
| 189 |
+
</div>
|
| 190 |
+
<button class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
|
| 191 |
+
Preview <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
|
| 192 |
+
</button>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
</section>
|
| 198 |
+
</main>
|
| 199 |
+
</div>
|
| 200 |
+
|
| 201 |
+
<!-- Upload Modal -->
|
| 202 |
+
<div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center hidden">
|
| 203 |
+
<div class="bg-gray-800 rounded-xl w-full max-w-2xl border border-gray-700">
|
| 204 |
+
<div class="p-6 border-b border-gray-700 flex justify-between items-center">
|
| 205 |
+
<h3 class="text-xl font-semibold">Upload Web Application</h3>
|
| 206 |
+
<button id="close-modal" class="text-gray-400 hover:text-white">
|
| 207 |
+
<i data-feather="x"></i>
|
| 208 |
+
</button>
|
| 209 |
+
</div>
|
| 210 |
+
<div class="p-6">
|
| 211 |
+
<div id="dropzone" class="dropzone rounded-lg h-64 flex flex-col items-center justify-center p-8 text-center cursor-pointer">
|
| 212 |
+
<i data-feather="upload-cloud" class="w-12 h-12 text-lime-400 mb-4"></i>
|
| 213 |
+
<h4 class="text-lg font-medium mb-2">Drag and drop files here</h4>
|
| 214 |
+
<p class="text-gray-400 mb-4">or click to browse your files</p>
|
| 215 |
+
<input type="file" class="hidden" multiple>
|
| 216 |
+
<button class="bg-lime-500 hover:bg-lime-600 text-white px-6 py-2 rounded-lg transition-colors">
|
| 217 |
+
Select Files
|
| 218 |
+
</button>
|
| 219 |
+
</div>
|
| 220 |
+
|
| 221 |
+
<div class="mt-6">
|
| 222 |
+
<h4 class="font-medium mb-3">Project Details</h4>
|
| 223 |
+
<div class="space-y-4">
|
| 224 |
+
<div>
|
| 225 |
+
<label class="block text-gray-400 text-sm mb-1">Project Name</label>
|
| 226 |
+
<input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent">
|
| 227 |
+
</div>
|
| 228 |
+
<div>
|
| 229 |
+
<label class="block text-gray-400 text-sm mb-1">Description</label>
|
| 230 |
+
<textarea rows="3" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent"></textarea>
|
| 231 |
+
</div>
|
| 232 |
+
<div>
|
| 233 |
+
<label class="block text-gray-400 text-sm mb-1">Tags</label>
|
| 234 |
+
<input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-transparent" placeholder="Separate tags with commas">
|
| 235 |
+
</div>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
</div>
|
| 239 |
+
<div class="p-4 border-t border-gray-700 flex justify-end">
|
| 240 |
+
<button class="px-6 py-2 rounded-lg border border-gray-600 hover:bg-gray-700 mr-3 transition-colors">
|
| 241 |
+
Cancel
|
| 242 |
+
</button>
|
| 243 |
+
<button class="bg-lime-500 hover:bg-lime-600 text-white px-6 py-2 rounded-lg transition-colors">
|
| 244 |
+
Upload Project
|
| 245 |
+
</button>
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
|
| 250 |
+
<script>
|
| 251 |
+
// Initialize Vanta.js background
|
| 252 |
+
VANTA.GLOBE({
|
| 253 |
+
el: "#vanta-bg",
|
| 254 |
+
mouseControls: true,
|
| 255 |
+
touchControls: true,
|
| 256 |
+
gyroControls: false,
|
| 257 |
+
minHeight: 200.00,
|
| 258 |
+
minWidth: 200.00,
|
| 259 |
+
scale: 1.00,
|
| 260 |
+
scaleMobile: 1.00,
|
| 261 |
+
color: 0x2ecc71,
|
| 262 |
+
backgroundColor: 0x1a1a1a
|
| 263 |
+
});
|
| 264 |
+
|
| 265 |
+
// Modal functionality
|
| 266 |
+
const uploadBtn = document.getElementById('upload-btn');
|
| 267 |
+
const uploadModal = document.getElementById('upload-modal');
|
| 268 |
+
const closeModal = document.getElementById('close-modal');
|
| 269 |
+
const dropzone = document.getElementById('dropzone');
|
| 270 |
+
|
| 271 |
+
uploadBtn.addEventListener('click', () => {
|
| 272 |
+
uploadModal.classList.remove('hidden');
|
| 273 |
+
document.body.style.overflow = 'hidden';
|
| 274 |
+
});
|
| 275 |
+
|
| 276 |
+
closeModal.addEventListener('click', () => {
|
| 277 |
+
uploadModal.classList.add('hidden');
|
| 278 |
+
document.body.style.overflow = 'auto';
|
| 279 |
+
});
|
| 280 |
+
|
| 281 |
+
// Dropzone functionality
|
| 282 |
+
dropzone.addEventListener('dragover', (e) => {
|
| 283 |
+
e.preventDefault();
|
| 284 |
+
dropzone.classList.add('dragover');
|
| 285 |
+
});
|
| 286 |
+
|
| 287 |
+
dropzone.addEventListener('dragleave', () => {
|
| 288 |
+
dropzone.classList.remove('dragover');
|
| 289 |
+
});
|
| 290 |
+
|
| 291 |
+
dropzone.addEventListener('drop', (e) => {
|
| 292 |
+
e.preventDefault();
|
| 293 |
+
dropzone.classList.remove('dragover');
|
| 294 |
+
const files = e.dataTransfer.files;
|
| 295 |
+
console.log('Files dropped:', files);
|
| 296 |
+
// Handle file upload
|
| 297 |
+
});
|
| 298 |
+
|
| 299 |
+
// Initialize feather icons
|
| 300 |
+
feather.replace();
|
| 301 |
+
</script>
|
| 302 |
+
</body>
|
| 303 |
</html>
|