chicodripz/shortstack-surfer
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>ShortStack Surfer</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 @keyframes slideIn {12 0% { transform: translateY(50px); opacity: 0; }13 100% { transform: translateY(0); opacity: 1; }14 }15 .video-card {16 animation: slideIn 0.5s ease-out forwards;17 }18 .video-container {19 aspect-ratio: 9/16;20 }21 .progress-bar {22 height: 3px;23 background: rgba(255,255,255,0.2);24 }25 .progress-fill {26 height: 100%;27 background: #fff;28 width: 0%;29 transition: width 0.1s linear;30 }31 </style>32</head>33<body class="bg-black text-white">34 <div class="relative overflow-hidden h-screen">35 <!-- Video Feed -->36 <div class="h-full overflow-y-scroll snap-y snap-mandatory">37 <!-- Video 1 -->38 <div class="h-full w-full snap-start relative video-card">39 <div class="progress-bar absolute top-0 left-0 right-0 z-10">40 <div class="progress-fill"></div>41 </div>42 <div class="video-container bg-gray-900 w-full h-full flex items-center justify-center">43 <video class="w-full h-full object-cover" loop autoplay muted>44 <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-dancing-under-neon-lights-1230-large.mp4" type="video/mp4">45 </video>46 </div>47 <div class="absolute bottom-20 left-4 right-4">48 <div class="mb-4">49 <h2 class="text-xl font-bold mb-1">@dancelover</h2>50 <p class="text-sm">Friday night vibes! 🎶 #dance #nightout</p>51 </div>52 <div class="flex justify-between">53 <div class="flex space-x-3 items-center">54 <div class="w-10 h-10 rounded-full overflow-hidden">55 <img src="http://static.photos/people/200x200/1" class="w-full h-full object-cover">56 </div>57 <button class="bg-white text-black px-4 py-1 rounded-full text-sm font-bold">Follow</button>58 </div>59 <div class="flex space-x-4 items-end">60 <div class="flex flex-col items-center">61 <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">62 <i data-feather="heart" class="text-white"></i>63 </div>64 <span class="text-xs mt-1">24.5K</span>65 </div>66 <div class="flex flex-col items-center">67 <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">68 <i data-feather="message-circle" class="text-white"></i>69 </div>70 <span class="text-xs mt-1">1.3K</span>71 </div>72 <div class="flex flex-col items-center">73 <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">74 <i data-feather="share-2" class="text-white"></i>75 </div>76 <span class="text-xs mt-1">Share</span>77 </div>78 </div>79 </div>80 </div>81 </div>82 83 <!-- Video 2 -->84 <div class="h-full w-full snap-start relative video-card">85 <div class="progress-bar absolute top-0 left-0 right-0 z-10">86 <div class="progress-fill"></div>87 </div>88 <div class="video-container bg-gray-900 w-full h-full flex items-center justify-center">89 <video class="w-full h-full object-cover" loop autoplay muted>90 <source src="https://assets.mixkit.co/videos/preview/mixkit-man-doing-tricks-with-a-skateboard-34550-large.mp4" type="video/mp4">91 </video>92 </div>93 <div class="absolute bottom-20 left-4 right-4">94 <div class="mb-4">95 <h2 class="text-xl font-bold mb-1">@skateordie</h2>96 <p class="text-sm">New trick unlocked! 🛹 #skateboarding</p>97 </div>98 <div class="flex justify-between">99 <div class="flex space-x-3 items-center">100 <div class="w-10 h-10 rounded-full overflow-hidden">101 <img src="http://static.photos/sport/200x200/2" class="w-full h-full object-cover">102 </div>103 <button class="bg-white text-black px-4 py-1 rounded-full text-sm font-bold">Follow</button>104 </div>105 <div class="flex space-x-4 items-end">106 <div class="flex flex-col items-center">107 <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">108 <i data-feather="heart" class="text-white"></i>109 </div>110 <span class="text-xs mt-1">56.2K</span>111 </div>112 <div class="flex flex-col items-center">113 <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">114 <i data-feather="message-circle" class="text-white"></i>115 </div>116 <span class="text-xs mt-1">3.1K</span>117 </div>118 <div class="flex flex-col items-center">119 <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">120 <i data-feather="share-2" class="text-white"></i>121 </div>122 <span class="text-xs mt-1">Share</span>123 </div>124 </div>125 </div>126 </div>127 </div>128 </div>129 130 <!-- Bottom Navigation -->131 <div class="absolute bottom-0 left-0 right-0 bg-black/50 backdrop-blur-sm py-3">132 <div class="flex justify-around">133 <a href="#" class="flex flex-col items-center text-white">134 <i data-feather="home" class="w-6 h-6"></i>135 <span class="text-xs mt-1">Home</span>136 </a>137 <a href="#" class="flex flex-col items-center text-gray-400">138 <i data-feather="search" class="w-6 h-6"></i>139 <span class="text-xs mt-1">Discover</span>140 </a>141 <a href="#" class="flex flex-col items-center text-gray-400">142 <i data-feather="plus-square" class="w-6 h-6"></i>143 <span class="text-xs mt-1">Create</span>144 </a>145 <a href="#" class="flex flex-col items-center text-gray-400">146 <i data-feather="inbox" class="w-6 h-6"></i>147 <span class="text-xs mt-1">Inbox</span>148 </a>149 <a href="#" class="flex flex-col items-center text-gray-400">150 <div class="w-6 h-6 rounded-full overflow-hidden">151 <img src="http://static.photos/people/200x200/3" class="w-full h-full object-cover">152 </div>153 <span class="text-xs mt-1">Me</span>154 </a>155 </div>156 </div>157 </div>158 159 <script>160 feather.replace();161 162 // Simple progress bar animation163 document.querySelectorAll('video').forEach(video => {164 video.addEventListener('timeupdate', function() {165 const progress = (this.currentTime / this.duration) * 100;166 this.closest('.video-card').querySelector('.progress-fill').style.width = progress + '%';167 });168 });169 </script>170</body>171</html>