neptunism12/githubbub-voyager
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>GitHubbub Voyager</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>10 <style>11 .github-card:hover {12 transform: translateY(-5px);13 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);14 }15 ::-webkit-scrollbar {16 width: 8px;17 }18 ::-webkit-scrollbar-track {19 background: #1a202c;20 }21 ::-webkit-scrollbar-thumb {22 background: #4a5568;23 border-radius: 4px;24 }25 </style>26</head>27<body class="bg-gray-900 text-gray-100 min-h-screen">28 <div id="vanta-bg" class="fixed inset-0 -z-10"></div>29 30 <header class="relative z-10">31 <nav class="container mx-auto px-6 py-4">32 <div class="flex justify-between items-center">33 <div class="flex items-center space-x-2">34 <i data-feather="github" class="w-8 h-8 text-purple-400"></i>35 <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">36 GitHubbub Voyager37 </h1>38 </div>39 <div class="flex space-x-6">40 <a href="#" class="hover:text-purple-400 transition">Dashboard</a>41 <a href="#" class="hover:text-purple-400 transition">Repositories</a>42 <a href="#" class="hover:text-purple-400 transition">Profile</a>43 </div>44 </div>45 </nav>46 </header>47 48 <main class="container mx-auto px-6 py-12 relative z-10">49 <section class="text-center mb-16">50 <h2 class="text-4xl md:text-5xl font-bold mb-6">Explore Your GitHub Universe</h2>51 <p class="text-xl text-gray-300 max-w-2xl mx-auto">52 A beautiful dashboard to visualize and manage your GitHub repositories with cosmic elegance.53 </p>54 <div class="mt-8">55 <input 56 type="text" 57 placeholder="Enter GitHub username..."58 class="px-6 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 w-full max-w-md text-white"59 >60 <button class="mt-4 px-8 py-3 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg font-medium hover:opacity-90 transition">61 Explore Repositories62 </button>63 </div>64 </section>65 66 <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">67 <!-- Repository Card 1 -->68 <div class="github-card bg-gray-800 rounded-xl p-6 transition duration-300">69 <div class="flex items-center mb-4">70 <i data-feather="folder" class="w-6 h-6 text-purple-400 mr-2"></i>71 <h3 class="text-xl font-semibold">Awesome Project</h3>72 </div>73 <p class="text-gray-400 mb-4">An amazing project that does incredible things with JavaScript and AI.</p>74 <div class="flex justify-between text-sm text-gray-500">75 <span class="flex items-center"><i data-feather="star" class="w-4 h-4 mr-1"></i> 1.2k</span>76 <span class="flex items-center"><i data-feather="git-branch" class="w-4 h-4 mr-1"></i> 32</span>77 <span class="flex items-center"><i data-feather="clock" class="w-4 h-4 mr-1"></i> 3 days ago</span>78 </div>79 </div>80 81 <!-- Repository Card 2 -->82 <div class="github-card bg-gray-800 rounded-xl p-6 transition duration-300">83 <div class="flex items-center mb-4">84 <i data-feather="folder" class="w-6 h-6 text-blue-400 mr-2"></i>85 <h3 class="text-xl font-semibold">UI Components</h3>86 </div>87 <p class="text-gray-400 mb-4">A collection of reusable React components for your next project.</p>88 <div class="flex justify-between text-sm text-gray-500">89 <span class="flex items-center"><i data-feather="star" class="w-4 h-4 mr-1"></i> 856</span>90 <span class="flex items-center"><i data-feather="git-branch" class="w-4 h-4 mr-1"></i> 18</span>91 <span class="flex items-center"><i data-feather="clock" class="w-4 h-4 mr-1"></i> 1 week ago</span>92 </div>93 </div>94 95 <!-- Repository Card 3 -->96 <div class="github-card bg-gray-800 rounded-xl p-6 transition duration-300">97 <div class="flex items-center mb-4">98 <i data-feather="folder" class="w-6 h-6 text-green-400 mr-2"></i>99 <h3 class="text-xl font-semibold">API Server</h3>100 </div>101 <p class="text-gray-400 mb-4">Node.js backend service with Express and MongoDB integration.</p>102 <div class="flex justify-between text-sm text-gray-500">103 <span class="flex items-center"><i data-feather="star" class="w-4 h-4 mr-1"></i> 542</span>104 <span class="flex items-center"><i data-feather="git-branch" class="w-4 h-4 mr-1"></i> 12</span>105 <span class="flex items-center"><i data-feather="clock" class="w-4 h-4 mr-1"></i> 2 days ago</span>106 </div>107 </div>108 </section>109 110 <section class="mt-16">111 <h3 class="text-2xl font-bold mb-6 flex items-center">112 <i data-feather="activity" class="w-6 h-6 mr-2 text-pink-500"></i>113 Repository Activity114 </h3>115 <div class="bg-gray-800 rounded-xl p-6">116 <div class="h-64">117 <!-- This would be replaced with a chart in a real implementation -->118 <div class="flex items-center justify-center h-full text-gray-500">119 <p>Commit activity chart would appear here</p>120 </div>121 </div>122 </div>123 </section>124 </main>125 126 <footer class="bg-gray-800 bg-opacity-50 mt-16 py-8 relative z-10">127 <div class="container mx-auto px-6">128 <div class="flex flex-col md:flex-row justify-between items-center">129 <div class="flex items-center space-x-2 mb-4 md:mb-0">130 <i data-feather="github" class="w-6 h-6 text-purple-400"></i>131 <span class="text-lg">GitHubbub Voyager</span>132 </div>133 <div class="flex space-x-6">134 <a href="#" class="hover:text-purple-400 transition">About</a>135 <a href="#" class="hover:text-purple-400 transition">API</a>136 <a href="#" class="hover:text-purple-400 transition">Privacy</a>137 <a href="#" class="hover:text-purple-400 transition">Terms</a>138 </div>139 </div>140 <div class="mt-6 text-center md:text-left text-gray-500 text-sm">141 © 2023 GitHubbub Voyager. Not affiliated with GitHub.142 </div>143 </div>144 </footer>145 146 <script>147 // Initialize Vanta.js background148 VANTA.NET({149 el: "#vanta-bg",150 mouseControls: true,151 touchControls: true,152 gyroControls: false,153 minHeight: 200.00,154 minWidth: 200.00,155 scale: 1.00,156 scaleMobile: 1.00,157 color: 0x6b46c1,158 backgroundColor: 0x111827,159 points: 12.00,160 maxDistance: 22.00,161 spacing: 18.00162 });163 164 // Initialize feather icons165 feather.replace();166 </script>167</body>168</html>169