Initial Commit to Repo

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_WEATHER_API=

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env
+.env.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.nvmrc

@@ -0,0 +1 @@
+v24.16.0

Dockerfile

@@ -0,0 +1,21 @@
+# Use the Node.js 20.13.1 base image
+FROM node:24.16.0
+
+# Set the working directory inside the container
+WORKDIR /src
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy the entire application code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Expose the port your app runs on
+EXPOSE 3000
+
+# Command to start the application
+CMD ["npm", "run", "start"]

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	/* config options here */
+	output: "standalone",
+	reactCompiler: true,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,25 @@
+{
+	"name": "raceway",
+	"version": "0.0.10",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "eslint"
+	},
+	"dependencies": {
+		"@marzzelo/windir": "^1.2.3",
+		"next": "^16.2.9",
+		"react": "19.2.7",
+		"react-dom": "19.2.7"
+	},
+	"devDependencies": {
+		"@tailwindcss/postcss": "^4",
+		"babel-plugin-react-compiler": "1.0.0",
+		"eslint": "^10",
+		"eslint-config-next": "16.2.9",
+		"sass": "^1.101.0",
+		"tailwindcss": "^4"
+	}
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/globals.css

@@ -0,0 +1,356 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+	margin: 0;
+	font-family: "Noto Sans", sans-serif;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+	display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+	box-sizing: content-box; /* 1 */
+	height: 0; /* 1 */
+	overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+	background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+	border-bottom: none; /* 1 */
+	text-decoration: underline; /* 2 */
+	text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+	font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+	border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+	/* 1 */
+	overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+	/* 1 */
+	text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+	-webkit-appearance: button;
+	appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+	padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+	box-sizing: border-box; /* 1 */
+	color: inherit; /* 2 */
+	display: table; /* 1 */
+	max-width: 100%; /* 1 */
+	padding: 0; /* 3 */
+	white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+	overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+	box-sizing: border-box; /* 1 */
+	padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+	-webkit-appearance: textfield; /* 1 */
+	appearance: textfield;
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+	display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+	display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+	display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+	display: none;
+}

src/app/layout.js

@@ -0,0 +1,14 @@
+import "./globals.css";
+
+export const metadata = {
+	title: "Raceway Hypervisor",
+	description: "Raceway Car Wash System Dashboard",
+};
+
+export default function RootLayout({ children }) {
+	return (
+		<html lang="en">
+			<body>{children}</body>
+		</html>
+	);
+}

src/app/page.js

@@ -0,0 +1,11 @@
+import Image from "next/image";
+
+import styles from "./page.module.css";
+
+export default function Home() {
+	return (
+		<main className={styles.main}>
+			<a href="/todo">Daily Info</a>
+		</main>
+	);
+}

src/app/page.module.css

@@ -0,0 +1,22 @@
+.main {
+	width: 100vw;
+	height: 100vh;
+	color: #fff;
+	display: flex;
+	align-items: center;
+	background: #1d1f27;
+	justify-content: center;
+
+	a {
+		width: 25%;
+		padding: 20px 0;
+		font-size: 25pt;
+		font-weight: bold;
+		text-align: center;
+		border-radius: 10px;
+		background: #17171b;
+		text-decoration: none;
+		color: rgba(255, 255, 255, 0.85);
+		border: 1px solid rgba(200, 200, 200, 0.4);
+	}
+}

src/app/todo/page.js

