Hugging Face's logo

Spaces:
PrometheusGroup
/
voidscape-noir
Running

App Files Community
voidscape-noir
File size: 5,041 Bytes 
6ce77d4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VoidScape Noir</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        },
                        secondary: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                        }
                    }
                }
            }
        }
    </script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-12">
        <section class="max-w-4xl mx-auto">
            <div class="bg-gray-800 rounded-xl p-8 shadow-2xl border border-gray-700">
                <h1 class="text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500">
                    Welcome to the Void
                </h1>
                <p class="text-gray-300 mb-8 text-lg leading-relaxed">
                    Experience the depth of darkness with our modern interface. Every element is crafted to immerse you in a seamless digital abyss.
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="#" class="px-6 py-3 bg-primary-600 hover:bg-primary-700 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                        Explore the Darkness
                    </a>
                    <a href="#" class="px-6 py-3 border border-gray-600 hover:border-gray-500 rounded-lg font-medium transition-all duration-300 hover:bg-gray-800">
                        Learn More
                    </a>
                </div>
            </div>

            <div class="grid md:grid-cols-3 gap-8 mt-16">
                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition-all duration-300">
                    <div class="w-12 h-12 bg-primary-900 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="moon" class="text-primary-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Dark UI</h3>
                    <p class="text-gray-400">Carefully designed components that respect your eyes in low-light environments.</p>
                </div>
                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-secondary-500 transition-all duration-300">
                    <div class="w-12 h-12 bg-secondary-900 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="cpu" class="text-secondary-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Modern Tech</h3>
                    <p class="text-gray-400">Built with the latest web technologies for a smooth experience.</p>
                </div>
                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-gray-500 transition-all duration-300">
                    <div class="w-12 h-12 bg-gray-700 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="code" class="text-gray-300"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Clean Code</h3>
                    <p class="text-gray-400">Semantic and accessible markup with optimized performance.</p>
                </div>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>