Team Ai
Apppublic

vibecodingtee/comicverse-haven

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
index.html380 linesDownload Raw Back to root
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>&copy; 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