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>PixelPulse Player</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 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <style>12 @keyframes pulse {13 0% { transform: scale(1); }14 50% { transform: scale(1.05); }15 100% { transform: scale(1); }16 }17 .pulse-animation {18 animation: pulse 2s infinite;19 }20 .video-container {21 aspect-ratio: 9/16;22 }23 </style>24</head>25<body class="bg-gradient-to-br from-gray-900 to-black text-white min-h-screen">26 <div class="container mx-auto px-4 py-8">27 <header class="flex justify-between items-center mb-8">28 <div class="flex items-center space-x-2">29 <i data-feather="video" class="text-pink-500"></i>30 <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500">PixelPulse</h1>31 </div>32 <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">33 <i data-feather="settings"></i>34 </button>35 </header>36 37 <main>38 <div class="max-w-md mx-auto">39 <!-- Video Player Container -->40 <div class="video-container bg-gray-800 rounded-xl overflow-hidden mb-6 relative pulse-animation">41 <div class="absolute inset-0 flex items-center justify-center">42 <div class="w-16 h-16 rounded-full bg-pink-500/30 flex items-center justify-center">43 <i data-feather="play" class="text-pink-500 w-8 h-8 ml-1"></i>44 </div>45 </div>46 </div>47 48 <!-- Video Info -->49 <div class="mb-6">50 <h2 class="text-xl font-bold mb-2">Amazing Short Video</h2>51 <p class="text-gray-400 text-sm">1.2M views • 3 days ago</p>52 </div>53 54 <!-- Action Buttons -->55 <div class="flex justify-between items-center mb-8">56 <button class="flex flex-col items-center space-y-1">57 <div class="p-3 rounded-full bg-gray-800">58 <i data-feather="thumbs-up" class="w-5 h-5"></i>59 </div>60 <span class="text-xs text-gray-400">24.5K</span>61 </button>62 <button class="flex flex-col items-center space-y-1">63 <div class="p-3 rounded-full bg-gray-800">64 <i data-feather="thumbs-down" class="w-5 h-5"></i>65 </div>66 <span class="text-xs text-gray-400">Dislike</span>67 </button>68 <button class="flex flex-col items-center space-y-1">69 <div class="p-3 rounded-full bg-gray-800">70 <i data-feather="message-square" class="w-5 h-5"></i>71 </div>72 <span class="text-xs text-gray-400">1.3K</span>73 </button>74 <button class="flex flex-col items-center space-y-1">75 <div class="p-3 rounded-full bg-gray-800">76 <i data-feather="share-2" class="w-5 h-5"></i>77 </div>78 <span class="text-xs text-gray-400">Share</span>79 </button>80 <button class="flex flex-col items-center space-y-81</body>82</html>