File size: 9,746 Bytes
1a6dafa |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Project - DeepSite</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
deepBlue: '#0f172a',
deepPurple: '#7e22ce',
lightPurple: '#a855f7',
accent: '#8b5cf6'
}
}
}
}
</script>
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
}
.card-glass {
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.form-input:focus {
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}
.gradient-border {
position: relative;
overflow: hidden;
}
.gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc, #d8b4fe);
z-index: -1;
padding: 2px;
border-radius: 12px;
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
</style>
</head>
<body class="text-gray-100">
<!-- Header -->
<header class="py-6 px-4 sm:px-8">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center">
<i data-feather="hexagon" class="text-white"></i>
</div>
<span class="text-xl font-bold">DeepSite</span>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="hover:text-purple-300 transition">Dashboard</a>
<a href="#" class="hover:text-purple-300 transition">Projects</a>
<a href="#" class="hover:text-purple-300 transition">Models</a>
<a href="#" class="hover:text-purple-300 transition">Documentation</a>
</nav>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-gray-800 transition">
<i data-feather="bell"></i>
</button>
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 flex items-center justify-center">
<span class="font-semibold">U</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8 max-w-4xl">
<div class="mb-10 text-center">
<h1 class="text-3xl md:text-4xl font-bold mb-4">Create New Project</h1>
<p class="text-gray-400 max-w-2xl mx-auto">Start building your next AI application by configuring your project settings and selecting the appropriate model architecture.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Form Section -->
<div class="lg:col-span-2">
<div class="card-glass rounded-2xl p-6 md:p-8">
<div class="mb-8">
<h2 class="text-xl font-semibold mb-2">Project Details</h2>
<p class="text-gray-400 text-sm">Provide basic information about your project</p>
</div>
<form class="space-y-6">
<div>
<label class="block text-sm font-medium mb-2">Project Name *</label>
<input type="text" placeholder="My Awesome AI Project" class="form-input w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 focus:outline-none transition">
</div>
<div>
<label class="block text-sm font-medium mb-2">Description</label>
<textarea rows="3" placeholder="Describe what your project aims to achieve..." class="form-input w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 focus:outline-none transition"></textarea>
</div>
<div>
<label class="block text-sm font-medium mb-2">Project Type</label>
<div class="grid grid-cols-2 gap-4">
<div class="border border-gray-700 rounded-lg p-4 cursor-pointer hover:border-purple-500 transition">
<div class="flex items-center">
<div class="mr-3 p-2 rounded-lg bg-purple-900/30">
<i data-feather="cpu" class="text-purple-400"></i>
</div>
<div>
<h3 class="font-medium">Text Generation</h3>
<p class="text-xs text-gray-400">LLM-based projects</p>
</div>
</div>
</div>
<div class="border border-gray-700 rounded-lg p-4 cursor-pointer hover:border-purple-500 transition">
<div class="flex items-center">
<div class="mr-3 p-2 rounded-lg bg-blue-900/30">
<i data-feather="image" class="text-blue-400"></i>
</div>
<div>
<h3 class="font-medium">Image Processing</h3>
<p class="text-xs text-gray-400">Computer vision tasks</p>
</div>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">Model Selection</label>
<select class="form-input w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 focus:outline-none transition">
<option>Select a base model</option>
<option>GPT-4 Turbo</option>
<option>Llama 3 70B</option>
<option>Mistral Large</option>
<option>Claude 3 Opus</option>
</select>
</div>
<div class="pt-4">
<button type="submit" class="gradient-border w-full py-3 px-6 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 transition-all duration-300 font-medium pulse-animation">
Create Project
</button>
</div>
</form>
</div>
</div>
<!-- Sidebar -->
<div>
<div class="card-glass rounded-2xl p-6 mb-6">
<h3 class="font-semibold mb-4 flex items-center">
<i data-feather="info" class="mr-2 text-purple-400"></i>
Project Guidelines
</h3>
<ul class="space-y-3 text-sm text-gray-300">
<li class="flex items-start">
<i data-feather="check-circle" class="mr-2 mt-1 text-green-400 flex-shrink-0"></i>
<span>Choose a descriptive project name</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="mr-2 mt-1 text-green-400 flex-shrink-0"></i>
<span>Select the most relevant model for your task</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="mr-2 mt-1 text-green-400 flex-shrink-0"></i>
<span>Review pricing before deployment</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="mr-2 mt-1 text-green-400 flex-sh{"ok":false,"message":"terminated"}
</body>
</html> |