From d0d7bf755fe6f90fa6e2d39a5df62b214b7846fa Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Sun, 12 Oct 2025 22:52:32 +0530 Subject: [PATCH] feat: Add category filters --- arts.json | 382 ++++++++++------ index.html | 7 + js/script.js | 30 ++ style.css | 1238 ++------------------------------------------------ 4 files changed, 308 insertions(+), 1349 deletions(-) diff --git a/arts.json b/arts.json index 9a0565b..e65dba3 100644 --- a/arts.json +++ b/arts.json @@ -1,526 +1,626 @@ [ { - "file": "Keron-3D_Box.html", - "title": "3D_Box", - "author": "kronpatel" + "file": "Keron-3D_Box.html", + "title": "3D_Box", + "author": "kronpatel", + "category": "other" }, { - "file": "Keron-Funny_Emoji.html", - "title": "Funny Emoji", - "author": "kronpatel" + "file": "Keron-Funny_Emoji.html", + "title": "Funny Emoji", + "author": "kronpatel", + "category": "funny" }, { "file": "funny_cloud.html", "title": "Robot", - "author": "jeturgavli" + "author": "jeturgavli", + "category": "funny" }, { "file": "robot.html", "title": "Robot", - "author": "jeturgavli" + "author": "jeturgavli", + "category": "funny" }, { "file": "Anuradha-neon-city.html", "title": "Neon City", - "author": "Anuradha" + "author": "Anuradha", + "category": "animated" }, { "file": "Anuradha-aurora-night-sky.html", "title": "Aurora Night Sky", - "author": "Anuradha" + "author": "Anuradha", + "category": "minimal" }, { "file": "noor-spaceart.html", "title": "Space-art", - "author": "Noor" + "author": "Noor", + "category": "other" }, { "file": "abstract_shapes.html", "title": "Abstract Shapes", - "author": "Mayank Bansal" + "author": "Mayank Bansal", + "category": "abstract" }, { - "file": "sunrise.html", - "title": "Sunrise Over Mountains", - "author": "Apurva Jain" + "file": "sunrise.html", + "title": "Sunrise Over Mountains", + "author": "Apurva Jain", + "category": "minimal" }, { - "file":"SK-tesseract.html", - "title":"Tesseract", - "author":"Saikiran-Sugurthi" + "file": "SK-tesseract.html", + "title": "Tesseract", + "author": "Saikiran-Sugurthi", + "category": "animated" }, { "file": "uday-rain-in-dark-night.html", "title": "Rain In Dark", - "author": "Uday" + "author": "Uday", + "category": "animated" }, { "file": "Angela_oceanwaves.html", "title": "Ocean Waves", - "author": "Angela Bera" + "author": "Angela Bera", + "category": "minimal" }, { "file": "chanakya-vintage-typewriter.html", "title": "Vintage Typewriter", - "author": "Chanakya" + "author": "Chanakya", + "category": "other" }, { "file": "Waqar-arc.html", "title": "Arc Reactor", - "author": "Waqar" + "author": "Waqar", + "category": "other" }, { "file": "hariksh-sunset.html", "title": "Sunset CSS Art", - "author": "Hariksh" + "author": "Hariksh", + "category": "minimal" }, { "file": "dot-wave-loading.html", "title": "Dot loading", - "author": "Ritesh" + "author": "Ritesh", + "category": "animated" }, { "file": "matrix-pulse-loading.html", "title": "Matrix-pulse-loading", - "author": "Ritesh" + "author": "Ritesh", + "category": "animated" }, { "file": "ring-loading.html", "title": "Ring Loading", - "author": "Ritesh" + "author": "Ritesh", + "category": "animated" }, { "file": "penguin.html", "title": "Penguin Art", - "author": " JamesFloyd-Pen" + "author": " JamesFloyd-Pen", + "category": "funny" }, { "file": "sample.html", "title": "Sample CSS Art", - "author": "Shamli" + "author": "Shamli", + "category": "other" }, { "file": "matrix.html", "title": "Matrix Rain Animation", - "author": "Eternity" + "author": "Eternity", + "category": "animated" }, { "file": "geometry.html", "title": "Geometric Art", - "author": "Shamli" + "author": "Shamli", + "category": "abstract" }, { "file": "Apurva_Christmas_art.html", "title": "Christmas Wonderland", - "author": "Apurva" + "author": "Apurva", + "category": "other" }, { "file": "rotating_cube.html", "title": "Rotating Cube", - "author": "Hardik" + "author": "Hardik", + "category": "animated" }, { "file": "Rohith_stars.html", "title": "Glowing Star", - "author": "Rohith" + "author": "Rohith", + "category": "animated" }, { "file": "helicopter.html", "title": "Helicopter", - "author": "Dhamith" + "author": "Dhamith", + "category": "other" }, { "file": "irfan-goldennight.html", "title": "Golden Night", - "author": "Irfan" + "author": "Irfan", + "category": "minimal" }, { "file": "irfan-ocean.html", "title": "Ocean Scene", - "author": "Irfan" + "author": "Irfan", + "category": "minimal" }, { "file": "Apurva_IndianFlag.html", "title": "Animated Indian Flag", - "author": "Apurva" + "author": "Apurva", + "category": "animated" }, { "file": "waqar-cat.html", "title": "CSS Cat Art", - "author": "Waqar" + "author": "Waqar", + "category": "funny" }, { "file": "mbm08-ironman.html", "title": "Ironman CSS Art", - "author": "MBM08" + "author": "MBM08", + "category": "other" }, { "file": "yash-zoomout.html", "title": "Solar System", - "author": "Yash" + "author": "Yash", + "category": "animated" }, { "file": "krishna-morphing-hologram.html", "title": "Morphing Hologram", - "author": "Krishna" + "author": "Krishna", + "category": "animated" }, { "file": "prasanth_bounce.html", "title": "Bounce", - "author": "Prasanth" + "author": "Prasanth", + "category": "animated" }, { "file": "rotatingeffect.html", "title": "Rotating Gallery Effect", - "author": "Meenal" + "author": "Meenal", + "category": "animated" }, { "file": "angel-kinetic_spiraling_pinwheel.html", "title": "Kinetic Spiraling Pinwheel", - "author": "Angel" + "author": "Angel", + "category": "animated" }, { "file": "angel-cloud_sun.html", "title": "Floating Clouds and Sun", - "author": "Angel" + "author": "Angel", + "category": "funny" }, { "file": "angel-coffee_mug.html", "title": "Coffee Mug", - "author": "Angel" + "author": "Angel", + "category": "other" }, { "file": "angel-ufo_alien.html", "title": "Hovering UFO", - "author": "Angel" + "author": "Angel", + "category": "animated" }, { "file": "bouncing_ball.html", "title": "Bouncing Ball", - "author": "Kartikay" + "author": "Kartikay", + "category": "animated" }, { "file": "floating_orb.html", "title": "Floating Orb", - "author": "Kartikay" + "author": "Kartikay", + "category": "animated" }, { "file": "pulsating_ring.html", "title": "Pulsating Ring", - "author": "Kartikay" + "author": "Kartikay", + "category": "animated" }, { "file": "waves.html", "title": "Waves", - "author": "Kartikay" + "author": "Kartikay", + "category": "minimal" }, { "file": "neon-city.html", "title": "Neon City", - "author": "Yashasvi" + "author": "Yashasvi", + "category": "animated" }, { "file": "manudwivedi-aurora.html", "title": "Aurora (Interactive)", - "author": "Manu Dwivedi" + "author": "Manu Dwivedi", + "category": "animated" }, { "file": "Sneha-Raindrop Ripple.html", "title": "Raindrop Ripple", - "author": "Sneha" + "author": "Sneha", + "category": "animated" }, { "file": "ujjwal-train.html", "title": "Train", - "author": "ujjwal" + "author": "ujjwal", + "category": "animated" }, { "file": "ujjwal-hacker.html", "title": "Hacker", - "author": "ujjwal" + "author": "ujjwal", + "category": "animated" }, { "file": "ujjwal-peacock.html", "title": "Peakcock", - "author": "ujjwal" + "author": "ujjwal", + "category": "other" }, { "file": "night_sky.html", "title": "Night Sky", - "author": "Srinjoyee Dey" + "author": "Srinjoyee Dey", + "category": "minimal" }, { "file": "pratik_face.html", "title": "face", - "author": "Pratik" + "author": "Pratik", + "category": "other" }, { "file": "Angela_aurora.html", "title": "Aurora Lights", - "author": "Angela Bera" + "author": "Angela Bera", + "category": "animated" }, { "file": "saturn.html", "title": "Saturn", - "author": "Thanuja Kedila" + "author": "Thanuja Kedila", + "category": "other" }, { "file": "night_owl.html", "title": "Night Owl", - "author": "Thanuja Kedila" + "author": "Thanuja Kedila", + "category": "minimal" }, { "file": "prath-rotating-earth.html", "title": "Rotating Earth", - "author": "Pratham" + "author": "Pratham", + "category": "animated" }, { "file": "waqar-vinyl.html", "title": "Vinyl Record", - "author": "Waqar" + "author": "Waqar", + "category": "animated" }, { "file": "morphin_art.html", "title": "Curiosity Portal ", - "author": "Sumit Vishwakarma" + "author": "Sumit Vishwakarma", + "category": "animated" }, { "file": "celestial_engine.html", "title": "Celestial Engine", - "author": "Sumit Vishwakarma" + "author": "Sumit Vishwakarma", + "category": "animated" }, { "file": "Soumyosish_animated_gradient_card.html", "title": "Animated Gradient Card", - "author": "Soumyosish" + "author": "Soumyosish", + "category": "animated" }, { "file": "usa_flag.html", "title": "USA Flag", - "author": "Sutthinart Khunvadhana" + "author": "Sutthinart Khunvadhana", + "category": "animated" }, { "file": "kartik_gradients.html", "title": "Shapes and Gradients", - "author": "Kartik Tripathi" + "author": "Kartik Tripathi", + "category": "abstract" }, { "file": "aerospace-celestial_wanderers.html", "title": "Animated Celestial Wanderers", - "author": "Aerospace" + "author": "Aerospace", + "category": "animated" }, { "file": "rj_nebula.html", "title": "Nebula", - "author": "RJ" + "author": "RJ", + "category": "animated" }, { "file": "cat.html", "title": "Cat Art", - "author": "Rishita" + "author": "Rishita", + "category": "funny" }, { "file": "gravity-affected-ball.html", "title": "Gravity Affected Ball", - "author": "Akshit" + "author": "Akshit", + "category": "animated" }, { "file": "glowing_dusk.html", "title": "Glowing Dusk", - "author": "Injora" + "author": "Injora", + "category": "animated" }, { "file": "jellyfish-grass.html", "title": "Jellyfish CSS Art", - "author": "Chanakya" + "author": "Chanakya", + "category": "animated" }, { "file": "Jaswanth_Kumar-Glowing_Butterfly.html", "title": "Glowing Butterfly", - "author": "Jaswanth Kumar" + "author": "Jaswanth Kumar", + "category": "animated" }, { "file": "rajat-cosmic-orb.html", "title": "Cosmic Orb", - "author": "Rajat" + "author": "Rajat", + "category": "animated" }, { "file": "scenery.html", "title": "Scenery", - "author": "Soham" + "author": "Soham", + "category": "minimal" }, { "file": "moon-landing.html", "title": "Moon Landing Art", - "author": "Nitish K" + "author": "Nitish K", + "category": "other" }, { "file": "mathurojus-diwali-lights.html", "title": "Diwali Lights", - "author": "Mathurojus" + "author": "Mathurojus", + "category": "other" }, { "file": "mathurojus-sunset-landscape.html", "title": "CSS Sunset Landscape", - "author": "Mathurojus" + "author": "Mathurojus", + "category": "minimal" }, { "file": "grid-background.html", "title": "Animated Grid backgound ", - "author": "Shivin" + "author": "Shivin", + "category": "animated" }, { "file": "diwali-card.html", "title": "Diwali Diya Grid ", - "author": "Shivin" + "author": "Shivin", + "category": "animated" }, { "file": "night-sky-landscape.html", "title": "Night Sky Landscape ", - "author": "Thanuja Kedila" + "author": "Thanuja Kedila", + "category": "minimal" }, { "file": "Prasanth-style-text.html", "title": "CSS text layer", - "author": "Prasanth" + "author": "Prasanth", + "category": "animated" }, { "file": "parth-artwork.html", "title": "CSS Sunset landscape", - "author": "Parth" + "author": "Parth", + "category": "minimal" }, { "file": "sandeep-solarsystem.html", "title": "Solar System", - "author": "sandeep" + "author": "sandeep", + "category": "animated" }, { "file": "forest.html", "title": "Forest", - "author": "Siddhant" + "author": "Siddhant", + "category": "minimal" }, { "file": "aditi-meteor-shower.html", "title": "Meteor-Shower", - "author": "Aditi" + "author": "Aditi", + "category": "animated" }, { "file": "Snowy-night.html", "title": "Snowing Mountain Scene", - "author": "Vidhan Sachdeva" + "author": "Vidhan Sachdeva", + "category": "other" }, { "file": "pink_ponk.html", "title": "Animated Pink Ponk Ball", - "author": "Soumyosish" + "author": "Soumyosish", + "category": "animated" }, { "file": "Krasper707-matrix-background.html", "title": "Matrix Terminal Loader", - "author": "Krasper707" + "author": "Krasper707", + "category": "animated" }, { "file": "lighthouse.html", "title": "Light House by the Shore", - "author": "Nitish K" + "author": "Nitish K", + "category": "other" }, { "file": "universesm-door_animation.html", "title": "Animated Almirah door", - "author": "universe-sm" + "author": "universe-sm", + "category": "animated" }, { "file": "universesm_RotatingCarWheel.html", "title": "Rotating Car Wheel", - "author": "universe-sm" + "author": "universe-sm", + "category": "animated" }, - { + { "file": "circular-image-gallery.html", "title": "Animated circular-image-gallery", - "author": "Harshit" + "author": "Harshit", + "category": "animated" }, { "file": "Debosmita_Particle_text_effect.html", "title": "Particle Text Effect", - "author": "Debosmita" + "author": "Debosmita", + "category": "animated" }, - { "file": "coder561858-Rollingballs.html", "title": "Rolling Balls", - "author": "coder561858" + "author": "coder561858", + "category": "animated" }, - { + { "file": "Living_Origami.html", "title": "Animated Living Origami", - "author": "Harsha" + "author": "Harsha", + "category": "animated" }, -{ + { "file": "flying-bird.html", "title": "Flying Bird", - "author": "Thanuja Kedila" + "author": "Thanuja Kedila", + "category": "animated" }, -{ + { "file": "atomic-structure.html", "title": "Atomic Structure", - "author": "Nitish K" + "author": "Nitish K", + "category": "animated" }, { - "file":"Aurora-pulse.html", - "title":"Aurora Pulse", - "author":"Komal Sathvik" - + "file": "Aurora-pulse.html", + "title": "Aurora Pulse", + "author": "Komal Sathvik", + "category": "animated" }, { - "file":"AmanSingh-textswing animation.html", - "title":"textswing animation", - "author":"Aman Singh" + "file": "AmanSingh-textswing animation.html", + "title": "textswing animation", + "author": "Aman Singh", + "category": "animated" }, { - "file":"amansingh-firerext.html", - "title":"fire text animation", - "author":"Aman Singh" + "file": "amansingh-firerext.html", + "title": "fire text animation", + "author": "Aman Singh", + "category": "animated" }, { - "file":"amansingh-ghost&ghouls.html", - "title":"ghost&ghouls text animation", - "author":"Aman Singh" + "file": "amansingh-ghost&ghouls.html", + "title": "ghost&ghouls text animation", + "author": "Aman Singh", + "category": "animated" }, { - "file":"Particle-Text.html", - "title":"Particle Text", - "author":"Shamli Singh Yadav" + "file": "Particle-Text.html", + "title": "Particle Text", + "author": "Shamli Singh Yadav", + "category": "animated" }, { - "file":"Minimal-Sunset.html", - "title":"Minimal Sunset", - "author":"Kartikay" + "file": "Minimal-Sunset.html", + "title": "Minimal Sunset", + "author": "Kartikay", + "category": "minimal" }, { - "file":"Neon-Cube.html", - "title":"Neon Cube", - "author":"Kartikay" + "file": "Neon-Cube.html", + "title": "Neon Cube", + "author": "Kartikay", + "category": "animated" }, { - "file":"Waves-Footer.html", - "title":"Waves Footer", - "author":"Kartikay" + "file": "Waves-Footer.html", + "title": "Waves Footer", + "author": "Kartikay", + "category": "minimal" }, { - "file":"glowing-star.html", - "title":"Glowing Star", - "author":"Thanuja Kedila" + "file": "glowing-star.html", + "title": "Glowing Star", + "author": "Thanuja Kedila", + "category": "animated" }, { - "file":"day-night-cycle.html", - "title":"Day Night Cycle", - "author":"Nitish K" + "file": "day-night-cycle.html", + "title": "Day Night Cycle", + "author": "Nitish K", + "category": "minimal" }, { "file": "sameera731-nebula-dance.html", "title": "Nebula Dance", - "author": "Sameera Jape" + "author": "Sameera Jape", + "category": "animated" } - -] - +] \ No newline at end of file diff --git a/index.html b/index.html index 82daf2d..fc7c734 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,13 @@

Recently Reviewed

+
+ + + + + +

Art Museum

diff --git a/js/script.js b/js/script.js index 40ee249..915194d 100644 --- a/js/script.js +++ b/js/script.js @@ -217,6 +217,7 @@ document.addEventListener("DOMContentLoaded", () => { artCard.dataset.file = art.file; artCard.dataset.title = art.title; artCard.dataset.author = art.author; + artCard.dataset.category = art.category; // Add this line const filePath = `arts/${art.file}`; const isLiked = LikedArtworks.isLiked(art.file); @@ -455,6 +456,9 @@ searchBar.addEventListener("input", () => { renderRecentlyReviewed(); + // Initial render of all arts based on the 'all' category + filterAndRenderArts('all'); + if (recentlyReviewedContainer) { recentlyReviewedContainer.addEventListener('click', handleRecentLikeClick); } @@ -468,3 +472,29 @@ searchBar.addEventListener("input", () => { } }); }); + +// --- Category Filter Logic --- +const categoryRadios = document.querySelectorAll('input[name="category"]'); +categoryRadios.forEach(radio => { +radio.addEventListener('change', (event) => { +const selectedCategory = event.target.value; +filterAndRenderArts(selectedCategory); +}); +}); + +function filterAndRenderArts(selectedCategory) { +let filteredArts = []; +if (selectedCategory === 'all') { +filteredArts = allArts; +} else { +filteredArts = allArts.filter(art => art.category === selectedCategory); +} +currentFilteredArts = filteredArts; // Update currentFilteredArts for sorting +if (pagination) { +pagination.setItems(filteredArts); // Update pagination with filtered items +pagination.goToPage(1); // Go to the first page of filtered results +} else { +renderArtCards(filteredArts); +} +} +}); diff --git a/style.css b/style.css index 302fb7b..e3ae6fc 100644 --- a/style.css +++ b/style.css @@ -378,13 +378,18 @@ header p { } /* Museum-Quality Art Cards with Enhanced Visual Appeal */ +.gallery .art-card { /* Specific transitions for filtering */ + display: block; + transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, border 0.3s ease; +} + .art-card { background: var(--secondary-bg); border-radius: 16px; /* Reduced radius */ padding: 20px; /* Reduced padding */ box-shadow: 0 4px 12px var(--shadow-light), 0 12px 32px var(--shadow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.6); - transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* General transitions for other properties */ border: 1px solid var(--border-color); position: relative; overflow: hidden; @@ -548,6 +553,29 @@ header p { box-shadow: 0 4px 12px rgba(108, 99, 255, 0.1); } +/* Category Filtering for Art Cards */ +.category-filters input[value="abstract"]:not(:checked) ~ .gallery .art-card[data-category="abstract"], +.category-filters input[value="funny"]:not(:checked) ~ .gallery .art-card[data-category="funny"], +.category-filters input[value="minimal"]:not(:checked) ~ .gallery .art-card[data-category="minimal"], +.category-filters input[value="animated"]:not(:checked) ~ .gallery .art-card[data-category="animated"] { + transform: scale(0.8); + opacity: 0; + height: 0; + overflow: hidden; + margin: 0; + padding: 0; + border: none; +} + +.category-filters input[value="all"]:checked ~ .gallery .art-card { + transform: scale(1); + opacity: 1; + height: auto; + margin: 10px; + padding: 15px; + border: 1px solid var(--border-color); +} + /* === NEW FOOTER STYLES START === */ /* =================== Footer Styles =================== */ /* =================== Footer Styles =================== */ @@ -642,1211 +670,5 @@ li { width: 50px; /* small GitHub logo */ height: 50px; object-fit: contain; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - border-radius: 50%; - padding: 5px; - background: transparent; -} - -.footer-social a { - display: flex; /* Allows sizing and centering */ - align-items: center; - justify-content: center; - width: 40px; /* Set a fixed size for the clickable area */ - height: 40px; - border-radius: 50%; - - /* Standard button transition and appearance */ - background: var(--secondary-bg); - border: 1px solid var(--border-color); - box-shadow: 0 4px 12px var(--shadow-light); - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -.footer-social a:hover { - /* Apply the light mode blue background/glow */ - background: linear-gradient( - 135deg, - var(--accent-subtle), - rgba(212, 175, 55, 0.1) - ); - border-color: var(--accent-color); - box-shadow: 0 8px 20px var(--shadow-medium), 0 12px 32px var(--shadow-strong), - 0 0 0 1px rgba(99, 91, 249, 0.2), inset 0 1px 0 rgba(117, 209, 237, 0.8); - color: var(--accent-color); - - /* Move the transform animation to the container as well */ - transform: translateY(-4px) scale(1.1); -} - -.footer-social a:active { - transform: translateY(-2px) scale(1.05); -} -/* footer-input */ -.footer-newsletter form { - display: flex; - flex-direction: column; - gap: 1rem; -} -.footer-newsletter input { - padding: 0.6rem 0.8rem; - font-size: 1rem; - outline: none; - border: none; - border-radius: 10px; -} -.footer-newsletter input:focus { - border: 2px solid rgba(0, 0, 0, 0.5); -} -#subscribe-btn { - border-radius: 10px; - padding: 0.8rem 1rem; - font-size: 1rem; - box-shadow: 0 4px 10px rgba(108, 99, 255, 0.15); - outline: none; - border: none; - border: 2px solid #4f499c; - color: #4439db; - width: 80%; - transition: all 0.3s ease; -} -#subscribe-btn:hover { - background: #4f499c; - color: white; -} - -/* Footer Buttons (Star / Contributors) */ -.footer-extra-buttons { - display: flex; - align-items: center; - justify-content: start; - gap: 10px; -} - -.footer-button { - display: flex; - align-items: center; - gap: 5px; - padding: 8px 12px; - background-color: transparent; - border: 1px solid var(--accent); - border-radius: 6px; - text-decoration: none; - color: var(--accent); - font-size: 0.9rem; - transition: 0.3s ease; -} - -.footer-button:hover { - background-color: var(--accent); - color: #fff; -} - -.star-icon { - width: 16px; - height: 16px; -} - -/* Footer Bottom */ -.footer-bottom { - text-align: center; - padding: 15px; - background-color: var(--footer-bottom-bg); - font-size: 0.85rem; - margin-top: 20px; -} - -/* === NEW FOOTER STYLES END === */ - -/* Dark Theme - Sophisticated Museum Night Mode */ -.dark-theme { - --primary-bg: #0f0f0f; - --secondary-bg: #1a1a1a; - --accent-bg: #161616; - --primary-text: #f0f0f0; - --secondary-text: #c0c0c0; - --muted-text: #888888; - --border-color: #2a2a2a; - --shadow-light: rgba(0, 0, 0, 0.3); - --shadow-medium: rgba(0, 0, 0, 0.4); - --shadow-strong: rgba(0, 0, 0, 0.5); - --accent-color: #8b7fff; - --accent-subtle: #1a1825; - --gold-accent: #f4d03f; - --museum-warm: #1c1915; - --button-bg: #21262d; - --button-border: #30363d; - --button-hover-bg: #30363d; - --count-bg: rgba(72, 83, 99, 0.5); - --logo-filter: invert(1); /* Invert logo for dark mode */ -} - -.dark-theme body { - background: linear-gradient( - 135deg, - var(--primary-bg) 0%, - var(--museum-warm) 100% - ); -} - -/* Dark theme styles for new navbar */ -.dark-theme header nav { - background: rgba(30, 30, 30, 0.5); - border: 1px solid rgba(139, 127, 255, 0.2); - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); -} - -.dark-theme .art-card { - background: var(--secondary-bg); - border-color: var(--border-color); -} - -.dark-theme .art-card:hover { - border-color: var(--accent-color); -} - -.dark-theme footer { - background: var(--accent-bg); - border-color: var(--border-color); -} - -.dark-theme .footer-social a { - background: var(--secondary-bg); - border-color: var(--border-color); -} - -.dark-theme .footer-social a:hover { - background: linear-gradient( - 135deg, - var(--accent-subtle), - rgba(212, 175, 55, 0.1) - ); - border-color: var(--accent-color); - box-shadow: 0 8px 20px rgba(139, 127, 255, 0.2); - color: var(--accent-color); -} - -/* IMPORTANT: Re-apply the transform to the IMAGE on hover, so the icon also scales */ -.footer-social a:hover .footer-social-logo { - transform: none; /* Reset transform on the image, the parent handles it now */ - filter: brightness(1.1); /* Optional: brighten icon on hover */ -} - -/* ==================== RESPONSIVE DESIGN ==================== */ - -/* Large Desktop (1400px and up) */ -@media (min-width: 1400px) { - .gallery { - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - max-width: 1600px; - } - - header nav { - max-width: 1600px; - } -} - -/* Desktop (1200px to 1399px) */ -@media (max-width: 1399px) and (min-width: 1200px) { - .gallery { - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - max-width: 1200px; - } -} - -/* Large Tablet (992px to 1199px) */ -@media (max-width: 1199px) and (min-width: 992px) { - body { - padding: 90px 20px 30px; - } - - header nav { - width: 90%; - max-width: 1000px; - padding: 12px 20px; - } - - .gallery { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 25px; - max-width: 1000px; - } - - .art-card iframe { - height: 220px; - } - - #search-bar { - max-width: 400px; - margin: 0 16px; - } -} - -/* Tablet (768px to 991px) */ -@media (max-width: 991px) and (min-width: 768px) { - body { - padding: 80px 15px 25px; - } - - header nav { - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - gap: 12px; - top: 15px; - padding: 14px 18px; - width: calc(100% - 30px); - } - - header h1.logo { - font-size: 1.6rem; - order: 1; - flex: 1; - min-width: 200px; - } - - #search-bar { - order: 3; - flex: 1; - min-width: 250px; - margin: 0; - max-width: none; - } - - .theme-toggle { - order: 2; - padding: 8px 16px; - font-size: 0.85rem; - } - - .star-button { - order: 4; - padding: 8px 12px; - font-size: 0.8rem; - } - - .gallery { - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 20px; - padding: 0 10px; - } - - .art-card { - padding: 18px; - } - - .art-card iframe { - height: 200px; - } - - .section-title { - font-size: 1.4rem; - } -} - -/* Mobile Large (576px to 767px) */ -@media (max-width: 767px) and (min-width: 576px) { - body { - padding: 100px 12px 20px; - } - - header { - margin-bottom: 30px; - } - - header nav { - flex-direction: column; - gap: 14px; - top: 15px; - padding: 16px; - width: calc(100% - 24px); - } - - header h1.logo { - font-size: 1.5rem; - order: 1; - } - - #search-bar { - order: 2; - margin: 0; - max-width: none; - width: 100%; - } - - .theme-toggle { - order: 3; - padding: 8px 14px; - font-size: 0.8rem; - } - - .star-button { - order: 4; - padding: 8px 12px; - font-size: 0.75rem; - } - - .gallery { - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - gap: 18px; - padding: 0 8px; - } - - .art-card { - padding: 16px; - } - - .art-card iframe { - height: 180px; - } - - .section-title { - font-size: 1.3rem; - } - - header p { - font-size: 1rem; - padding: 12px 20px; - } -} - -/* Mobile Small (up to 575px) */ -@media (max-width: 575px) { - body { - padding: 90px 10px 15px; - } - - header { - margin-bottom: 25px; - } - - header nav { - flex-direction: column; - gap: 12px; - top: 10px; - padding: 14px; - width: calc(100% - 20px); - } - - header h1.logo { - font-size: 1.3rem; - order: 1; - } - - #search-bar { - order: 2; - margin: 0; - max-width: none; - width: 100%; - padding: 8px 16px; - font-size: 0.9rem; - } - - .theme-toggle { - order: 3; - padding: 6px 12px; - font-size: 0.75rem; - } - - .star-button { - order: 4; - padding: 6px 10px; - font-size: 0.7rem; - } - - .gallery { - grid-template-columns: 1fr; - gap: 15px; - padding: 0 5px; - } - - .art-card { - padding: 14px; - } - - .art-card iframe { - height: 160px; - } - - .section-title { - font-size: 1.2rem; - margin: 8px auto 15px; - } - - header p { - font-size: 0.95rem; - padding: 10px 16px; - line-height: 1.6; - } - - .art-card h3 { - font-size: 1rem; - margin: 6px 0 10px; - } - - .art-card p { - font-size: 0.85rem; - padding: 8px 12px; - } -} -/* ==================== FOOTER RESPONSIVENESS ==================== */ - -/* Large Desktop Footer */ -@media (min-width: 1400px) { - .footer-container { - grid-template-columns: repeat(5, 1fr); - max-width: 1600px; - padding: 50px 40px; - } -} - -/* Desktop Footer */ -@media (max-width: 1399px) and (min-width: 1200px) { - .footer-container { - grid-template-columns: repeat(5, 1fr); - max-width: 1200px; - padding: 45px 35px; - } -} - -/* Large Tablet Footer */ -@media (max-width: 1199px) and (min-width: 992px) { - .footer-container { - grid-template-columns: repeat(4, 1fr); - padding: 40px 30px; - gap: 1.5rem; - } - - .footer-section { - flex: 1 1 180px; - } -} - -/* Tablet Footer */ -@media (max-width: 991px) and (min-width: 768px) { - .footer-container { - grid-template-columns: repeat(3, 1fr); - padding: 35px 25px; - gap: 1.2rem; - } - - .footer-section { - flex: 1 1 160px; - } - - .footer-social { - gap: 12px; - } - - .footer-social-logo { - width: 45px; - height: 45px; - } - - .footer-social a { - width: 35px; - height: 35px; - } -} - -/* Mobile Large Footer */ -@media (max-width: 767px) and (min-width: 576px) { - .footer-container { - grid-template-columns: repeat(2, 1fr); - padding: 30px 20px; - gap: 1rem; - } - - .footer-section { - flex: 1 1 140px; - margin: 8px; - } - - .footer-section h3 { - font-size: 1.1rem; - } - - .footer-section p { - font-size: 0.9rem; - line-height: 1.4; - } - - .footer-social { - gap: 10px; - } - - .footer-social-logo { - width: 40px; - height: 40px; - } - - .footer-social a { - width: 32px; - height: 32px; - } - - .footer-extra-buttons { - flex-direction: column; - gap: 8px; - } - - .footer-button { - padding: 6px 10px; - font-size: 0.85rem; - } -} - -/* Mobile Small Footer */ -@media (max-width: 575px) { - .footer-container { - grid-template-columns: 1fr; - padding: 25px 15px; - gap: 0.8rem; - } - - .footer-section { - flex: 1 1 auto; - margin: 5px 0; - text-align: center; - } - - .footer-section h3 { - font-size: 1rem; - margin-bottom: 8px; - } - - .footer-section p { - font-size: 0.85rem; - line-height: 1.3; - } - - .footer-section ul { - padding-left: 0; - } - - .footer-section li { - list-style: none; - margin: 4px 0; - } - - .footer-social { - justify-content: center; - gap: 8px; - } - - .footer-social-logo { - width: 35px; - height: 35px; - } - - .footer-social a { - width: 30px; - height: 30px; - } - - .footer-extra-buttons { - flex-direction: column; - gap: 6px; - align-items: center; - } - - .footer-button { - padding: 5px 8px; - font-size: 0.8rem; - width: 100%; - max-width: 200px; - } - - .footer-newsletter form { - gap: 0.8rem; - } - - .footer-newsletter input { - padding: 0.5rem 0.7rem; - font-size: 0.9rem; - } - - #subscribe-btn { - padding: 0.6rem 0.8rem; - font-size: 0.9rem; - width: 100%; - } - - .footer-bottom { - font-size: 0.8rem; - padding: 12px; - } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - :root { - --border-color: #333333; - --shadow-light: rgba(0, 0, 0, 0.2); - } - - .dark-theme { - --border-color: #666666; - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -.art-card iframe { - pointer-events: none; -} - -/* MODIFIED: View Code Button Styling */ -.view-code { - display: block; - width: 100%; - margin-top: 16px; - text-decoration: none; - text-align: center; - transition: all 0.3s ease-out; - cursor: pointer; - padding: 10px 16px; - border-radius: 10px; - border: 1px solid rgba(108, 99, 255, 0.2); - background: transparent; - color: var(--accent-color); - font-weight: 500; - font-size: 0.9rem; -} - -.view-code button { - background: none; - border: none; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - cursor: pointer; -} - -.view-code:hover { - background: var(--accent-subtle); - border-color: var(--accent-color); - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(108, 99, 255, 0.1); - color: var(--accent-color); -} - -.dark-theme .view-code { - border-color: rgba(139, 127, 255, 0.3); -} - -.dark-theme .view-code:hover { - background: var(--accent-subtle); - border-color: var(--accent-color); -} - -/* Scroll to Top Button */ -.scroll-to-top { - position: fixed; - bottom: 30px; - right: 30px; - width: 50px; - height: 50px; - background: var(--secondary-bg); - border: 1px solid var(--border-color); - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 4px 12px var(--shadow-light), 0 8px 24px var(--shadow-medium), - inset 0 1px 0 rgba(255, 255, 255, 0.6); - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - opacity: 0; - visibility: hidden; - transform: translateY(20px) scale(0.8); - z-index: 1000; - backdrop-filter: blur(10px); - color: var(--secondary-text); -} - -.scroll-to-top.visible { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); -} - -.scroll-to-top:hover { - background: linear-gradient( - 135deg, - var(--accent-subtle), - rgba(212, 175, 55, 0.1) - ); - border-color: var(--accent-color); - transform: translateY(-4px) scale(1.1); - box-shadow: 0 8px 20px var(--shadow-medium), 0 12px 32px var(--shadow-strong), - 0 0 0 1px rgba(108, 99, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8); - color: var(--accent-color); -} - -.scroll-to-top:active { - transform: translateY(-2px) scale(1.05); -} - -.scroll-to-top svg { - transition: all 0.3s ease; -} - -.scroll-to-top:hover svg { - transform: translateY(-2px); -} - -/* Dark theme support for scroll to top button */ -.dark-theme .scroll-to-top { - background: var(--secondary-bg); - border-color: var(--border-color); - color: var(--secondary-text); -} - -.dark-theme .scroll-to-top:hover { - background: linear-gradient( - 135deg, - var(--accent-subtle), - rgba(212, 175, 55, 0.1) - ); - border-color: var(--accent-color); - color: var(--accent-color); -} - -/* ==================== RESPONSIVE TYPOGRAPHY ==================== */ - -/* Base responsive typography */ -@media (max-width: 1199px) { - .section-title { - font-size: clamp(1.2rem, 2vw, 1.5rem); - } - - header p { - font-size: clamp(1rem, 1.5vw, 1.1rem); - } -} - -@media (max-width: 767px) { - .section-title { - font-size: clamp(1.1rem, 1.8vw, 1.3rem); - } - - header p { - font-size: clamp(0.95rem, 1.3vw, 1rem); - } - - .art-card h3 { - font-size: clamp(0.95rem, 1.2vw, 1.05rem); - } - - .art-card p { - font-size: clamp(0.8rem, 1vw, 0.9rem); - } -} - -@media (max-width: 575px) { - .section-title { - font-size: clamp(1rem, 1.5vw, 1.2rem); - } - - header p { - font-size: clamp(0.9rem, 1.2vw, 0.95rem); - } - - .art-card h3 { - font-size: clamp(0.9rem, 1.1vw, 1rem); - } - - .art-card p { - font-size: clamp(0.75rem, 0.9vw, 0.85rem); - } -} - -/* ==================== RESPONSIVE SCROLL TO TOP BUTTON ==================== */ - -/* Responsive adjustments for scroll to top button */ -@media (max-width: 768px) { - .scroll-to-top { - bottom: 20px; - right: 20px; - width: 45px; - height: 45px; - } -} - -@media (max-width: 480px) { - .scroll-to-top { - bottom: 15px; - right: 15px; - width: 40px; - height: 40px; - } -} - -/* ==================== RESPONSIVE CARD ACTIONS ==================== */ - -/* Responsive card actions */ -@media (max-width: 767px) { - .card-actions { - grid-template-columns: 1fr; - gap: 8px; - } - - .view-code, - .like-container { - padding: 8px; - font-size: 0.85rem; - } -} - -@media (max-width: 575px) { - .card-actions { - gap: 6px; - } - - .view-code, - .like-container { - padding: 6px; - font-size: 0.8rem; - } - - .heart-icon { - width: 18px; - height: 18px; - } - - .like-count { - font-size: 0.8rem; - } -} - -.dark-theme .view-code:hover { - box-shadow: 0 8px 25px rgba(139, 127, 255, 0.2); -} - -.card-actions { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; - margin-top: 5px; - padding: 0 4px 4px; -} - -.view-code { - display: flex; - justify-content: center; - align-items: center; - padding: 10px; - border-radius: 10px; - border: 1px solid var(--border-color); - background: transparent; - color: var(--secondary-text); - font-weight: 500; - font-size: 0.9rem; - text-decoration: none; - transition: all 0.2s ease-in-out; -} - -.view-code button { - background: none; - border: none; - font: inherit; - color: inherit; - cursor: pointer; -} - -.like-container { - display: flex; - justify-content: center; - align-items: center; - gap: 8px; - border-radius: 10px; - border: 1px solid var(--border-color); - background: transparent; - color: var(--secondary-text); - cursor: pointer; - transition: all 0.2s ease-in-out; -} - -/* Unified hover effects for both buttons */ -.view-code:hover, -.like-container:hover { - background-color: var(--accent-subtle); - border-color: var(--accent-color); - color: var(--accent-color); - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(108, 99, 255, 0.1); -} - -/* Dark theme adjustments */ -.dark-theme .view-code, -.dark-theme .like-container { - border-color: var(--button-border); - color: var(--secondary-text); -} - -.dark-theme .view-code:hover, -.dark-theme .like-container:hover { - background-color: var(--accent-subtle); - border-color: var(--accent-color); - color: var(--accent-color); - box-shadow: 0 4px 15px rgba(139, 127, 255, 0.2); -} - -/* Icon styling to inherit color and handle the 'liked' state */ -.heart-icon { - width: 20px; - height: 20px; - stroke: currentColor; /* Icon color will now match the text color */ - fill: none; - transition: fill 0.2s, stroke 0.2s; -} - -.heart-icon.liked { - fill: #ff4d4d; - stroke: #ff4d4d; -} - -/* This prevents the icon from changing color on hover if it's already liked */ -.like-container:hover .heart-icon.liked { - color: #ff4d4d; -} - -.like-count { - font-weight: 500; - font-size: 0.9rem; -} - -/* ==================== SORTING CONTAINER RESPONSIVENESS ==================== */ - -.sorting-container { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - margin-bottom: 20px; - flex-wrap: wrap; -} - -.sorting-container label { - padding: 10px; - font-size: 1rem; - color: var(--secondary-text); - white-space: nowrap; -} - -.sorting-container select { - padding: 6px 10px; - border-radius: 8px; - border: 1px solid var(--border-color); - background: var(--secondary-bg); - color: var(--primary-text); - font-size: 0.95rem; - cursor: pointer; - transition: all 0.3s ease; - min-width: 120px; -} - -.sorting-container select:hover { - border-color: var(--accent-color); - box-shadow: 0 4px 12px rgba(108, 99, 255, 0.1); -} - -/* Responsive sorting container */ -@media (max-width: 767px) { - .sorting-container { - gap: 8px; - margin-bottom: 15px; - } - - .sorting-container label { - padding: 8px; - font-size: 0.9rem; - } - - .sorting-container select { - padding: 5px 8px; - font-size: 0.9rem; - min-width: 100px; - } -} - -@media (max-width: 575px) { - .sorting-container { - flex-direction: column; - gap: 6px; - margin-bottom: 12px; - } - - .sorting-container label { - padding: 6px; - font-size: 0.85rem; - } - - .sorting-container select { - padding: 4px 6px; - font-size: 0.85rem; - min-width: 80px; - width: 100%; - max-width: 200px; - } -} - -/* Dark theme styles for header elements */ -.dark-theme header nav { - background: rgba(26, 26, 26, 0.65); /* Darker, more defined glass effect */ - border: 1px solid rgba(139, 127, 255, 0.15); - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); -} - -.dark-theme #search-bar { - background: rgba(40, 40, 40, 0.75); /* Contrasting dark background */ - border-color: var(--border-color); - color: var(--primary-text); - box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06); /* Subtle inner highlight */ -} - -.dark-theme #search-bar::placeholder { - color: var(--secondary-text); - opacity: 0.9; -} - -.dark-theme #search-bar:focus { - background: rgba(50, 50, 50, 0.8); - border-color: var(--accent-color); - box-shadow: 0 0 0 3px rgba(139, 127, 255, 0.25), - /* Added a focus ring for accessibility */ inset 0 1px 1px - rgba(255, 255, 255, 0.08); -} - -.dark-theme header p { - /* Using a solid background from your variables for better readability */ - background: var(--secondary-bg); - border: 1px solid var(--border-color); - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); - color: var(--secondary-text); - /* The blur effect is not needed with a solid background */ - backdrop-filter: none; -} - -/* ==================== RECENTLY REVIEWED RESPONSIVENESS ==================== */ - -#recently-reviewed-gallery { - grid-template-columns: repeat(3, 320px); - max-width: calc(320px * 3 + 30px * 2); -} - -/* Responsive recently reviewed gallery */ -@media (max-width: 1199px) and (min-width: 992px) { - #recently-reviewed-gallery { - grid-template-columns: repeat(3, 300px); - max-width: calc(300px * 3 + 25px * 2); - } -} - -@media (max-width: 991px) and (min-width: 768px) { - #recently-reviewed-gallery { - grid-template-columns: repeat(2, 280px); - max-width: calc(280px * 2 + 20px); - } -} - -@media (max-width: 767px) and (min-width: 576px) { - #recently-reviewed-gallery { - grid-template-columns: repeat(2, 260px); - max-width: calc(260px * 2 + 18px); - } -} - -@media (max-width: 575px) { - #recently-reviewed-gallery { - grid-template-columns: 1fr; - max-width: 100%; - } -} - -/* Fix for Issue #184: Recently Reviewed Section Transitions */ - -/* Add smooth transition for recently reviewed container */ -.recently-reviewed-container { - transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease; - overflow: hidden; - opacity: 1; - max-height: 1000px; /* Adjust based on your content */ -} - -/* Hidden state for recently reviewed section */ -.recently-reviewed-container.hidden { - opacity: 0; - max-height: 0; - margin: 0; - pointer-events: none; -} - -/* Ensure sorting container has proper spacing */ -.sorting-container { - margin-top: 20px; - margin-bottom: 30px; - transition: margin 0.3s ease; -} - -/* Adjust margin when recently reviewed is hidden */ -.recently-reviewed-container.hidden + .sorting-container { - margin-top: 0; -} - - -/* ==================== FINAL RESPONSIVE IMPROVEMENTS ==================== */ - -/* Ensure proper touch targets for mobile */ -@media (max-width: 767px) { - .theme-toggle, - .star-button, - .footer-button, - .view-code, - .like-container { - min-height: 44px; /* iOS recommended touch target size */ - min-width: 44px; - } -} - -/* Improve text selection on mobile */ -@media (max-width: 767px) { - * { - -webkit-tap-highlight-color: rgba(108, 99, 255, 0.2); - } -} - -/* Prevent horizontal scroll on mobile */ -@media (max-width: 575px) { - body { - overflow-x: hidden; - } - - .gallery, - .footer-container { - overflow-x: hidden; - } -} - -/* Improve focus states for accessibility */ -@media (max-width: 767px) { - .theme-toggle:focus, - .star-button:focus, - .view-code:focus, - .like-container:focus { - outline: 2px solid var(--accent-color); - outline-offset: 2px; - } -} - -/* Animated circular gallery */ + transition: all 0.0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000