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

neatening

Browse Source
This commit is contained in:
IZZY 2025-05-31 22:35:17 +01:00
parent 9a76ba9f54
commit 09b2034522
7 changed files with 102 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/artefact.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/observe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

8
src/app/contact-us/page.tsx
View File

@ -98,7 +98,7 @@ const ContactUs = () => {
};
return (
<div className="h-full relative text-white border border-black overflow-hidden">
<div className="min-h-screen relative text-white border border-black ">
{/* Lava Flood Overlay */}
{lavaActive && (
<div className="lava-flood-overlay lava-active fixed inset-0 z-[60] flex items-center justify-center">
@ -106,7 +106,7 @@ const ContactUs = () => {
src="/lava.jpg"
alt="Lava flood"
draggable={false}
className="w-full h-full object-cover opacity-80 pointer-events-none"
className="w-full min-h-screen object-cover opacity-80 pointer-events-none"
/>
</div>
)}
@ -117,7 +117,7 @@ const ContactUs = () => {
src="/pulsatingMap.jpg"
alt="Pulsating Map"
draggable={false}
className="w-full h-full object-cover opacity-80 pointer-events-none"
className="w-full min-h-screen object-cover opacity-80 pointer-events-none"
/>
</div>
)}
@ -153,7 +153,7 @@ const ContactUs = () => {
src="/tsunamiWaves.jpg"
/>
{/* Overlay for readability */}
<div className="absolute overflow-hidden w-full h-full bg-gradient-to-b from-black/80 via-black/40 to-black/20 flex flex-col items-center z-20">
<div className="relative w-full min-h-screen bg-gradient-to-b from-black/80 via-black/40 to-black/20 flex flex-col items-center z-20">
{/* Container */}
<div className="max-w-4xl mx-auto p-5 mt-20">
{/* Header */}

2
src/app/earthquakes/page.tsx
View File

@ -127,7 +127,7 @@ export default function Earthquakes() {
.map(
(x: Earthquake): GeologicalEvent => ({
id: x.code,
title: `Earthquake in ${x.code.split("-")[2]}`,
title: `Earthquake in ${x.location || (x.code && x.code.split("-")[2])}`,
magnitude: x.magnitude,
longitude: x.longitude,
latitude: x.latitude,

21
src/app/our-mission/page.tsx
View File

@ -1,20 +1,21 @@
"use client";
import Image from "next/image";
import BottomFooter from "@components/BottomFooter";
function OurMission() {
return (
<div
className="relative h-full bg-fixed bg-cover bg-center text-white "
className="relative bg-fixed bg-cover bg-center text-white "
style={{ backgroundImage: "url('destruction.jpg')", overflow: "hidden" }}
>
{/* Overlay for Readability */}
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
{/*<div className="absolute inset-0 bg-black bg-opacity-50"></div>*/}
{/* Centered content */}
<div className="relative z-20 flex flex-col items-center justify-center h-full py-auto">
<div className="relative z-20 flex flex-col items-center justify-center py-auto">
{/* Title & Mission Statement */}
<div className="mb-10 flex flex-col items-center">
<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg">Our Mission</h1>
<p className="text-lg text-center max-w-2xl text-white drop-shadow-md">Earthquake awareness accessible for everyone</p>
<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg text-black">Our Mission</h1>
<p className="text-lg text-center max-w-2xl text-gray-800 drop-shadow-md">Earthquake awareness accessible for everyone</p>
</div>
{/* Content Area */}
<div className="max-w-5xl w-full p-8 bg-white bg-opacity-90 shadow-xl rounded-3xl">
@ -23,6 +24,15 @@ function OurMission() {
and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative
technology combine together.
</p>
<div className="flex justify-center mb-6">
<Image
src="/logo.png"
width={100} // Adjust as needed
height={100} // Adjust as needed
alt="Tremor Tracker Logo"
className="h-200 w-200 object-contain"
/>
</div>
<p className="text-xl text-black leading-relaxed mb-8 max-w-3xl mx-auto">
We combine scientific insights with public awareness, delivering resources, tools, and real-time updates to enhance
preparedness for earthquakes in order to save lives, improve recovery efficiency, and build resilience against seismic
@ -53,6 +63,7 @@ function OurMission() {
</div>
</div>
</div>
<BottomFooter />
</div>
);
}

4
src/app/page.tsx
View File

@ -69,14 +69,14 @@ export default function Home() {
href="/observatories"
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
>
<Image height={100} width={100} src="/observatory.jpg" 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>
<p className="text-md text-black text-center max-w-xs opacity-90">
Find recently active observatories, and newly opened/closed sites
</p>
</Link>
<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="/artefact.png" alt="Technology Icon" className="h-40 w-40 mb-4" />
<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">
View or purchase recently discovered artefacts from seismic events

13
src/app/the-team/page.tsx
View File

@ -1,4 +1,5 @@
"use client";
import BottomFooter from "@components/BottomFooter";
const teamMembers = [
{
name: "Tim Howitz",
@ -29,11 +30,17 @@ const teamMembers = [
image: "/Lukeshanthescientist.PNG",
},
];
export default function Page() {
return (
<>
<div
className="min-h-screen relative flex flex-col items-center justify-center px-4 py-30"
style={{ backgroundImage: "url('tectonicPlates.png')", backgroundSize: "cover", backgroundPosition: "center" }}
style={{
backgroundImage: "url('tectonicPlates.png')",
backgroundSize: "cover",
backgroundPosition: "center"
}}
>
{/* Overlay */}
<div className="absolute inset-0 bg-black bg-opacity-50 pointer-events-none"></div>
@ -69,5 +76,9 @@ export default function Page() {
))}
</div>
</div>
{/* Footer goes OUTSIDE the flex/padded container, so it spans full width */}
<BottomFooter />
</>
);
}