thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

homepage info

Browse Source
This commit is contained in:
Emily Neighbour 2025-06-01 11:21:04 +01:00
parent 658cb92ace
commit 0ae4d6145c
1 changed files with 196 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

391
src/app/page.tsx
View File

@ -3,212 +3,213 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { TbHexagon } from "react-icons/tb"; import { TbHexagon } from "react-icons/tb";
import useSWR from "swr"; import useSWR from "swr";
import BottomFooter from "@components/BottomFooter"; import BottomFooter from "@components/BottomFooter";
import { createPoster } from "@utils/axiosHelpers"; import { createPoster } from "@utils/axiosHelpers";
import getMagnitudeColor from "@utils/getMagnitudeColour"; import getMagnitudeColor from "@utils/getMagnitudeColour";
// formats the date // formats the date
function getRelativeDate(dateString: string): string { function getRelativeDate(dateString: string): string {
const date = new Date(dateString); const date = new Date(dateString);
const now = new Date(); const now = new Date();
const diffMs = now.getTime() - date.getTime(); const diffMs = now.getTime() - date.getTime();
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
if (diffDays === 0) return "today"; if (diffDays === 0) return "today";
if (diffDays === 1) return "yesterday"; if (diffDays === 1) return "yesterday";
return date.toLocaleDateString(); return date.toLocaleDateString();
} }
// copied from sidebar // copied from sidebar
function MagnitudeNumber({ magnitude }: { magnitude: number }) { function MagnitudeNumber({ magnitude }: { magnitude: number }) {
const magnitudeStr = magnitude.toFixed(1); const magnitudeStr = magnitude.toFixed(1);
const [whole, decimal] = magnitudeStr.split("."); const [whole, decimal] = magnitudeStr.split(".");
return ( return (
<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}> <div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
<TbHexagon size={40} className="drop-shadow-sm" /> <TbHexagon size={40} className="drop-shadow-sm" />
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="flex items-baseline font-mono font-bold tracking-tight"> <div className="flex items-baseline font-mono font-bold tracking-tight">
<span className="text-xl -mr-1">{whole}</span> <span className="text-xl -mr-1">{whole}</span>
<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span> <span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
<span className="text-xs -mr-[1px]">{decimal}</span> <span className="text-xs -mr-[1px]">{decimal}</span>
</div> </div>
</div> </div>
</div> </div>
); );
} }
export default function Home() { export default function Home() {
const { data, error, isLoading } = useSWR( const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));
"/api/earthquakes", // Take 5 most recent
createPoster({ rangeDaysPrev: 6 }) const recents = (data?.earthquakes ?? []).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, 5);
);
// Take 5 most recent
const recents = (data?.earthquakes ?? [])
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
.slice(0, 5);
return ( return (
<main className="min-h-screen text-black"> <main className="min-h-screen text-black">
<div className="w-full relative"> <div className="w-full relative">
<div> <div>
<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" /> <Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
</div> </div>
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div> <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%]"> <div className="absolute inset-0 top-[30%]">
<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" /> <Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
</div> </div>
</div> </div>
<p className="mt-2"></p> <p className="mt-2"></p>
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2"> <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"> <Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" /> <Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3> <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"> <p className="text-md text-black text-center max-w-xs opacity-90">
Log new earthquakes with their required details or search past seismic events Log new earthquakes with their required details or search past seismic events
</p> </p>
</Link> </Link>
<Link <Link
href="/observatories" href="/observatories"
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
> >
<Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" /> <Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" />
<h3 className="text-xl font-bold text-black mb-4">Observatories</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">
Find recently active observatories, and newly opened/closed sites Find recently active observatories, and newly opened/closed sites
</p> </p>
</Link> </Link>
<Link href="/shop" 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="/artefact.png" alt="Technology Icon" className="h-40 w-40 mb-4" /> <Image height={100} width={100} src="/artefact.png" alt="Aftefacts 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">Artefacts</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 View or purchase recently discovered artefacts from seismic events
</p> </p>
</Link> </Link>
</div> </div>
<p className="mt-18"></p> <p className="mt-18"></p>
<section className="min-h-screen text-black"> <section className="min-h-screen text-black">
<div className="w-full relative z-40"> <div className="w-full relative z-40">
<div> <div>
<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" /> <Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
</div> </div>
<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"> <div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6"> <section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10"> <h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
Welcome to Tremor Tracker Welcome to Tremor Tracker
</h1> </h1>
<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10"> <p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission TremorTracker is a non-profit website and research company, that aims to provide seismic education and aid
is seismic education and preparation for all preparation
</p> </p>
<p className="mt-20"></p> <p className="mt-10"></p>
<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> <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>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10"> <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range An earthquake is a sudden shaking of the Earth’s surface, triggered by a rapid release of energy deep underground.
in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of This usually happens because the Earth’s outer shell, called the crust, is made up of large pieces known as
earthquakes happen every day—but most are too small to feel. tectonic plates. These plates are always moving, but sometimes they get stuck at their edges; when stress builds
</p> up and is finally released, it causes the ground to shake—an earthquake. Earthquakes can vary greatly in size—from
<p className="mt-20"></p> barely noticeable tremors to powerful quakes capable of causing widespread destruction. There are several types:
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10"> Tectonic, Volcanic and Collapse earthquakes. Understanding why and how earthquakes happen helps scientists predict
How do we log earthquakes? where they are most likely to occur and how to lessen their impact.
</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="mt-10"></p>
What information are we interested in? <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
</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">info</p> </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 information are we interested in?
What are observatories? </p>
</p> <p className="text-lg md:text-xl 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> Scientists record earthquakes using special instruments called seismometers, which detect and measure the
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p> vibrations in the ground. When an earthquake occurs, the seismometer produces a trace known as a seismogram,
</section> showing the strength and duration of the shaking. Information from seismometers around the world is sent to data
</div> centers, where experts analyze it to pinpoint the earthquake’s location, type, depth, and magnitude. This process
</div> is called “logging” or recording earthquakes, and it helps track seismic activity globally.
</section> </p>
<p className="mt-20"></p> <p className="mt-10"></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">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight"> What are observatories?
Recent Earthquake Events </p>
</h1> <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
<p className="text-lg md:text-xl text-black drop-shadow-md"> An earthquake observatory is a specialized facility where scientists monitor and study seismic activity. These
Learn about the most recent earthquake events from around the world: observatories are equipped with sensitive instruments that can detect and record even the smallest tremors deep
</p> within the Earth. Observatories collect important data about the strength, location, and timing of each earthquake
</section> that can be shared with the general public. Scientists at the observatory use this data to better understand how
<p className="mt-6"></p> and why earthquakes occur, track earthquake patterns, and issue warnings if a major quake is detected. The
<div className="mx-auto w-5/6 px-2"> information gathered also helps in designing safer buildings and improving emergency response plans.
{error && ( </p>
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2"> </section>
<p>Failed to load earthquakes.</p> </div>
</div> </div>
)} </section>
{isLoading && ( <p className="mt-20"></p>
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2"> <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
<p>Loading...</p> <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
</div> <p className="text-lg md:text-xl text-black drop-shadow-md">
)} Learn about the most recent earthquake events from around the world:
{!isLoading && recents.length === 0 && ( </p>
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2"> </section>
<p>No earthquakes found.</p> <p className="mt-6"></p>
</div> <div className="mx-auto w-5/6 px-2">
)} {error && (
<div className="flex flex-col gap-4"> <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
{recents.map((eq) => ( <p>Failed to load earthquakes.</p>
<div </div>
key={eq.code} )}
className="flex items-center justify-between p-4 bg-white rounded-xl shadow border" {isLoading && (
> <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
<div> <p>Loading...</p>
<div className="font-semibold"> </div>
Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])} )}
</div> {!isLoading && recents.length === 0 && (
<div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div> <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
</div> <p>No earthquakes found.</p>
<MagnitudeNumber magnitude={eq.magnitude} /> </div>
</div> )}
))} <div className="flex flex-col gap-4">
</div> {recents.map((eq) => (
</div> <div key={eq.code} className="flex items-center justify-between p-4 bg-white rounded-xl shadow border">
<p className="mt-20"></p> <div>
<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="font-semibold">Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}</div>
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight"> <div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div>
Find Out More! </div>
</h1> <MagnitudeNumber magnitude={eq.magnitude} />
<p className="text-lg md:text-xl text-black drop-shadow-md"> </div>
Explore more of our website... ))}
</p> </div>
</section> </div>
<p className="mt-2"></p> <p className="mt-20"></p>
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2"> <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"> <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Find Out More!</h1>
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" /> <p className="text-lg md:text-xl text-black drop-shadow-md">Explore more of our website...</p>
<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3> </section>
<p className="text-md text-black text-center max-w-xs opacity-90"> <p className="mt-2"></p>
Visit our socials or leave us a message via phone or email. <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
</p> <Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
</Link> <Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
<Link href="/our-mission" 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">Contact us directly</h3>
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" /> <p className="text-md text-black text-center max-w-xs opacity-90">
<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3> Visit our socials or leave us a message via phone or email.
<p className="text-md text-black text-center max-w-xs opacity-90"> </p>
Find out more about our purpose and the features we offer. </Link>
</p> <Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
</Link> <Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
<Link href="/the-team" 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">Our Mission</h3>
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" /> <p className="text-md text-black text-center max-w-xs opacity-90">
<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3> Find out more about our purpose and the features we offer.
<p className="text-md text-black text-center max-w-xs opacity-90"> </p>
Learn about our team leads and their responsibilities. </Link>
</p> <Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
</Link> <Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
</div> <h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
<p className="mt-10"></p> <p className="text-md text-black text-center max-w-xs opacity-90">
<section style={{ height: 500 }} className="text-black"> Learn about our team leads and their responsibilities.
<div className="w-full relative overflow-hidden z=10"> </p>
<div className="flex justify-center"> </Link>
<Image height={400} width={800} alt="Background Image" src="/team.PNG" /> </div>
</div> <p className="mt-10"></p>
<BottomFooter /> <section style={{ height: 500 }} className="text-black">
</div> <div className="w-full relative overflow-hidden z=10">
</section> <div className="flex justify-center">
</main> <Image height={400} width={800} alt="Background Image" src="/team.PNG" />
); </div>
} <BottomFooter />
</div>
</section>
</main>
);
}