Skip to content

Commit acca002

Browse files
mpignatelli12mpignatelli12
committed
glass tiles + other style thingies
1 parent 664f66c commit acca002

7 files changed

Lines changed: 90 additions & 58 deletions

File tree

‎index.html‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Micro-Timeline - Unified Health Tracking</title>
7-
<meta name="description" content="Track medications, symptoms, lab results, and appointments across all your healthcare providers in one unified timeline." />
8-
<meta name="author" content="Micro-Timeline" />
93

10-
<meta property="og:title" content="Micro-Timeline - Unified Health Tracking" />
11-
<meta property="og:description" content="Track medications, symptoms, lab results, and appointments across all your healthcare providers in one unified timeline." />
12-
<meta property="og:type" content="website" />
13-
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Micro-Timeline - Unified Health Tracking</title>
8+
<meta name="description"
9+
content="Track medications, symptoms, lab results, and appointments across all your healthcare providers in one unified timeline." />
10+
<meta name="author" content="Micro-Timeline" />
1411

15-
<meta name="twitter:card" content="summary_large_image" />
16-
<meta name="twitter:site" content="@lovable_dev" />
17-
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
18-
</head>
12+
<meta property="og:title" content="Micro-Timeline - Unified Health Tracking" />
13+
<meta property="og:description"
14+
content="Track medications, symptoms, lab results, and appointments across all your healthcare providers in one unified timeline." />
15+
<meta property="og:type" content="website" />
16+
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
1917

20-
<body>
21-
<div id="root"></div>
22-
<script type="module" src="/src/main.tsx"></script>
23-
</body>
24-
</html>
18+
<meta name="twitter:card" content="summary_large_image" />
19+
<meta name="twitter:site" content="@lovable_dev" />
20+
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
21+
</head>
22+
23+
<body>
24+
<div id="root"></div>
25+
<script type="module" src="/src/main.tsx"></script>
26+
</body>
27+
28+
</html>

‎postcss.config.cjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎server/index.cjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ app.use(express.json());
99

1010
const GEMINI_KEY = process.env.GEMINI_API_KEY;
1111
if (!GEMINI_KEY) {
12-
console.warn("⚠️ Missing GEMINI_API_KEY in .env");
12+
console.warn("Missing GEMINI_API_KEY in .env");
1313
}
1414

1515
// Normalize an ISO datetime from separate date/time strings if needed
@@ -135,4 +135,4 @@ You are Lifeline's on-device health schedule assistant.
135135
});
136136

137137
const PORT = process.env.PORT || 3001;
138-
app.listen(PORT, () => console.log(`🔊 API on http://localhost:${PORT}`));
138+
app.listen(PORT, () => console.log(`API on http://localhost:${PORT}`));

‎src/components/SummaryCard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export function SummaryCard({ entries }: SummaryCardProps) {
2222
};
2323

