dev-codelist.net/index.html at main · ARD0NIZ/dev-codelist.net · 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
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
---
---
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="fw9PADWeIvXJFa7KoiLPCYoPUwU1mgy6DcX5-3a5XCs" />
    <title>dev-codelist.net | Welcome</title>

    <!-- Open Graph / Discord / WhatsApp -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="dev-codelist.net | Welcome">
    <meta property="og:description" content="A modern code showcase platform with beautiful syntax highlighting and interactive features.">
    <meta property="og:image" content="/assets/media/Logo.png">
    <meta property="og:site_name" content="dev-codelist.net">
    <meta name="theme-color" content="#5024F4">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="dev-codelist.net | Welcome">
    <meta name="twitter:description" content="A modern code showcase platform with beautiful syntax highlighting and interactive features.">
    <meta name="twitter:image" content="/assets/media/Logo.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/assets/media/Logo.png">

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/style.css">
    <script src="/assets/js/live-dev.js"></script>
</head>
<body class="selection:bg-[#5024F4]/30">

    <!-- Header -->
    {% include header.html %}

    <!-- Hero Section -->
    <main class="max-w-7xl mx-auto px-6 pt-32 pb-24">

        <!-- Hero -->
        <section class="min-h-[70vh] flex flex-col justify-center items-center text-center animate-enter">
            <div class="flex gap-3 mb-6">
                <span class="tag bg-[#5024F4]/10 text-[#7B4FFF] border border-[#5024F4]/20">Code Showcase</span>
                <span class="tag bg-[#7B4FFF]/10 text-[#9D7FFF] border border-[#7B4FFF]/20">Templates</span>
            </div>

            <h1 class="text-6xl md:text-8xl font-bold mb-6 tracking-tight text-white text-glow">
                dev-codelist.net
            </h1>

            <p class="text-xl md:text-2xl text-gray-400 leading-relaxed max-w-3xl mb-12">
                A modern code showcase platform with beautiful syntax highlighting and interactive features.
            </p>

            <div class="flex gap-4">
                <a href="/codes/" class="bg-gradient-to-r from-[#5024F4] to-[#7B4FFF] text-white px-8 py-4 rounded-full hover:shadow-lg hover:shadow-[#5024F4]/50 transition-all font-semibold text-lg">
                    Browse Codes
                </a>
                <a href="#features" class="bg-white/5 text-white px-8 py-4 rounded-full hover:bg-white/10 transition-colors font-semibold text-lg border border-white/10">
                    Learn More
                </a>
            </div>
        </section>

        <!-- Recently Added Section -->
        <section class="pb-16 animate-enter">
            <div class="flex items-center justify-between mb-8">
                <div class="flex items-center gap-3">
                    <h2 class="text-2xl font-bold text-white">Recently Added</h2>
                    <span class="tag bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">New</span>
                </div>
                <a href="/codes/" class="text-sm text-[#7B4FFF] hover:text-[#9D7FFF] transition-colors font-medium">View all →</a>
            </div>
            <a href="/views/verify-system/" class="glass-panel p-6 flex flex-col md:flex-row items-start md:items-center gap-6 hover:scale-[1.01] transition-transform block">
                <div class="w-16 h-16 bg-gradient-to-br from-[#5024F4] to-[#7B4FFF] rounded-xl flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">V</div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1 flex-wrap">
                        <h3 class="text-xl font-bold text-white">BDFD Verify System</h3>
                        <span class="tag bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">New</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-2">Prefix Command</p>
                    <p class="text-gray-400 text-sm">DM-based 2-step verification system. Generates a 6-digit code, sends it via DM and grants a role upon correct input.</p>
                    <div class="flex flex-wrap gap-2 mt-3">
                        <span class="text-xs bg-[#5024F4]/10 text-[#7B4FFF] px-2 py-1 rounded border border-[#5024F4]/20">BDFD</span>
                        <span class="text-xs bg-[#7B4FFF]/10 text-[#9D7FFF] px-2 py-1 rounded border border-[#7B4FFF]/20">Verification</span>
                    </div>
                </div>
                <svg class="w-5 h-5 text-gray-500 flex-shrink-0 hidden md:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
        </section>

        <!-- Features Section -->
        <section id="features" class="py-24">
            <h2 class="text-4xl md:text-5xl font-bold mb-12 text-center text-white text-glow animate-enter">Features</h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="glass-panel p-8 animate-enter delay-100">
                    <div class="w-12 h-12 bg-gradient-to-br from-[#5024F4] to-[#7B4FFF] rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-white">Syntax Highlighting</h3>
                    <p class="text-gray-400">Beautiful code syntax highlighting with custom color schemes and themes.</p>
                </div>

                <div class="glass-panel p-8 animate-enter delay-200">
                    <div class="w-12 h-12 bg-gradient-to-br from-[#7B4FFF] to-[#9D7FFF] rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-white">Easy Copy</h3>
                    <p class="text-gray-400">One-click code copying with visual feedback and clipboard support.</p>
                </div>

                <div class="glass-panel p-8 animate-enter delay-300">
                    <div class="w-12 h-12 bg-gradient-to-br from-[#6B3FEF] to-[#8B5FFF] rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-white">Responsive Design</h3>
                    <p class="text-gray-400">Perfectly optimized for all devices, from mobile to desktop.</p>
                </div>
            </div>
        </section>

        <!-- About Section -->
        <section id="about" class="py-24">
            <div class="glass-panel p-12 animate-enter">
                <h2 class="text-4xl md:text-5xl font-bold mb-8 text-center text-white text-glow">About</h2>
                <p class="text-xl text-gray-400 leading-relaxed text-center max-w-3xl mx-auto">
                    dev-codelist.net is a modern platform for showcasing code snippets with beautiful syntax highlighting,
                    interactive features, and a sleek dark theme. Built with performance and user experience in mind.
                </p>
            </div>
        </section>

        <!-- Community / Discord Section -->
        <section id="community" class="py-24">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">

                <!-- Left: Copy -->
                <div class="animate-enter">
                    <div class="flex gap-3 mb-6">
                        <span class="tag bg-[#5024F4]/10 text-[#7B4FFF] border border-[#5024F4]/20">Community</span>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-bold mb-6 text-white text-glow">Join Our Discord</h2>
                    <p class="text-xl text-gray-400 leading-relaxed">
                        Be part of our growing community. Add and test your bots, connect with other developers, and stay up-to-date with the latest updates.
                    </p>
                </div>

                <!-- Right: Discord Invite Card -->
                <div class="flex justify-center md:justify-end animate-enter delay-200">
                    <div class="discord-invite">

                        <!-- Banner -->
                        <div class="discord-banner">
                            <div class="discord-server-icon">
                            <img src="/assets/media/Logo.png" alt="Dev Central Guild Icon">
                            </div>
                        </div>

                        <!-- Body -->
                        <div class="discord-body">

                            <!-- Server Name -->
                            <div class="discord-server-name">
                                Dev Central Guild | dev-codelist.net
                                <span class="discord-server-badge">🏠</span>
                            </div>

                            <!-- Stats -->
                            <div class="discord-stats">
                                <span class="stat-online">7 Online</span>
                                <span class="stat-members">23 Members</span>
                            </div>

                            <!-- Est. -->
                            <p class="discord-est">Est. Sep 2025</p>

                            <!-- Collapsible details -->
                            <div class="discord-collapsible" id="discord-details">

                                <!-- Description -->
                                <p class="discord-desc">This is the place, to add your own Bot and test it! ✦ 🪐</p>

                                <!-- Starfield decoration -->
                                <div class="discord-stars" aria-hidden="true">
                                    <!-- stars (dots) -->
                                    <span class="star" style="width:3px;height:3px;top:18%;left:22%"></span>
                                    <span class="star" style="width:2px;height:2px;top:55%;left:40%"></span>
                                    <span class="star" style="width:2px;height:2px;top:30%;left:65%"></span>
                                    <span class="star" style="width:3px;height:3px;top:70%;left:80%"></span>
                                    <span class="star" style="width:2px;height:2px;top:15%;left:85%"></span>
                                    <span class="star" style="width:4px;height:4px;top:60%;left:55%"></span>
                                    <span class="star" style="width:2px;height:2px;top:40%;left:10%"></span>
                                    <span class="star" style="width:3px;height:3px;top:80%;left:28%"></span>
                                    <span class="star" style="width:2px;height:2px;top:25%;left:75%"></span>
                                    <!-- sparkle shapes -->
                                    <span class="sparkle" style="top:35%;left:30%">✦</span>
                                    <span class="sparkle" style="top:58%;left:60%;font-size:11px">✦</span>
                                    <span class="sparkle" style="top:72%;left:72%;font-size:18px;opacity:.35">◇</span>
                                    <!-- emoji decorations -->
                                    <span class="emoji-deco" style="top:5%;left:3%">☄️</span>
                                    <span class="emoji-deco" style="top:30%;left:5%;font-size:22px">🚀</span>
                                    <span class="emoji-deco" style="top:65%;left:18%;font-size:20px">🌍</span>
                                    <span class="emoji-deco" style="top:5%;right:5%;font-size:20px">🛸</span>
                                </div>

                                <!-- Channel badges -->
                                <div class="discord-channels">
                                    <span class="discord-channel-badge">🤖 Add-Bots</span>
                                    <span class="discord-channel-badge">🧐 Test-Bots</span>
                                    <span class="discord-channel-badge">🔒 Private-Tests</span>
                                </div>

                            </div><!-- /collapsible -->

                            <!-- Hide / Show Details toggle -->
                            <button class="discord-details-toggle" id="discord-toggle">Hide Details</button>

                            <!-- Join Button -->
                            <a href="https://discord.gg/5dGWwdHa3e" target="_blank" rel="noopener noreferrer" class="discord-join-btn">
                                Go to Server
                            </a>

                        </div><!-- /discord-body -->
                    </div><!-- /discord-invite -->
                </div>

            </div>
        </section>

    </main>

    <!-- Footer -->
    {% include footer.html %}

    <script>
        document.getElementById('discord-toggle').addEventListener('click', function () {
            var details = document.getElementById('discord-details');
            var isOpen = !details.classList.contains('collapsed');
            details.classList.toggle('collapsed', isOpen);
            this.textContent = isOpen ? 'Show Details' : 'Hide Details';
        });
    </script>

</body>
</html>