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;
}

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

@@ -1,179 +1,165 @@
// src/lib/states/maine.ts
export interface NewEnglandState {
id: string;
name: string;
slug: string;
image: string;
pathD: string;
fill: string;
hoverFill: string;
id: string;
name: string;
slug: string;
image: string;
pathD: string;
fill: string;
hoverFill: string;
}
export const maineCounties: NewEnglandState[] = [
{
id: 'androscoggin',
name: 'Androscoggin County',
slug: 'androscoggin',
image: '/images/counties/maine/androscoggin.png',
pathD: "M 360.15 470.74 368.6 454.57 374.11 446.95 374.95 447.26 380.69 426.63 379.59 420.66 380.39 419.48 379.81 416.23 383.21 413.78 386.8 411.23 393.67 409.99 396.44 423.83 398.94 436.35 398.8 447.56 406.64 450.97 405.06 452.56 403.43 457.64 405.52 458.44 401.09 476.21 401.55 476.59 401.59 476.92 402.56 477.84 402.77 478.24 402.77 478.24 398.32 484.77 384.13 478.45 375.9 469.98 371.26 476.81 360.15 470.74 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'aroostook',
name: 'Aroostook County',
slug: 'aroostook',
image: '/images/counties/maine/aroostook.png',
pathD: "M 518.9 149.93 518.71 125.39 432.7 125.18 403.84 125.26 406.32 108.31 423.39 83.21 447.49 48.17 480.18 1 487.64 2.53 496.33 4.87 497.55 5.67 498.49 8.32 498.66 9 497.74 9.71 497.65 9.81 497.88 11.54 497.43 11.74 497.2 11.7 496.49 12.96 496.82 29.66 497.79 31.28 498.44 31.86 503.36 34.77 507.19 36.75 508.67 37.93 511.1 40.65 515.65 38.55 528.1 32.06 541.75 25.38 551.84 23.89 562.67 15.7 565.33 15.07 570.07 15.03 574.27 15.9 575.82 16.71 582.55 21.56 601.47 37.69 601.79 38.17 602.07 40.08 603.36 42.57 607.82 49.05 611.87 52.75 614.79 54.32 617.25 56.19 617.35 56.94 617.36 98.5 617.37 99.52 618.06 166.05 618.15 212.42 619.34 218.06 619.79 227.95 619.81 229.28 618.22 229.84 616.16 231.58 615.72 232.79 614.64 246.62 615.82 248.47 592.64 253.98 557.95 263.08 557.62 263.14 555.83 262.38 555.84 262 555.51 151.82 530.8 151.75 530.8 149.97 518.9 149.93 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'cumberland',
name: 'Cumberland County',
slug: 'cumberland',
image: '/images/counties/maine/cumberland.png',
pathD: "M 394.6 508.34 395.24 508.28 396.74 507.2 396.96 507.74 396.46 509.2 395.74 510.2 395.57 510.74 395.63 511.82 394.18 513.67 393.68 513.67 392.84 512.36 392.78 511.13 393.9 509.12 394.6 508.34 Z M 389.67 519.6 389.68 519.63 387.85 522.31 386.36 523.54 386.24 523.54 385.87 522.46 386.91 519.67 388.07 518.24 388.39 518.12 389.67 519.6 Z M 388.24 517.07 388.12 517.59 387.63 518.33 386.22 519.72 385.89 519.84 385.67 519.67 385.59 519.25 386 517.91 386.74 516.69 387.26 516.26 387.78 516.22 388.24 517.07 Z M 390.38 515.78 391.06 515.47 392.08 514.56 393.08 514.69 391.27 517.3 389.96 518.06 389.77 518.02 389.45 516.92 389.66 516.42 390.38 515.78 Z M 397.67 514.79 397.09 515.86 396.52 515.39 394.96 517.02 394.74 516.98 394.75 516.58 394.96 516.2 396.42 513.99 396.89 513.55 397.14 513.38 397.24 513.52 396.75 514.65 397.26 515.02 397.67 514.79 Z M 360.15 470.74 371.26 476.81 375.9 469.98 384.13 478.45 398.32 484.77 402.77 478.24 408.32 486.26 419.71 482.35 416.81 504.58 415.3 505.2 414.11 504.84 413.02 504.17 410.96 506.05 410.51 505.67 410.05 505.81 407.71 508.05 407.08 509.06 406.57 511.01 406.77 511.22 406.75 511.5 405.89 512.44 405.38 512.52 405.55 511.13 405.94 510.36 406.16 509.43 405.88 508.89 402.09 509.74 402.15 508.82 402.76 506.96 403.59 505.58 405.55 503.18 406.21 501.72 406.1 500.87 405.77 499.94 404.99 500.09 403.54 498.55 403.54 497.7 403.82 497 405.38 495.69 405.77 495.15 405.77 494.53 405.1 493.68 404.21 493.76 403.86 494.09 402.98 494.92 400.92 497.78 400.98 498.7 399.86 499.78 399.69 498.94 398.3 498.94 395.79 500.33 392.39 502.64 391.33 504.03 391.33 504.88 389.22 506.73 389.05 506.19 389.55 505.03 389.27 504.57 387.88 505.27 387.43 506.04 387.15 507.74 387.49 508.74 387.43 509.2 385.2 512.13 385.09 512.67 385.43 513.75 385.32 514.14 384.26 514.52 383.87 514.14 381.97 516.99 381.75 517.84 381.86 518.08 382.4 518.48 382.88 518.8 383.15 519.27 383.09 519.44 382.92 519.63 383.01 520.18 384.73 522.83 385.85 524.58 385.29 528.42 385.55 529.25 386.82 529.77 387.22 532.59 386.34 533.58 385.32 533.68 385.03 532.98 383.87 533.12 382.69 534.34 381.01 534.1 379.99 532.92 377.44 534.51 376.62 535.33 373.37 535.84 372.32 536.45 372.26 536.51 359.01 527.09 362.29 522.39 353.47 512.69 342.99 513.33 343.62 503.19 331.2 499.67 336.28 484.53 334.59 482.19 337.65 480.08 327.48 464.76 346.36 452.25 349.9 458.71 349.11 470.75 360.15 470.74 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'franklin',
name: 'Franklin County',
slug: 'franklin',
image: '/images/counties/maine/franklin.png',
pathD: "M 412.69 393.41 411.39 403.21 403.12 407.1 401.99 410.26 393.67 409.99 386.8 411.23 383.21 413.78 379.19 407.6 379.21 398.94 353.47 393.43 357.23 391.21 347.25 368.56 332.51 377.09 326.55 305.74 328.77 296.8 328.84 289.69 327.27 287.93 327.12 286.67 329.71 283.34 331.34 282.47 333.97 282.93 334.91 283.84 334.94 285.09 336.26 286.8 337.95 287.99 342.95 289.72 343.72 289.82 345.37 288.94 346.15 285.76 345.29 282.92 343.89 280.76 342.6 280.3 341.43 279.55 337.57 274.87 336.91 272.05 337.06 271.03 339.05 268.61 340.42 266.27 340.25 264.36 343.02 261.23 352.05 251.9 353.37 250.98 366.04 321.49 376.55 318.89 377.96 326.11 390.81 323.6 395.49 348.1 391.79 355.01 393.62 361.13 402.86 359.27 406.41 384.46 412.69 393.41 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'androscoggin',
name: 'Androscoggin County',
slug: 'androscoggin',
image: '/images/counties/maine/androscoggin.png',
pathD: "M 360.15 470.74 368.6 454.57 374.11 446.95 374.95 447.26 380.69 426.63 379.59 420.66 380.39 419.48 379.81 416.23 383.21 413.78 386.8 411.23 393.67 409.99 396.44 423.83 398.94 436.35 398.8 447.56 406.64 450.97 405.06 452.56 403.43 457.64 405.52 458.44 401.09 476.21 401.55 476.59 401.59 476.92 402.56 477.84 402.77 478.24 402.77 478.24 398.32 484.77 384.13 478.45 375.9 469.98 371.26 476.81 360.15 470.74 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'aroostook',
name: 'Aroostook County',
slug: 'aroostook',
image: '/images/counties/maine/aroostook.png',
pathD: "M 518.9 149.93 518.71 125.39 432.7 125.18 403.84 125.26 406.32 108.31 423.39 83.21 447.49 48.17 480.18 1 487.64 2.53 496.33 4.87 497.55 5.67 498.49 8.32 498.66 9 497.74 9.71 497.65 9.81 497.88 11.54 497.43 11.74 497.2 11.7 496.49 12.96 496.82 29.66 497.79 31.28 498.44 31.86 503.36 34.77 507.19 36.75 508.67 37.93 511.1 40.65 515.65 38.55 528.1 32.06 541.75 25.38 551.84 23.89 562.67 15.7 565.33 15.07 570.07 15.03 574.27 15.9 575.82 16.71 582.55 21.56 601.47 37.69 601.79 38.17 602.07 40.08 603.36 42.57 607.82 49.05 611.87 52.75 614.79 54.32 617.25 56.19 617.35 56.94 617.36 98.5 617.37 99.52 618.06 166.05 618.15 212.42 619.34 218.06 619.79 227.95 619.81 229.28 618.22 229.84 616.16 231.58 615.72 232.79 614.64 246.62 615.82 248.47 592.64 253.98 557.95 263.08 557.62 263.14 555.83 262.38 555.84 262 555.51 151.82 530.8 151.75 530.8 149.97 518.9 149.93 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'cumberland',
name: 'Cumberland County',
slug: 'cumberland',
image: '/images/counties/maine/cumberland.png',
pathD: "M 394.6 508.34 395.24 508.28 396.74 507.2 396.96 507.74 396.46 509.2 395.74 510.2 395.57 510.74 395.63 511.82 394.18 513.67 393.68 513.67 392.84 512.36 392.78 511.13 393.9 509.12 394.6 508.34 Z M 389.67 519.6 389.68 519.63 387.85 522.31 386.36 523.54 386.24 523.54 385.87 522.46 386.91 519.67 388.07 518.24 388.39 518.12 389.67 519.6 Z M 388.24 517.07 388.12 517.59 387.63 518.33 386.22 519.72 385.89 519.84 385.67 519.67 385.59 519.25 386 517.91 386.74 516.69 387.26 516.26 387.78 516.22 388.24 517.07 Z M 390.38 515.78 391.06 515.47 392.08 514.56 393.08 514.69 391.27 517.3 389.96 518.06 389.77 518.02 389.45 516.92 389.66 516.42 390.38 515.78 Z M 397.67 514.79 397.09 515.86 396.52 515.39 394.96 517.02 394.74 516.98 394.75 516.58 394.96 516.2 396.42 513.99 396.89 513.55 397.14 513.38 397.24 513.52 396.75 514.65 397.26 515.02 397.67 514.79 Z M 360.15 470.74 371.26 476.81 375.9 469.98 384.13 478.45 398.32 484.77 402.77 478.24 408.32 486.26 419.71 482.35 416.81 504.58 415.3 505.2 414.11 504.84 413.02 504.17 410.96 506.05 410.51 505.67 410.05 505.81 407.71 508.05 407.08 509.06 406.57 511.01 406.77 511.22 406.75 511.5 405.89 512.44 405.38 512.52 405.55 511.13 405.94 510.36 406.16 509.43 405.88 508.89 402.09 509.74 402.15 508.82 402.76 506.96 403.59 505.58 405.55 503.18 406.21 501.72 406.1 500.87 405.77 499.94 404.99 500.09 403.54 498.55 403.54 497.7 403.82 497 405.38 495.69 405.77 495.15 405.77 494.53 405.1 493.68 404.21 493.76 403.86 494.09 402.98 494.92 400.92 497.78 400.98 498.7 399.86 499.78 399.69 498.94 398.3 498.94 395.79 500.33 392.39 502.64 391.33 504.03 391.33 504.88 389.22 506.73 389.05 506.19 389.55 505.03 389.27 504.57 387.88 505.27 387.43 506.04 387.15 507.74 387.49 508.74 387.43 509.2 385.2 512.13 385.09 512.67 385.43 513.75 385.32 514.14 384.26 514.52 383.87 514.14 381.97 516.99 381.75 517.84 381.86 518.08 382.4 518.48 382.88 518.8 383.15 519.27 383.09 519.44 382.92 519.63 383.01 520.18 384.73 522.83 385.85 524.58 385.29 528.42 385.55 529.25 386.82 529.77 387.22 532.59 386.34 533.58 385.32 533.68 385.03 532.98 383.87 533.12 382.69 534.34 381.01 534.1 379.99 532.92 377.44 534.51 376.62 535.33 373.37 535.84 372.32 536.45 372.26 536.51 359.01 527.09 362.29 522.39 353.47 512.69 342.99 513.33 343.62 503.19 331.2 499.67 336.28 484.53 334.59 482.19 337.65 480.08 327.48 464.76 346.36 452.25 349.9 458.71 349.11 470.75 360.15 470.74 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'franklin',
name: 'Franklin County',
slug: 'franklin',
image: '/images/counties/maine/franklin.png',
pathD: "M 412.69 393.41 411.39 403.21 403.12 407.1 401.99 410.26 393.67 409.99 386.8 411.23 383.21 413.78 379.19 407.6 379.21 398.94 353.47 393.43 357.23 391.21 347.25 368.56 332.51 377.09 326.55 305.74 328.77 296.8 328.84 289.69 327.27 287.93 327.12 286.67 329.71 283.34 331.34 282.47 333.97 282.93 334.91 283.84 334.94 285.09 336.26 286.8 337.95 287.99 342.95 289.72 343.72 289.82 345.37 288.94 346.15 285.76 345.29 282.92 343.89 280.76 342.6 280.3 341.43 279.55 337.57 274.87 336.91 272.05 337.06 271.03 339.05 268.61 340.42 266.27 340.25 264.36 343.02 261.23 352.05 251.9 353.37 250.98 366.04 321.49 376.55 318.89 377.96 326.11 390.81 323.6 395.49 348.1 391.79 355.01 393.62 361.13 402.86 359.27 406.41 384.46 412.69 393.41 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'hancock',
name: 'Hancock County',
slug: 'hancock',
image: '/images/counties/maine/hancock.png',
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'
},
{
id: 'kennebec',
name: 'Kennebec County',
slug: 'kennebec',
image: '/images/counties/maine/kennebec.png',
pathD: "M 456.54 382.38 456.17 384.57 459.29 385.14 457.61 387.4 457.61 388.55 464.06 389.44 463.78 414.03 460.01 413.32 459.05 413.13 453.23 429.31 451.81 437.62 451.14 438.32 450.55 438.75 450.51 439.4 449.81 440.02 449.31 440.25 439.48 437.76 438.02 444.71 438.84 458.32 438.86 458.73 437.94 458.51 429.16 456.47 428.64 454.62 419.91 452.67 415.81 460.69 405.52 458.44 403.43 457.64 405.06 452.56 406.64 450.97 398.8 447.56 398.94 436.35 396.44 423.83 393.67 409.99 401.99 410.26 403.12 407.1 411.39 403.21 412.69 393.41 425.85 397.91 427.43 393.76 430.49 394.52 430.7 395.1 443.73 397.92 446.28 391.24 441.56 385.2 441.13 381.6 456.54 382.38 Z",
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'
},
{
id: 'kennebec',
name: 'Kennebec County',
slug: 'kennebec',
image: '/images/counties/maine/kennebec.png',
pathD: "M 456.54 382.38 456.17 384.57 459.29 385.14 457.61 387.4 457.61 388.55 464.06 389.44 463.78 414.03 460.01 413.32 459.05 413.13 453.23 429.31 451.81 437.62 451.14 438.32 450.55 438.75 450.51 439.4 449.81 440.02 449.31 440.25 439.48 437.76 438.02 444.71 438.84 458.32 438.86 458.73 437.94 458.51 429.16 456.47 428.64 454.62 419.91 452.67 415.81 460.69 405.52 458.44 403.43 457.64 405.06 452.56 406.64 450.97 398.8 447.56 398.94 436.35 396.44 423.83 393.67 409.99 401.99 410.26 403.12 407.1 411.39 403.21 412.69 393.41 425.85 397.91 427.43 393.76 430.49 394.52 430.7 395.1 443.73 397.92 446.28 391.24 441.56 385.2 441.13 381.6 456.54 382.38 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'knox',
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",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'lincoln',
name: 'Lincoln County',
slug: 'lincoln',
image: '/images/counties/maine/lincoln.png',
pathD: "M 472.2 505.01 472.31 504.84 472.67 504.91 472.92 505.23 472.88 505.7 471.59 507.27 470.8 507.38 470.71 506.97 470.94 506.07 471.66 505.15 472.2 505.01 Z M 460.73 484.46 461.17 485.25 461.28 485.94 461.17 486.23 459.76 487.02 459.49 486.99 459.39 486.12 460.17 481.74 460.55 481.86 461.38 483.21 460.73 484.46 Z M 451.14 438.32 470.9 452 474.69 472.01 470.87 479 469.96 478.42 467.99 478.36 466.58 479.69 465.74 479.71 464.54 479.75 463.55 478.75 461.85 478.03 460.65 480.6 460.37 479.72 459.91 479.41 459.42 479.76 458.52 482.72 457.7 487.85 455.42 490.9 455.15 492.38 453.53 496.55 452.42 497.39 452.29 496.61 452.57 495.61 451.9 492.46 451.48 491.52 449.64 490.72 449.11 490.94 448.97 491.21 449 491.92 449.54 493.43 448.81 496.06 448.28 496.15 447.31 495.65 446.89 495.71 446.63 495.98 446.33 498.45 445.37 499.11 443.88 499.75 443.71 499.57 443.84 498.12 444.42 498.16 445.01 497.45 445.32 494.74 444.79 493.74 443.84 493.86 443.02 495.57 443.03 496.58 442.84 497.35 442.26 497.99 441.39 496.64 441.44 495.79 440.94 495.46 439.52 496.73 439.2 499.26 439.42 501.04 439.18 502.73 438.07 502.73 436.11 499.38 436.1 498.82 435.44 498.32 434.98 498.22 434.93 498.24 434.99 497.21 435.71 495.74 435.48 493.96 430.55 489.18 434.71 474.12 423.87 471.55 429.16 456.47 437.94 458.51 438.86 458.73 438.84 458.32 438.02 444.71 439.48 437.76 449.31 440.25 449.81 440.02 450.51 439.4 450.55 438.75 451.14 438.32 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'oxford',
name: 'Oxford County',
slug: 'oxford',
image: '/images/counties/maine/oxford.png',
pathD: "M 331.2 499.67 311.5 502.58 311.5 502.54 311.21 490.11 311.12 486.4 310.32 462.65 310.32 462.61 309.61 440.59 309.62 440.54 309.47 437.07 309.16 429.58 307.67 393.48 306.86 373.95 304.71 338.32 303.22 310.62 302.39 299.6 307.53 298.6 309.09 298.04 309.59 297.73 310.22 296.51 309.96 296.03 311.38 295.38 315.15 295.62 318.3 298.69 318.85 300.75 318.7 301.3 319.25 304.48 320.31 308.19 321.44 309.16 324.12 309.94 325.47 309.22 325.79 308.76 326.55 305.74 332.51 377.09 347.25 368.56 357.23 391.21 353.47 393.43 379.21 398.94 379.19 407.6 383.21 413.78 379.81 416.23 380.39 419.48 379.59 420.66 380.69 426.63 374.95 447.26 374.11 446.95 368.6 454.57 360.15 470.74 349.11 470.75 349.9 458.71 346.36 452.25 327.48 464.76 337.65 480.08 334.59 482.19 336.28 484.53 331.2 499.67 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'penobscot',
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",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'piscataquis',
name: 'Piscataquis County',
slug: 'piscataquis',
image: '/images/counties/maine/piscataquis.png',
pathD: "M 467.64 331.04 453.85 333.7 442.28 339.5 427.08 267.25 435.5 253.28 422.02 240.46 426.61 234.09 431.61 238.1 434.17 224.66 439.81 223.4 436.29 206.84 431.99 207.77 431.63 150.17 432.7 125.18 518.71 125.39 518.9 149.93 518.17 247.84 505.56 250.93 505.01 271.4 515.28 269.36 520.67 296.35 523.04 308.42 513.02 310.51 515.35 321.65 479.46 328.78 467.64 331.04 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'sagadahoc',
name: 'Sagadahoc County',
slug: 'sagadahoc',
image: '/images/counties/maine/sagadahoc.png',
pathD: "M 405.52 458.44 415.81 460.69 419.91 452.67 428.64 454.62 429.16 456.47 423.87 471.55 434.71 474.12 430.55 489.18 435.48 493.96 435.71 495.74 434.99 497.21 434.93 498.24 434.16 498.49 433.3 500.18 433.02 501.4 433.09 502.55 432.84 503.3 429.67 507.37 428.83 507.23 427.06 507.45 426.84 507.66 426.86 508.01 427.22 508.55 427.23 508.87 421.79 511.98 421.46 514.09 420.26 514.3 419.9 514.15 419.62 511.61 419.85 510.45 419.53 509.41 418.6 509.13 419.22 506.97 418.5 504.76 417.13 504.45 416.81 504.58 419.71 482.35 408.32 486.26 402.77 478.24 402.56 477.84 401.59 476.92 401.55 476.59 401.09 476.21 405.52 458.44 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'somerset',
name: 'Somerset County',
slug: 'somerset',
image: '/images/counties/maine/somerset.png',
pathD: "M 412.69 393.41 406.41 384.46 402.86 359.27 393.62 361.13 391.79 355.01 395.49 348.1 390.81 323.6 377.96 326.11 376.55 318.89 366.04 321.49 353.37 250.98 361.13 245.54 362.88 245.15 368.07 237.97 367.07 235.67 366.12 232.81 368.15 231.69 367.98 231.5 368.07 231.02 368.96 229.45 370.96 227.26 373.31 224.9 376.62 223.98 378.88 222.18 380.94 220.01 381.79 217.93 383.08 212.33 381.93 210.81 380.67 209.72 376.21 208.5 376.09 202.33 376.35 195.7 378.34 191.6 378.84 190.99 381.91 189.96 383.3 184.28 379.47 180.47 378.24 178.97 378.06 178.18 386.22 158.86 388.07 156.27 389.34 155.1 393.29 153.65 400.65 147.04 403.84 125.26 432.7 125.18 431.63 150.17 431.99 207.77 436.29 206.84 439.81 223.4 434.17 224.66 431.61 238.1 426.61 234.09 422.02 240.46 435.5 253.28 427.08 267.25 442.28 339.5 453.85 333.7 467.64 331.04 472.43 355.03 476.13 378.48 463.55 375.43 456.54 382.38 441.13 381.6 441.56 385.2 446.28 391.24 443.73 397.92 430.7 395.1 430.49 394.52 427.43 393.76 425.85 397.91 412.69 393.41 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'washington',
name: 'Washington County',
slug: 'washington',
image: '/images/counties/maine/washington.png',
pathD: "M 633.58 405.63 633.99 405.33 636.64 406.11 637.18 406.48 636.49 408.17 636.36 409.06 637.35 409.88 639.04 412.02 638.41 414.24 638.16 414.52 637.93 414.75 636.58 415.01 636.16 413.83 635 408 634.78 407.8 634.04 407.8 633.63 407.48 633.58 405.63 Z M 615.82 248.47 616.03 248.79 620.72 250.17 631.09 257.58 639.16 260.13 643.25 261.09 645.08 261.21 645.89 260.6 646.13 260.17 645.88 259.58 646 259.27 647.25 258.87 649.29 258.8 649.84 259.05 652.15 262.29 652.32 263.24 652.59 266.19 652.13 272.69 649.93 271.64 648.52 271.93 644.66 274.65 647.57 283.26 648.82 284.04 651.72 287.67 652.47 289.48 651.8 294.3 648.84 300.15 648.29 300.69 646.39 301.48 646.05 302.86 648.51 307.91 654.09 318.55 658.95 323.4 659.84 323.9 660.33 323.98 663.62 321.37 663.9 319.14 665.04 315.58 665.71 314.98 666.91 315.1 677.41 318.93 680.5 323.09 682.08 325.78 684.14 331.68 682.7 332.08 681.57 333.31 683.29 334.89 684.98 336.97 685.66 338.38 685.87 339.85 686.3 340.84 687.6 342.77 689.16 348.35 689.62 349.1 692.62 351.94 693.69 352.08 694.31 352.79 694.39 354.04 694.17 354.87 693.85 354.96 693.74 356.84 694.64 359.5 694.91 360.29 693.49 361.34 693.15 361.95 694.13 365.19 695.21 365.88 696.03 365.4 697.4 365.26 697.61 365.62 697.55 366.01 696.54 366.99 695.69 367.2 695.09 366.85 694.76 366.98 693.84 368.13 693.29 369.17 690.91 371.82 690.32 372.25 688.68 372.67 687.55 371.82 686.87 372.07 686.77 373.59 685.8 375.78 684.84 376.06 683.98 375.69 683.36 375.87 682.88 379.08 680.51 382.05 679.51 382.26 678.67 383.57 677.99 385.54 678.05 385.72 676.58 386.52 675.44 386.31 674.98 386.45 674.46 387.41 674.52 388.45 674.71 388.75 672.46 389.6 670.43 389.87 669.19 389.27 668.8 389.38 666.62 391.33 666.34 392.46 666.72 393.41 666.14 393.96 664.77 394.97 663.91 395.23 662.72 395.11 661.95 393.61 661.99 393.19 663.12 393.09 664.75 390.26 664.86 388.36 664.29 387.56 663.22 386.9 663.39 382.6 664.13 381.87 664.22 380.66 663.33 380.43 659.58 381.5 658.79 381.56 656.81 383.87 656.39 385.53 656.59 386.07 657.07 386.41 657.71 387.82 658.11 390.59 657.62 391.55 656.73 392.21 655.87 391.24 655.66 391.3 654.98 393.13 654.68 394.51 654.06 395.64 653.46 395.28 652.78 394.4 652.62 393.81 651.87 393.64 650.41 394.09 650.05 394.43 649.95 394.82 649.06 395.13 645.75 392.46 645.63 390.99 644.47 389.92 642.85 390.43 642.73 391.3 642.08 391.92 641.78 391.98 641.18 391.33 640.88 391.3 640.14 391.92 640.02 392.23 637.85 400.15 638.35 400.67 639.07 402.99 638.51 404.11 630.83 404.88 630.39 404.82 630.03 403.47 629.67 403.24 627.26 403.3 626.26 403.75 625.65 404.54 626.01 406.17 625.57 407.63 624.55 408.92 623.72 408.48 622.66 408.78 621.76 408.63 621.82 407.45 622.08 407.08 621.8 404.73 620.76 402.43 620.28 402.03 619.47 401.81 618.83 401.92 618.31 402.43 618.07 403.72 618.11 405.52 616.61 405.51 616.1 405.07 615.82 404.28 615.82 403.33 615.5 402.37 613.5 400.57 612.53 400.4 612.09 400.74 611.97 401.36 612.21 402.54 610.93 405.07 611.21 408.62 611.45 409.29 611.41 410.3 611.03 411.14 610.52 411.29 609.96 412.06 609.77 412.93 609.76 414.06 611.4 417.83 611.41 418.42 611.08 419.07 609.77 418.37 608.84 416.91 608 417.25 608 418.14 607.55 420.38 606.83 422.46 605.67 419.1 605.51 417.64 604.75 417.25 604.27 417.41 603.87 417.81 604.15 418.82 603.78 420.09 603.3 420.17 602.26 419.55 601.46 419.49 601.33 419.61 597.85 395.92 587.19 349.21 598.96 346.94 591.97 306.76 602.99 304.68 592.64 253.98 615.82 248.47 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'waldo',
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",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'york',
name: 'York County',
slug: 'york',
image: '/images/counties/maine/york.png',
pathD: "M 311.5 502.58 331.2 499.67 343.62 503.19 342.99 513.33 353.47 512.69 362.29 522.39 359.01 527.09 372.26 536.51 371.51 537.33 369.8 540.23 369.25 541.7 369.18 542.88 369.44 545.17 369.7 545.89 370.46 547.09 372.62 548.81 371.44 549.2 370.62 549.85 369.24 551.86 369.34 552.64 368.68 554 367.8 554.35 367.65 554.18 367.19 554.22 365.77 554.9 365.16 555.76 365.47 557.02 365.42 557.51 363.75 560.07 362 561.81 361.5 562.2 360.83 561.71 359.65 561.39 356.56 561.7 354.88 562.66 354.74 562.81 353.1 564.61 352.25 566.09 350.1 571.41 349.27 574.15 349.55 575.65 351 577.75 350.92 578.3 349.85 580.63 346.87 585.38 345.39 590.1 345.41 590.81 345.02 591.86 343.51 593.84 343.4 593.98 343.31 594.61 342.38 596.83 341.7 597.6 338.75 599 333.74 596.33 331.09 593.85 327.7 590.67 326.88 589.91 326.34 587.57 326.78 583.19 326.86 582.36 328.02 576.02 327.87 575.71 327.86 575.64 327.37 575.34 327.34 575.32 327.17 575.24 327.02 575.19 326.89 575.16 326.35 574.99 325.77 574 325.82 573.89 323.52 572.07 319.07 566.61 318.82 566.4 318.41 565.16 317.07 563.6 315 563.02 313.58 561.74 311.95 557.48 311.95 557.39 311.62 555.46 311.71 552.47 313.85 544.7 313.84 544.7 313.92 544.3 314.78 539.88 314.03 536.65 314.37 536.21 314.72 535.77 314.72 535.81 314.91 534.22 313.06 531.91 312.36 518.32 312.29 516.87 312.18 514.65 312.17 514.51 312.15 513.21 312.16 512.79 311.5 502.58 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
}
id: 'knox',
name: 'Knox County',
slug: 'knox',
image: '/images/counties/maine/knox.png',
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',
slug: 'lincoln',
image: '/images/counties/maine/lincoln.png',
pathD: "M 472.2 505.01 472.31 504.84 472.67 504.91 472.92 505.23 472.88 505.7 471.59 507.27 470.8 507.38 470.71 506.97 470.94 506.07 471.66 505.15 472.2 505.01 Z M 460.73 484.46 461.17 485.25 461.28 485.94 461.17 486.23 459.76 487.02 459.49 486.99 459.39 486.12 460.17 481.74 460.55 481.86 461.38 483.21 460.73 484.46 Z M 451.14 438.32 470.9 452 474.69 472.01 470.87 479 469.96 478.42 467.99 478.36 466.58 479.69 465.74 479.71 464.54 479.75 463.55 478.75 461.85 478.03 460.65 480.6 460.37 479.72 459.91 479.41 459.42 479.76 458.52 482.72 457.7 487.85 455.42 490.9 455.15 492.38 453.53 496.55 452.42 497.39 452.29 496.61 452.57 495.61 451.9 492.46 451.48 491.52 449.64 490.72 449.11 490.94 448.97 491.21 449 491.92 449.54 493.43 448.81 496.06 448.28 496.15 447.31 495.65 446.89 495.71 446.63 495.98 446.33 498.45 445.37 499.11 443.88 499.75 443.71 499.57 443.84 498.12 444.42 498.16 445.01 497.45 445.32 494.74 444.79 493.74 443.84 493.86 443.02 495.57 443.03 496.58 442.84 497.35 442.26 497.99 441.39 496.64 441.44 495.79 440.94 495.46 439.52 496.73 439.2 499.26 439.42 501.04 439.18 502.73 438.07 502.73 436.11 499.38 436.1 498.82 435.44 498.32 434.98 498.22 434.93 498.24 434.99 497.21 435.71 495.74 435.48 493.96 430.55 489.18 434.71 474.12 423.87 471.55 429.16 456.47 437.94 458.51 438.86 458.73 438.84 458.32 438.02 444.71 439.48 437.76 449.31 440.25 449.81 440.02 450.51 439.4 450.55 438.75 451.14 438.32 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'oxford',
name: 'Oxford County',
slug: 'oxford',
image: '/images/counties/maine/oxford.png',
pathD: "M 331.2 499.67 311.5 502.58 311.5 502.54 311.21 490.11 311.12 486.4 310.32 462.65 310.32 462.61 309.61 440.59 309.62 440.54 309.47 437.07 309.16 429.58 307.67 393.48 306.86 373.95 304.71 338.32 303.22 310.62 302.39 299.6 307.53 298.6 309.09 298.04 309.59 297.73 310.22 296.51 309.96 296.03 311.38 295.38 315.15 295.62 318.3 298.69 318.85 300.75 318.7 301.3 319.25 304.48 320.31 308.19 321.44 309.16 324.12 309.94 325.47 309.22 325.79 308.76 326.55 305.74 332.51 377.09 347.25 368.56 357.23 391.21 353.47 393.43 379.21 398.94 379.19 407.6 383.21 413.78 379.81 416.23 380.39 419.48 379.59 420.66 380.69 426.63 374.95 447.26 374.11 446.95 368.6 454.57 360.15 470.74 349.11 470.75 349.9 458.71 346.36 452.25 327.48 464.76 337.65 480.08 334.59 482.19 336.28 484.53 331.2 499.67 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'penobscot',
name: 'Penobscot County',
slug: 'penobscot',
image: '/images/counties/maine/penobscot.png',
// 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'
},
{
id: 'piscataquis',
name: 'Piscataquis County',
slug: 'piscataquis',
image: '/images/counties/maine/piscataquis.png',
pathD: "M 467.64 331.04 453.85 333.7 442.28 339.5 427.08 267.25 435.5 253.28 422.02 240.46 426.61 234.09 431.61 238.1 434.17 224.66 439.81 223.4 436.29 206.84 431.99 207.77 431.63 150.17 432.7 125.18 518.71 125.39 518.9 149.93 518.17 247.84 505.56 250.93 505.01 271.4 515.28 269.36 520.67 296.35 523.04 308.42 513.02 310.51 515.35 321.65 479.46 328.78 467.64 331.04 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'sagadahoc',
name: 'Sagadahoc County',
slug: 'sagadahoc',
image: '/images/counties/maine/sagadahoc.png',
pathD: "M 405.52 458.44 415.81 460.69 419.91 452.67 428.64 454.62 429.16 456.47 423.87 471.55 434.71 474.12 430.55 489.18 435.48 493.96 435.71 495.74 434.99 497.21 434.93 498.24 434.16 498.49 433.3 500.18 433.02 501.4 433.09 502.55 432.84 503.3 429.67 507.37 428.83 507.23 427.06 507.45 426.84 507.66 426.86 508.01 427.22 508.55 427.23 508.87 421.79 511.98 421.46 514.09 420.26 514.3 419.9 514.15 419.62 511.61 419.85 510.45 419.53 509.41 418.6 509.13 419.22 506.97 418.5 504.76 417.13 504.45 416.81 504.58 419.71 482.35 408.32 486.26 402.77 478.24 402.56 477.84 401.59 476.92 401.55 476.59 401.09 476.21 405.52 458.44 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'somerset',
name: 'Somerset County',
slug: 'somerset',
image: '/images/counties/maine/somerset.png',
pathD: "M 412.69 393.41 406.41 384.46 402.86 359.27 393.62 361.13 391.79 355.01 395.49 348.1 390.81 323.6 377.96 326.11 376.55 318.89 366.04 321.49 353.37 250.98 361.13 245.54 362.88 245.15 368.07 237.97 367.07 235.67 366.12 232.81 368.15 231.69 367.98 231.5 368.07 231.02 368.96 229.45 370.96 227.26 373.31 224.9 376.62 223.98 378.88 222.18 380.94 220.01 381.79 217.93 383.08 212.33 381.93 210.81 380.67 209.72 376.21 208.5 376.09 202.33 376.35 195.7 378.34 191.6 378.84 190.99 381.91 189.96 383.3 184.28 379.47 180.47 378.24 178.97 378.06 178.18 386.22 158.86 388.07 156.27 389.34 155.1 393.29 153.65 400.65 147.04 403.84 125.26 432.7 125.18 431.63 150.17 431.99 207.77 436.29 206.84 439.81 223.4 434.17 224.66 431.61 238.1 426.61 234.09 422.02 240.46 435.5 253.28 427.08 267.25 442.28 339.5 453.85 333.7 467.64 331.04 472.43 355.03 476.13 378.48 463.55 375.43 456.54 382.38 441.13 381.6 441.56 385.2 446.28 391.24 443.73 397.92 430.7 395.1 430.49 394.52 427.43 393.76 425.85 397.91 412.69 393.41 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'washington',
name: 'Washington County',
slug: 'washington',
image: '/images/counties/maine/washington.png',
pathD: "M 633.58 405.63 633.99 405.33 636.64 406.11 637.18 406.48 636.49 408.17 636.36 409.06 637.35 409.88 639.04 412.02 638.41 414.24 638.16 414.52 637.93 414.75 636.58 415.01 636.16 413.83 635 408 634.78 407.8 634.04 407.8 633.63 407.48 633.58 405.63 Z M 615.82 248.47 616.03 248.79 620.72 250.17 631.09 257.58 639.16 260.13 643.25 261.09 645.08 261.21 645.89 260.6 646.13 260.17 645.88 259.58 646 259.27 647.25 258.87 649.29 258.8 649.84 259.05 652.15 262.29 652.32 263.24 652.59 266.19 652.13 272.69 649.93 271.64 648.52 271.93 644.66 274.65 647.57 283.26 648.82 284.04 651.72 287.67 652.47 289.48 651.8 294.3 648.84 300.15 648.29 300.69 646.39 301.48 646.05 302.86 648.51 307.91 654.09 318.55 658.95 323.4 659.84 323.9 660.33 323.98 663.62 321.37 663.9 319.14 665.04 315.58 665.71 314.98 666.91 315.1 677.41 318.93 680.5 323.09 682.08 325.78 684.14 331.68 682.7 332.08 681.57 333.31 683.29 334.89 684.98 336.97 685.66 338.38 685.87 339.85 686.3 340.84 687.6 342.77 689.16 348.35 689.62 349.1 692.62 351.94 693.69 352.08 694.31 352.79 694.39 354.04 694.17 354.87 693.85 354.96 693.74 356.84 694.64 359.5 694.91 360.29 693.49 361.34 693.15 361.95 694.13 365.19 695.21 365.88 696.03 365.4 697.4 365.26 697.61 365.62 697.55 366.01 696.54 366.99 695.69 367.2 695.09 366.85 694.76 366.98 693.84 368.13 693.29 369.17 690.91 371.82 690.32 372.25 688.68 372.67 687.55 371.82 686.87 372.07 686.77 373.59 685.8 375.78 684.84 376.06 683.98 375.69 683.36 375.87 682.88 379.08 680.51 382.05 679.51 382.26 678.67 383.57 677.99 385.54 678.05 385.72 676.58 386.52 675.44 386.31 674.98 386.45 674.46 387.41 674.52 388.45 674.71 388.75 672.46 389.6 670.43 389.87 669.19 389.27 668.8 389.38 666.62 391.33 666.34 392.46 666.72 393.41 666.14 393.96 664.77 394.97 663.91 395.23 662.72 395.11 661.95 393.61 661.99 393.19 663.12 393.09 664.75 390.26 664.86 388.36 664.29 387.56 663.22 386.9 663.39 382.6 664.13 381.87 664.22 380.66 663.33 380.43 659.58 381.5 658.79 381.56 656.81 383.87 656.39 385.53 656.59 386.07 657.07 386.41 657.71 387.82 658.11 390.59 657.62 391.55 656.73 392.21 655.87 391.24 655.66 391.3 654.98 393.13 654.68 394.51 654.06 395.64 653.46 395.28 652.78 394.4 652.62 393.81 651.87 393.64 650.41 394.09 650.05 394.43 649.95 394.82 649.06 395.13 645.75 392.46 645.63 390.99 644.47 389.92 642.85 390.43 642.73 391.3 642.08 391.92 641.78 391.98 641.18 391.33 640.88 391.3 640.14 391.92 640.02 392.23 637.85 400.15 638.35 400.67 639.07 402.99 638.51 404.11 630.83 404.88 630.39 404.82 630.03 403.47 629.67 403.24 627.26 403.3 626.26 403.75 625.65 404.54 626.01 406.17 625.57 407.63 624.55 408.92 623.72 408.48 622.66 408.78 621.76 408.63 621.82 407.45 622.08 407.08 621.8 404.73 620.76 402.43 620.28 402.03 619.47 401.81 618.83 401.92 618.31 402.43 618.07 403.72 618.11 405.52 616.61 405.51 616.1 405.07 615.82 404.28 615.82 403.33 615.5 402.37 613.5 400.57 612.53 400.4 612.09 400.74 611.97 401.36 612.21 402.54 610.93 405.07 611.21 408.62 611.45 409.29 611.41 410.3 611.03 411.14 610.52 411.29 609.96 412.06 609.77 412.93 609.76 414.06 611.4 417.83 611.41 418.42 611.08 419.07 609.77 418.37 608.84 416.91 608 417.25 608 418.14 607.55 420.38 606.83 422.46 605.67 419.1 605.51 417.64 604.75 417.25 604.27 417.41 603.87 417.81 604.15 418.82 603.78 420.09 603.3 420.17 602.26 419.55 601.46 419.49 601.33 419.61 597.85 395.92 587.19 349.21 598.96 346.94 591.97 306.76 602.99 304.68 592.64 253.98 615.82 248.47 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
},
{
id: 'waldo',
name: 'Waldo County',
slug: 'waldo',
image: '/images/counties/maine/waldo.png',
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',
slug: 'york',
image: '/images/counties/maine/york.png',
pathD: "M 311.5 502.58 331.2 499.67 343.62 503.19 342.99 513.33 353.47 512.69 362.29 522.39 359.01 527.09 372.26 536.51 371.51 537.33 369.8 540.23 369.25 541.7 369.18 542.88 369.44 545.17 369.7 545.89 370.46 547.09 372.62 548.81 371.44 549.2 370.62 549.85 369.24 551.86 369.34 552.64 368.68 554 367.8 554.35 367.65 554.18 367.19 554.22 365.77 554.9 365.16 555.76 365.47 557.02 365.42 557.51 363.75 560.07 362 561.81 361.5 562.2 360.83 561.71 359.65 561.39 356.56 561.7 354.88 562.66 354.74 562.81 353.1 564.61 352.25 566.09 350.1 571.41 349.27 574.15 349.55 575.65 351 577.75 350.92 578.3 349.85 580.63 346.87 585.38 345.39 590.1 345.41 590.81 345.02 591.86 343.51 593.84 343.4 593.98 343.31 594.61 342.38 596.83 341.7 597.6 338.75 599 333.74 596.33 331.09 593.85 327.7 590.67 326.88 589.91 326.34 587.57 326.78 583.19 326.86 582.36 328.02 576.02 327.87 575.71 327.86 575.64 327.37 575.34 327.34 575.32 327.17 575.24 327.02 575.19 326.89 575.16 326.35 574.99 325.77 574 325.82 573.89 323.52 572.07 319.07 566.61 318.82 566.4 318.41 565.16 317.07 563.6 315 563.02 313.58 561.74 311.95 557.48 311.95 557.39 311.62 555.46 311.71 552.47 313.85 544.7 313.84 544.7 313.92 544.3 314.78 539.88 314.03 536.65 314.37 536.21 314.72 535.77 314.72 535.81 314.91 534.22 313.06 531.91 312.36 518.32 312.29 516.87 312.18 514.65 312.17 514.51 312.15 513.21 312.16 512.79 311.5 502.58 Z",
fill: 'fill-indigo-500',
hoverFill: 'fill-indigo-700'
}
];
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}

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

