-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
186 lines (173 loc) · 8.14 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Services Hub - Free Web Tools for Digital Tasks</title>
<meta name="description" content="Access powerful, free web-based tools for everyday digital tasks. Text-to-speech, image resizing, color palettes, ASCII art, QR codes, and more - all in one place.">
<!-- Base and Theme styles -->
<link rel="stylesheet" href="/Digital_Services.HUB/css/base/reset.css">
<link rel="stylesheet" href="/Digital_Services.HUB/css/base/layout.css">
<link rel="stylesheet" href="/Digital_Services.HUB/css/themes/variables.css">
<!-- Common UI Components -->
<link rel="stylesheet" href="/Digital_Services.HUB/css/components/ui.css">
<!-- Utility styles -->
<link rel="stylesheet" href="/Digital_Services.HUB/css/utils/utilities.css">
<link rel="stylesheet" href="/Digital_Services.HUB/css/utils/animations.css">
<!-- Component styles -->
<link rel="stylesheet" href="/Digital_Services.HUB/css/components/alerts.css">
<link rel="stylesheet" href="/Digital_Services.HUB/css/components/cards.css">
<!-- Main styles -->
<link rel="stylesheet" href="/Digital_Services.HUB/css/styles.css">
<!-- External fonts and icons -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Navigation -->
<nav id="main-nav" class="nav-container">
<div class="logo">
<a href="/Digital_Services.HUB/">
<h1>Digital Services Hub</h1>
</a>
</div>
<button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
<i class="fas fa-bars"></i>
</button>
<div class="nav-links">
<a href="#tools" class="nav-link">Tools</a>
<a href="#features" class="nav-link">Features</a>
<a href="#about" class="nav-link">About</a>
<a href="https://github.com/TMHDigital/Digital_Services.HUB" class="nav-link" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i>
</a>
</div>
<div class="theme-toggle">
<button id="theme-button" aria-label="Toggle theme">
<i class="fas fa-moon"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="hero-content">
<h2 class="hero-title">Digital Services Hub</h2>
<p class="hero-subtitle">Powerful Web Tools at Your Fingertips</p>
<div class="hero-cta">
<a href="#tools" class="cta-button primary">Explore Tools</a>
<a href="https://github.com/TMHDigital/Digital_Services.HUB" class="cta-button secondary" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i> View on GitHub
</a>
</div>
</div>
<div class="hero-features">
<div class="feature-tag">
<i class="fas fa-bolt"></i> Fast & Free
</div>
<div class="feature-tag">
<i class="fas fa-shield-alt"></i> Secure
</div>
<div class="feature-tag">
<i class="fas fa-universal-access"></i> Accessible
</div>
</div>
</header>
<main class="container">
<!-- Tools Grid -->
<section id="tools" class="tools-section">
<h2 class="section-title">Our Tools</h2>
<p class="section-subtitle">Everything you need, all in one place</p>
<div id="tools-grid" class="tools-grid">
<!-- Tools will be dynamically inserted here -->
</div>
</section>
<!-- Features Section -->
<section id="features" class="features-section">
<h2 class="section-title">Why Choose Us</h2>
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-bolt"></i>
<h3>Fast & Efficient</h3>
<p>Lightning-fast tools optimized for performance, with no delays or waiting.</p>
</div>
<div class="feature-card">
<i class="fas fa-shield-alt"></i>
<h3>100% Secure</h3>
<p>Your data stays in your browser. No uploads, no tracking, complete privacy.</p>
</div>
<div class="feature-card">
<i class="fas fa-universal-access"></i>
<h3>Accessible</h3>
<p>Built with accessibility in mind, ensuring everyone can use our tools.</p>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<h2 class="section-title">About Us</h2>
<div class="about-content">
<p>Digital Services Hub is dedicated to providing free, accessible, and powerful web-based tools for everyday digital tasks. We believe that quality digital tools should be available to everyone, regardless of technical expertise or budget.</p>
<div class="about-stats">
<div class="stat-item">
<span class="stat-number">10+</span>
<span class="stat-label">Tools</span>
</div>
<div class="stat-item">
<span class="stat-number">100%</span>
<span class="stat-label">Free</span>
</div>
<div class="stat-item">
<span class="stat-number">24/7</span>
<span class="stat-label">Available</span>
</div>
</div>
</div>
</section>
<!-- Contribute Section -->
<section class="contribute-section">
<div class="contribute-content">
<h2 class="section-title">Contribute</h2>
<p>Join our open-source community and help make digital tools accessible to everyone.</p>
<div class="contribute-buttons">
<a href="https://github.com/TMHDigital/Digital_Services.HUB" class="contribute-button github" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i> View Repository
</a>
<a href="https://github.com/TMHDigital/Digital_Services.HUB/issues" class="contribute-button issues" target="_blank" rel="noopener noreferrer">
<i class="fas fa-bug"></i> Report Issues
</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h4>Digital Services Hub</h4>
<p>Free web-based tools for everyday digital tasks.</p>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#tools">Tools</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
<li><a href="https://github.com/TMHDigital/Digital_Services.HUB">GitHub</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Legal</h4>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Digital Services Hub. All rights reserved.</p>
</div>
</footer>
<!-- Load scripts -->
<script src="/Digital_Services.HUB/js/utils/app.js" type="module"></script>
<script src="/Digital_Services.HUB/js/features/tools-manager.js" type="module"></script>
</body>
</html>