fixed the design (chatgpt and junie did)
This commit is contained in:
@@ -24,9 +24,9 @@ export default function Navbar() {
|
||||
|
||||
<NavLink
|
||||
to="/record"
|
||||
className="fixed bottom-2 left-1/2 transform -translate-x-1/2 bg-violet-700 p-4 rounded-full border-6 border-background z-20"
|
||||
className="microphone-button fixed bottom-2 left-1/2 transform -translate-x-1/2 p-4 rounded-full z-20"
|
||||
>
|
||||
<FaMicrophone className="w-8 h-8 text-fuchsia-400"/>
|
||||
<FaMicrophone className="w-8 h-8 text-white"/>
|
||||
</NavLink>
|
||||
</div>
|
||||
);
|
||||
|
||||
136
src/index.css
136
src/index.css
@@ -1,14 +1,21 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background-color: var(--color-pink-900);
|
||||
--bg: #f9f6ff;
|
||||
--container: #ede6fa;
|
||||
--card: #d6c6ff;
|
||||
--text: #1e102e;
|
||||
--text-muted: #4a375e;
|
||||
--accent: #7f39fb;
|
||||
--accent-gradient: linear-gradient(135deg, #7f39fb, #d500f9);
|
||||
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: var(--background-color);
|
||||
color: var(--text);
|
||||
background-color: var(--bg);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -16,31 +23,47 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg: #1e102e;
|
||||
--container: #3a1a5d;
|
||||
--card: #5c2d91;
|
||||
--text: #f5e6ff;
|
||||
--text-muted: #c9a4e3;
|
||||
--accent: #bb86fc;
|
||||
--accent-gradient: linear-gradient(135deg, #7f39fb, #d500f9);
|
||||
}
|
||||
|
||||
.border-background {
|
||||
border-color: var(--background-color);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: var(--background-color);
|
||||
color: black;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.pageTitle {
|
||||
color: var(--color-fuchsia-50);
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.dreamPanel {
|
||||
background-color: var(--color-violet-400);
|
||||
color: var(--color-fuchsia-200);
|
||||
background-color: var(--card);
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
color: var(--accent);
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -49,6 +72,9 @@ body {
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -63,27 +89,87 @@ button {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
background-color: var(--container);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
transition: border-color 0.25s, background-color 0.3s, color 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
--background-color: fuchsia;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.feed-container {
|
||||
background-color: var(--container);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.dream-card {
|
||||
background-color: var(--card);
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.dream-card .title {
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.dream-card .timestamp {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.microphone-button {
|
||||
background: var(--accent-gradient);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Theme Toggle Styles */
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.theme-toggle input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-toggle .slider {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background-color: #bbb;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-toggle .slider::before {
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.theme-toggle input:checked + .slider::before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.theme-toggle input:checked + .slider {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -8,35 +8,36 @@ export default function Feed() {
|
||||
const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
|
||||
return (
|
||||
<div className="page p-4 space-y-4">
|
||||
<h1 className="pageTitle text-2xl font-bold mb-4">Feed</h1>
|
||||
<ul className="space-y-6">
|
||||
{sortedDreams.map((dream: Dream) => {
|
||||
const user: User | undefined = MockUserMap.get(dream.userId);
|
||||
return (
|
||||
<li key={dream.id} className="dreamPanel border rounded p-4">
|
||||
<div className="flex rounded items-center mb-2"><img
|
||||
src={`/assets/profiles/${user?.profilePicture}`}
|
||||
alt={user?.name}
|
||||
className="w-10 h-10 rounded-full"/>
|
||||
<span className="ml-6 font-semibold">{user?.name} hat geträumt:</span>
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold">
|
||||
{dream.title}
|
||||
</h2>
|
||||
<p className="mt-2 text-gray-700">{dream.input}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{dream.date.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<div className="feed-container rounded-lg">
|
||||
<ul className="space-y-6">
|
||||
{sortedDreams.map((dream: Dream) => {
|
||||
const user: User | undefined = MockUserMap.get(dream.userId);
|
||||
return (
|
||||
<li key={dream.id} className="dream-card mb-4">
|
||||
<div className="flex rounded items-center mb-2"><img
|
||||
src={`/assets/profiles/${user?.profilePicture}`}
|
||||
alt={user?.name}
|
||||
className="w-10 h-10 rounded-full"/>
|
||||
<span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
|
||||
</div>
|
||||
<h2 className="title">
|
||||
{dream.title}
|
||||
</h2>
|
||||
<p className="mt-2 line-clamp-2">{dream.input}</p>
|
||||
<p className="timestamp mt-2">
|
||||
{dream.date.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user