earthquakes on home page
This commit is contained in:
IZZY
parent
17672177c6
commit
b73114afd1
@ -94,7 +94,7 @@ export default function Earthquakes() {
|
|||||||
const [searchModalOpen, setSearchModalOpen] = useState(false);
|
const [searchModalOpen, setSearchModalOpen] = useState(false);
|
||||||
|
|
||||||
// Fetch recent earthquakes as before
|
// Fetch recent earthquakes as before
|
||||||
const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 5 }));
|
const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 10 }));
|
||||||
|
|
||||||
// Prepare events for maps/sidebar
|
// Prepare events for maps/sidebar
|
||||||
const earthquakeEvents = useMemo(
|
const earthquakeEvents = useMemo(
|
||||||
@ -144,7 +144,7 @@ export default function Earthquakes() {
|
|||||||
setHoveredEventId={setHoveredEventId}
|
setHoveredEventId={setHoveredEventId}
|
||||||
button1Name="Log an Earthquake"
|
button1Name="Log an Earthquake"
|
||||||
button2Name="Search Earthquakes"
|
button2Name="Search Earthquakes"
|
||||||
onButton2Click={() => setSearchModalOpen(true)} // <-- important!
|
onButton2Click={() => setSearchModalOpen(true)}
|
||||||
/>
|
/>
|
||||||
<EarthquakeSearchModal
|
<EarthquakeSearchModal
|
||||||
open={searchModalOpen}
|
open={searchModalOpen}
|
||||||
|
|||||||
340
src/app/page.tsx
340
src/app/page.tsx
@ -1,145 +1,211 @@
|
|||||||
|
"use client";
|
||||||
|
import useSWR from "swr";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
import BottomFooter from "@components/BottomFooter";
|
import BottomFooter from "@components/BottomFooter";
|
||||||
|
import { createPoster } from "@utils/axiosHelpers";
|
||||||
|
|
||||||
|
// formats the date
|
||||||
|
function getRelativeDate(dateString: string): string {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
const now = new Date();
|
||||||
|
const diffMs = now.getTime() - date.getTime();
|
||||||
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||||
|
if (diffDays === 0) return "today";
|
||||||
|
if (diffDays === 1) return "yesterday";
|
||||||
|
return date.toLocaleDateString();
|
||||||
|
}
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));
|
||||||
<main className="min-h-screen text-black">
|
|
||||||
<div className="w-full relative">
|
// Take 5 most recent
|
||||||
<div className="">
|
const recents = (data?.earthquakes ?? [])
|
||||||
<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg"></Image>
|
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||||
</div>
|
.slice(0, 5);
|
||||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
|
|
||||||
<div className="absolute inset-0 top-[30%]">
|
return (
|
||||||
<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png"></Image>
|
<main className="min-h-screen text-black">
|
||||||
</div>
|
<div className="w-full relative">
|
||||||
</div>
|
<div>
|
||||||
<p className="mt-2"></p>
|
<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
|
||||||
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
</div>
|
||||||
<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
|
||||||
<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
|
<div className="absolute inset-0 top-[30%]">
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
|
<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
|
||||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
</div>
|
||||||
Log new earthquakes with their required details or search past seismic events
|
</div>
|
||||||
</p>
|
<p className="mt-2"></p>
|
||||||
</Link>
|
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
||||||
<Link
|
<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||||
href="/observatories"
|
<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
|
||||||
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
|
||||||
>
|
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||||
<Image height={100} width={100} src="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
|
Log new earthquakes with their required details or search past seismic events
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
|
</p>
|
||||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
</Link>
|
||||||
Find recently active observatories, and newly opened/closed sites
|
<Link
|
||||||
</p>
|
href="/observatories"
|
||||||
</Link>
|
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||||
<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
>
|
||||||
<Image height={100} width={100} src="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
|
<Image height={100} width={100} src="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
|
<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
|
||||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||||
View or purchase recently discovered artefacts from seismic events
|
Find recently active observatories, and newly opened/closed sites
|
||||||
</p>
|
</p>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||||
<p className="mt-18"></p>
|
<Image height={100} width={100} src="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
|
||||||
<section className="min-h-screen text-black">
|
<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
|
||||||
<div className="w-full relative z-40">
|
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||||
<div className="">
|
View or purchase recently discovered artefacts from seismic events
|
||||||
<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg"></Image>
|
</p>
|
||||||
</div>
|
</Link>
|
||||||
<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
|
</div>
|
||||||
<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
|
<p className="mt-18"></p>
|
||||||
<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
|
<section className="min-h-screen text-black">
|
||||||
Welcome to Tremor Tracker
|
<div className="w-full relative z-40">
|
||||||
</h1>
|
<div>
|
||||||
<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
|
<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
|
||||||
TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
|
</div>
|
||||||
is seismic education and preparation for all
|
<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
|
||||||
</p>
|
<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
|
||||||
<p className="mt-20"></p>
|
<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
|
||||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
|
Welcome to Tremor Tracker
|
||||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
|
</h1>
|
||||||
Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
|
<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||||
in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
|
TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
|
||||||
earthquakes happen every day—but most are too small to feel.
|
is seismic education and preparation for all
|
||||||
</p>
|
</p>
|
||||||
<p className="mt-20"></p>
|
<p className="mt-20"></p>
|
||||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
|
||||||
How do we log earthquakes?
|
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||||
</p>
|
Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
|
||||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
|
||||||
What information are we interested in?
|
earthquakes happen every day—but most are too small to feel.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
<p className="mt-20"></p>
|
||||||
<p className="mt-20"></p>
|
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
How do we log earthquakes?
|
||||||
What are observatories?
|
</p>
|
||||||
</p>
|
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
|
What information are we interested in?
|
||||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
</p>
|
||||||
</section>
|
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
||||||
</div>
|
<p className="mt-20"></p>
|
||||||
</div>
|
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||||
</section>
|
What are observatories?
|
||||||
<p className="mt-20"></p>
|
</p>
|
||||||
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
|
||||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
|
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
||||||
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
</section>
|
||||||
Learn about the most recent earthquake events from around the world:
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<p className="mt-6"></p>
|
<p className="mt-20"></p>
|
||||||
<div className="mx-auto w-5/6 px-2 border border-black divide-y bg-white bg-opacity-90 rounded-xl shadow-md">
|
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
||||||
{["Earthquake 1", "Earthquake 2", "Earthquake 3", "Earthquake 4", "Earthquake 5"].map((name) => (
|
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
|
||||||
<div className="px-5 py-5" key={name}>
|
Recent Earthquake Events
|
||||||
<p className="ml-3">{name}</p>
|
</h1>
|
||||||
<p></p>
|
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
||||||
</div>
|
Learn about the most recent earthquake events from around the world:
|
||||||
))}
|
</p>
|
||||||
</div>
|
</section>
|
||||||
<p className="mt-20"></p>
|
<p className="mt-6"></p>
|
||||||
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
<div className="mx-auto w-5/6 px-2">
|
||||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Contact Information</h1>
|
{error && (
|
||||||
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||||
Learn about Tremor Tracker's mission, our team or contact us directly:
|
<p>Failed to load earthquakes.</p>
|
||||||
</p>
|
</div>
|
||||||
</section>
|
)}
|
||||||
<p className="mt-2"></p>
|
{isLoading && (
|
||||||
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||||
<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
<p>Loading...</p>
|
||||||
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
|
)}
|
||||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
{!isLoading && recents.length === 0 && (
|
||||||
Visit our socials or leave us a message via phone or email.
|
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||||
</p>
|
<p>No earthquakes found.</p>
|
||||||
</Link>
|
</div>
|
||||||
<Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
)}
|
||||||
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
<div className="flex flex-col gap-4">
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
|
{recents.map((eq) => (
|
||||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
<div
|
||||||
Find out more about our purpose and the features we offer.
|
key={eq.code}
|
||||||
</p>
|
className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
|
||||||
</Link>
|
>
|
||||||
<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
<div>
|
||||||
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
|
<div className="font-semibold">
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
|
Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
|
||||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
</div>
|
||||||
Learn about our team leads and their responsibilities.
|
<div className="text-sm text-gray-500">
|
||||||
</p>
|
{getRelativeDate(eq.date)}
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-10"></p>
|
<span
|
||||||
<section style={{ height: 500 }} className="text-black">
|
className={`flex items-center justify-center font-bold text-md ml-2 rounded-full border-2 border-current
|
||||||
<div className="w-full relative overflow-hidden z=10">
|
${
|
||||||
<div className="">
|
eq.magnitude >= 7
|
||||||
<Image height={1000} width={2000} alt="Background Image" src="/scientists.png"></Image>
|
? "text-red-600 border-red-600"
|
||||||
</div>
|
: eq.magnitude >= 6
|
||||||
<BottomFooter />
|
? "text-orange-500 border-orange-500"
|
||||||
</div>
|
: "text-yellow-500 border-yellow-500"
|
||||||
</section>
|
}
|
||||||
</main>
|
min-w-[2.8rem] min-h-[2.8rem] max-h-12 max-w-12`}
|
||||||
);
|
style={{ aspectRatio: "1 / 1" }}
|
||||||
|
title={`Magnitude ${eq.magnitude}`}
|
||||||
|
>
|
||||||
|
{eq.magnitude}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="mt-20"></p>
|
||||||
|
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
||||||
|
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
|
||||||
|
Contact Information
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
||||||
|
Learn about Tremor Tracker's mission, our team or contact us directly:
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<p className="mt-2"></p>
|
||||||
|
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
||||||
|
<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||||
|
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
|
||||||
|
<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
|
||||||
|
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||||
|
Visit our socials or leave us a message via phone or email.
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
<Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||||
|
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
||||||
|
<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
|
||||||
|
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||||
|
Find out more about our purpose and the features we offer.
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||||
|
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
|
||||||
|
<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
|
||||||
|
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||||
|
Learn about our team leads and their responsibilities.
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<p className="mt-10"></p>
|
||||||
|
<section style={{ height: 500 }} className="text-black">
|
||||||
|
<div className="w-full relative overflow-hidden z=10">
|
||||||
|
<div>
|
||||||
|
<Image height={1000} width={2000} alt="Background Image" src="/scientists.png" />
|
||||||
|
</div>
|
||||||
|
<BottomFooter />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
// 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)]">
|
||||||
|
|||||||
21
src/databases/Users.csv
Normal file
21
src/databases/Users.csv
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
name,email,password,level
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
undefined,undefined,undefined,undefined
|
||||||
|
Loading…
x
Reference in New Issue
Block a user