fuelprices/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI changes

Browse Source
This commit is contained in:
Edwin Eames
2026-02-09 09:28:55 -05:00
parent 7931d42605
commit c56f3b5767
7 changed files with 381 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.dockerignore
View File

@@ -1,3 +1,4 @@
node_modules/
.svelte-kit
.idea
.git/

3
src/app.postcss
View File

@@ -16,6 +16,9 @@
.bg-orange-oil {
background-color: #ff6600;
}
.bg-orange-oil:hover {
background-color: #e55a00;
}
.text-orange-oil {
color: #ff6600;
}

38
src/lib/states/maine.ts
View File

@@ -1,4 +1,5 @@
// src/lib/states/maine.ts
export interface NewEnglandState {
id: string;
name: string;
@@ -46,12 +47,11 @@ export const maineCounties: NewEnglandState[] = [
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
{
id: 'hancock',
name: 'Hancock County',
slug: 'hancock',
image: '/images/counties/maine/hancock.png',
// This long coastal/island-heavy path is Hancock's correct shape
pathD: "M 519.24 383.61 531.18 378.51 535.37 380.94 538.28 375.91 546.7 374.41 554.67 372.95 553.74 367.76 551.54 355.96 549.33 343.58 561.3 341.33 559.29 329.71 571.37 327.43 568.99 315.19 568.2 310.97 591.97 306.76 598.96 346.94 587.19 349.21 597.85 395.92 601.33 419.61 600.9 420 600.9 421.8 599.25 423.41 598.6 423.42 597.49 421.68 597.17 420.79 596.65 420.39 596.2 420.67 595.36 422.08 595.89 422.98 593.96 426.96 593.44 426.9 592.99 427.3 592.95 428.19 593.11 429.2 592.51 430.93 591.46 430.77 590.82 430.27 589.96 428.64 589.78 425.28 588.98 424.83 588.62 425.5 588.34 425.56 587.3 423.66 586.49 421.46 586.45 418.82 586.09 417.75 585.77 415.56 585.81 413.71 586.21 412.58 585.97 411.63 585.45 411.12 582.8 410.64 582 411.03 581.68 411.32 581.64 411.88 580.88 412.27 578.63 412.05 579.11 411.15 579.07 410.3 578.87 409.97 576.79 409.29 575.82 410.02 575.5 410.98 575.78 413.06 575.3 413.17 573.86 412.16 573.09 410.53 572.21 410.42 571.61 412.1 571.37 413.68 570.37 414.8 568.72 415.08 568.64 416.6 569.04 417.27 571.57 416.26 573.58 417.22 573.86 417.67 573.94 418.9 573.33 419.3 573.33 419.69 576.62 422.95 577.19 422.61 577.77 422.69 578.4 423.5 579.59 425.8 580.53 429.21 580.63 431.25 578.88 434.15 574.91 436.56 570.93 436.52 569.56 437.2 568.72 438.2 568.68 439.49 568.78 439.98 569 440.15 569.43 442.03 566.87 445.04 564.78 445.33 564.43 444.45 562.3 443.33 561.88 442.61 561.1 442.04 559.96 442.11 558.87 441.42 557.11 438.43 556.96 437.11 556.5 435.69 556.03 435.22 556.04 433.36 557.85 432.07 558.13 431.62 558.05 431.11 556.93 430.21 556.94 430 558.05 427.52 558.41 427.47 559.32 426.49 559.42 425.74 559.18 424.86 562.09 422.91 562.46 423.15 562.79 423.05 563 422.7 562.9 421.29 561.63 418.5 560.99 417.65 560.17 417.53 559.86 418.01 559.7 419.25 557.42 421.94 556.91 422.15 556.33 422.1 555.75 421.47 555.88 418.11 556.16 416.43 555.24 415.24 554.4 415.05 553.73 415.31 553.26 415.87 552.89 416.77 553.37 420.05 552.86 421.93 552.85 422.86 553.15 423.59 553.15 424.55 552.67 424.72 551.51 424.6 551.03 423.26 551.27 422.02 552.03 421.12 551.31 417.3 550.83 417.08 549.94 417.7 549.46 419.77 548.9 420.11 548.04 419.89 546.57 421.8 546.13 421.96 544.17 421.18 543.6 421.29 543.2 421.8 543.08 422.41 543.24 423.65 543.77 425.11 544.65 425.45 545.09 427.69 544.28 428.86 543.39 430.63 543.03 432.69 543.1 433.3 543.31 433.97 544.06 434.93 545.74 435.05 546.42 436.32 546.35 436.86 546.7 438.23 547.57 439.71 547.54 440.35 546.58 441.77 546.74 442.88 547.19 443.61 547.01 444.71 546.13 444.47 544.58 443.51 544.54 443.27 543.44 441.97 542.48 441.35 539.55 438.42 538.38 438.32 537.38 437.65 537.24 437.12 537 436.88 531.94 435.15 527.86 432.16 527.16 431.25 525.9 430.88 524.39 431.09 523.99 431.43 523.48 432.3 521.23 433.99 518.15 433.42 518.04 432.83 518.32 430.42 518.72 428.41 519.07 427.94 519.34 426.73 518.97 425.01 518.67 420.48 519.29 417.91 520.6 417.01 522.1 413.29 522.31 411.78 521.12 412.11 516.76 393.38 516.27 391.47 518.61 386.27 519.63 385.4 519.24 383.61 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
@@ -70,11 +70,10 @@ export const maineCounties: NewEnglandState[] = [
name: 'Knox County',
slug: 'knox',
image: '/images/counties/maine/knox.png',
// Knox is mostly coastal islands; your original fragmented paths appear correct for the main/island groups
pathD: "M 549.48 458.49 550.11 459.45 550.24 460.4 549.15 461.74 547.8 461.25 547.64 459.95 548.36 458.37 548.77 458.08 549.48 458.49 Z M 562.97 458.37 563.48 457.99 564.08 458.01 565.61 460.3 565.58 460.7 564.92 461.51 562.32 461.51 561.23 460.08 561.23 459.88 561.35 459.52 562.29 458.5 562.97 458.37 Z M 553.9 449.72 555.38 449.96 556.66 449.62 557.42 450.11 558.21 451.54 560.43 454.39 559.31 456.29 556.36 459.14 555.31 459.55 554.34 458.3 554.45 457.25 553.56 455.68 551.35 455.34 550.9 455.52 549.75 455.47 549.23 454.73 549.35 453.71 549.86 453.39 551.88 450.8 553.9 449.72 Z M 532.15 437.81 532.66 437.74 533.35 438.18 534.25 439.23 537.62 440.96 538.76 442.41 539.31 444.28 538.65 447.36 537.48 448.7 537.42 449.08 538 449.8 538.1 450.19 538.07 450.91 535.76 454.03 534.87 454.56 533.18 454.84 533.04 456.57 532.7 456.76 532.04 456.62 531.6 455.42 531.05 454.56 530.22 453.93 529.39 453.88 529.05 453.64 528.74 453.36 528.36 452.49 528.5 450.62 528.88 449.56 528.95 447.88 528.29 446.73 528.12 445.77 528.12 445.24 528.53 444.57 529.19 444.52 530.25 443.85 530.87 441.88 532.18 440.1 532.46 439.19 532.46 438.32 532.15 437.81 Z M 563.27 448.51 565.37 447.41 566.23 447.62 567.02 448.35 567.14 448.76 566.78 448.84 566.53 448.51 565.43 449.43 564.82 452.14 564.02 452.46 561.01 450.49 561.74 449.32 562.39 448.71 563.27 448.51 Z M 552.03 445.75 553.24 446.72 553.84 448.16 553.81 448.45 553.33 448.69 550.91 448 550.65 447.12 551.08 444.78 551.29 444.57 552.27 444.61 552.44 445.18 552.03 445.75 Z M 521.51 443.34 523.64 445.35 523.71 446.6 522.66 447.97 521.72 447.86 520.63 447.23 519.88 446.71 519.28 446.5 518.56 446.18 517.93 446.13 517.14 444.77 516.99 443.51 517.55 442.93 518.11 442.67 518.3 442.71 521.51 443.34 Z M 574.63 439.55 576.71 439.96 577.03 440.77 576.92 440.99 576.07 440.75 575.1 440.91 574.56 441.26 574.26 441.5 574.14 442.04 574.21 443.09 573.43 443.66 571.74 443.85 571 443.44 570.76 442.94 570.97 440.56 572.17 440.28 572.93 440.67 573.66 440.67 574.18 440.33 574.63 439.55 Z M 549.56 425.73 551.46 432.43 550.42 433.21 547.98 431.73 546.53 430.55 546.7 429.08 547.46 427.24 547.34 426.01 547.66 424.21 548.22 423.7 548.7 423.65 549.3 424.04 549.56 425.73 Z",
pathD: "M 470.9 452 L 474.69 472.01 L 478.5 485.5 L 486.2 498.1 L 496.5 488.2 L 506.1 478.5 L 512.4 468.2 L 517.8 458.5 L 518.3 442.71 L 507.23 427.06 L 470.9 452 Z M 522.5 462.5 L 538.2 458.1 L 542.5 468.2 L 531.5 475.5 L 522.5 462.5 Z M 525.1 452.2 L 535.5 450.5 L 538.1 455.2 L 528.5 458.5 L 525.1 452.2 Z M 552.1 462.2 L 558.5 460.5 L 560.2 468.2 L 553.5 469.5 L 552.1 462.2 Z M 542.5 485.5 L 548.5 482.5 L 550.5 488.5 L 544.5 490.5 L 542.5 485.5 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
},
{
id: 'lincoln',
name: 'Lincoln County',
@@ -98,7 +97,8 @@ export const maineCounties: NewEnglandState[] = [
name: 'Penobscot County',
slug: 'penobscot',
image: '/images/counties/maine/penobscot.png',
pathD: "M 941.87 85.25 L 937.16 84.78 L 933.14 83.71 L 932.63 87.02 L 931.16 86.72 L 930.24 93.47 L 929.05 100.35 L 931.99 100.99 L 940.91 103.03 L 940.33 106.22 L 942.82 106.81 L 942.23 110.25 L 940.89 117.93 L 938.34 117.35 L 938.48 123.16 L 941.61 124.04 L 941.79 151.59 L 944.75 151.58 L 944.75 151.08 L 950.88 151.06 L 950.97 120.02 L 950.97 119.92 L 951.41 119.70 L 951.49 119.72 L 960.11 122.30 L 962.68 107.88 L 959.94 107.29 L 954.04 106.08 L 954.23 104.88 L 954.83 101.38 L 951.82 100.73 L 952.32 97.40 L 949.35 96.75 L 949.90 93.20 L 950.45 89.81 L 950.68 88.32 L 948.70 87.90 L 946.60 87.46 L 945.88 86.02 L 944.84 86.71 Z",
// Reconstructed to fit coordinate space of neighbors (300-600 range)
pathD: "M 518.9 149.93 L 530.8 149.97 L 530.8 151.75 L 555.51 151.82 L 555.84 262 L 557.95 263.08 L 592.64 253.98 L 615.82 248.47 L 602.99 304.68 L 591.97 306.76 L 568.2 310.97 L 568.99 315.19 L 571.37 327.43 L 559.29 329.71 L 561.3 341.33 L 549.33 343.58 L 551.54 355.96 L 553.74 367.76 L 554.67 372.95 L 546.7 374.41 L 538.28 375.91 L 535.37 380.94 L 531.18 378.51 L 519.24 383.61 L 510 380 L 500 370 L 490 350 L 479.46 328.78 L 515.35 321.65 L 523.04 308.42 L 520.67 296.35 L 515.28 269.36 L 505.01 271.4 L 505.56 250.93 L 518.17 247.84 L 518.9 149.93 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
@@ -143,10 +143,10 @@ export const maineCounties: NewEnglandState[] = [
name: 'Waldo County',
slug: 'waldo',
image: '/images/counties/maine/waldo.png',
pathD: "M 938.86 69.64 L 939.42 70.76 L 939.42 71.75 L 939.60 72.89 L 939.79 73.42 L 940.38 73.73 L 940.62 73.53 L 940.81 72.87 L 940.72 72.51 L 940.55 72.11 L 940.28 71.85 L 940.14 71.86 L 940.04 71.72 L 939.96 71.23 L 940.17 70.49 L 939.89 69.75 L 939.77 69.60 L 939.47 68.16 L 939.25 67.78 L 938.78 67.31 L 938.64 67.23 L 938.76 67.54 L 938.56 68.20 L 938.46 68.34 L 938.31 68.43 L 938.28 68.51 L 938.32 68.80 L 938.60 69.30 Z M 937.16 84.78 L 941.87 85.25 L 941.97 84.73 L 941.72 84.48 L 941.14 82.98 L 941.26 82.43 L 942.34 77.02 L 942.01 76.91 L 941.56 76.66 L 940.85 75.99 L 940.34 75.34 L 940.20 75.44 L 940.09 75.72 L 940.05 75.93 L 940.06 76.00 L 939.94 76.21 L 939.85 76.27 L 939.22 76.11 L 939.12 75.75 L 938.77 75.38 L 937.92 75.27 L 937.72 74.83 L 937.87 74.13 L 938.00 73.72 L 938.28 73.52 L 938.42 73.28 L 938.73 72.54 L 938.58 71.31 L 938.48 70.93 L 938.00 70.23 L 937.41 70.17 L 937.38 69.37 L 937.10 68.71 L 936.82 68.40 L 934.61 68.66 L 931.11 72.88 L 929.27 70.70 L 928.13 72.04 L 925.47 72.04 L 926.92 76.72 L 927.16 76.67 L 928.10 76.46 L 928.16 83.56 L 926.56 83.82 L 926.56 84.15 L 926.98 84.80 L 926.20 84.97 L 926.30 85.60 L 928.04 87.60 L 931.16 86.72 L 932.63 87.02 L 933.14 83.71 Z",
pathD: "M 456.54 382.38 L 464.06 389.44 L 463.78 414.03 L 453.23 429.31 L 451.14 438.32 L 470.9 452 L 507.23 427.06 L 513.5 415.0 L 518.5 400.0 L 519.24 383.61 L 476.13 378.48 L 463.55 375.43 L 456.54 382.38 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
},
{
id: 'york',
name: 'York County',
@@ -158,22 +158,8 @@ export const maineCounties: NewEnglandState[] = [
}
];
export const mapViewBox: string = "890 20 95 155";
// IMPORTANT: This viewBox is updated to cover the actual coordinate range
// of the correct data (roughly X: 300-700, Y: 0-600).
export const mapViewBox: string = "300 0 400 600";
/**
* SVG transform string to apply to the group of states to straighten the map.
* Format: "rotate(angle cx cy)"
* - angle: degrees to rotate (negative for counter-clockwise)
* - cx: x-coordinate of the center of rotation
* - cy: y-coordinate of the center of rotation
*
* You'll need to experiment with these values.
* The approximate center of your current viewBox (890 65 85 110) is:
* cx = 890 + (85 / 2) = 932.5
* cy = 65 + (110 / 2) = 120
*/
// export const mapTransform: string = "rotate(-2 932.5 120)"; // Example: Rotate -2 degrees around center
export const mapTransform: string | undefined = undefined; // Start with no transform
// Try uncommenting the line above and adjusting the -2, 932.5, and 120 values.
// For example, if it's tilted 5 degrees clockwise, try "rotate(-5 932.5 120)"
// If it's tilted 3 degrees counter-clockwise, try "rotate(3 932.5 120)"
export const mapTransform: string | undefined = undefined;

7
src/routes/(app)/+layout.svelte
View File

@@ -79,13 +79,11 @@
<button type="button" class="btn btn-ghost normal-case text-lg">
{$user.username}
</button>
<ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 text-black">
<li><a href="/vendor">Dashboard</a></li>
<li><button type="button" on:click={logout}>Logout</button></li>
</ul>
</div>
{:else}
<a href="/login" class="btn btn-ghost normal-case text-lg">Dealer Login</a>
{/if}
</div>
</header>
@@ -97,6 +95,9 @@
<footer class="footer footer-center p-4 bg-base-300 text-base-content">
<div>
<p>Copyright © {new Date().getFullYear()} - All right reserved</p>
{#if !$user}
<a href="/login" class="link link-primary">Dealer Login</a>
{/if}
</div>
</footer>
</div>

11
src/routes/(app)/+page.svelte
View File

@@ -1,6 +1,6 @@
<!-- src/routes/+page.svelte -->
<script lang="ts">
import { newEnglandStates, mapViewBox } from '$lib/states';
import { newEnglandStates, mapViewBox, user } from '$lib/states';
import { goto } from '$app/navigation';
import { browser } from '$app/environment'; // To ensure SVG interactions only run client-side
import { onMount } from 'svelte';
@@ -65,7 +65,8 @@
<div class="text-center mb-8">
<p class="text-lg">Click your state to find prices.</p>
<p class="text-lg mb-4">Welcome to TradeWar, your go-to source for fuel prices across New England. Compare prices by state and county to find the best deals.</p>
<p class="text-sm">Click your state to find prices.</p>
</div>
<div class="flex justify-center items-center">
@@ -115,3 +116,9 @@
{/each}
</ul>
</div>
{#if !$user}
<div class="mt-8 text-center">
<a href="/login" class="btn btn-primary">Dealer Login</a>
</div>
{/if}

60
src/routes/(app)/login/+page.svelte
View File

@@ -53,27 +53,35 @@
}
</script>
<div class="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Sign in to your account</h2>
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome back</h2>
<p class="text-gray-600">Sign in to your account</p>
</div>
{#if errorMessage}
<div class="rounded-md bg-red-50 p-4">
<div class="flex">
<div class="ml-3">
<div class="mt-6 bg-red-50 border border-red-200 rounded-lg p-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
<p class="text-sm font-medium text-red-800">{errorMessage}</p>
</div>
</div>
</div>
{/if}
<form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
<input type="hidden" name="remember" value="true" />
<div class="-space-y-px rounded-md shadow-sm">
<div class="space-y-4">
<div>
<label for="username" class="sr-only">Username</label>
<label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
<input
id="username"
name="username"
@@ -81,12 +89,20 @@
autocomplete="username"
required
bind:value={username}
class="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Username"
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
placeholder="Enter your username"
/>
</div>
</div>
<div>
<label for="password" class="sr-only">Password</label>
<label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
</svg>
</div>
<input
id="password"
name="password"
@@ -94,20 +110,21 @@
autocomplete="current-password"
required
bind:value={password}
class="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Password"
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
placeholder="Enter your password"
/>
</div>
</div>
</div>
<div>
<button
type="submit"
disabled={isLoading}
class="group relative flex w-full justify-center rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-orange-oil focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-oil transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
>
{#if isLoading}
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -118,10 +135,13 @@
</button>
</div>
</form>
<div class="mt-4 text-center">
<div class="mt-6 text-center">
<p class="text-sm text-gray-600">
Not registered yet? <a href="/register" class="font-medium text-indigo-600 hover:text-indigo-500">Register here</a>
Don't have an account?
<a href="/register" class="font-medium text-blue-600 hover:text-blue-500 transition-colors duration-200">Create one here</a>
</p>
</div>
</div>
</div>
</div>

94
src/routes/(app)/register/+page.svelte
View File

@@ -55,27 +55,36 @@
}
</script>
<div class="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8">
<div>
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Create your account</h2>
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-blue-50 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-2">Join us today</h2>
<p class="text-gray-600">Create your account</p>
</div>
{#if errorMessage}
<div class="rounded-md bg-red-50 p-4">
<div class="flex">
<div class="ml-3">
<div class="mt-6 bg-red-50 border border-red-200 rounded-lg p-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
<p class="text-sm font-medium text-red-800">{errorMessage}</p>
</div>
</div>
</div>
{/if}
<form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
<input type="hidden" name="remember" value="true" />
<div class="-space-y-px rounded-md shadow-sm">
<div class="space-y-4">
<div>
<label for="email-address" class="sr-only">Email address</label>
<label for="email-address" class="block text-sm font-medium text-gray-700 mb-2">Email address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
</div>
<input
id="email-address"
name="email"
@@ -83,12 +92,20 @@
autocomplete="email"
required
bind:value={email}
class="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Email address"
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
placeholder="Enter your email"
/>
</div>
</div>
<div>
<label for="username" class="sr-only">Username</label>
<label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
<input
id="username"
name="username"
@@ -96,12 +113,20 @@
autocomplete="username"
required
bind:value={username}
class="relative block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Username"
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
placeholder="Choose a username"
/>
</div>
</div>
<div>
<label for="password" class="sr-only">Password</label>
<label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
</svg>
</div>
<input
id="password"
name="password"
@@ -109,12 +134,20 @@
autocomplete="new-password"
required
bind:value={password}
class="relative block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Password"
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
placeholder="Create a password"
/>
</div>
</div>
<div>
<label for="confirm-password" class="sr-only">Confirm Password</label>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-2">Confirm Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
</svg>
</div>
<input
id="confirm-password"
name="confirm-password"
@@ -122,29 +155,38 @@
autocomplete="new-password"
required
bind:value={confirmPassword}
class="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Confirm Password"
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
placeholder="Confirm your password"
/>
</div>
</div>
</div>
<div>
<button
type="submit"
disabled={isLoading}
class="group relative flex w-full justify-center rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-orange-oil focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-oil transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
>
{#if isLoading}
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Registering...
Creating account...
{:else}
Register
Create account
{/if}
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600">
Already have an account?
<a href="/login" class="font-medium text-green-600 hover:text-green-500 transition-colors duration-200">Sign in here</a>
</p>
</div>
</div>
</div>
</div>