2424
return (
25-
<Card className="p-6 space-y-6">
25+
<Card className="space-y-6 rounded-2xl border border-white/60 bg-white/75 p-6 shadow-[0_20px_50px_rgba(15,23,42,0.08)] backdrop-blur-sm">
2626
<div className="flex items-start justify-between">
2727
<div className="space-y-1">
2828
<div className="flex items-center gap-2">
@@ -42,7 +42,7 @@ export function SummaryCard({ entries }: SummaryCardProps) {
4242
</div>
4343

4444
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
45-
<div className="rounded-lg border bg-card p-4 space-y-2">
45+
<div className="space-y-2 rounded-xl border border-white/60 bg-white/80 p-4 shadow-sm">
4646
<p className="text-sm font-medium text-muted-foreground">Medications</p>
4747
<div className="flex items-baseline gap-2">
4848
<p className="text-3xl font-bold text-foreground">{medications.length}</p>
@@ -57,12 +57,12 @@ export function SummaryCard({ entries }: SummaryCardProps) {
5757
</div>
5858
</div>
5959

60-
<div className="rounded-lg border bg-card p-4 space-y-2">
60+
<div className="space-y-2 rounded-xl border border-white/60 bg-white/80 p-4 shadow-sm">
6161
<p className="text-sm font-medium text-muted-foreground">Lab Results</p>
6262
<p className="text-3xl font-bold text-foreground">{labResults.length}</p>
6363
</div>
6464

65-
<div className="rounded-lg border bg-card p-4 space-y-2">
65+
<div className="space-y-2 rounded-xl border border-white/60 bg-white/80 p-4 shadow-sm">
6666
<p className="text-sm font-medium text-muted-foreground">Appointments</p>
6767
<p className="text-3xl font-bold text-foreground">{appointments.length}</p>
6868
</div>
@@ -82,7 +82,7 @@ export function SummaryCard({ entries }: SummaryCardProps) {
8282
{entries.slice(0, 5).map((entry) => (
8383
<div
8484
key={entry.id}
85-
className="flex items-center justify-between rounded-md border bg-card p-3"
85+
className="flex items-center justify-between rounded-xl border border-white/60 bg-white/80 p-3 shadow-sm"
8686
>
8787
<div>
8888
<p className="font-medium text-sm text-foreground">{entry.title}</p>

‎src/pages/Index.tsx‎

Lines changed: 48 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -156,48 +156,53 @@ const Index = () => {
156156

157157
const tabConfig = [
158158
{ value: "timeline", label: "Today", Icon: CalendarDays },
159-
{ value: "calendar", label: "Calendar", Icon: CalendarIcon },
160159
{ value: "summary", label: "Summary", Icon: TrendingUp },
160+
{ value: "calendar", label: "Calendar", Icon: CalendarIcon },
161161
] as const;
162162

163163
return (
164164
<TooltipProvider>
165165
<Sonner />
166166
<ReminderSystem />
167167
<div className="min-h-screen px-4 pb-16 pt-10 sm:px-6 lg:px-8">
168+
{/* App name in top-left */}
169+
<header className="mx-auto mb-6 flex max-w-6xl items-center">
170+
<span className="text-lg font-semibold tracking-tight text-slate-700">
171+
Lifeline-
172+
</span>
173+
</header>
174+
168175
<main className="mx-auto flex max-w-6xl flex-col gap-8">
169176
<Tabs defaultValue="timeline" className="space-y-8">
170-
{/* HERO (plain; no glass wrapper) */}
171-
<div className="flex flex-col gap-2">
172-
<div className="space-y-0">
173-
<span className="text-lg font-semibold tracking-tight text-slate-700">Lifeline-</span>
174-
<h1 className="font-semibold text-[44px] leading-[1.05] text-[#0F1729] sm:text-[64px]">
175-
Welcome Back
176-
</h1>
177-
<p className="text-lg text-slate-600">
178-
See what’s happening across your health: daily updates to your complete health picture.
179-
</p>
180-
</div>
177+
{/* HERO (now only Welcome Back + subtitle) */}
178+
<div className="space-y-1">
179+
<h1 className="font-semibold text-[44px] leading-[1.05] text-[#0F1729] sm:text-[64px]">
180+
Welcome Back
181+
</h1>
182+
<p className="text-lg text-slate-600">
183+
See what’s happening across your health: daily updates to your complete health picture.
184+
</p>
181185
</div>
182186

183-
<div className="flex items-center justify-between">
184-
{/* Segmented tabs (compact) */}
185-
<TabsList className="mt-1 inline-flex rounded-lg bg-white/70 p-1 ring-1 ring-black/5 shadow-sm backdrop-blur">
187+
<div className="flex items-center justify-between gap-4">
188+
{/* equal-width segmented control */}
189+
<TabsList className="mt-1 inline-flex w-full max-w-md rounded-full bg-white/70 p-1 ring-1 ring-black/5 shadow-sm backdrop-blur">
186190
{tabConfig.map(({ value, label, Icon }) => (
187191
<TabsTrigger
188192
key={value}
189193
value={value}
190-
className="flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-slate-600 transition
191-
data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow"
194+
className="flex flex-1 items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition
195+
data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow"
192196
>
193197
<Icon className="h-4 w-4" />
194198
{label}
195199
</TabsTrigger>
196200
))}
197201
</TabsList>
202+
198203
<AddEntryDialog
199204
onAddEntry={handleAddEntry}
200-
buttonClassName="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white shadow-lg transition hover:bg-slate-900/90"
205+
buttonClassName="rounded-full bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white shadow-lg transition hover:bg-slate-900/90"
201206
/>
202207
</div>
203208

@@ -243,21 +248,38 @@ const Index = () => {
243248
</TabsContent>
244249

245250
<TabsContent value="summary">
246-
<section className="rounded-xl border border-white/60 bg-white/80 p-6 shadow-[0_25px_60px_rgba(15,23,42,0.08)] backdrop-blur"> <SummaryCard entries={entries} />
251+
<section className="rounded-3xl border border-white/50 bg-white/40 p-8 shadow-[0_30px_70px_rgba(88,80,236,0.22)] backdrop-blur">
252+
<SummaryCard entries={entries} />
247253
</section>
248254
</TabsContent>
249255

250256
<TabsContent value="calendar">
251-
<section className="grid grid-cols-1 gap-8 lg:grid-cols-3">
252-
<div className="lg:col-span-1">
257+
<section className="grid gap-8 rounded-3xl border border-white/50 bg-white/40 p-8 shadow-[0_30px_70px_rgba(88,80,236,0.22)] backdrop-blur lg:grid-cols-[1.1fr,2fr]">
258+
{/* Calendar column */}
259+
<div className="flex items-start justify-center">
253260
<Calendar
254261
mode="single"
255262
selected={selectedDate}
256263
onSelect={(date) => date && setSelectedDate(date)}
257-
className="rounded-xl border bg-card"
264+
className="w-full max-w-xs rounded-2xl border border-white/60 bg-white/80 p-4 shadow-[0_18px_40px_rgba(15,23,42,0.09)] backdrop-blur-sm"
265+
classNames={{
266+
months: "space-y-4",
267+
caption: "flex justify-center pt-1 pb-4",
268+
head_row: "flex",
269+
head_cell: "w-9 text-xs font-medium text-slate-500",
270+
row: "mt-1 flex w-full",
271+
cell: "relative h-9 w-9",
272+
day: "h-9 w-9 rounded-full text-sm font-medium text-slate-600 hover:bg-slate-100 focus:outline-none",
273+
day_selected:
274+
"h-9 w-9 rounded-full bg-slate-900 text-white hover:bg-slate-900 hover:text-white focus:outline-none",
275+
day_today: "border border-slate-300 text-slate-900",
276+
day_outside: "text-slate-300",
277+
}}
258278
/>
259279
</div>
260-
<div className="lg:col-span-2">
280+
281+
{/* Right column: entries for selected date */}
282+
<div className="lg:col-span-1">
261283
<div className="space-y-1">
262284
<h2 className="text-2xl font-semibold text-slate-900">{friendlyDate}</h2>
263285
</div>
@@ -274,8 +296,8 @@ const Index = () => {
274296
/>
275297
))
276298
) : (
277-
<div className="rounded-xl border bg-card p-6 text-center">
278-
<p className="font-semibold text-foreground">No entries for this day.</p>
299+
<div className="rounded-xl border border-white/60 bg-white/80 p-6 text-center shadow-[0_14px_36px_rgba(15,23,42,0.08)]">
300+
<p className="font-semibold text-slate-800">No entries for this day.</p>
279301
</div>
280302
)}
281303
</div>
@@ -287,7 +309,7 @@ const Index = () => {
287309

288310
<ChatbotWidget />
289311
</div>
290-
</TooltipProvider>
312+
</TooltipProvider >
291313
);
292314
};
293315

‎src/postcss.config.cjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

0 commit comments

Comments
 (0)