Digital_Services.HUB/index.html at main · TMHSDigital/Digital_Services.HUB · GitHub

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
<!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="css/base/reset.css">
    <link rel="stylesheet" href="css/base/layout.css">
    <link rel="stylesheet" href="css/themes/variables.css">

    <!-- Common UI Components -->
    <link rel="stylesheet" href="css/components/ui.css">

    <!-- Utility styles -->
    <link rel="stylesheet" href="css/utils/utilities.css">
    <link rel="stylesheet" href="css/utils/animations.css">

    <!-- Component styles -->
    <link rel="stylesheet" href="css/components/alerts.css">
    <link rel="stylesheet" href="css/components/cards.css">

    <!-- Main styles -->
    <link rel="stylesheet" href="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 injected by js/components/layout.js -->

    <!-- 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 injected by js/components/layout.js -->

    <!-- Load scripts -->
    <script src="js/utils/app.js" type="module"></script>
    <script src="js/features/tools-manager.js" type="module"></script>
</body>
</html>