From 88ef1374497ca1b300de79a93ab13bc0acab4132 Mon Sep 17 00:00:00 2001 From: Emily Neighbour Date: Sat, 31 May 2025 22:59:24 +0100 Subject: [PATCH 1/2] home page finishes --- src/app/page.tsx | 369 ++++++++++++++++++++++++----------------------- 1 file changed, 186 insertions(+), 183 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index a114388..179ad65 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,21 +1,22 @@ "use client"; -import useSWR from "swr"; import Image from "next/image"; import Link from "next/link"; +import { TbHexagon } from "react-icons/tb"; +import useSWR from "swr"; + import BottomFooter from "@components/BottomFooter"; import { createPoster } from "@utils/axiosHelpers"; import getMagnitudeColor from "@utils/getMagnitudeColour"; -import { TbHexagon } from "react-icons/tb"; // 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(); + 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(); } // copied from sidebar @@ -38,182 +39,184 @@ function MagnitudeNumber({ magnitude }: { magnitude: number }) { } export default function Home() { - const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 })); + const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 })); - // 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 ( -
-
-
- Background Image -
-
-
- Title Image -
-
-

-
- - Education Icon -

Earthquakes

-

- Log new earthquakes with their required details or search past seismic events -

- - - Research Icon -

Observatories

-

- Find recently active observatories, and newly opened/closed sites -

- - - Technology Icon -

Artefacts

-

- View or purchase recently discovered artefacts from seismic events -

- -
-

-
-
-
- Background Image -
-
-
-

- Welcome to Tremor Tracker -

-

- TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission - is seismic education and preparation for all -

-

-

What is an earthquake?

-

- Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range - in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of - earthquakes happen every day—but most are too small to feel. -

-

-

- How do we log earthquakes? -

-

- What information are we interested in? -

-

info

-

-

- What are observatories? -

-

What is their role?

-

info

-
-
-
-
-

-
-

- Recent Earthquake Events -

-

- Learn about the most recent earthquake events from around the world: -

-
-

-
- {error && ( -
-

Failed to load earthquakes.

-
- )} - {isLoading && ( -
-

Loading...

-
- )} - {!isLoading && recents.length === 0 && ( -
-

No earthquakes found.

-
- )} -
- {recents.map((eq) => ( -
-
-
- Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])} -
-
- {getRelativeDate(eq.date)} -
-
- -
- ))} - -
-
-

-
-

- Contact Information -

-

- Learn about Tremor Tracker's mission, our team or contact us directly: -

-
-

-
- - Education Icon -

Contact us directly

-

- Visit our socials or leave us a message via phone or email. -

- - - Research Icon -

Our Mission

-

- Find out more about our purpose and the features we offer. -

- - - Technology Icon -

Meet the Team

-

- Learn about our team leads and their responsibilities. -

- -
-

-
-
-
- Background Image -
- -
-
-
- ); + // 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 ( +
+
+
+ Background Image +
+
+
+ Title Image +
+
+

+
+ + Education Icon +

Earthquakes

+

+ Log new earthquakes with their required details or search past seismic events +

+ + + Research Icon +

Observatories

+

+ Find recently active observatories, and newly opened/closed sites +

+ + + Technology Icon +

Artefacts

+

+ View or purchase recently discovered artefacts from seismic events +

+ +
+

+
+
+
+ Background Image +
+
+
+

+ Welcome to Tremor Tracker +

+

+ TremorTracker is a non-profit website and research company, that aims to provide seismic education and preparation + for all +

+

+

What is an earthquake?

+

+ An earthquake is a sudden shaking of the Earth’s surface, triggered by a rapid release of energy deep underground. + This usually happens because the Earth’s outer shell, the crust, is made up of large pieces known as tectonic + plates. These plates are always moving, but sometimes they get stuck at their edges; when stress builds up and is + finally released, it causes the ground to shake — an earthquake. Earthquakes can vary greatly in size from barely + noticeable tremors to powerful quakes capable of causing widespread destruction and even triggering tsunamis. + While hundreds of earthquakes occur around the world every day, most are too small to be felt. There are several + types of earthquakes: tectonic, volcanic, and collapse earthquakes. Understanding why and how earthquakes happen + helps scientists predict where they are most likely to occur and how to lessen their impact. +

+

+

+ How do we log earthquakes? +

+

+ What information are we interested in? +

+

+ Scientists record earthquakes using special instruments called seismometers, which detect and measure the + vibrations in the ground. When an earthquake occurs, the seismometer produces a trace known as a seismogram, + showing the strength and duration of the shaking. This process is called “logging” or recording earthquakes, and + it helps track seismic activity globally. We then log earthquake data to allow it to be accessed by the general + public. This information includes the name, location, magnitude, type, depth, etc. +

+

+

+ What are observatories? +

+

+ An earthquake observatory is a specialized facility where our scientists monitor and study seismic activity. These + observatories are equipped with sensitive instruments, like seismometers and computers, that can detect and record + even the smallest tremors deep within the Earth. Observatories collect important data about the strength, + location, and timing of each earthquake. Scientists at the observatory log this data and use it to better + understand how and why earthquakes occur, track earthquake patterns, and issue warnings if a major quake is + detected. The information gathered also helps in designing safer buildings and improving emergency response plans. +

+
+
+
+
+

+
+

Recent Earthquake Events

+

+ Learn about the most recent earthquake events from around the world: +

+
+

+
+ {error && ( +
+

Failed to load earthquakes.

+
+ )} + {isLoading && ( +
+

Loading...

+
+ )} + {!isLoading && recents.length === 0 && ( +
+

No earthquakes found.

+
+ )} +
+ {recents.map((eq) => ( +
+
+
Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
+
{getRelativeDate(eq.date)}
+
+ +
+ ))} +
+
+

+
+

Contact Information

+

+ Learn about Tremor Tracker's mission, our team or contact us directly: +

+
+

+
+ + Education Icon +

Contact us directly

+

+ Visit our socials or leave us a message via phone or email. +

+ + + Research Icon +

Our Mission

+

+ Find out more about our purpose and the features we offer. +

+ + + Technology Icon +

Meet the Team

+

+ Learn about our team leads and their responsibilities. +

+ +
+

+
+
+
+ Background Image +
+ +
+
+
+ ); // return ( //
From 2a6f8d10115143192549f12524b5c3af7aedeb45 Mon Sep 17 00:00:00 2001 From: Emily Neighbour Date: Sat, 31 May 2025 23:02:33 +0100 Subject: [PATCH 2/2] small fix --- src/app/page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 179ad65..ee2b64b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -129,11 +129,11 @@ export default function Home() {

An earthquake observatory is a specialized facility where our scientists monitor and study seismic activity. These - observatories are equipped with sensitive instruments, like seismometers and computers, that can detect and record - even the smallest tremors deep within the Earth. Observatories collect important data about the strength, - location, and timing of each earthquake. Scientists at the observatory log this data and use it to better - understand how and why earthquakes occur, track earthquake patterns, and issue warnings if a major quake is - detected. The information gathered also helps in designing safer buildings and improving emergency response plans. + observatories are equipped with sensitive instruments, that can detect and record even the smallest tremors deep + within the Earth. Observatories collect important data about the strength, location, and timing of each + earthquake. Scientists at the observatory log this data and use it to better understand how and why earthquakes + occur, track earthquake patterns, and issue warnings if a major quake is detected. The information gathered also + helps in designing safer buildings and improving emergency response plans.