ProjectVerse/index.html at main · debug-node/ProjectVerse · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>ProjectVerse - Interactive Coding Playground</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <script src="https://cdn.tailwindcss.com"></script>

  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">

  <link rel="stylesheet" href="style.css">
</head>

<body class="bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 relative overflow-x-hidden font-[Outfit]">
  <canvas id="particle-canvas" class="fixed inset-0 pointer-events-none z-0"></canvas>

  <div class="min-h-screen flex flex-col relative z-10">
    <div class="flex-1">
      <header class="relative overflow-hidden pt-12 sm:pt-20 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div class="relative z-10">
            <h1 class="text-5xl sm:text-7xl font-extrabold text-white mb-6 inline-flex items-center gap-3 justify-center flex-wrap tracking-tight font-[Space+Grotesk]">
              <span class="text-white">Project</span>
              <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 animate-gradient">
                Verse
              </span>
            </h1>

            <p class="text-lg sm:text-2xl text-slate-300 mb-8 h-8 font-light">
              <span class="typing-text text-white/90 font-medium"></span><span class="cursor text-pink-400 animate-pulse">|</span>
            </p>

            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <a href="https://github.com/debug-node/ProjectVerse" target="_blank"
                class="group relative px-7 py-3.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold rounded-full transform transition-all duration-300 hover:scale-105 [transform:translateZ(0)]">
                <span class="relative z-10 flex items-center gap-2 text-sm uppercase tracking-wider">
                  <i class="fab fa-github text-base"></i>
                  GitHub Repository
                </span>
                <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 rounded-full"></div>
              </a>

              <a href="#categories-section"
                class="px-7 py-3.5 border-2 border-purple-400/50 text-purple-300 font-bold rounded-full hover:bg-purple-400 hover:text-white hover:border-purple-400 transition-all duration-300 hover:scale-105 [transform:translateZ(0)] text-sm uppercase tracking-wider">
                Explore Playground
              </a>
            </div>
          </div>
        </div>
      </header>

      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 relative z-30">
        <div class="relative max-w-2xl mx-auto">
          <input type="text" id="search" placeholder="🔍 Search 50+ live projects, utilities, games..." oninput="handleGlobalSearch()"
            class="w-full px-6 py-4 bg-white/5 backdrop-blur-xl border border-purple-400/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300 shadow-xl focus:shadow-purple-500/20" />

          <div id="search-results" class="hidden absolute top-full left-0 right-0 mt-3 max-h-96 overflow-y-auto bg-slate-950/95 border border-purple-500/30 rounded-2xl shadow-2xl backdrop-blur-xl p-2 z-50 custom-scrollbar space-y-1">
          </div>
        </div>
      </div>

      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
          <div class="bg-white/5 backdrop-blur-lg border border-purple-500/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors duration-300">
            <div id="stat-projects-count" class="text-3xl sm:text-4xl font-extrabold text-purple-400 mb-1 font-mono tracking-tight" data-target="0">0</div>
            <div class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Web Projects</div>
          </div>
          <div class="bg-white/5 backdrop-blur-lg border border-purple-500/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors duration-300">
            <div class="text-3xl sm:text-4xl font-extrabold text-blue-400 mb-1 font-mono tracking-tight" data-target="4">0</div>
            <div class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Categories</div>
          </div>
          <div class="bg-white/5 backdrop-blur-lg border border-purple-500/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors duration-300">
            <div class="text-3xl sm:text-4xl font-extrabold text-pink-400 mb-1 font-mono tracking-tight" data-target="100">0</div>
            <div class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">% Client-Side</div>
          </div>
          <div class="bg-white/5 backdrop-blur-lg border border-purple-500/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors duration-300">
            <div class="text-3xl sm:text-4xl font-extrabold text-emerald-400 mb-1 font-mono tracking-tight" data-target="2026">0</div>
            <div class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Release Year</div>
          </div>
        </div>
      </div>

      <div id="favorites-section" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16 hidden relative z-10">
        <h2 class="text-3xl sm:text-4xl font-bold text-center text-white mb-8 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-orange-500 font-[Space+Grotesk]">
          ⭐ Starred Projects
        </h2>
        <div id="favorites-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
        </div>
      </div>

      <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20 relative z-10" id="categories-section">
        <h2 class="text-3xl sm:text-4xl font-bold text-center text-white mb-8 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400 font-[Space+Grotesk]">
          📂 Project Categories
        </h2>

        <div id="categories" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 auto-rows-fr"></div>
      </section>

      <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20 relative z-10">
        <h2 class="text-3xl sm:text-4xl font-bold text-center text-white mb-8 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400 font-[Space+Grotesk]">
          💻 Core Technologies
        </h2>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
          <div class="group glowing-card bg-white/5 backdrop-blur-lg border border-purple-400/20 rounded-2xl p-6 text-center transform transition-all duration-300 hover:scale-110 hover:bg-white/10 hover:border-orange-400/50 hover:shadow-xl hover:shadow-orange-500/30">
            <i class="fab fa-html5 text-5xl text-orange-400 mb-4 group-hover:scale-125 transition-transform duration-300"></i>
            <span class="text-white font-semibold block">HTML5</span>
          </div>

          <div class="group glowing-card bg-white/5 backdrop-blur-lg border border-purple-400/20 rounded-2xl p-6 text-center transform transition-all duration-300 hover:scale-110 hover:bg-white/10 hover:border-blue-400/50 hover:shadow-xl hover:shadow-blue-500/30">
            <i class="fab fa-css3-alt text-5xl text-blue-400 mb-4 group-hover:scale-125 transition-transform duration-300"></i>
            <span class="text-white font-semibold block">CSS3</span>
          </div>

          <div class="group glowing-card bg-white/5 backdrop-blur-lg border border-purple-400/20 rounded-2xl p-6 text-center transform transition-all duration-300 hover:scale-110 hover:bg-white/10 hover:border-yellow-400/50 hover:shadow-xl hover:shadow-yellow-500/30">
            <i class="fab fa-js text-5xl text-yellow-400 mb-4 group-hover:scale-125 transition-transform duration-300"></i>
            <span class="text-white font-semibold block">JavaScript</span>
          </div>

          <div class="group glowing-card bg-white/5 backdrop-blur-lg border border-purple-400/20 rounded-2xl p-6 text-center transform transition-all duration-300 hover:scale-110 hover:bg-white/10 hover:border-cyan-400/50 hover:shadow-xl hover:shadow-cyan-500/30">
            <i class="fab fa-css3 text-5xl text-cyan-400 mb-4 group-hover:scale-125 transition-transform duration-300"></i>
            <span class="text-white font-semibold block">Tailwind CSS</span>
          </div>

          <div class="group glowing-card bg-white/5 backdrop-blur-lg border border-purple-400/20 rounded-2xl p-6 text-center transform transition-all duration-300 hover:scale-110 hover:bg-white/10 hover:border-green-400/50 hover:shadow-xl hover:shadow-green-500/30">
            <i class="fab fa-node text-5xl text-green-400 mb-4 group-hover:scale-125 transition-transform duration-300"></i>
            <span class="text-white font-semibold block">Node.js</span>
          </div>

          <div class="group glowing-card bg-white/5 backdrop-blur-lg border border-purple-400/20 rounded-2xl p-6 text-center transform transition-all duration-300 hover:scale-110 hover:bg-white/10 hover:border-red-400/50 hover:shadow-xl hover:shadow-red-500/30">
            <i class="fab fa-git-alt text-5xl text-red-400 mb-4 group-hover:scale-125 transition-transform duration-300"></i>
            <span class="text-white font-semibold block">Git</span>
          </div>
        </div>
      </section>
    </div>

    <footer class="bg-black/30 backdrop-blur-lg border-t border-purple-400/20 py-6 mt-16 relative z-10">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
          <p class="text-gray-300 text-center sm:text-left text-base">
            © 2026 <span class="text-purple-500 font-semibold">ProjectVerse</span> | Open-Source Project Hub
          </p>

          <div class="flex gap-4">
            <a href="https://github.com/debug-node/ProjectVerse" target="_blank"
              class="text-gray-400 hover:text-white transform hover:scale-125 transition-all duration-300 hover:drop-shadow-[0_0_8px_rgba(147,51,234,0.7)]"
              aria-label="GitHub">
              <i class="fa-brands fa-github text-2xl"></i>
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>

  <script src="script.js"></script>
</body>

</html>