1<!DOCTYPE html><html lang="en"><head> 2 <meta charset="UTF-8"/> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 4 <title>å±±æµ·ç» - Mystical Creatures</title> 5
5<script src="https://cdn.tailwindcss.com"></script>
5 6
6<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
6 7
7<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
7 8
8<script src="https://unpkg.com/[email protected]/dist/splitting.js"></script>
8 9 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/splitting.css"/> 10 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Inter:wght@300;400;500&family=Ma+Shan+Zheng&display=swap" rel="stylesheet"/> 11 <style> 12 :root { 13 --primary-dark: #1a1a1a; 14 --primary-light: #f8f6f0; 15 --accent-gold: #c4a572; 16 --sage-green: #8b9a8b; 17 --common: #6b6b6b; 18 --rare: #4a7c59; 19 --epic: #7c4a7c; 20 --legendary: #b8860b; 21 } 22 23 body { 24 font-family: 'Inter', sans-serif; 25 background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); 26 color: var(--primary-light); 27 overflow-x: hidden; 28 } 29 30 .hero-bg { 31 background: url('resources/hero_banner.png') center/cover no-repeat; 32 position: relative; 33 } 34 35 .hero-bg::before { 36 content: ''; 37 position: absolute; 38 top: 0; 39 left: 0; 40 right: 0; 41 bottom: 0; 42 background: rgba(26, 26, 26, 0.3); 43 } 44 45 .card-container { 46 perspective: 1000px; 47 width: 280px; 48 height: 400px; 49 } 50 51 .card { 52 width: 100%; 53 height: 100%; 54 position: relative; 55 transform-style: preserve-3d; 56 transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 57 } 58 59 .card.flipped { 60 transform: rotateY(180deg); 61 } 62 63 .card-face { 64 position: absolute; 65 width: 100%; 66 height: 100%; 67 backface-visibility: hidden; 68 border-radius: 16px; 69 overflow: hidden; 70 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 71 } 72 73 .card-back { 74 background: linear-gradient(135deg, var(--accent-gold) 0%, #8b6914 100%); 75 display: flex; 76 align-items: center; 77 justify-content: center; 78 position: relative; 79 } 80 81 .card-back::before { 82 content: ''; 83 position: absolute; 84 width: 200px; 85 height: 200px; 86 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2"/><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1"/><circle cx="50" cy="50" r="20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>') center/contain no-repeat; 87 animation: rotate 20s linear infinite; 88 } 89 90 .card-front { 91 transform: rotateY(180deg); 92 background: var(--primary-light); 93 color: var(--primary-dark); 94 } 95 96 .creature-image { 97 width: 100%; 98 height: 60%; 99 object-fit: cover; 100 border-radius: 12px 12px 0 0; 101 } 102 103 .rarity-common { border: 3px solid var(--common); } 104 .rarity-rare { border: 3px solid var(--rare); } 105 .rarity-epic { border: 3px solid var(--epic); } 106 .rarity-legendary { border: 3px solid var(--legendary); } 107 108 .rarity-glow-common { box-shadow: 0 0 20px var(--common); } 109 .rarity-glow-rare { box-shadow: 0 0 20px var(--rare); } 110 .rarity-glow-epic { box-shadow: 0 0 20px var(--epic); } 111 .rarity-glow-legendary { box-shadow: 0 0 20px var(--legendary); } 112 113 .draw-button { 114 background: linear-gradient(135deg, var(--accent-gold) 0%, #8b6914 100%); 115 border: none; 116 padding: 16px 32px; 117 border-radius: 50px; 118 color: white; 119 font-weight: 600; 120 font-size: 18px; 121 cursor: pointer; 122 transition: all 0.3s ease; 123 box-shadow: 0 10px 30px rgba(196, 165, 114, 0.3); 124 } 125 126 .draw-button:hover { 127 transform: translateY(-2px); 128 box-shadow: 0 15px 40px rgba(196, 165, 114, 0.4); 129 } 130 131 .draw-button:active { 132 transform: translateY(0); 133 } 134 135 .draw-button:disabled { 136 opacity: 0.6;
137 cursor: not-allowed; 138 transform: none; 139 } 140 141 @keyframes rotate { 142 from { transform: rotate(0deg); } 143 to { transform: rotate(360deg); } 144 } 145 146 @keyframes float { 147 0%, 100% { transform: translateY(0px); } 148 50% { transform: translateY(-10px); } 149 } 150 151 .floating { 152 animation: float 3s ease-in-out infinite; 153 } 154 155 .particle { 156 position: absolute; 157 width: 4px; 158 height: 4px; 159 background: var(--accent-gold); 160 border-radius: 50%; 161 pointer-events: none; 162 } 163 164 .recent-card { 165 width: 80px; 166 height: 120px; 167 border-radius: 8px; 168 overflow: hidden; 169 cursor: pointer; 170 transition: transform 0.3s ease; 171 border: 2px solid transparent; 172 } 173 174 .recent-card:hover { 175 transform: scale(1.05); 176 } 177 178 .recent-card img { 179 width: 100%; 180 height: 100%; 181 object-fit: cover; 182 } 183 184 .lore-text { 185 font-size: 14px; 186 line-height: 1.6; 187 color: #666; 188 max-height: 100px; 189 overflow-y: auto; 190 } 191 192 .progress-ring { 193 transform: rotate(-90deg); 194 } 195 196 .progress-ring-circle { 197 transition: stroke-dashoffset 0.35s; 198 transform-origin: 50% 50%; 199 } 200 201 .title-font { 202 font-family: 'Noto Serif SC', serif; 203 } 204 205 .mystical-font { 206 font-family: 'Ma Shan Zheng', cursive; 207 } 208 209 .glass-effect { 210 background: rgba(255, 255, 255, 0.1); 211 backdrop-filter: blur(10px); 212 border: 1px solid rgba(255, 255, 255, 0.2); 213 } 214 215 .nav-bottom { 216 position: fixed; 217 bottom: 0; 218 left: 0; 219 right: 0; 220 background: rgba(26, 26, 26, 0.95); 221 backdrop-filter: blur(20px); 222 border-top: 1px solid rgba(255, 255, 255, 0.1); 223 z-index: 1000; 224 } 225 226 .nav-item { 227 flex: 1; 228 padding: 16px; 229 text-align: center; 230 color: var(--primary-light); 231 text-decoration: none; 232 transition: all 0.3s ease; 233 font-size: 14px; 234 font-weight: 500; 235 } 236 237 .nav-item:hover, .nav-item.active { 238 color: var(--accent-gold); 239 background: rgba(196, 165, 114, 0.1); 240 } 241 242 .stats-card { 243 background: rgba(255, 255, 255, 0.05); 244 border: 1px solid rgba(255, 255, 255, 0.1); 245 border-radius: 12px; 246 padding: 16px; 247 text-align: center; 248 } 249 250 .typing-cursor { 251 display: inline-block; 252 width: 2px; 253 height: 1em; 254 background: var(--accent-gold); 255 animation: blink 1s infinite; 256 } 257 258 @keyframes blink { 259 0%, 50% { opacity: 1; } 260 51%, 100% { opacity: 0; } 261 } 262 </style>
263<script src="https://www.kimi.com/sdk-seed.js" defer="" data-kimi-disable-watermark="false" data-kimi-analytics="false"></script>
263</head> 264<body> 265 <!-- Hero Section --> 266 <section class="hero-bg min-h-screen flex flex-col justify-center items-center relative"> 267 <div class="text-center z-10 px-6"> 268 <h1 class="title-font text-5xl md:text-7xl font-bold mb-4 text-white" data-splitting=""> 269 å±±æµ·ç» 270 </h1> 271 <p class="text-xl md:text-2xl mb-8 text-gray-200 mystical-font"> 272 Ancient Mystical Creatures 273 </p> 274 <p class="text-lg mb-12 max-w-2xl mx-auto text-gray-300"> 275 Discover the legendary beings from the Classic of Mountains and Seas. 276 Each creature holds ancient wisdom and mystical powers. 277 </p> 278 </div> 279 280 <!-- Floating particles --> 281 <div id="particles-container" class="absolute inset-0 pointer-events-none"></div> 282 </section> 283 284 <!-- Card Drawing Section --> 285 <section class="py-16 px-6"> 286 <div class="max-w-4xl mx-auto"> 287 <div class="text-center mb-12"> 288 <h2 class="title-font text-3xl md:text-4xl font-bold mb-4 text-white"> 289 Summon a Creature 290 </h2> 291 <p class="text-gray-400 text-lg"> 292 Tap the card to reveal your mystical companion 293 </p> 294 </div> 295 296 <!-- Card Container --> 297 <div class="flex justify-center mb-12"> 298 <div class="card-container floating"> 299 <div class="card" id="main-card"> 300 <div class="card-face card-back"> 301 <div class="text-center text-white"> 302 <div class="mystical-font text-2xl mb-2">ç¥ç§</div> 303 <div class="text-sm opacity-75">Tap to Reveal</div> 304 </div> 305 </div> 306 <div class="card-face card-front" id="card-front"> 307 <img id="creature-image" class="creature-image" src="" alt=""/> 308 <div class="p-4"> 309 <div class="flex justify-between items-start mb-2"> 310 <h3 id="creature-name" class="title-font text-lg font-bold"></h3> 311 <span id="creature-rarity" class="text-xs px-2 py-1 rounded-full text-white"></span> 312 </div> 313 <div id="creature-lore" class="lore-text"></div> 314 </div> 315 </div> 316 </div> 317 </div> 318 </div> 319 320 <!-- Draw Button --> 321 <div class="text-center mb-12"> 322 <button id="draw-button" class="draw-button"> 323 <span id="button-text">Draw Card</span> 324 <span id="draw-count" class="ml-2 text-sm opacity-75">(0 drawn)</span> 325 </button> 326 <p class="text-gray-400 text-sm mt-4"> 327 Daily free draws: <span id="daily-count">3</span> remaining 328 </p> 329 </div> 330 331 <!-- Stats Section --> 332 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12"> 333 <div class="stats-card"> 334 <div class="text-2xl font-bold text-yellow-400" id="total-draws">0</div> 335 <div class="text-sm text-gray-400">Total Draws</div> 336 </div> 337 <div class="stats-card"> 338 <div class="text-2xl font-bold text-green-400" id="unique-creatures">0</div> 339 <div class="text-sm text-gray-400">Unique Creatures</div> 340 </div> 341 <div class="stats-card"> 342 <div class="text-2xl font-bold text-purple-400" id="epic-count">0</div> 343 <div class="text-sm text-gray-400">Epic+ Cards</div> 344 </div> 345 <div class="stats-card"> 346 <div class="text-2xl font-bold text-blue-400" id="completion-rate">0%</div> 347 <div class="text-sm text-gray-400">Collection</div> 348 </div> 349 </div> 350 351 <!-- Recent Discoveries --> 352 <div class="mb-16"> 353 <h3 class="title-font text-2xl font-bold mb-6 text-center text-white"> 354 Recent Discoveries 355 </h3> 356 <div class="flex gap-4 overflow-x-auto pb-4" id="recent-discoveries"> 357 <div class="text-gray-400 text-center py-8 flex-1"> 358 Draw your first creature to start your collection 359 </div> 360 </div> 361 </div> 362 </div> 363 </section> 364 365 <!-- Bottom Navigation --> 366 <nav class="nav-bottom"> 367 <div class="flex"> 368 <a class="nav-item active" href="index.html"> 369 <div class="text-lg mb-1">ð´</div> 370 <div>Draw</div> 371 </a> 372 <a class="nav-item" href="bestiary.html"> 373 <div class="text-lg mb-1">ð</div> 374 <div>Bestiary</div> 375 </a> 376 </div> 377 </nav> 378 379 <!-- Add bottom padding to account for fixed nav --> 380 <div class="h-20"></div> 381 382
382<script src="main.js"></script>
382 383 384</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.