@@ -0,0 +1,245 @@
+"use client";
+
+import { getWeatherIcon } from "@/utils/weather.js";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import styles from "./todo.module.css";
+
+export default function WeatherPage() {
+	const [weather, setWeather] = useState(null);
+	const [time, setTime] = useState(new Date().toLocaleTimeString());
+	const [date, setDate] = useState(new Date().toLocaleDateString());
+	const [weatherIcon, setWeatherIcon] = useState("/weather/sunnyday.png");
+
+	useEffect(() => {
+		async function fetchWeather() {
+			try {
+				const res = await fetch(
+					`https://api.pirateweather.net/forecast/${process.env.NEXT_PUBLIC_WEATHER_API}/42.3967,-88.1837?units=us&exclude=minutely,hourly,flags&icon=pirate`,
+					{ cache: "no-store" },
+				);
+				const data = await res.json();
+				setWeather(data);
+			} catch (err) {
+				console.error("Failed to fetch weather:", err);
+			}
+		}
+
+		// only fetch weather every 5 minutes on the 0th second
+		const fetchWeatherInterval = () => {
+			const now = new Date();
+
+			if (now.getSeconds() === 0 && now.getMinutes() % 5 === 0) {
+				fetchWeather();
+			}
+		};
+
+		fetchWeather();
+
+		const interval = setInterval(fetchWeatherInterval, 1000);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setTime(new Date().toLocaleTimeString());
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setDate(new Date().toLocaleDateString());
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	const weatherTemp = Math.floor(weather?.currently?.temperature) || "--";
+
+	const weatherFeelsLike =
+		Math.floor(weather?.currently?.apparentTemperature) || "--";
+
+	const weatherHigh =
+		Math.floor(weather?.daily?.data[0]?.temperatureHigh) || "--";
+	const weatherLow =
+		Math.floor(weather?.daily?.data[0]?.temperatureLow) || "--";
+
+	const percentChance =
+		Math.floor(weather?.currently?.precipProbability * 100) || "0";
+
+	const lastUpdatedTime = weather
+		? new Date(weather.currently.time * 1000).toLocaleTimeString([], {
+				hour: "2-digit",
+				minute: "2-digit",
+			})
+		: "--";
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setWeatherIcon(
+				`/weather/${getWeatherIcon(weather?.currently?.icon)}.png`,
+			);
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, [weather]);
+
+	const weatherAlerts = weather?.alerts || [];
+
+	const futureForecasts = weather?.daily?.data.slice(1, 4) || [];
+
+	return (
+		<div className={styles.todoContainer}>
+			<div className={styles.todoHeader}>
+				<span className={styles.left}>
+					<span className={styles.title}>Raceway Car Wash</span>
+					<span className={styles.location}>Fox Lake</span>
+				</span>
+				<span className={styles.right}>
+					<span className={styles.time}>{time || "00:00:00 AM"}</span>
+					<span className={styles.date}>{date}</span>
+				</span>
+			</div>
+			<span className={styles.container}>
+				<span className={styles.listContainer}>
+					<span className={styles.lists}>Automated List</span>
+					<span className={styles.lists}>Manual List</span>
+				</span>
+
+				<span className={styles.weatherContainer}>
+					<span className={styles.weatherContainerInner}>
+						<span className={styles.weatherHeader}>
+							⛅ Hyperlocal Weather
+						</span>
+
+						{weatherAlerts.length > 0 && (
+							<span className={styles.weatherAlerts}>
+								{weatherAlerts.map((alert, index) => (
+									<span
+										key={index}
+										className={styles.weatherAlert}
+									>
+										⚠️ {alert.title}
+										<span
+											className={
+												styles.weatherAlertExpires
+											}
+										>
+											Expires:{" "}
+											{new Date(
+												alert.expires * 1000,
+											).toLocaleString()}
+										</span>
+									</span>
+								))}
+							</span>
+						)}
+
+						<span className={styles.weatherTop}>
+							<span className={styles.weatherTopLeft}>
+								<span className={styles.weatherCondition}>
+									{weather?.currently?.summary}
+								</span>
+								<span className={styles.weatherTemp}>
+									{weatherTemp}°
+								</span>
+								<span className={styles.weatherFeelsLike}>
+									Feels Like {weatherFeelsLike}°
+								</span>
+								<span className={styles.weatherHighLow}>
+									High: {weatherHigh}° &middot; Low:{" "}
+									{weatherLow}°
+								</span>
+							</span>
+
+							<span className={styles.weatherTopRight}>
+								<Image
+									alt="Weather Icon"
+									src={weatherIcon}
+									width={175}
+									height={175}
+									unoptimized
+								/>
+							</span>
+						</span>
+
+						<span className={styles.weatherDetails}>
+							<span className={styles.detail}>
+								{weather?.currently.windSpeed || "--"}
+								<span className={styles.detailUnit}>mph</span>
+								<span className={styles.detailText}>
+									Wind Speed
+								</span>
+							</span>
+							<span className={styles.detail}>
+								{percentChance}%
+								<span className={styles.detailText}>
+									Precipitation
+								</span>
+							</span>
+							<span className={styles.detail}>
+								{Math.floor(
+									weather?.currently?.humidity * 100,
+								) || "--"}
+								%
+								<span className={styles.detailText}>
+									Humidity
+								</span>
+							</span>
+						</span>
+
+						<span className={styles.weatherFutureForecasts}>
+							{futureForecasts.map((forecast, index) => (
+								<span
+									key={index}
+									className={styles.futureForecast}
+								>
+									<span className={styles.futureForecastDay}>
+										{new Date(
+											forecast.time * 1000,
+										).toLocaleDateString([], {
+											weekday: "short",
+										})}
+									</span>
+									<span
+										className={
+											styles.futureForecastIconContainer
+										}
+									>
+										<Image
+											alt="Weather Icon"
+											src={`/weather/${getWeatherIcon(forecast.icon)}.png`}
+											className={
+												styles.futureForecastIcon
+											}
+											width={40}
+											height={40}
+											unoptimized
+										/>
+									</span>
+									<span className={styles.futurePrecipChance}>
+										{Math.floor(
+											forecast.precipProbability * 100,
+										)}
+										%
+									</span>
+									<span className={styles.futureForecastTemp}>
+										{Math.floor(forecast.temperatureHigh)}°
+										/ {Math.floor(forecast.temperatureLow)}°
+									</span>
+								</span>
+							))}
+						</span>
+
+						<span className={styles.weatherFooter}>
+							Last Updated {lastUpdatedTime}
+						</span>
+					</span>
+				</span>
+			</span>
+		</div>
+	);
+}

src/app/todo/todo.module.css

@@ -0,0 +1,274 @@
+.todoContainer {
+	height: 100vh;
+	background: #1d1f27;
+}
+
+.todoHeader {
+	display: grid;
+	padding: 20px;
+	color: #efefef;
+	grid-row-gap: 0px;
+	grid-column-gap: 0px;
+	background: #c90f0c;
+	width: calc(100%- 40px);
+	grid-template-rows: 1fr;
+	grid-template-columns: repeat(2, 1fr);
+}
+
+.title {
+	width: 100%;
+	display: block;
+	font-size: 30px;
+	font-weight: bold;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.location {
+	font-size: 20px;
+	letter-spacing: 2px;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.right {
+	text-align: right;
+}
+
+.time {
+	width: 100%;
+	display: block;
+	font-size: 30px;
+	font-weight: bold;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.date {
+	font-size: 20px;
+	letter-spacing: 2px;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.container {
+	display: flex;
+	color: #fff;
+	padding: 0 10px;
+	margin-top: 15px;
+	flex-wrap: nowrap;
+	flex-direction: row;
+	align-items: flex-start;
+	width: calc(100% - 20px);
+	align-content: flex-start;
+	justify-content: flex-start;
+}
+
+.listContainer {
+	order: 0;
+	gap: 10px;
+	flex: 1 1 70%;
+	display: flex;
+	align-self: auto;
+	margin: 0 5px 0 0;
+	flex-direction: row;
+
+	.lists {
+		padding: 10px;
+		display: flex;
+		flex: 1 1 auto;
+		border-radius: 10px;
+		background: #17171b;
+		border: 1px solid rgba(200, 200, 200, 0.2);
+	}
+}
+
+.weatherContainer {
+	flex: 1 1 30%;
+	margin: 0 0 0 5px;
+
+	.weatherContainerInner {
+		width: 100%;
+		border-radius: 10px;
+		background: #17171b;
+		display: inline-block;
+		border: 1px solid rgba(200, 200, 200, 0.2);
+
+		.weatherHeader {
+			font-weight: bold;
+			margin: 5px 5px 0 5px;
+			display: inline-block;
+			width: calc(100% - 24px);
+			padding: 6px 6px 4px 6px;
+			border-radius: 5px 5px 2px 2px;
+			border: 1px solid rgba(200, 200, 200, 0.2);
+			background: rgba(255, 255, 255, 0.1);
+		}
+
+		.weatherAlerts {
+			font-size: 18pt;
+			font-weight: bold;
+			border-radius: 2px;
+			text-align: center;
+			display: inline-block;
+			margin: 5px 5px 0 5px;
+			width: calc(100% - 24px);
+			padding: 12px 6px 10px 6px;
+			color: rgba(255, 255, 255, 0.95);
+			background: rgba(255, 50, 50, 0.5);
+			border: 1px solid rgba(255, 50, 50, 0.75);
+
+			&:nth-last-child(1 of .weatherAlerts) {
+				border-radius: 2px 2px 5px 5px;
+			}
+
+			.weatherAlertExpires {
+				display: block;
+				font-size: 10pt;
+				margin-top: 5px;
+				font-weight: bold;
+				color: rgba(255, 255, 255, 0.75);
+			}
+		}
+
+		.weatherTop {
+			display: flex;
+			padding: 10px;
+			justify-content: stretch;
+
+			.weatherTopLeft {
+				display: flex;
+				flex: 1 1 50%;
+				text-align: center;
+				flex-direction: column;
+				justify-content: center;
+
+				.weatherCondition {
+					font-size: 15pt;
+					font-weight: bold;
+					margin: 10px 0 5px 0;
+				}
+
+				.weatherTemp {
+					font-size: 55pt;
+					font-weight: bold;
+				}
+
+				.weatherFeelsLike {
+					font-size: 11pt;
+					font-weight: bold;
+					margin: 5px 0 5px 0;
+				}
+
+				.weatherHighLow {
+					font-size: 15pt;
+					margin: 15px 0 10px 0;
+				}
+			}
+
+			.weatherTopRight {
+				flex: 1 1 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+
+		.weatherDetails {
+			display: flex;
+			flex: 1 1 auto;
+			justify-content: space-around;
+
+			.detail {
+				width: 100%;
+				margin: 5px;
+				font-size: 14pt;
+				font-weight: bold;
+				text-align: center;
+				border-radius: 2px;
+				padding: 15px 10px 10px 10px;
+				background: rgba(255, 255, 255, 0.12);
+				border: 1px solid rgba(200, 200, 200, 0.1);
+
+				&:nth-child(1) {
+					margin: 5px 0 5px 5px;
+					border-radius: 5px 2px 2px 2px;
+				}
+
+				&:nth-child(3) {
+					margin: 5px 5px 5px 0;
+					border-radius: 2px 5px 2px 2px;
+				}
+
+				.detailUnit {
+					font-size: 10pt;
+					margin: 0 0 0 2px;
+					display: inline-block;
+				}
+
+				.detailText {
+					display: block;
+					font-size: 10pt;
+					margin: 5px 0 0 2px;
+					color: rgba(200, 200, 200, 0.95);
+				}
+			}
+		}
+
+		.weatherFooter {
+			padding: 5px;
+			display: block;
+			font-size: 10pt;
+			font-weight: bold;
+			text-align: center;
+			margin: 0 auto 5px auto;
+			width: calc(100% - 22px);
+			border-radius: 2px 2px 5px 5px;
+			color: rgba(200, 200, 200, 0.65);
+			background: rgba(255, 255, 255, 0.05);
+			border: 1px solid rgba(200, 200, 200, 0.1);
+		}
+	}
+
+	.weatherFutureForecasts {
+		display: flex;
+		flex-direction: column;
+
+		.futureForecast {
+			display: flex;
+			margin: 0 0 5px 0;
+			align-self: center;
+			border-radius: 2px;
+			align-items: center;
+			padding: 2px 2px 0 2px;
+			justify-content: center;
+			width: calc(100% - 16px);
+			background: rgba(255, 255, 255, 0.1);
+			border: 1px solid rgba(200, 200, 200, 0.2);
+
+			.futureForecastDay {
+				flex: 2 1 35%;
+				font-size: 16pt;
+				text-align: right;
+				font-weight: bold;
+				padding-right: 20px;
+			}
+
+			.futureForecastIconContainer {
+				display: flex;
+				flex: 1 1 10%;
+				justify-content: right;
+			}
+
+			.futurePrecipChance {
+				flex: 1 1 10%;
+				font-size: 14pt;
+				font-weight: bold;
+				text-align: center;
+			}
+
+			.futureForecastTemp {
+				flex: 2 1 40%;
+				font-size: 16pt;
+				font-weight: bold;
+				padding-left: 25px;
+			}
+		}
+	}
+}

src/utils/weather.js

@@ -0,0 +1,18 @@
+export function getWeatherIcon(icon) {
+	switch (icon) {
+		case "clear-day":
+			return `sunnyday`;
+		case "mostly-clear-day":
+			return `partlycloudyday`;
+		case "partly-cloudy-day":
+			return `partlycloudyday`;
+		case "breezy":
+			return `windy`;
+		case "rain":
+			return `rain`;
+		case "thunderstorm":
+			return `tstorm`;
+		default:
+			return `sunnyday`;
+	}
+}