added generative audio, tailwind, improvements, adjustments

src/routes/+page.svelte

@@ -9,9 +9,9 @@
 	let error: GeolocationError | undefined = $state(undefined);
 
 	let options = {
-		enableHighAccuracy: true,
-		timeout: 5000, // milliseconds
-		maximumAge: 60 * 60 * 1000, // milliseconds
+		enableHighAccuracy: false, // Use WiFi/network location (faster than GPS)
+		timeout: 10000, // milliseconds - increased for better reliability
+		maximumAge: 0, // Don't use cached position
 	};
 
 	$inspect(error);
@@ -27,18 +27,18 @@
 
 <div class="flex min-h-screen flex-col items-center justify-center">
 	{#if !getPosition}
-		<button class="animate-pulse cursor-crosshair text-xl" onclick={flipGetPosition}>
+		<button class="animate-pulse cursor-crosshair text-xl hover:text-blue-400 transition-colors" onclick={flipGetPosition}>
 			Let me show you...
 		</button>
 	{:else if loading}
 		<p class="text-xl">Loading...</p>
 	{:else if error}
-		<p class="text-xl">We can't seem to find you.</p>
+		<p class="text-xl text-red-400">We can't seem to find you.</p>
 	{:else}
-		<p class="mb-5 text-xl">
+		<p class="mb-5 text-xl text-center px-4">
 			Your Position is set as: {position?.coords?.latitude}, {position?.coords?.longitude}
 		</p>
-		<button class="animate-pulse cursor-crosshair text-lg" onclick={goToPlayer}
+		<button class="animate-pulse cursor-crosshair text-lg hover:text-blue-400 transition-colors" onclick={goToPlayer}
 			>Ok, on-out with it</button
 		>
 	{/if}

src/routes/on-out/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import WeatherGen from '$lib/generators/weather/WeatherGen.svelte';
+	import AirQualityGen from '$lib/generators/air-quality/AirQualityGen.svelte';
 
 	import type { PageProps } from './$types';
 
@@ -7,13 +8,17 @@
 	const currentWeather = data.weatherData.current;
 	const currentAirQuality = data.airQualityData.current;
 
-
-	$inspect(currentWeather)
-	$inspect(currentAirQuality)
+	$inspect(currentWeather);
+	$inspect(currentAirQuality);
 </script>
 
-
-<div class="flex min-h-screen flex-col items-center justify-center">
-	<WeatherGen {...currentWeather}></WeatherGen>
+<div class="min-h-screen p-8">
+	<div class="max-w-7xl mx-auto space-y-8">
+		<WeatherGen {...currentWeather}></WeatherGen>
+		<AirQualityGen
+			{...currentAirQuality}
+			relativeHumidity2m={currentWeather.relativeHumidity2m}
+			windSpeed10m={currentWeather.windSpeed10m}
+		></AirQualityGen>
+	</div>
 </div>
-

src/routes/on-out/+page.ts

@@ -13,7 +13,7 @@ export const load: PageLoad = async ({ url }) => {
 };
 
 
-const getWeather = async (long: string, lat: string): Promise<WeatherData> => {
+const getWeather = async (lat: string, long: string): Promise<WeatherData> => {
     const apiParams = {
         "latitude": lat,
         "longitude": long,
@@ -45,7 +45,7 @@ const getWeather = async (long: string, lat: string): Promise<WeatherData> => {
     return weatherData
 }
 
-const getAirQuality = async (long: string, lat: string): Promise<AirQualityData> => {
+const getAirQuality = async (lat: string, long: string): Promise<AirQualityData> => {
     const params = {
         "latitude": lat,
         "longitude": long,