Skip to content

Commit 342dec5

Browse files
akshat-chdakshat-chd
committed
Added
1 parent 3079be4 commit 342dec5

File tree

2 files changed

+56
-132
lines changed

2 files changed

+56
-132
lines changed

‎src/pages/activities/RandomIdentity.js‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// src/pages/activities/RandomIdentity.jsx
21
import { useState } from "react";
32
import "../../styles/pages/activities/RandomIdentity.css";
43

@@ -9,45 +8,38 @@ const identities = [
98
"🐧 Focused Penguin — cute but on task",
109
"🐱 Curious Cat — click everything, learn everything",
1110
"🐯 Tiger Mode — roar through your to-do list",
12-
"🐤 Soft Chick — be gentle with yourself",
13-
"🦁 King Lion — confidence level: 100",
1411
"🦄 Rainbow Unicorn — unique, unbothered, magical",
15-
"🐙 Octo-Tasker — doing 8 things at once",
1612
"🦥 Lazy Sloth — rest is a feature, not a bug",
1713
"🐝 Busy Bee — buzzing with ideas",
18-
"🦖 Dino Dev — old school but powerful",
19-
"🦜 Parrot Pro — repeating good habits",
20-
"🦔 Spiky Hedgehog — cute but don’t test me",
2114
"🦋 Glow Butterfly — transformation era",
2215
"🦚 Peacock Vibes — you look good today",
2316
"🐸 Frog Jumper — hop over problems",
2417
"🐕 Loyal Doggo — supportive teammate energy",
25-
"🐍 Sneaky Python — silent, smart, sssssharp",
26-
"🪽 Soft Angel Mode — kindness first",
2718
"🌊 Ocean Brain — calm but deep",
2819
"🔥 Hot Streak — everything is working today",
29-
"🌙 Night Coder — 2 AM productivity unlocked"
20+
"🌙 Night Coder — 2 AM productivity unlocked",
21+
"🧋 Boba Thinker — sweet, but overthinks sometimes",
22+
"🍕 Pizza Brain — full of ideas (and cheese)",
23+
"🎧 Chill DJ — vibing through chaos",
24+
"📚 Wise Owl — silent but deadly (with notes)"
3025
];
3126

