Skip to content

Commit 9ebcced

Browse files
deepseekadmindeepseekadmin
authored
Create index.htm
1 parent 0a0f085 commit 9ebcced

File tree

1 file changed

+383
-0
lines changed

1 file changed

+383
-0
lines changed

‎index.htm‎

Lines changed: 383 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,383 @@
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>🚀 DeepSeek Admin - The Modern Database Tool</title>
7+
<style>
8+
:root {
9+
--primary-blue: #5686FE;
10+
--dark-bg: #0a0a0a;
11+
--light-bg: #f8fafc;
12+
--card-dark: #1a1a1a;
13+
--card-light: #ffffff;
14+
}
15+
16+
* { margin: 0; padding: 0; box-sizing: border-box; }
17+
18+
body {
19+
font-family: system-ui, -apple-system, sans-serif;
20+
background: var(--dark-bg);
21+
color: white;
22+
line-height: 1.6;
23+
min-height: 100vh;
24+
}
25+
26+
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
27+
28+
/* Header */
29+
.hero {
30+
text-align: center;
31+
padding: 6rem 1rem 4rem;
32+
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
33+
border-bottom: 1px solid #2a2a2a;
34+
}
35+
36+
.logo {
37+
font-size: 4rem;
38+
font-weight: 800;
39+
background: linear-gradient(90deg, #5686FE, #764ba2);
40+
-webkit-background-clip: text;
41+
-webkit-text-fill-color: transparent;
42+
margin-bottom: 1rem;
43+
}
44+
45+
.tagline {
46+
font-size: 1.5rem;
47+
color: #a0a0a0;
48+
margin-bottom: 3rem;
49+
max-width: 800px;
50+
margin-left: auto;
51+
margin-right: auto;
52+
}
53+
54+
/* Buttons */
55+
.cta-buttons {
56+
display: flex;
57+
gap: 1rem;
58+
justify-content: center;
59+
flex-wrap: wrap;
60+
margin: 3rem 0;
61+
}
62+
63+
.btn {
64+
padding: 1rem 2rem;
65+
border-radius: 12px;
66+
text-decoration: none;
67+
font-weight: 600;
68+
font-size: 1.1rem;
69+
transition: all 0.3s ease;
70+
display: inline-flex;
71+
align-items: center;
72+
gap: 0.5rem;
73+
}
74+
75+
.btn-primary {
76+
background: var(--primary-blue);
77+
color: white;
78+
border: 2px solid var(--primary-blue);
79+
}
80+
81+
.btn-primary:hover {
82+
background: transparent;
83+
transform: translateY(-2px);
84+
box-shadow: 0 10px 25px rgba(86, 134, 254, 0.3);
85+
}
86+
87+
.btn-secondary {
88+
background: transparent;
89+
color: white;
90+
border: 2px solid #2a2a2a;
91+
}
92+
93+
.btn-secondary:hover {
94+
border-color: var(--primary-blue);
95+
background: rgba(86, 134, 254, 0.1);
96+
}
97+
98+
/* Features */
99+
.features {
100+
padding: 5rem 0;
101+
}
102+
103+
.section-title {
104+
text-align: center;
105+
font-size: 2.5rem;
106+
margin-bottom: 3rem;
107+
color: white;
108+
}
109+
110+
.features-grid {
111+
display: grid;
112+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
113+
gap: 2rem;
114+
margin-top: 3rem;
115+
}
116+
117+
.feature-card {
118+
background: var(--card-dark);
119+
border: 1px solid #2a2a2a;
120+
border-radius: 16px;
121+
padding: 2rem;
122+
transition: all 0.3s ease;
123+
}
124+
125+
.feature-card:hover {
126+
border-color: var(--primary-blue);
127+
transform: translateY(-5px);
128+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
129+
}
130+
131+
.feature-icon {
132+
font-size: 2.5rem;
133+
margin-bottom: 1.5rem;
134+
color: var(--primary-blue);
135+
}
136+
137+
.feature-card h3 {
138+
font-size: 1.5rem;
139+
margin-bottom: 1rem;
140+
color: white;
141+
}
142+
143+
/* Demo */
144+
.demo {
145+
padding: 5rem 0;
146+
background: #111111;
147+
text-align: center;
148+
}
149+
150+
.demo-box {
151+
background: var(--card-dark);
152+
border: 1px solid #2a2a2a;
153+
border-radius: 16px;
154+
padding: 3rem;
155+
margin-top: 2rem;
156+
max-width: 800px;
157+
margin-left: auto;
158+
margin-right: auto;
159+
}
160+
161+
/* Footer */
162+
.footer {
163+
padding: 3rem 0;
164+
border-top: 1px solid #2a2a2a;
165+
text-align: center;
166+
color: #666;
167+
}
168+
169+
.donation {
170+
background: rgba(86, 134, 254, 0.1);
171+
border: 1px solid rgba(86, 134, 254, 0.3);
172+
border-radius: 12px;
173+
padding: 2rem;
174+
margin: 3rem auto;
175+
max-width: 600px;
176+
}
177+
178+
@media (max-width: 768px) {
179+
.logo { font-size: 3rem; }
180+
.section-title { font-size: 2rem; }
181+
.cta-buttons { flex-direction: column; align-items: center; }
182+
.btn { width: 100%; max-width: 300px; justify-content: center; }
183+
}
184+
</style>
185+
</head>
186+
<body>
187+
<!-- Hero Section -->
188+
<section class="hero">
189+
<div class="container">
190+
<h1 class="logo">DeepSeek Admin</h1>
191+
<p class="tagline">
192+
The revolutionary database administration tool that finally replaces phpMyAdmin.
193+
Modern, fast, and actually pleasant to use.
194+
</p>
195+
196+
<div class="cta-buttons">
197+
<a href="https://deepseek.iohub.pro" class="btn btn-primary">
198+
🔥 Live Demo
199+
</a>
200+
<a href="https://github.com/deepseekadmin/deepseekadmin" class="btn btn-secondary">
201+
⭐ Star on GitHub
202+
</a>
203+
<a href="#download" class="btn btn-secondary">
204+
⬇️ Download v0.1.0
205+
</a>
206+
</div>
207+
</div>
208+
</section>
209+
210+
<!-- Features Section -->
211+
<section class="features" id="features">
212+
<div class="container">
213+
<h2 class="section-title">Why It's Better</h2>
214+
215+
<div class="features-grid">
216+
<div class="feature-card">
217+
<div class="feature-icon">⚡</div>
218+
<h3>Modern UI</h3>
219+
<p>No more interfaces from 1999. Clean, dark-themed design that's actually pleasant to look at and use all day.</p>
220+
</div>
221+
222+
<div class="feature-card">
223+
<div class="feature-icon">🔧</div>
224+
<h3>Multi-Database</h3>
225+
<p>MySQL, PostgreSQL (with Vector extension support), SQLite – all in one unified, intuitive interface.</p>
226+
</div>
227+
228+
<div class="feature-card">
229+
<div class="feature-icon">🚀</div>
230+
<h3>Blazing Fast</h3>
231+
<p>Optimized performance with PWA capabilities. Work offline, install as a native app on any device.</p>
232+
</div>
233+
234+
<div class="feature-card">
235+
<div class="feature-icon">⌨️</div>
236+
<h3>Keyboard First</h3>
237+
<p>Designed for power users. Full keyboard shortcuts, quick search, and efficient workflows.</p>
238+
</div>
239+
240+
<div class="feature-card">
241+
<div class="feature-icon">🔄</div>
242+
<h3>Inline Editing</h3>
243+
<p>Edit data directly in tables like Excel. Bulk operations, smart filters, and real-time previews.</p>
244+
</div>
245+
246+
<div class="feature-card">
247+
<div class="feature-icon">🔒</div>
248+
<h3>Secure & Private</h3>
249+
<p>No telemetry, no data collection. Your database connections stay on your machine. Session encryption.</p>
250+
</div>
251+
</div>
252+
</div>
253+
</section>
254+
255+
<!-- Demo Section -->
256+
<section class="demo" id="demo">
257+
<div class="container">
258+
<h2 class="section-title">Try It Yourself</h2>
259+
<p style="font-size: 1.2rem; color: #a0a0a0; margin-bottom: 2rem;">
260+
Experience the future of database administration
261+
</p>
262+
263+
<div class="demo-box">
264+
<h3 style="font-size: 1.8rem; margin-bottom: 1.5rem; color: white;">🚀 Instant Online Demo</h3>
265+
<p style="margin-bottom: 2rem; color: #a0a0a0;">
266+
No installation required. Test all features with our live demo database.
267+
</p>
268+
<a href="https://deepseek.iohub.pro" class="btn btn-primary" style="font-size: 1.2rem; padding: 1rem 3rem;">
269+
Launch Live Demo
270+
</a>
271+
</div>
272+
</div>
273+
</section>
274+
275+
<!-- Download Section -->
276+
<section class="features" id="download">
277+
<div class="container">
278+
<h2 class="section-title">Get Started</h2>
279+
280+
<div class="features-grid">
281+
<div class="feature-card" style="text-align: center;">
282+
<div class="feature-icon">📦</div>
283+
<h3>One-Click Install</h3>
284+
<p style="margin-bottom: 1.5rem;">Extract and run. No dependencies, no complicated setup.</p>
285+
<a href="#" class="btn btn-secondary" style="width: auto; padding: 0.75rem 1.5rem;">
286+
Download ZIP
287+
</a>
288+
</div>
289+
290+
<div class="feature-card" style="text-align: center;">
291+
<div class="feature-icon">🐙</div>
292+
<h3>GitHub Repository</h3>
293+
<p style="margin-bottom: 1.5rem;">Clone the repo, contribute, or create issues. Fully open source.</p>
294+
<a href="https://github.com/deepseekadmin/deepseekadmin" class="btn btn-secondary" style="width: auto; padding: 0.75rem 1.5rem;">
295+
View on GitHub
296+
</a>
297+
</div>
298+
</div>
299+
</div>
300+
</section>
301+
302+
<!-- Donation Section -->
303+
<section class="features">
304+
<div class="container">
305+
<div class="donation">
306+
<h2 style="color: white; margin-bottom: 1rem;">❤️ Support the Project</h2>
307+
<p style="color: #a0a0a0; margin-bottom: 1.5rem;">
308+
DeepSeek Admin is and will always be 100% FREE. No subscriptions, no paywalls, no bullshit.
309+
If this tool saves you time or makes your life easier, consider supporting its development.
310+
</p>
311+
<div style="background: rgba(0,0,0,0.3); padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0;">
312+
<h3 style="color: var(--primary-blue); margin-bottom: 1rem;">💰 Direct Donation</h3>
313+
<p style="margin-bottom: 1rem;">
314+
<a href="https://pay.cloudtips.ru/p/74d49304" style="color: white; text-decoration: underline;">
315+
https://pay.cloudtips.ru/p/74d49304
316+
</a>
317+
</p>
318+
<p style="font-size: 0.9rem; color: #888;">
319+
Every donation = more features, less bugs, happier developers!
320+
</p>
321+
</div>
322+
</div>
323+
</div>
324+
</section>
325+
326+
<!-- Footer -->
327+
<footer class="footer">
328+
<div class="container">
329+
<p>
330+
<strong>DeepSeek Admin</strong> · Made with ❤️ by Stas Doroshenko & DeepSeek AI ·
331+
<a href="https://github.com/deepseekadmin/deepseekadmin/blob/main/LICENSE" style="color: #5686FE;">
332+
GNU GPL v2 License
333+
</a>
334+
</p>
335+
<p style="margin-top: 1rem; font-size: 0.9rem;">
336+
© 2024 DeepSeek Admin Project · This is the future of database tools.
337+
</p>
338+
</div>
339+
</footer>
340+
341+
<script>
342+
// Smooth scrolling for anchor links
343+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
344+
anchor.addEventListener('click', function (e) {
345+
e.preventDefault();
346+
const targetId = this.getAttribute('href');
347+
if(targetId === '#') return;
348+
349+
const targetElement = document.querySelector(targetId);
350+
if(targetElement) {
351+
window.scrollTo({
352+
top: targetElement.offsetTop - 80,
353+
behavior: 'smooth'
354+
});
355+
}
356+
});
357+
});
358+
359+
// Add subtle animation to feature cards on scroll
360+
const observerOptions = {
361+
threshold: 0.1,
362+
rootMargin: '0px 0px -50px 0px'
363+
};
364+
365+
const observer = new IntersectionObserver((entries) => {
366+
entries.forEach(entry => {
367+
if(entry.isIntersecting) {
368+
entry.target.style.opacity = '1';
369+
entry.target.style.transform = 'translateY(0)';
370+
}
371+
});
372+
}, observerOptions);
373+
374+
// Initialize all feature cards with fade-in effect
375+
document.querySelectorAll('.feature-card').forEach(card => {
376+
card.style.opacity = '0';
377+
card.style.transform = 'translateY(20px)';
378+
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
379+
observer.observe(card);
380+
});
381+
</script>
382+
</body>
383+
</html>

0 commit comments

Comments
 (0)