@@ -53,75 +53,95 @@
}
</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>
<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">
{#if errorMessage}
<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}
{/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>
<label for="username" class="sr-only">Username</label>
<input
id="username"
name="username"
type="text"
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"
/>
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input
id="password"
name="password"
type="password"
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"
/>
</div>
</div>
<form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
<div class="space-y-4">
<div>
<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"
type="text"
autocomplete="username"
required
bind:value={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>
<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"
>
{#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">
<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>
Signing in...
{:else}
Sign in
{/if}
</button>
<div>
<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"
type="password"
autocomplete="current-password"
required
bind:value={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 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-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>
Signing in...
{:else}
Sign in
{/if}
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600">
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>
</form>
<div class="mt-4 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>
</p>
</div>
</div>
</div>

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

@@ -55,96 +55,138 @@
}
</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>
<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">
{#if errorMessage}
<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}
{/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>
<label for="email-address" class="sr-only">Email address</label>
<input
id="email-address"
name="email"
type="email"
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"
/>
</div>
<div>
<label for="username" class="sr-only">Username</label>
<input
id="username"
name="username"
type="text"
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"
/>
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input
id="password"
name="password"
type="password"
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"
/>
</div>
<div>
<label for="confirm-password" class="sr-only">Confirm Password</label>
<input
id="confirm-password"
name="confirm-password"
type="password"
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"
/>
</div>
</div>
<form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
<div class="space-y-4">
<div>
<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"
type="email"
autocomplete="email"
required
bind:value={email}
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>
<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"
>
{#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">
<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...
{:else}
Register
{/if}
</button>
<div>
<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"
type="text"
autocomplete="username"
required
bind:value={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="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"
type="password"
autocomplete="new-password"
required
bind:value={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="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"
type="password"
autocomplete="new-password"
required
bind:value={confirmPassword}
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 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-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>
Creating account...
{:else}
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>
</form>
</div>
</div>
</div>