Hackathons/HooHacks-12
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
idler-wheel
2025-03-30 09:25:53 -04:00
parent 647a915953
commit 842496c053
3 changed files with 62 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
React/src/app/globals.css
View File

@@ -8,7 +8,7 @@
:root { :root {
--background: #ffffff; --background: #ffffff;
--foreground: #171717; --foreground: #4f4e53;
} }
@theme inline { @theme inline {
@@ -18,9 +18,9 @@
--font-mono: var(--font-geist-mono); --font-mono: var(--font-geist-mono);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: light) {
:root { :root {
--background: #0a0a0a; --background: #5d4949;
--foreground: #ededed; --foreground: #ededed;
} }
} }

135
React/src/app/page.tsx
View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import './styles.css';
export default function Home() { export default function Home() {
const [contacts, setContacts] = useState<string[]>([]); const [contacts, setContacts] = useState<string[]>([]);
@@ -14,7 +15,9 @@ export default function Home() {
fetch("/auth/session") fetch("/auth/session")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
console.log("Session data received:", data);
setSession(data.session); setSession(data.session);
setLoading(false); setLoading(false);
}) })
.catch((error) => { .catch((error) => {
@@ -57,104 +60,64 @@ export default function Home() {
if (loading) { if (loading) {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
// If no session, show sign-up and login buttons // If no session, show sign-up and login buttons
if (!session) { if (!session) {
return ( return (
<div className="space-y-7 bg-indigo-800 items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <div className="space-y-7 items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<h1
className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-bold animate-fadeIn"
style={{ fontFamily: "'Nunito', sans-serif" }}
>
Welcome to Fauxcall
</h1>
<p>
We empower you to feel safe, whenever and wherever.
</p>
<p>
Make an account to begin.
</p>
<main className="space-x-2 flex flex-row gap-[32px] row-start-2 items-center sm:items-start"> <main className="space-x-2 flex flex-row gap-[32px] row-start-2 items-center sm:items-start">
<a href="/auth/login?screen_hint=signup"> <a href="/auth/login?screen_hint=signup">
<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300"> <button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300">
Sign up Sign up
</button> </button>
</a> </a>
</main>
<p>
Already have an account?
</p>
<a href="/auth/login"> <a href="/auth/login">
<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400"> <button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400">
Log in Log in
</button> </button>
</a> </a>
</main>
<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">
Fauxcall
</h1>
<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">
Set emergency contacts
</h2>
<p>
If you stop speaking or say the codeword, these contacts will be
notified
</p>
{/* form for setting codeword */}
<form
className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
onSubmit={(e) => e.preventDefault()}
>
<input
type="text"
value={codeword}
onChange={(e) => setCodeword(e.target.value)}
placeholder="Codeword"
className="border border-gray-300 rounded-md p-2"
/>
<button
className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
type="submit"
>
Set codeword
</button>
</form>
{/* form for adding contacts */}
<form
className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
onSubmit={(e) => e.preventDefault()}
>
<input
type="text"
value={contacts}
onChange={(e) => setContacts(e.target.value.split(","))}
placeholder="Write down an emergency contact"
className="border border-gray-300 rounded-md p-2"
/>
<input
type="text"
value={contacts}
onChange={(e) => setContacts(e.target.value.split(","))}
placeholder="Write down an emergency contact"
className="border border-gray-300 rounded-md p-2"
/>
<input
type="text"
value={contacts}
onChange={(e) => setContacts(e.target.value.split(","))}
placeholder="Write down an emergency contact"
className="border border-gray-300 rounded-md p-2"
/>
<button type="button">Add</button>
<button
className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2"
type="submit"
>
Set contacts
</button>
</form>
</div> </div>
); );
} }
return ( return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<h1>Welcome, {session.user.name}!</h1>
<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif"> <h1 className="space-y-3 text-2xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-sans">welcome to <span className="font-bold text-2xl text-lime-700">Fauxcall</span>, {session.user.nickname}!</h1>
Fauxcall
</h1>
<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">
Set emergency contacts
</h2>
<p> <p>
If you stop speaking or say the codeword, these contacts will be To begin, set a codeword and emergency contacts. If you stop speaking or say the codeword, these contacts will be
notified notified.
</p> </p>
{/* form for setting codeword */} {/* form for setting codeword */}
<form <form
@@ -188,27 +151,9 @@ export default function Home() {
placeholder="Write down an emergency contact" placeholder="Write down an emergency contact"
className="border border-gray-300 rounded-md p-2" className="border border-gray-300 rounded-md p-2"
/> />
<input
type="text"
value={contacts}
onChange={(e) => setContacts(e.target.value.split(","))}
placeholder="Write down an emergency contact"
className="border border-gray-300 rounded-md p-2"
/>
<input
type="text"
value={contacts}
onChange={(e) => setContacts(e.target.value.split(","))}
placeholder="Write down an emergency contact"
className="border border-gray-300 rounded-md p-2"
/>
<input
type="text"
value={contacts}
onChange={(e) => setContacts(e.target.value.split(","))}
placeholder="Write down an emergency contact"
className="text-input border border-gray-300 rounded-md p-2"
/>
<button <button
onClick={() => { onClick={() => {
alert("Adding contact..."); alert("Adding contact...");

19
React/src/app/styles.css Normal file
View File

@@ -0,0 +1,19 @@
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-fadeIn {
animation: fadeIn 1s ease-in-out;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
}