From 3079be4a269efea79e533bf4e47d9276bf644863 Mon Sep 17 00:00:00 2001 From: Akshat Date: Fri, 31 Oct 2025 10:55:40 +0530 Subject: [PATCH 1/4] Random_Identity --- src/data/content.js | 8 ++ src/pages/activities/RandomIdentity.js | 54 ++++++++ .../pages/activities/RandomIdentity.css | 129 ++++++++++++++++++ 3 files changed, 191 insertions(+) create mode 100644 src/pages/activities/RandomIdentity.js create mode 100644 src/styles/pages/activities/RandomIdentity.css diff --git a/src/data/content.js b/src/data/content.js index f7129af..5b26556 100644 --- a/src/data/content.js +++ b/src/data/content.js @@ -25,6 +25,7 @@ import GKQuiz from "../pages/games/Gk_quiz" import { DogHttpCode } from "../pages/activities/DogHttpCode"; import { CatHttpCode } from "../pages/activities/CatHttpCode"; import FlappyBird from "../pages/games/FlappyBird"; +import RandomIdentity from "../pages/activities/RandomIdentity"; export const activities = [ { @@ -90,6 +91,13 @@ export const activities = [ urlTerm: "cat-http-status", element: , }, + { + title: "Random Identity Generator", + description:"Get random identity for yourself", + icon:"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/2a/51/52/2a5152df-66f0-fc94-6e5e-251d3b2d6ef8/AppIcon-0-0-1x_U007emarketing-0-6-0-85-220.png/1200x630wa.png", + urlTerm:"random-identity", + element: + } ]; export const games = [ diff --git a/src/pages/activities/RandomIdentity.js b/src/pages/activities/RandomIdentity.js new file mode 100644 index 0000000..4911ba4 --- /dev/null +++ b/src/pages/activities/RandomIdentity.js @@ -0,0 +1,54 @@ +// src/pages/activities/RandomIdentity.jsx +import { useState } from "react"; +import "../../styles/pages/activities/RandomIdentity.css"; + +const identities = [ + "🦊 Sly Fox β€” clever, quick, slightly chaotic", + "🐒 Chill Turtle β€” slow today, still winning", + "🐼 Cozy Panda β€” productivity is optional", + "🐧 Focused Penguin β€” cute but on task", + "🐱 Curious Cat β€” click everything, learn everything", + "🐯 Tiger Mode β€” roar through your to-do list", + "🐀 Soft Chick β€” be gentle with yourself", + "🦁 King Lion β€” confidence level: 100", + "πŸ¦„ Rainbow Unicorn β€” unique, unbothered, magical", + "πŸ™ Octo-Tasker β€” doing 8 things at once", + "πŸ¦₯ Lazy Sloth β€” rest is a feature, not a bug", + "🐝 Busy Bee β€” buzzing with ideas", + "πŸ¦– Dino Dev β€” old school but powerful", + "🦜 Parrot Pro β€” repeating good habits", + "πŸ¦” Spiky Hedgehog β€” cute but don’t test me", + "πŸ¦‹ Glow Butterfly β€” transformation era", + "🦚 Peacock Vibes β€” you look good today", + "🐸 Frog Jumper β€” hop over problems", + "πŸ• Loyal Doggo β€” supportive teammate energy", + "🐍 Sneaky Python β€” silent, smart, sssssharp", + "πŸͺ½ Soft Angel Mode β€” kindness first", + "🌊 Ocean Brain β€” calm but deep", + "πŸ”₯ Hot Streak β€” everything is working today", + "πŸŒ™ Night Coder β€” 2 AM productivity unlocked" +]; + +export default function RandomIdentity() { + const [text, setText] = useState(identities[0]); + + function changeIdentity() { + const random = Math.floor(Math.random() * identities.length); + setText(identities[random]); + } + + return ( +
+
+
+

Today’s Random Identity ✨

+

Click to find today’s vibe

+

{text}

+ +

Tip: keep clicking till it feels right 😌

+
+
+ ); +} diff --git a/src/styles/pages/activities/RandomIdentity.css b/src/styles/pages/activities/RandomIdentity.css new file mode 100644 index 0000000..80a55e7 --- /dev/null +++ b/src/styles/pages/activities/RandomIdentity.css @@ -0,0 +1,129 @@ +/* src/styles/pages/activities/RandomIdentity.css */ +:root { + --bg: radial-gradient(circle at top, #0f172a 0%, #020617 45%, #000 80%); + --card-bg: rgba(10, 16, 26, 0.45); + --border: rgba(255, 255, 255, 0.12); + --accent: #f97316; + --accent-soft: rgba(249, 115, 22, 0.25); + --text-primary: #e2e8f0; + --text-secondary: #94a3b8; + --radius-lg: 1.4rem; +} + +.identity-wrapper { + min-height: 80vh; + display: grid; + place-items: center; + background: var(--bg); + position: relative; + padding: 2.5rem 1.2rem; + overflow: hidden; +} + +.identity-glow { + position: absolute; + width: 420px; + height: 420px; + background: radial-gradient(circle, rgba(249, 115, 22, 0.35), rgba(2, 6, 23, 0)); + filter: blur(60px); + top: -70px; + right: -40px; + pointer-events: none; +} + +.identity-card { + width: min(460px, 100%); + background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.25)); + border: 1px solid rgba(148, 163, 184, 0.15); + border-top: 1px solid rgba(255, 255, 255, 0.2); + border-radius: var(--radius-lg); + backdrop-filter: blur(14px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); + padding: 1.8rem 1.4rem 2.1rem; + text-align: center; + position: relative; +} + +.identity-title { + color: var(--text-primary); + font-size: 1.5rem; + font-weight: 700; + letter-spacing: -0.01em; +} + +.identity-sub { + margin-top: 0.3rem; + color: var(--text-secondary); + font-size: 0.85rem; +} + +.identity-box { + background: radial-gradient(circle at top, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0)); + border: 1px solid rgba(148, 163, 184, 0.2); + border-radius: 1.1rem; + margin-top: 1.1rem; + padding: 1.1rem 1rem; + min-height: 78px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-primary); + font-weight: 600; + line-height: 1.45; + font-size: 1.02rem; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); +} + +.identity-btn { + width: fit-content; + margin: 1.25rem auto 0; + background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%); + color: #0f172a; + border: none; + padding: 0.6rem 1.5rem; + border-radius: 999px; + cursor: pointer; + font-weight: 600; + letter-spacing: -0.01em; + display: flex; + gap: 0.35rem; + align-items: center; + justify-content: center; + transition: transform 0.1s ease-out, box-shadow 0.15s ease-out; + box-shadow: 0 12px 25px rgba(249, 115, 22, 0.4); +} + +.identity-btn::after { + content: "↻"; + font-size: 0.8rem; +} + +.identity-btn:hover { + transform: translateY(-1px); + box-shadow: 0 15px 28px rgba(249, 115, 22, 0.45); +} + +.identity-btn:active { + transform: translateY(0); +} + +.identity-hint { + margin-top: 0.85rem; + font-size: 0.7rem; + color: var(--text-secondary); +} + +@media (max-width: 520px) { + .identity-card { + padding: 1.4rem 1rem 1.8rem; + } + .identity-title { + font-size: 1.35rem; + } + .identity-box { + font-size: 0.97rem; + } + .identity-wrapper { + padding-inline: 0.65rem; + } +} From 342dec523b2b8973a3dc8c4c02bee01a692f5e3b Mon Sep 17 00:00:00 2001 From: Akshat Date: Fri, 31 Oct 2025 11:03:10 +0530 Subject: [PATCH 2/4] Added --- src/pages/activities/RandomIdentity.js | 34 ++-- .../pages/activities/RandomIdentity.css | 154 +++++------------- 2 files changed, 56 insertions(+), 132 deletions(-) diff --git a/src/pages/activities/RandomIdentity.js b/src/pages/activities/RandomIdentity.js index 4911ba4..a8e6d8b 100644 --- a/src/pages/activities/RandomIdentity.js +++ b/src/pages/activities/RandomIdentity.js @@ -1,4 +1,3 @@ -// src/pages/activities/RandomIdentity.jsx import { useState } from "react"; import "../../styles/pages/activities/RandomIdentity.css"; @@ -9,45 +8,38 @@ const identities = [ "🐧 Focused Penguin β€” cute but on task", "🐱 Curious Cat β€” click everything, learn everything", "🐯 Tiger Mode β€” roar through your to-do list", - "🐀 Soft Chick β€” be gentle with yourself", - "🦁 King Lion β€” confidence level: 100", "πŸ¦„ Rainbow Unicorn β€” unique, unbothered, magical", - "πŸ™ Octo-Tasker β€” doing 8 things at once", "πŸ¦₯ Lazy Sloth β€” rest is a feature, not a bug", "🐝 Busy Bee β€” buzzing with ideas", - "πŸ¦– Dino Dev β€” old school but powerful", - "🦜 Parrot Pro β€” repeating good habits", - "πŸ¦” Spiky Hedgehog β€” cute but don’t test me", "πŸ¦‹ Glow Butterfly β€” transformation era", "🦚 Peacock Vibes β€” you look good today", "🐸 Frog Jumper β€” hop over problems", "πŸ• Loyal Doggo β€” supportive teammate energy", - "🐍 Sneaky Python β€” silent, smart, sssssharp", - "πŸͺ½ Soft Angel Mode β€” kindness first", "🌊 Ocean Brain β€” calm but deep", "πŸ”₯ Hot Streak β€” everything is working today", - "πŸŒ™ Night Coder β€” 2 AM productivity unlocked" + "πŸŒ™ Night Coder β€” 2 AM productivity unlocked", + "πŸ§‹ Boba Thinker β€” sweet, but overthinks sometimes", + "πŸ• Pizza Brain β€” full of ideas (and cheese)", + "🎧 Chill DJ β€” vibing through chaos", + "πŸ“š Wise Owl β€” silent but deadly (with notes)" ]; export default function RandomIdentity() { - const [text, setText] = useState(identities[0]); + const [identity, setIdentity] = useState(identities[0]); - function changeIdentity() { + function handleClick() { const random = Math.floor(Math.random() * identities.length); - setText(identities[random]); + setIdentity(identities[random]); } return ( -
-
-
-

Today’s Random Identity ✨

-

Click to find today’s vibe

-

{text}

- -

Tip: keep clicking till it feels right 😌

); diff --git a/src/styles/pages/activities/RandomIdentity.css b/src/styles/pages/activities/RandomIdentity.css index 80a55e7..ffe7495 100644 --- a/src/styles/pages/activities/RandomIdentity.css +++ b/src/styles/pages/activities/RandomIdentity.css @@ -1,129 +1,61 @@ -/* src/styles/pages/activities/RandomIdentity.css */ -:root { - --bg: radial-gradient(circle at top, #0f172a 0%, #020617 45%, #000 80%); - --card-bg: rgba(10, 16, 26, 0.45); - --border: rgba(255, 255, 255, 0.12); - --accent: #f97316; - --accent-soft: rgba(249, 115, 22, 0.25); - --text-primary: #e2e8f0; - --text-secondary: #94a3b8; - --radius-lg: 1.4rem; -} - -.identity-wrapper { +.identity-light-container { min-height: 80vh; - display: grid; - place-items: center; - background: var(--bg); - position: relative; - padding: 2.5rem 1.2rem; - overflow: hidden; -} - -.identity-glow { - position: absolute; - width: 420px; - height: 420px; - background: radial-gradient(circle, rgba(249, 115, 22, 0.35), rgba(2, 6, 23, 0)); - filter: blur(60px); - top: -70px; - right: -40px; - pointer-events: none; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%); + padding: 2rem; } -.identity-card { - width: min(460px, 100%); - background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.25)); - border: 1px solid rgba(148, 163, 184, 0.15); - border-top: 1px solid rgba(255, 255, 255, 0.2); - border-radius: var(--radius-lg); - backdrop-filter: blur(14px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); - padding: 1.8rem 1.4rem 2.1rem; +.identity-card-light { + background: #ffffff; + border-radius: 20px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + padding: 2rem 2.5rem; + max-width: 450px; + width: 100%; text-align: center; - position: relative; + transition: all 0.3s ease; } -.identity-title { - color: var(--text-primary); - font-size: 1.5rem; - font-weight: 700; - letter-spacing: -0.01em; +.identity-card-light:hover { + transform: translateY(-4px); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } -.identity-sub { - margin-top: 0.3rem; - color: var(--text-secondary); - font-size: 0.85rem; +.identity-title-light { + font-size: 1.6rem; + font-weight: 700; + color: #1e293b; + margin-bottom: 1.2rem; } -.identity-box { - background: radial-gradient(circle at top, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0)); - border: 1px solid rgba(148, 163, 184, 0.2); - border-radius: 1.1rem; - margin-top: 1.1rem; - padding: 1.1rem 1rem; - min-height: 78px; - display: flex; - align-items: center; - justify-content: center; - color: var(--text-primary); - font-weight: 600; - line-height: 1.45; - font-size: 1.02rem; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); +.identity-text-light { + font-size: 1.1rem; + font-weight: 500; + color: #475569; + background: #f8fafc; + border: 1px solid #e2e8f0; + border-radius: 14px; + padding: 1.2rem; + margin-bottom: 1.5rem; + line-height: 1.4; } -.identity-btn { - width: fit-content; - margin: 1.25rem auto 0; - background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%); - color: #0f172a; +.identity-btn-light { + background: linear-gradient(135deg, #60a5fa, #3b82f6); + color: white; border: none; - padding: 0.6rem 1.5rem; + padding: 0.7rem 1.8rem; border-radius: 999px; - cursor: pointer; font-weight: 600; - letter-spacing: -0.01em; - display: flex; - gap: 0.35rem; - align-items: center; - justify-content: center; - transition: transform 0.1s ease-out, box-shadow 0.15s ease-out; - box-shadow: 0 12px 25px rgba(249, 115, 22, 0.4); -} - -.identity-btn::after { - content: "↻"; - font-size: 0.8rem; -} - -.identity-btn:hover { - transform: translateY(-1px); - box-shadow: 0 15px 28px rgba(249, 115, 22, 0.45); -} - -.identity-btn:active { - transform: translateY(0); -} - -.identity-hint { - margin-top: 0.85rem; - font-size: 0.7rem; - color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s ease; + font-size: 0.95rem; } -@media (max-width: 520px) { - .identity-card { - padding: 1.4rem 1rem 1.8rem; - } - .identity-title { - font-size: 1.35rem; - } - .identity-box { - font-size: 0.97rem; - } - .identity-wrapper { - padding-inline: 0.65rem; - } +.identity-btn-light:hover { + background: linear-gradient(135deg, #3b82f6, #2563eb); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); } From 3f626c7e1d0046d4d1e0fa354fe5887f8cfa6671 Mon Sep 17 00:00:00 2001 From: Akshat Date: Fri, 31 Oct 2025 12:02:02 +0530 Subject: [PATCH 3/4] changes_made --- src/pages/activities/RandomIdentity.js | 123 +++++-- .../pages/activities/RandomIdentity.css | 305 ++++++++++++++++-- 2 files changed, 362 insertions(+), 66 deletions(-) diff --git a/src/pages/activities/RandomIdentity.js b/src/pages/activities/RandomIdentity.js index a8e6d8b..e092231 100644 --- a/src/pages/activities/RandomIdentity.js +++ b/src/pages/activities/RandomIdentity.js @@ -1,45 +1,104 @@ import { useState } from "react"; import "../../styles/pages/activities/RandomIdentity.css"; -const identities = [ - "🦊 Sly Fox β€” clever, quick, slightly chaotic", - "🐒 Chill Turtle β€” slow today, still winning", - "🐼 Cozy Panda β€” productivity is optional", - "🐧 Focused Penguin β€” cute but on task", - "🐱 Curious Cat β€” click everything, learn everything", - "🐯 Tiger Mode β€” roar through your to-do list", - "πŸ¦„ Rainbow Unicorn β€” unique, unbothered, magical", - "πŸ¦₯ Lazy Sloth β€” rest is a feature, not a bug", - "🐝 Busy Bee β€” buzzing with ideas", - "πŸ¦‹ Glow Butterfly β€” transformation era", - "🦚 Peacock Vibes β€” you look good today", - "🐸 Frog Jumper β€” hop over problems", - "πŸ• Loyal Doggo β€” supportive teammate energy", - "🌊 Ocean Brain β€” calm but deep", - "πŸ”₯ Hot Streak β€” everything is working today", - "πŸŒ™ Night Coder β€” 2 AM productivity unlocked", - "πŸ§‹ Boba Thinker β€” sweet, but overthinks sometimes", - "πŸ• Pizza Brain β€” full of ideas (and cheese)", - "🎧 Chill DJ β€” vibing through chaos", - "πŸ“š Wise Owl β€” silent but deadly (with notes)" -]; +const zodiacData = { + aries: { name: "Aries β™ˆ", traits: ["Bold", "Energetic", "Starter"], message: "Start the thing. Your fire is useful today." }, + taurus: { name: "Taurus ♉", traits: ["Grounded", "Patient", "Steady"], message: "Go slow and solid. Comfort-first is okay." }, + gemini: { name: "Gemini β™Š", traits: ["Curious", "Expressive", "Adaptable"], message: "Talk it out. A convo will unlock clarity." }, + cancer: { name: "Cancer β™‹", traits: ["Caring", "Intuitive", "Protective"], message: "Nurture your circle. Your care will be noticed." }, + leo: { name: "Leo β™Œ", traits: ["Confident", "Creative", "Warm"], message: "Show your light. You’re the main character today." }, + virgo: { name: "Virgo ♍", traits: ["Detail-loving", "Helpful", "Practical"], message: "Fix one tiny thing. You’ll feel aligned right away." }, + libra: { name: "Libra β™Ž", traits: ["Balanced", "Charming", "Fair"], message: "Choose harmony, not speed. People will support you." }, + scorpio: { name: "Scorpio ♏", traits: ["Intense", "Loyal", "Deep"], message: "Go deeper, not wider. Depth will give you power." }, + sagittarius: { name: "Sagittarius ♐", traits: ["Adventurous", "Optimistic", "Honest"], message: "Say yes to something new β€” expansion wants you." }, + capricorn: { name: "Capricorn β™‘", traits: ["Ambitious", "Disciplined", "Patient"], message: "Keep building. Quiet consistency will pay off." }, + aquarius: { name: "Aquarius β™’", traits: ["Original", "Big-picture", "Humanitarian"], message: "Share the weird idea. That’s the one people need." }, + pisces: { name: "Pisces β™“", traits: ["Empathic", "Dreamy", "Creative"], message: "Create from what you feel. Soft does not mean weak." }, +}; + +function getZodiac(month, day) { + if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return "aries"; + if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return "taurus"; + if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return "gemini"; + if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return "cancer"; + if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return "leo"; + if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return "virgo"; + if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return "libra"; + if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return "scorpio"; + if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return "sagittarius"; + if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return "capricorn"; + if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return "aquarius"; + return "pisces"; +} export default function RandomIdentity() { - const [identity, setIdentity] = useState(identities[0]); + const [date, setDate] = useState(""); + const [zodiac, setZodiac] = useState(null); + const [showResult, setShowResult] = useState(false); + const [confettiKey, setConfettiKey] = useState(0); - function handleClick() { - const random = Math.floor(Math.random() * identities.length); - setIdentity(identities[random]); + function handleSubmit(e) { + e.preventDefault(); + if (!date) return; + const d = new Date(date); + const month = d.getMonth() + 1; + const day = d.getDate(); + const zKey = getZodiac(month, day); + setZodiac(zodiacData[zKey]); + setShowResult(false); + setConfettiKey((k) => k + 1); + setTimeout(() => setShowResult(true), 15); } return ( -
+
+
+
+
+ + {showResult && ( +
+
+
+
+
+
+
+
+ )} +
-

Today’s Random Identity ✨

-

{identity}

- +

Your Zodiac Vibe ✨

+

Enter your birth date to see your sign, traits, and today’s message.

+ +
+ setDate(e.target.value)} + max={new Date().toISOString().split("T")[0]} + required + /> + +
+ + {showResult && zodiac && ( +
+

Your zodiac sign

+

{zodiac.name}

+
+ {zodiac.traits.map((t) => ( + + {t} + + ))} +
+

{zodiac.message}

+
+ )}
); diff --git a/src/styles/pages/activities/RandomIdentity.css b/src/styles/pages/activities/RandomIdentity.css index ffe7495..f5052ca 100644 --- a/src/styles/pages/activities/RandomIdentity.css +++ b/src/styles/pages/activities/RandomIdentity.css @@ -1,61 +1,298 @@ .identity-light-container { - min-height: 80vh; + min-height: 100vh; display: flex; justify-content: center; align-items: center; - background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%); - padding: 2rem; + background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%); + padding: 2.2rem 1.2rem; + position: relative; + overflow: hidden; } .identity-card-light { background: #ffffff; border-radius: 20px; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); - padding: 2rem 2.5rem; - max-width: 450px; + box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08); + padding: 2.1rem 2.4rem 2.2rem; + max-width: 500px; width: 100%; text-align: center; - transition: all 0.3s ease; -} - -.identity-card-light:hover { - transform: translateY(-4px); - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + position: relative; + z-index: 3; } .identity-title-light { - font-size: 1.6rem; + font-size: 1.7rem; font-weight: 700; color: #1e293b; - margin-bottom: 1.2rem; + margin-bottom: 0.3rem; } -.identity-text-light { - font-size: 1.1rem; - font-weight: 500; - color: #475569; - background: #f8fafc; +.identity-sub-light { + color: #64748b; + font-size: 0.9rem; + margin-bottom: 1.1rem; +} + +.identity-form { + display: flex; + gap: 0.6rem; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 1.1rem; +} + +.identity-date-input { + padding: 0.6rem 0.8rem; + border-radius: 8px; border: 1px solid #e2e8f0; - border-radius: 14px; - padding: 1.2rem; - margin-bottom: 1.5rem; - line-height: 1.4; + background: #ffffff; + font-size: 0.9rem; + min-width: 180px; + transition: 0.12s ease-in; } -.identity-btn-light { - background: linear-gradient(135deg, #60a5fa, #3b82f6); - color: white; +.identity-date-input:focus { + outline: none; + border-color: #93c5fd; + box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28); +} + +/* small rectangle button */ +.identity-btn-rect { + background: #2563eb; + color: #fff; border: none; - padding: 0.7rem 1.8rem; - border-radius: 999px; + border-radius: 8px; + padding: 0.55rem 1.3rem; font-weight: 600; cursor: pointer; - transition: all 0.2s ease; - font-size: 0.95rem; + font-size: 0.85rem; + transition: background 0.1s ease-out, transform 0.08s ease-out; + box-shadow: 0 3px 10px rgba(37, 99, 235, 0.2); +} + +.identity-btn-rect:hover { + background: #1d4ed8; + transform: translateY(-1px); +} + +.identity-btn-rect:active { + transform: translateY(0); +} + +.identity-result { + background: #f8fafc; + border-radius: 16px; + padding: 1rem 0.9rem 1.1rem; + border: 1px solid rgba(148, 163, 184, 0.18); + margin-top: 1rem; +} + +.pop-in { + animation: pop 0.35s ease-out; + transform-origin: center; +} + +.glow { + box-shadow: 0 12px 35px rgba(96, 165, 250, 0.25); +} + +@keyframes pop { + 0% { + opacity: 0; + transform: scale(0.9) translateY(5px); + } + 65% { + opacity: 1; + transform: scale(1.02) translateY(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +.identity-label { + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: #94a3b8; +} + +.identity-zodiac-name { + font-size: 1.35rem; + font-weight: 700; + color: #0f172a; + margin-top: 0.35rem; +} + +.identity-traits { + display: flex; + gap: 0.4rem; + justify-content: center; + flex-wrap: wrap; + margin-top: 0.6rem; +} + +.identity-pill { + background: #e0edff; + color: #1d4ed8; + padding: 0.3rem 0.7rem; + border-radius: 999px; + font-size: 0.7rem; + font-weight: 500; +} + +.identity-message { + margin-top: 0.8rem; + color: #475569; + font-size: 0.9rem; + line-height: 1.35; +} + +/* floating background bubbles */ +.with-anim .id-bubble { + position: absolute; + border-radius: 999px; + opacity: 0.25; + filter: blur(2px); + animation: float 7s ease-in-out infinite alternate; + z-index: 1; +} + +.id-b1 { + width: 180px; + height: 180px; + background: #bfdbfe; + top: -40px; + right: -30px; +} + +.id-b2 { + width: 120px; + height: 120px; + background: #fee2e2; + bottom: -30px; + left: 10px; + animation-delay: 1s; +} + +.id-b3 { + width: 90px; + height: 90px; + background: #fef9c3; + top: 40%; + left: 12%; + animation-delay: 2s; +} + +@keyframes float { + from { + transform: translateY(0); + } + to { + transform: translateY(16px); + } +} + +/* PARTY BOMBERS / CONFETTI */ +.party-layer { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 4; +} + +.party-bomber { + position: absolute; + top: 0; + width: 55px; + height: 110px; + background: radial-gradient(circle, #f97316 0%, #f97316 40%, rgba(249, 115, 22, 0) 41%); + opacity: 0; + animation: bomberIn 0.35s ease-out forwards; +} + +.left-bomber { + left: 14px; + transform: rotate(-15deg); +} + +.right-bomber { + right: 14px; + transform: rotate(15deg); + animation-delay: 0.05s; +} + +@keyframes bomberIn { + 0% { + opacity: 0; + transform: translateY(-40px); + } + 100% { + opacity: 1; + transform: translateY(10px); + } +} + +.party-confetti { + position: absolute; + width: 12px; + height: 26px; + border-radius: 5px; + animation: fall 0.7s ease-out forwards; + opacity: 0; +} + +.c1 { + left: 40px; + top: 20px; + background: #f97316; + animation-delay: 0.05s; +} +.c2 { + right: 40px; + top: 20px; + background: #38bdf8; + animation-delay: 0.08s; +} +.c3 { + left: 90px; + top: 10px; + background: #22c55e; + animation-delay: 0.1s; +} +.c4 { + right: 90px; + top: 12px; + background: #f43f5e; + animation-delay: 0.12s; +} + +@keyframes fall { + 0% { + opacity: 0; + transform: translateY(0) rotate(0deg); + } + 100% { + opacity: 1; + transform: translateY(120px) rotate(26deg); + } } -.identity-btn-light:hover { - background: linear-gradient(135deg, #3b82f6, #2563eb); - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); +@media (max-width: 540px) { + .identity-card-light { + padding: 1.5rem 1rem 1.6rem; + } + .identity-form { + flex-direction: column; + } + .identity-btn-rect { + width: 100%; + } + .left-bomber, + .right-bomber { + width: 50px; + } } From 903a0cec70b381874162571b54452ed65b10c081 Mon Sep 17 00:00:00 2001 From: Akshat Date: Fri, 31 Oct 2025 12:09:51 +0530 Subject: [PATCH 4/4] final --- src/data/content.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/data/content.js b/src/data/content.js index 5b26556..742bb0f 100644 --- a/src/data/content.js +++ b/src/data/content.js @@ -92,10 +92,10 @@ export const activities = [ element: , }, { - title: "Random Identity Generator", - description:"Get random identity for yourself", + title: "Zodiac Sign", + description:"Get to know your zodiac sign", icon:"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/2a/51/52/2a5152df-66f0-fc94-6e5e-251d3b2d6ef8/AppIcon-0-0-1x_U007emarketing-0-6-0-85-220.png/1200x630wa.png", - urlTerm:"random-identity", + urlTerm:"zodiac-sign", element: } ];