Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Feline Facts | The Ultimate Cat Encyclopedia</title> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;600&family=Nunito:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS Variables & Reset --- */ | |
| :root { | |
| --primary-color: #FF8E53; /* Soft Coral */ | |
| --secondary-color: #FFBD59; /* Mustard */ | |
| --accent-color: #4A403A; /* Dark Brown/Grey */ | |
| --bg-color: #FFF9F5; /* Creamy White */ | |
| --card-bg: rgba(255, 255, 255, 0.9); | |
| --glass-border: rgba(255, 255, 255, 0.5); | |
| --shadow-light: 0 8px 30px rgba(0, 0, 0, 0.05); | |
| --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.1); | |
| --radius-lg: 24px; | |
| --radius-md: 16px; | |
| --font-heading: 'Fredoka', sans-serif; | |
| --font-body: 'Nunito', sans-serif; | |
| --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background-color: var(--bg-color); | |
| color: var(--accent-color); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(255, 142, 83, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 189, 89, 0.1) 0%, transparent 20%); | |
| } | |
| a { text-decoration: none; color: inherit; } | |
| ul { list-style: none; } | |
| button { cursor: pointer; border: none; font-family: inherit; } | |
| /* --- Header & Navigation --- */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem 5%; | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| } | |
| .logo { | |
| font-family: var(--font-heading); | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { animation: bounce 2s infinite; } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| font-weight: 700; | |
| font-size: 0.95rem; | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover { color: var(--primary-color); } | |
| .branding-link { | |
| font-size: 0.85rem; | |
| color: #888; | |
| font-weight: 600; | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| background: #f0f0f0; | |
| transition: var(--transition); | |
| } | |
| .branding-link:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| /* --- Main Layout --- */ | |
| main { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem 5%; | |
| display: grid; | |
| grid-template-columns: 1fr 1.2fr; | |
| gap: 3rem; | |
| min-height: 80vh; | |
| align-items: center; | |
| } | |
| /* --- Left Column: Interactive Fact Generator --- */ | |
| .generator-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .hero-text h1 { | |
| font-family: var(--font-heading); | |
| font-size: 3.5rem; | |
| line-height: 1.1; | |
| margin-bottom: 1rem; | |
| color: var(--accent-color); | |
| } | |
| .hero-text h1 span { | |
| color: var(--primary-color); | |
| position: relative; | |
| } | |
| .hero-text h1 span::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 5px; | |
| left: 0; | |
| width: 100%; | |
| height: 12px; | |
| background: rgba(255, 142, 83, 0.2); | |
| z-index: -1; | |
| border-radius: 4px; | |
| } | |
| .hero-text p { | |
| font-size: 1.1rem; | |
| color: #666; | |
| margin-bottom: 2rem; | |
| } | |
| .fact-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| padding: 2.5rem; | |
| box-shadow: var(--shadow-light); | |
| text-align: center; | |
| position: relative; | |
| transition: var(--transition); | |
| overflow: hidden; | |
| } | |
| .fact-card:hover { | |
| box-shadow: var(--shadow-hover); | |
| transform: translateY(-5px); | |
| } | |
| .cat-illustration { | |
| width: 80px; | |
| height: 80px; | |
| margin: 0 auto 1.5rem; | |
| background: #FFF0E6; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2.5rem; | |
| color: var(--primary-color); | |
| } | |
| #fact-display { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| min-height: 120px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 2rem; | |
| color: var(--accent-color); | |
| opacity: 1; | |
| transition: opacity 0.3s ease; | |
| } | |
| #fact-display.fade-out { | |
| opacity: 0; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| box-shadow: 0 4px 15px rgba(255, 142, 83, 0.4); | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 6px 20px rgba(255, 142, 83, 0.6); | |
| } | |
| .btn-primary:active { | |
| transform: scale(0.95); | |
| } | |
| .btn-secondary { | |
| background: white; | |
| color: var(--accent-color); | |
| border: 2px solid #eee; | |
| padding: 1rem; | |
| border-radius: 50%; | |
| width: 54px; | |
| height: 54px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| transform: rotate(15deg); | |
| } | |
| /* --- Toast Notification --- */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: var(--accent-color); | |
| color: white; | |
| padding: 12px 24px; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| opacity: 0; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| z-index: 2000; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| opacity: 1; | |
| } | |
| /* --- Right Column: Visual Grid --- */ | |
| .visual-section { | |
| position: relative; | |
| } | |
| .bento-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-template-rows: repeat(2, 200px); | |
| gap: 1.5rem; | |
| } | |
| .grid-item { | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| position: relative; | |
| box-shadow: var(--shadow-light); | |
| cursor: pointer; | |
| } | |
| .grid-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.6s ease; | |
| } | |
| .grid-item:hover img { | |
| transform: scale(1.1); | |
| } | |
| .grid-item.large { | |
| grid-column: span 2; | |
| } | |
| .grid-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 1.5rem; | |
| background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); | |
| color: white; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: var(--transition); | |
| } | |
| .grid-item:hover .grid-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .grid-overlay h3 { | |
| font-family: var(--font-heading); | |
| font-size: 1.2rem; | |
| } | |
| /* --- Floating Elements --- */ | |
| .floating-shape { | |
| position: absolute; | |
| z-index: -1; | |
| opacity: 0.6; | |
| filter: blur(40px); | |
| } | |
| .shape-1 { | |
| top: -50px; | |
| right: -50px; | |
| width: 200px; | |
| height: 200px; | |
| background: var(--secondary-color); | |
| border-radius: 50%; | |
| } | |
| .shape-2 { | |
| bottom: 50px; | |
| left: -30px; | |
| width: 150px; | |
| height: 150px; | |
| background: #FF8E53; | |
| border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; | |
| animation: morph 8s ease-in-out infinite; | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| margin-top: 4rem; | |
| text-align: center; | |
| padding: 2rem; | |
| border-top: 1px solid rgba(0,0,0,0.05); | |
| color: #888; | |
| font-size: 0.9rem; | |
| } | |
| /* --- Animations --- */ | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| @keyframes morph { | |
| 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } | |
| 34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } | |
| 67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; } | |
| 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } | |
| } | |
| /* --- Responsive Design --- */ | |
| @media (max-width: 900px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .hero-text h1 { font-size: 2.5rem; } | |
| .bento-grid { grid-template-rows: repeat(2, 150px); } | |
| } | |
| @media (max-width: 600px) { | |
| header { padding: 1rem; flex-direction: column; gap: 1rem; } | |
| .nav-links { display: none; } /* Simplified for mobile */ | |
| .hero-text h1 { font-size: 2rem; } | |
| .btn-primary { padding: 0.8rem 1.5rem; font-size: 0.9rem; } | |
| .bento-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 200px); } | |
| .grid-item.large { grid-column: span 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-cat"></i> | |
| <span>FelineFacts</span> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="#">Home</a> | |
| <a href="#">Breeds</a> | |
| <a href="#">Care Tips</a> | |
| <a href="#">About</a> | |
| </nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="branding-link"> | |
| Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i> | |
| </a> | |
| </header> | |
| <main> | |
| <!-- Left Column: Content & Generator --> | |
| <section class="generator-section"> | |
| <div class="hero-text"> | |
| <h1>Discover Amazing <span>Cat Facts</span></h1> | |
| <p>Dive into the fascinating world of felines. Click the button below to uncover a random fact about our purr-fect friends.</p> | |
| </div> | |
| <article class="fact-card"> | |
| <div class="cat-illustration"> | |
| <i class="fa-solid fa-paw"></i> | |
| </div> | |
| <div id="fact-display"> | |
| Loading a purr-fect fact for you... | |
| </div> | |
| <div class="controls"> | |
| <button class="btn-secondary" id="copy-btn" aria-label="Copy to Clipboard" title="Copy Fact"> | |
| <i class="fa-regular fa-copy"></i> | |
| </button> | |
| <button class="btn-primary" id="generate-btn"> | |
| <i class="fa-solid fa-shuffle"></i> New Fact | |
| </button> | |
| </div> | |
| </article> | |
| </section> | |
| <!-- Right Column: Visual Gallery --> | |
| <section class="visual-section"> | |
| <div class="floating-shape shape-1"></div> | |
| <div class="floating-shape shape-2"></div> | |
| <div class="bento-grid"> | |
| <div class="grid-item large"> | |
| <img src="https://picsum.photos/seed/cat1/600/400" alt="A cute cat looking up"> | |
| <div class="grid-overlay"> | |
| <h3>Ancient Companions</h3> | |
| <p>Cats have been domesticated for over 4,000 years.</p> | |
| </div> | |
| </div> | |
| <div class="grid-item"> | |
| <img src="https://picsum.photos/seed/cat2/300/300" alt="Close up of cat eyes"> | |
| <div class="grid-overlay"> | |
| <h3>Night Vision</h3> | |
| </div> | |
| </div> | |
| <div class="grid-item"> | |
| <img src="https://picsum.photos/seed/cat3/300/300" alt="Cat sleeping"> | |
| <div class="grid-overlay"> | |
| <h3>Professional Sleepers</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Toast Notification Element --> | |
| <div id="toast" class="toast"> | |
| <i class="fa-solid fa-check-circle"></i> Fact copied to clipboard! | |
| </div> | |
| <footer> | |
| <p>© 2023 FelineFacts. Made with <i class="fa-solid fa-heart" style="color: var(--primary-color)"></i> for cat lovers.</p> | |
| </footer> | |
| <script> | |
| // --- Data: A robust list of cat facts --- | |
| const catFacts = [ | |
| "A group of cats is called a clowder.", | |
| "Cats spend 70% of their lives sleeping.", | |
| "A cat's hearing is better than a dog's.", | |
| "Cats can rotate their ears 180 degrees.", | |
| "The oldest known pet cat was found in a 9,500 year old grave on Cyprus.", | |
| "Cats have over 20 vocalizations, including the meow.", | |
| "A cat's nose print is unique, much like a human fingerprint.", | |
| "Cats can jump up to 6 times their length.", | |
| "The first cat in space was a French cat named Félicette in 1963.", | |
| "Cats have 230 bones, while humans only have 206.", | |
| "A cat's brain is 90% similar to a human's brain.", | |
| "Cats can't taste sweetness due to a genetic mutation.", | |
| "The average cat can run at speeds of up to 30 mph.", | |
| "Cats sweat through their paws.", | |
| "A cat's whiskers are roughly as wide as their body.", | |
| "Ancient Egyptians shaved their eyebrows when their cat died.", | |
| "Cats can drink seawater to rehydrate.", | |
| "A cat's purr vibrates at 25-150 Hz, which can promote healing of bones.", | |
| "Cats have a specialized collarbone that allows them to always land on their feet.", | |
| "The technical term for a hairball is a 'bezoar'.", | |
| "Cats can recognize their owner's voice but choose to ignore it.", | |
| "A cat's field of vision is about 200 degrees.", | |
| "Cats spend about 30-50% of their day grooming themselves.", | |
| "The Japanese Bobtail cat is a symbol of good luck in Japan.", | |
| "Cats have a third eyelid called the 'haw' to protect their eyes." | |
| ]; | |
| // --- DOM Elements --- | |
| const factDisplay = document.getElementById('fact-display'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const copyBtn = document.getElementById('copy-btn'); | |
| const toast = document.getElementById('toast'); | |
| // --- State --- | |
| let currentFact = ""; | |
| // --- Functions --- | |
| /** | |
| * Gets a random fact from the array, ensuring it's different from the current one | |
| */ | |
| function getRandomFact() { | |
| let newFact; | |
| do { | |
| const randomIndex = Math.floor(Math.random() * catFacts.length); | |
| newFact = catFacts[randomIndex]; | |
| } while (newFact === currentFact && catFacts.length > 1); | |
| return newFact; | |
| } | |
| /** | |
| * Updates the UI with a new fact using a fade transition | |
| */ | |
| function updateFact() { | |
| // Add fade-out class | |
| factDisplay.classList.add('fade-out'); | |
| // Wait for transition to finish before changing text | |
| setTimeout(() => { | |
| currentFact = getRandomFact(); | |
| factDisplay.textContent = currentFact; | |
| factDisplay.classList.remove('fade-out'); | |
| }, 300); | |
| } | |
| /** | |
| * Copies the current fact to the clipboard and shows a toast | |
| */ | |
| function copyToClipboard() { | |
| if (!currentFact) return; | |
| navigator.clipboard.writeText(currentFact).then(() => { | |
| showToast(); | |
| }).catch(err => { | |
| console.error('Failed to copy text: ', err); | |
| }); | |
| } | |
| /** | |
| * Shows the toast notification | |
| */ | |
| function showToast() { | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // --- Event Listeners --- | |
| generateBtn.addEventListener('click', () => { | |
| // Add a small rotation animation to the icon for feedback | |
| const icon = generateBtn.querySelector('i'); | |
| icon.style.transition = 'transform 0.5s ease'; | |
| icon.style.transform = 'rotate(180deg)'; | |
| setTimeout(() => icon.style.transform = 'rotate(0deg)', 500); | |
| updateFact(); | |
| }); | |
| copyBtn.addEventListener('click', copyToClipboard); | |
| // --- Initialization --- | |
| // Load a fact on page load | |
| window.addEventListener('DOMContentLoaded', () => { | |
| currentFact = getRandomFact(); // Set initial state without animation | |
| factDisplay.textContent = currentFact; | |
| }); | |
| </script> | |
| </body> | |
| </html> |