YOUR RECENT PINS
-
+
{stats.recentList?.length}
@@ -730,7 +710,7 @@ export default function Dashboard() {
width: 100%;
background: transparent;
border: 1px solid var(--border-color);
- color: #ff4d4d;
+ color: var(--status-danger);
padding: 12px;
border-radius: 8px;
font-family: var(--font-chakra);
@@ -741,8 +721,8 @@ export default function Dashboard() {
}
.sign-out-btn:hover {
- background: color-mix(in srgb, #ff4d4d 10%, transparent);
- border-color: #ff4d4d;
+ background: color-mix(in srgb, var(--status-danger) 10%, transparent);
+ border-color: var(--status-danger);
}
/* --- MAIN AREA --- */
@@ -862,9 +842,9 @@ export default function Dashboard() {
/* Badges */
.status-badge {
- background: color-mix(in srgb, var(--neon-green) 15%, transparent);
- color: var(--neon-green);
- border: 1px solid var(--neon-green);
+ background: color-mix(in srgb, var(--status-success) 15%, transparent);
+ color: var(--status-success);
+ border: 1px solid var(--status-success);
padding: 4px 8px;
border-radius: 4px;
font-family: var(--font-chakra);
@@ -874,9 +854,9 @@ export default function Dashboard() {
}
.count-badge {
- background: color-mix(in srgb, var(--neon-yellow, #FFD700) 15%, transparent);
- color: var(--neon-yellow, #FFD700);
- border: 1px solid var(--neon-yellow, #FFD700);
+ background: color-mix(in srgb, var(--status-warning) 15%, transparent);
+ color: var(--status-warning);
+ border: 1px solid var(--status-warning);
padding: 2px 8px;
border-radius: 12px;
font-family: var(--font-nunito);
@@ -1079,10 +1059,6 @@ export default function Dashboard() {
font-size: 11px;
}
- @keyframes spin {
- 100% { transform: rotate(360deg); }
- }
-
/* --- TELEMETRY MODULE STYLES --- */
.telemetry-body {
gap: 24px;
@@ -1157,7 +1133,7 @@ export default function Dashboard() {
align-items: center;
justify-content: center;
flex-shrink: 0;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 10px var(--border-color);
}
.list-diamond span {
@@ -1244,8 +1220,8 @@ export default function Dashboard() {
.progress-fill {
height: 100%;
- background: var(--pin-food);
- box-shadow: 0 0 10px color-mix(in srgb, var(--pin-food) 50%, transparent);
+ background: var(--status-success);
+ box-shadow: 0 0 10px color-mix(in srgb, var(--status-success) 50%, transparent);
border-radius: 3px;
transition: width 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@@ -1259,9 +1235,9 @@ export default function Dashboard() {
letter-spacing: 0.05em;
}
- .detail-item.verified { color: var(--neon-green); }
- .detail-item.pending { color: var(--neon-yellow, #FFD700); }
- .detail-item.rejected { color: #ff4d4d; }
+ .detail-item.verified { color: var(--status-success); }
+ .detail-item.pending { color: var(--status-warning); }
+ .detail-item.rejected { color: var(--status-danger); }
/* Category Distribution */
.distribution-section {
@@ -1330,7 +1306,7 @@ export default function Dashboard() {
.mobile-overlay {
position: fixed;
inset: 0;
- background: rgba(0,0,0,0.6);
+ background: var(--border-color);
backdrop-filter: blur(4px);
z-index: 99;
}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index dd73ca8..3ebd735 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,26 +1,128 @@
@import "tailwindcss";
+@keyframes spin {
+ 100% { transform: rotate(360deg); }
+}
+
+@keyframes slideUp {
+ from {
+ transform: translateY(100px);
+ opacity: 0;
+ }
+
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.4;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes scrollText {
+ 0%, 20% {
+ transform: translateX(0);
+ }
+ 80%, 100% {
+ transform: translateX(min(0px, calc(-100% + 100cqw)));
+ }
+}
+
+@keyframes extrudeRight {
+ from { opacity: 0; transform: translateX(-15px) scale(0.9); }
+ to { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes pulseGlow {
+ 0% { box-shadow: 0 0 15px var(--shadow-glow), inset 0 0 10px var(--shadow-glow); }
+ 100% { box-shadow: 0 0 25px var(--shadow-glow), inset 0 0 15px var(--shadow-glow); }
+}
+
+@keyframes radarPing {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(4.5);
+ opacity: 0;
+ }
+}
+
+@keyframes slideRight {
+ from { transform: translateX(-100%); }
+ to { transform: translateX(0); }
+}
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
:root {
--bg-base: #f0f2f5;
- --bg-panel: rgba(255, 255, 255, 0.9);
+ --bg-panel: rgba(255, 255, 255, 0.95);
--bg-panel-hover: rgba(0, 0, 0, 0.05);
--text-primary: #121212;
--text-secondary: #555555;
- --border-color: rgba(0, 0, 0, 0.15);
+ --border-color: rgba(0, 0, 0, 0.2);
--shadow-glow: rgba(0, 136, 255, 0.2);
- --pin-academic: #d91a4d;
- --pin-food: #00995c;
- --pin-social: #8e00e6;
- --pin-transit: #d98200;
- --pin-utility: #0088cc;
+ --pin-academic: #d91a4d;
+ --pin-food: #00995c;
+ --pin-social: #8e00e6;
+ --pin-transit: #d98200;
+ --pin-utility: #0088cc;
+
+ --neon-blue: #0066cc;
+ --neon-red: #d90040;
+ --neon-yellow: #d4a017;
+ --theme-sun: #d98200;
+ --theme-moon: #8899a6;
+
+ --status-success: #008844;
+ --status-warning: #d98200;
+ --status-danger: #cc0000;
}
.dark {
--bg-base: #0f1115;
- --bg-panel: rgba(10, 10, 12, 0.85);
+ --bg-panel: rgba(10, 10, 12, 0.95);
--bg-panel-hover: rgba(255, 255, 255, 0.1);
--text-primary: #ffffff;
@@ -29,11 +131,21 @@
--border-color: rgba(255, 255, 255, 0.15);
--shadow-glow: rgba(0, 229, 255, 0.2);
- --pin-academic: #ff3366;
- --pin-food: #00ff99;
- --pin-social: #b026ff;
- --pin-transit: #ffd700;
- --pin-utility: #00e5ff;
+ --pin-academic: #ff3366;
+ --pin-food: #00ff99;
+ --pin-social: #b026ff;
+ --pin-transit: #ffd700;
+ --pin-utility: #00e5ff;
+
+ --neon-blue: #00e5ff;
+ --neon-red: #ff0055;
+ --neon-yellow: #ffd700;
+ --theme-sun: #ffd700;
+ --theme-moon: #ffffff;
+
+ --status-success: #00ff99;
+ --status-warning: #ffcc00;
+ --status-danger: #ff4d4d;
}
body {
@@ -375,41 +487,3 @@ p {
margin-top: 0;
}
}
-
-@keyframes slideUp {
- from {
- transform: translateY(100px);
- opacity: 0;
- }
-
- to {
- transform: translateY(0);
- opacity: 1;
- }
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- transform: scale(0.95);
- }
-
- to {
- opacity: 1;
- transform: scale(1);
- }
-}
-
-@keyframes pulse {
- 0% {
- opacity: 1;
- }
-
- 50% {
- opacity: 0.4;
- }
-
- 100% {
- opacity: 1;
- }
-}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 03bb4ac..f93d841 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -222,7 +222,7 @@ export default function Home() {
)}
@@ -232,7 +232,7 @@ export default function Home() {
const categoryDef = ZONE_CATEGORIES.find(
(c) => c.id === zone.categoryId,
);
- const zoneColor = categoryDef ? categoryDef.color : "#FFFFFF";
+ const zoneColor = categoryDef ? categoryDef.color : "var(--bg-panel)";
return (
diff --git a/apps/web/app/sign-in/page.tsx b/apps/web/app/sign-in/page.tsx
index 048bfbb..0441d2a 100644
--- a/apps/web/app/sign-in/page.tsx
+++ b/apps/web/app/sign-in/page.tsx
@@ -260,17 +260,6 @@ export default function SignIn() {
.footer-text a {
color: #555;
}
-
- @keyframes fadeUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
`}
);
diff --git a/apps/web/components/AddPinModal.tsx b/apps/web/components/AddPinModal.tsx
index e0e3c49..d6feee1 100644
--- a/apps/web/components/AddPinModal.tsx
+++ b/apps/web/components/AddPinModal.tsx
@@ -95,7 +95,7 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
height="24"
viewBox="0 0 24 24"
fill="none"
- stroke="var(--neon-blue, #00E5FF)"
+ stroke="var(--neon-blue)"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
@@ -192,7 +192,7 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
- background: rgba(0, 0, 0, 0.7);
+ background: var(--border-color);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
@@ -241,7 +241,7 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
.input-group span {
font-family: var(--font-chakra), sans-serif;
font-size: 12px;
- color: var(--neon-blue, #00E5FF);
+ color: var(--neon-blue);
letter-spacing: 0.1em;
font-weight: 700;
}
@@ -259,7 +259,7 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
}
input:focus, textarea:focus {
- border-color: var(--neon-blue, #00E5FF);
+ border-color: var(--neon-blue);
box-shadow: 0 0 10px var(--shadow-glow);
}
@@ -303,11 +303,6 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
opacity: 0.5;
cursor: not-allowed;
}
-
- @keyframes slideUp {
- from { opacity: 0; transform: translateY(20px) scale(0.95); }
- to { opacity: 1; transform: translateY(0) scale(1); }
- }
`}
);
diff --git a/apps/web/components/EditPinModal.tsx b/apps/web/components/EditPinModal.tsx
index c449486..e180c47 100644
--- a/apps/web/components/EditPinModal.tsx
+++ b/apps/web/components/EditPinModal.tsx
@@ -106,7 +106,7 @@ export function EditPinModal({ onSave, onCancel, pin }: IEditPinModalProps) {
height="24"
viewBox="0 0 24 24"
fill="none"
- stroke="var(--neon-blue, #00E5FF)"
+ stroke="var(--neon-blue)"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
@@ -199,7 +199,7 @@ export function EditPinModal({ onSave, onCancel, pin }: IEditPinModalProps) {
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
- background: rgba(0, 0, 0, 0.7);
+ background: var(--border-color);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
@@ -210,11 +210,13 @@ export function EditPinModal({ onSave, onCancel, pin }: IEditPinModalProps) {
}
.modal-card {
+ background: var(--bg-base);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
width: 100%;
max-width: 400px;
padding: 24px;
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
- background-color: black;
}
.modal-header {
@@ -249,7 +251,7 @@ export function EditPinModal({ onSave, onCancel, pin }: IEditPinModalProps) {
.input-group span {
font-family: var(--font-chakra), sans-serif;
font-size: 12px;
- color: var(--neon-blue, #00E5FF);
+ color: var(--neon-blue);
letter-spacing: 0.1em;
font-weight: 700;
}
@@ -267,7 +269,7 @@ export function EditPinModal({ onSave, onCancel, pin }: IEditPinModalProps) {
}
input:focus, textarea:focus {
- border-color: var(--neon-blue, #00E5FF);
+ border-color: var(--neon-blue);
box-shadow: 0 0 10px var(--shadow-glow);
}
@@ -311,11 +313,6 @@ export function EditPinModal({ onSave, onCancel, pin }: IEditPinModalProps) {
opacity: 0.5;
cursor: not-allowed;
}
-
- @keyframes slideUp {
- from { opacity: 0; transform: translateY(20px) scale(0.95); }
- to { opacity: 1; transform: translateY(0) scale(1); }
- }
`}