vibecodingtee/comicverse-haven
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>ComicVerse Haven - Your Gateway to Comics</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 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>12 <style>13 .comic-font {14 font-family: 'Bangers', cursive;15 }16 @keyframes float {17 0% { transform: translateY(0px); }18 50% { transform: translateY(-10px); }19 100% { transform: translateY(0px); }20 }21 .floating {22 animation: float 3s ease-in-out infinite;23 }24 .hero-pattern {25 background-color: #e5e7eb;26 background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");27 }28 </style>29</head>30<body class="bg-gray-100">31 <div id="app">32 <!-- Navigation -->33 <nav class="bg-red-600 shadow-lg">34 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">35 <div class="flex justify-between h-16">36 <div class="flex items-center">37 <div class="flex-shrink-0 flex items-center">38 <i data-feather="box" class="text-white h-8 w-8"></i>39 <span class="ml-2 text-white text-xl font-bold comic-font">ComicVerse Haven</span>40 </div>41 </div>42 <div class="hidden md:flex items-center space-x-4">43 <a href="#" class="text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>44 <a href="#" class="text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium">Shop</a>45 <a href="#" class="text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium">Characters</a>46 <a href="#" class="text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium">Events</a>47 <a href="#" class="bg-red-800 text-white px-3 py-2 rounded-md text-sm font-medium flex items-center">48 <i data-feather="shopping-cart" class="mr-1"></i> Cart49 </a>50 </div>51 <div class="-mr-2 flex md:hidden">52 <button class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white focus:outline-none">53 <i data-feather="menu"></i>54 </button>55 </div>56 </div>57 </div>58 </nav>59 60 <!-- Hero Section -->61 <div class="hero-pattern">62 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">63 <div class="md:w-1/2 mb-8 md:mb-0">64 <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 comic-font">Discover Your Next <span class="text-red-600">Comic Adventure</span></h1>65 <p class="text-lg text-gray-700 mb-6">From rare collectibles to beginner-friendly comics, we've got something for every fan!</p>66 <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">67 <a href="#" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium text-center">Shop Now</a>68 <a href="#" class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg font-medium text-center">Explore Characters</a>69 </div>70 </div>71 <div class="md:w-1/2 flex justify-center floating">72 <img src="http://static.photos/technology/640x360/1" alt="Comic books and collectibles" class="rounded-lg shadow-xl h-64 w-auto md:h-96">73 </div>74 </div>75 </div>76 77 <!-- Filters Section -->78 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">79 <div class="bg-white rounded-lg shadow p-6">80 <h2 class="text-2xl font-bold text-gray-900 mb-6 comic-font">Find Your Perfect Comic</h2>81 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">82 <div>83 <label for="search" class="block text-sm font-medium text-gray-700">Search</label>84 <div class="mt-1 relative rounded-md shadow-sm">85 <input type="text" v-model="searchQuery" id="search" class="focus:ring-red-500 focus:border-red-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Batman #1, Spiderman...">86 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">87 <i data-feather="search" class="h-4 w-4 text-gray-400"></i>88 </div>89 </div>90 </div>91 <div>92 <label for="category" class="block text-sm font-medium text-gray-700">Category</label>93 <select v-model="selectedCategory" id="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md">94 <option value="">All Categories</option>95 <option v-for="category in categories" :value="category">{{ category }}</option>96 </select>97 </div>98 <div>99 <label for="price" class="block text-sm font-medium text-gray-700">Price Range</label>100 <select v-model="selectedPrice" id="price" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md">101 <option value="">All Prices</option>102 <option value="0-20">Under $20</option>103 <option value="20-50">$20 - $50</option>104 <option value="50-100">$50 - $100</option>105 <option value="100+">Over $100</option>106 </select>107 </div>108 <div>109 <label for="character" class="block text-sm font-medium text-gray-700">Character</label>110 <select v-model="selectedCharacter" id="character" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md">111 <option value="">All Characters</option>112 <option v-for="character in characters" :value="character">{{ character }}</option>113 </select>114 </div>115 <div>116 <label for="author" class="block text-sm font-medium text-gray-700">Author</label>117 <select v-model="selectedAuthor" id="author" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md">118 <option value="">All Authors</option>119 <option v-for="author in authors" :value="author">{{ author }}</option>120 </select>121 </div>122</div>123 </div>124 </div>125 126 <!-- Products Grid -->127 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">128 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">129 <div v-for="item in filteredItems" :key="item.id" class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow duration-300">130 <div class="h-48 overflow-hidden">131 <img :src="item.image" :alt="item.title" class="w-full h-full object-cover">132 </div>133 <div class="p-4">134 <div class="flex justify-between items-start">135 <h3 class="text-lg font-bold text-gray-900">{{ item.title }}</h3>136 <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">{{ item.category }}</span>137 </div>138 <p class="text-sm text-gray-600 mt-1">{{ item.character }}</p>139 <div class="mt-4 flex justify-between items-center">140 <span class="text-lg font-bold text-gray-900">${{ item.price }}</span>141 <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm font-medium flex items-center">142 <i data-feather="shopping-cart" class="h-4 w-4 mr-1"></i> Add143 </button>144 </div>145 </div>146 </div>147 </div>148 </div>149 150 <!-- Character Guide -->151 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 bg-gray-50 rounded-lg">152 <div class="text-center mb-12">153 <h2 class="text-3xl font-bold text-gray-900 comic-font">Comic Character Guide</h2>154 <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">New to comics? Start your journey with these iconic characters!</p>155 </div>156 <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">157 <div v-for="character in characters" :key="character" class="text-center">158 <div class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">159 <div class="h-32 w-32 mx-auto mb-4 rounded-full overflow-hidden border-4 border-red-600">160 <img :src="`http://static.photos/people/200x200/${characters.indexOf(character) + 1}`" :alt="character" class="w-full h-full object-cover">161 </div>162 <h3 class="font-bold text-gray-900">{{ character }}</h3>163 <button class="mt-2 text-red-600 hover:text-red-800 text-sm font-medium">View Comics</button>164 </div>165 </div>166 </div>167 </div>168 169 <!-- Footer -->170 <footer class="bg-gray-800 text-white">171 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">172 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">173 <div>174 <h3 class="text-lg font-bold mb-4 comic-font">ComicVerse Haven</h3>175 <p class="text-gray-400">Your one-stop shop for all things comics, collectibles, and pop culture.</p>176 <div class="mt-4 flex space-x-4">177 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>178 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>179 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>180 </div>181 </div>182 <div>183 <h3 class="text-lg font-bold mb-4">Shop</h3>184 <ul class="space-y-2">185 <li><a href="#" class="text-gray-400 hover:text-white">New Releases</a></li>186 <li><a href="#" class="text-gray-400 hover:text-white">Back Issues</a></li>187 <li><a href="#" class="text-gray-400 hover:text-white">Graphic Novels</a></li>188 <li><a href="#" class="text-gray-400 hover:text-white">Collectibles</a></li>189 </ul>190 </div>191 <div>192 <h3 class="text-lg font-bold mb-4">Help</h3>193 <ul class="space-y-2">194 <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>195 <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li>196 <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li>197 <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>198 </ul>199 </div>200 <div>201 <h3 class="text-lg font-bold mb-4">Newsletter</h3>202 <p class="text-gray-400 mb-4">Subscribe for updates and exclusive offers!</p>203 <div class="flex">204 <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l text-gray-900 focus:outline-none">205 <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-r">206 <i data-feather="send"></i>207 </button>208 </div>209 </div>210 </div>211 <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">212 <p>© 2023 ComicVerse Haven. All rights reserved.</p>213 </div>214 </div>215 </footer>216 </div>217 218 <script>219 feather.replace();220 221 const { createApp, ref, computed } = Vue;222 223 createApp({224 setup() {225 const searchQuery = ref('');226 const selectedCategory = ref('');227 const selectedPrice = ref('');228 const selectedCharacter = ref('');229 const selectedAuthor = ref('');230const categories = ref([231 'Single Issues', 232 'Trade Paperbacks', 233 'Hardcover Editions', 234 'Graphic Novels',235 'Action Figures',236 'Collectibles',237 'Merchandise'238 ]);239 240 const characters = ref([241 'Batman',242 'Superman',243 'Spider-Man',244 'Iron Man',245 'Wonder Woman',246 'Captain America',247 'Black Panther',248 'Wolverine',249 'Hulk',250 'Thor',251 'Flash',252 'Green Lantern'253 ]);254 255 const items = ref([256 {257 id: 1,258 title: 'Batman #1',259 character: 'Batman',260 category: 'Single Issues',261 price: 3.99,262 image: 'http://static.photos/black/320x240/1',263 author: 'Bob Kane'264},265 {266 id: 2,267 title: 'Amazing Spider-Man #300',268 character: 'Spider-Man',269 category: 'Single Issues',270 price: 199.99,271 image: 'http://static.photos/red/320x240/2',272 author: 'Stan Lee'273},274 {275 id: 3,276 title: 'Batman: The Dark Knight Returns',277 character: 'Batman',278 category: 'Hardcover Editions',279 price: 24.99,280 image: 'http://static.photos/black/320x240/3',281 author: 'Frank Miller'282},283 {284 id: 4,285 title: 'Superman Action Figure',286 character: 'Superman',287 category: 'Action Figures',288 price: 19.99,289 image: 'http://static.photos/blue/320x240/4',290 author: ''291},292 {293 id: 5,294 title: 'Watchmen',295 character: 'Multiple',296 category: 'Graphic Novels',297 price: 14.99,298 image: 'http://static.photos/yellow/320x240/5',299 author: 'Alan Moore'300},301 {302 id: 6,303 title: 'Iron Man T-Shirt',304 character: 'Iron Man',305 category: 'Merchandise',306 price: 22.99,307 image: 'http://static.photos/red/320x240/6',308 author: ''309},310 {311 id: 7,312 title: 'Wonder Woman #750',313 character: 'Wonder Woman',314 category: 'Single Issues',315 price: 7.99,316 image: 'http://static.photos/white/320x240/7',317 author: 'Geoff Johns'318},319 {320 id: 8,321 title: 'Captain America Shield Replica',322 character: 'Captain America',323 category: 'Collectibles',324 price: 149.99,325 image: 'http://static.photos/blue/320x240/8',326 author: ''327}328 ]);329 const authors = ref([330 'Stan Lee',331 'Jack Kirby',332 'Frank Miller',333 'Alan Moore',334 'Neil Gaiman',335 'Brian K. Vaughan',336 'Grant Morrison',337 'Todd McFarlane',338 'Jim Lee',339 'Geoff Johns'340 ]);341 342 const filteredItems = computed(() => {343 return items.value.filter(item => {344 const matchesSearch = item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||345 item.character.toLowerCase().includes(searchQuery.value.toLowerCase()) ||346 (item.author && item.author.toLowerCase().includes(searchQuery.value.toLowerCase()));347 const matchesCategory = selectedCategory.value === '' || item.category === selectedCategory.value;348 const matchesCharacter = selectedCharacter.value === '' || item.character === selectedCharacter.value;349 const matchesAuthor = selectedAuthor.value === '' || (item.author && item.author === selectedAuthor.value);350let matchesPrice = true;351 if (selectedPrice.value !== '') {352 const [min, max] = selectedPrice.value.split('-');353 if (max) {354 matchesPrice = item.price >= parseFloat(min) && item.price <= parseFloat(max);355 } else {356 matchesPrice = item.price >= parseFloat(min.replace('+', ''));357 }358 }359 return matchesSearch && matchesCategory && matchesPrice && matchesCharacter && matchesAuthor;360});361 });362 363 return {364 searchQuery,365 selectedCategory,366 selectedPrice,367 selectedCharacter,368 selectedAuthor,369 categories,370 characters,371 authors,372 items,373filteredItems374 };375 }376 }).mount('#app');377 </script>378</body>379</html>380 