3227
export default function RandomIdentity() {
33-
const [text, setText] = useState(identities[0]);
28+
const [identity, setIdentity] = useState(identities[0]);
3429

35-
function changeIdentity() {
30+
function handleClick() {
3631
const random = Math.floor(Math.random() * identities.length);
37-
setText(identities[random]);
32+
setIdentity(identities[random]);
3833
}
3934

4035
return (
41-
<div className="identity-wrapper">
42-
<div className="identity-glow"></div>
43-
<div className="identity-card">
44-
<h2 className="identity-title">Today’s Random Identity ✨</h2>
45-
<p className="identity-sub">Click to find today’s vibe</p>
46-
<p className="identity-box">{text}</p>
47-
<button onClick={changeIdentity} className="identity-btn">
36+
<div className="identity-light-container">
37+
<div className="identity-card-light">
38+
<h2 className="identity-title-light">Today’s Random Identity ✨</h2>
39+
<p className="identity-text-light">{identity}</p>
40+
<button onClick={handleClick} className="identity-btn-light">
4841
Give me another
4942
</button>
50-
<p className="identity-hint">Tip: keep clicking till it feels right 😌</p>
5143
</div>
5244
</div>
5345
);

‎src/styles/pages/activities/RandomIdentity.css‎

Lines changed: 43 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,61 @@
1-
/* src/styles/pages/activities/RandomIdentity.css */
2-
:root {
3-
--bg: radial-gradient(circle at top, #0f172a 0%, #020617 45%, #000 80%);
4-
--card-bg: rgba(10, 16, 26, 0.45);
5-
--border: rgba(255, 255, 255, 0.12);
6-
--accent: #f97316;
7-
--accent-soft: rgba(249, 115, 22, 0.25);
8-
--text-primary: #e2e8f0;
9-
--text-secondary: #94a3b8;
10-
--radius-lg: 1.4rem;
11-
}
12-
13-
.identity-wrapper {
1+
.identity-light-container {
142
min-height: 80vh;
15-
display: grid;
16-
place-items: center;
17-
background: var(--bg);
18-
position: relative;
19-
padding: 2.5rem 1.2rem;
20-
overflow: hidden;
21-
}
22-
23-
.identity-glow {
24-
position: absolute;
25-
width: 420px;
26-
height: 420px;
27-
background: radial-gradient(circle, rgba(249, 115, 22, 0.35), rgba(2, 6, 23, 0));
28-
filter: blur(60px);
29-
top: -70px;
30-
right: -40px;
31-
pointer-events: none;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
7+
padding: 2rem;
328
}
339

34-
.identity-card {
35-
width: min(460px, 100%);
36-
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.25));
37-
border: 1px solid rgba(148, 163, 184, 0.15);
38-
border-top: 1px solid rgba(255, 255, 255, 0.2);
39-
border-radius: var(--radius-lg);
40-
backdrop-filter: blur(14px);
41-
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
42-
padding: 1.8rem 1.4rem 2.1rem;
10+
.identity-card-light {
11+
background: #ffffff;
12+
border-radius: 20px;
13+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
14+
padding: 2rem 2.5rem;
15+
max-width: 450px;
16+
width: 100%;
4317
text-align: center;
44-
position: relative;
18+
transition: all 0.3s ease;
4519
}
4620

47-
.identity-title {
48-
color: var(--text-primary);
49-
font-size: 1.5rem;
50-
font-weight: 700;
51-
letter-spacing: -0.01em;
21+
.identity-card-light:hover {
22+
transform: translateY(-4px);
23+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
5224
}
5325

54-
.identity-sub {
55-
margin-top: 0.3rem;
56-
color: var(--text-secondary);
57-
font-size: 0.85rem;
26+
.identity-title-light {
27+
font-size: 1.6rem;
28+
font-weight: 700;
29+
color: #1e293b;
30+
margin-bottom: 1.2rem;
5831
}
5932

60-
.identity-box {
61-
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0));
62-
border: 1px solid rgba(148, 163, 184, 0.2);
63-
border-radius: 1.1rem;
64-
margin-top: 1.1rem;
65-
padding: 1.1rem 1rem;
66-
min-height: 78px;
67-
display: flex;
68-
align-items: center;
69-
justify-content: center;
70-
color: var(--text-primary);
71-
font-weight: 600;
72-
line-height: 1.45;
73-
font-size: 1.02rem;
74-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
33+
.identity-text-light {
34+
font-size: 1.1rem;
35+
font-weight: 500;
36+
color: #475569;
37+
background: #f8fafc;
38+
border: 1px solid #e2e8f0;
39+
border-radius: 14px;
40+
padding: 1.2rem;
41+
margin-bottom: 1.5rem;
42+
line-height: 1.4;
7543
}
7644

77-
.identity-btn {
78-
width: fit-content;
79-
margin: 1.25rem auto 0;
80-
background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%);
81-
color: #0f172a;
45+
.identity-btn-light {
46+
background: linear-gradient(135deg, #60a5fa, #3b82f6);
47+
color: white;
8248
border: none;
83-
padding: 0.6rem 1.5rem;
49+
padding: 0.7rem 1.8rem;
8450
border-radius: 999px;
85-
cursor: pointer;
8651
font-weight: 600;
87-
letter-spacing: -0.01em;
88-
display: flex;
89-
gap: 0.35rem;
90-
align-items: center;
91-
justify-content: center;
92-
transition: transform 0.1s ease-out, box-shadow 0.15s ease-out;
93-
box-shadow: 0 12px 25px rgba(249, 115, 22, 0.4);
94-
}
95-
96-
.identity-btn::after {
97-
content: "↻";
98-
font-size: 0.8rem;
99-
}
100-
101-
.identity-btn:hover {
102-
transform: translateY(-1px);
103-
box-shadow: 0 15px 28px rgba(249, 115, 22, 0.45);
104-
}
105-
106-
.identity-btn:active {
107-
transform: translateY(0);
108-
}
109-
110-
.identity-hint {
111-
margin-top: 0.85rem;
112-
font-size: 0.7rem;
113-
color: var(--text-secondary);
52+
cursor: pointer;
53+
transition: all 0.2s ease;
54+
font-size: 0.95rem;
11455
}
11556

116-
@media (max-width: 520px) {
117-
.identity-card {
118-
padding: 1.4rem 1rem 1.8rem;
119-
}
120-
.identity-title {
121-
font-size: 1.35rem;
122-
}
123-
.identity-box {
124-
font-size: 0.97rem;
125-
}
126-
.identity-wrapper {
127-
padding-inline: 0.65rem;
128-
}
57+
.identity-btn-light:hover {
58+
background: linear-gradient(135deg, #3b82f6, #2563eb);
59+
transform: translateY(-2px);
60+
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
12961
}

0 commit comments

Comments
 (0)