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

first commit

Browse Source
This commit is contained in:
Anekdotin
2024-03-21 16:33:43 -04:00
commit 6f78bd8ce4
34 changed files with 6393 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/routes/+layout.svelte Executable file
View File

@@ -0,0 +1,173 @@
<script>
import "../app.postcss";
import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public";
let oil_price = [];
let price_of_oil = 0;
let company = [];
let tel_number = "";
let company_name = "";
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/price/oil", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (oil_price = result));
if (oil_price["ok"] == true) {
price_of_oil = oil_price["price"];
}
});
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/company", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (company = result));
if (company["ok"] == true) {
company_name = company["name"];
tel_number = company["telephone"];
}
});
</script>
<div class="font-bold overflow-hidden">
<div class="grid grid-cols-12">
<div class="col-span-3"></div>
<div class="col-span-6 md:p-10 text-center">
<div class="flex justify-center">
<a
class="normal-case text-8xl text-primary text-white bg-blue-800 flex justify-center"
href="/"
>
Good
</a>
<a
class="normal-case text-8xl text-primary text-blue-800 flex justify-center"
href="/"
>
Oil
</a>
</div>
<a
class="normal-case text-3xl text-primary text-blue-800 bg-blue flex-shrink"
href="/">Oil thats good for your system</a
>
</div>
<div class=" col-span-12 md:col-span-3 p-10 text-3xl text-blue-800 invisible md:visible h-0 md:h-auto">
<div class="text-center pt-5">Todays Price</div>
<div class="text-center">{price_of_oil}</div>
</div>
</div>
</div>
<nav class="bg-white border-gray-200 dark:bg-gray-900 ">
<div class="max-w-screen-xl flex flex-wrap md:justify-center justify-between items-center mx-auto p-4">
<div class=" md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<!-- Dropdown menu -->
<div class=" z-50 hidden my-4 text-base list-none divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-dropdown">
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<a href="/delivery" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Oil Delivery</a>
</li>
<li>
<a href="/servicearea" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delivery Area </a>
</li>
<li>
<a href="/about" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">About Us</a>
</li>
<li>
<a href="/contact" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Contact</a>
</li>
</ul>
</div>
<button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-user" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
</div>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
<ul class="flex flex-col justify-center font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="/delivery" class="text-3xl block py-2 px-3 dark:text-white bg-blue-700
rounded md:bg-transparent md:hover:text-blue-700 md:p-0 " aria-current="page">Oil Delivery</a>
</li>
<li>
<a href="/servicearea" class="text-3xl block py-2 px-3 text-gray-900 rounded
hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700
dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
Delivery Area
</a>
</li>
<li>
<a href="/about" class="text-3xl block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent
md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700
dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
About Us
</a>
</li>
<li>
<a href="/contact" class="text-3xl block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700
md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700
dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="body">
<slot />
<div class="grid grid-cols-12 bg-blue-800 py-10">
<div class="col-span-12 md:col-span-4 text-center text-white text-bold text-6xl">
<div class="flex justify-center pt-5">
<div class="bg-blue-800 text-white px-1">Good</div>
<div class="bg-blue-800 text-white px-1">Oil</div>
</div>
</div>
<div class="col-span-12 md:col-span-4 text-center text-bold text-xl text-white">
<div class="">{tel_number}</div>
<div class="">Worcester Ma</div>
<div class="">Mon - Fri 8:00 am - 5:00 pm</div>
<div class="">Sat Closed | Sun Closed</div>
</div>
<div class="col-span-4 text-center"></div>
</div>
<div class="h-auto bg-blue-800 text-white">
<div class=" mx-auto max-w-7xl p-5">
<div class="text-xl font-bold text-center">
© 2023 by Rocket Services LLC - Auburn, MA | All Rights Reserved
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
</div>

164
src/routes/+page.svelte Executable file
View File

@@ -0,0 +1,164 @@
<script>
import "../app.postcss";
import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public";
let oil_price = [];
let price_of_oil = 0;
let company = [];
let tel_number = "";
let company_name = "";
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/price/oil", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (oil_price = result));
if (oil_price["ok"] == true) {
price_of_oil = oil_price["price"];
console.log(price_of_oil);
}
});
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/company", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (company = result));
if (company["ok"] == true) {
company_name = company["name"];
tel_number = company["telephone"];
}
});
</script>
<div class="bg-blue-900 text-white">
<div class="mx-auto p-0">
<img class="w-full p-0 m-0" src="/images/worc.jpg" alt="" />
</div>
<div class="mx-auto p-10">
<div class="mx-auto pb-5 text-5xl text-center">Order Now</div>
<div class="mx-auto text-5xl text-center">
{tel_number}
</div>
<div class="grid grid-cols-12 gap-5 px-5 text-center mt-10">
<div class="col-span-12 font-bold text-4xl text-blue-400 mx-auto">
Why call good oil?
</div>
<div class="col-span-12 lg:col-span-2"></div>
<div class="col-span-12 lg:col-span-3 bg-gray-600 p-10">
<div class="text-4xl mb-3">Cheaper Prices</div>
<div class="text-lg">
No Middleman. No expensive bulk plants. Direct port to door for
cheapest prices.
</div>
</div>
<div class="col-span-12 lg:col-span-3 bg-gray-600 p-10">
<div class="text-4xl mb-3">Phone Support</div>
<div class="text-lg">
We dont cut our product with products. Our Oil is pure #2 heating oil.
</div>
</div>
<div class="col-span-12 lg:col-span-3 bg-gray-600 p-10">
<div class="text-4xl mb-3">Top Quality Oil</div>
<div class="text-lg">
We dont cut our product with products. Our Oil is pure #2 heating oil.
</div>
</div>
<div class="col-span-12 lg:col-span-2"></div>
</div>
</div>
<div class="h-auto">
<div class="mx-auto p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 py-5">
<div
class="font-bold text-5xl text-blue-400 max-w-7xl mx-auto text-center md:text-left"
>
Serving these communites
</div>
<div
class="font-bold text-xl bg-blue-400 text-blue-800 h-10 mb-10"
></div>
</div>
<div class="col-span-12 py-5">
<div
class="invisible md:visible h-0 md:h-auto flex gap-20 justify-center text-2xl"
>
<div >
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">SouthBridge</div>
<div class="text-2xl">Douglas</div>
<div class="text-2xl">Holden</div>
<div class="text-2xl">Shrewsbury</div>
<div class="text-2xl">Grafton</div>
</div>
<div >
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div>
<div class="text-2xl">Cherry Valley</div>
<div class="text-2xl">Rochdale</div>
<div class="text-2xl">Spencer</div>
<div class="text-2xl">West Brookfield</div>
<div class="text-2xl">Brookfield</div>
<div class="text-2xl">North Brookfield</div>
<div class="text-2xl">Worcester</div>
</div>
</div>
<div class="visible sm:visible md:invisible h-auto sm:h-auto md:h-0">
<div class="text-center">
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">SouthBridge</div>
<div class="text-2xl">Douglas</div>
<div class="text-2xl">Holden</div>
<div class="text-2xl">Shrewsbury</div>
<div class="text-2xl">Grafton</div>
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div>
<div class="text-2xl">Cherry Valley</div>
<div class="text-2xl">Rochdale</div>
<div class="text-2xl">Spencer</div>
<div class="text-2xl">West Brookfield</div>
<div class="text-2xl">Brookfield</div>
<div class="text-2xl">North Brookfield</div>
<div class="text-2xl">Worcester</div>
</div>
</div>
</div>
<div class="col-span-12 py-5">
<div
class="flex justify-center items-center "
>
<img class="" src="/images/map.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>

71
src/routes/about/+page.svelte Executable file
View File

@@ -0,0 +1,71 @@
<div class=" bg-blue-400 ">
<div
class="max-w-7xl justify-center py-5 mx-auto font-bold text-2xl text-blue-800 px-10"
>
About Us
</div>
</div>
<div class="max-w-7xl mx-auto p-10 mb-10">
<div class="grid grid-cols-12 max-w-7xl gap-5">
<div class="col-span-12 text-2xl text-bold"></div>
<div class="col-span-12 md:col-span-6 mb-20">
<div class="col-span-12 mb-5 font-bold text-xl text-blue-600">
Our Oil Wont Ruin your heating system!
</div>
<div class="col-span-12 text-lg">
After 20 years delivering for other companies in Worcester. Our family
decided it was time to start our own small business. We have the
experience to ensure your family stays warm!
</div>
<div class="col-span-12 mb-5 text-2xl font-bold mt-10 text-blue-600">
The best oil in your Tank
</div>
<div class="col-span-12 mb-10">
<ul>
<div class="flex gap-5">
<img class=" p-0 m-0 h-10 w-5" src="/images/flame.png" alt="" />
<li class=" font-bold text-red-500">2-5% biodiesel (B2–B5) is Bioheat® fuel (Our Oil)</li>
</div>
<div class="flex gap-5">
<img class=" p-0 m-0 h-10 w-5" src="/images/flame.png" alt="" />
<li class=" font-bold">
5-20% biodiesel (B5–B20) is Bioheat Plus® fuel
</li>
</div>
<div class="flex gap-5">
<img class=" p-0 m-0 h-10 w-5" src="/images/flame.png" alt="" />
<li class=" font-bold">
20% biodiesel and above (B20+) is Bioheat Super Plus®
</li>
</div>
</ul>
</div>
<div class="col-span-12 mb-5 font-bold text-xl text-blue-600">
Symptoms your oil company is selling you bad oil
</div>
<div class="col-span-12 mb-10">
<ul class="text-lg">
<li>- System needs filters frequently</li>
<li>- Furnace has bad flame and doesnt produce high heat</li>
<li>- System is clogged</li>
<li>- Tank goes bad all of a sudden!</li>
</ul>
</div>
<div class="col-span-12 mb-5 font-bold text-xl">
See the slime? Imagine that all inside your tank and equipment!
</div>
<div class="col-span-12 mb-5 font-bold text-xl text-center">
Thats a bio filled system :(
</div>
<div class="col-span-12">
<img class="w-full p-0 m-0" src="/images/slimefilter.png" alt="" />
</div>
</div>
<div class="col-span-12 md:col-span-6">
<img class="w-full p-0 m-0" src="/images/oildelivery.jpg" alt="" />
</div>
</div>
</div>

89
src/routes/contact/+page.svelte Executable file
View File

@@ -0,0 +1,89 @@
<script>
import "../../app.postcss";
import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public";
let oil_price = [];
let price_of_oil = 0;
let company = [];
let tel_number = "";
let company_name = "";
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/price/oil", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (oil_price = result));
if (oil_price["ok"] == true) {
price_of_oil = oil_price["price"];
}
});
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/company", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (company = result));
if (company["ok"] == true) {
company_name = company["name"];
tel_number = company["telephone"];
}
});
</script>
<div class="bg-blue-400 px-10">
<div
class="max-w-7xl justify-center py-5 mx-auto font-bold text-2xl text-blue-800"
>
Contact
</div>
</div>
<div class="max-w-7xl mx-auto mb-20">
<div class="grid grid-cols-2">
<div class="col-span-1 p-5">
<div class="text-2xl font-bold text-blue-600">Contact Good Oil</div>
<div class="mb-20 text-xl">Phone: {tel_number}</div>
<div class="mb-10">
<div class="font-bold text-2xl text-blue-600 max-w-7xl mx-auto">
Business Hours Summer
</div>
<div class="font-bold text-xl bg-blue-600 text-blue-800 h-2 mb-2"></div>
<div class="text-xl">8:00 a.m. – 5:00 p.m.</div>
<div class="text-xl">Tuesday: 8:30 a.m. – 5:00 p.m.</div>
<div class="text-xl">Wednesday: 8:30 a.m. – 5:00 p.m.</div>
<div class="text-xl">Thursday: 8:00 a.m. – 5:00 p.m.</div>
<div class="text-xl">Friday: 8:00 a.m. – 3:00 p.m.</div>
<div class="text-xl">Saturday: Closed</div>
<div class="text-xl">Sunday: Closed</div>
</div>
<div class="">
<div class="font-bold text-2xl text-blue-600 max-w-7xl mx-auto">
Business Hours Winter
</div>
<div class="font-bold text-xl bg-blue-600 text-blue-800 h-2 mb-2"></div>
<div class="text-xl">8:00 a.m. – 5:00 p.m.</div>
<div class="text-xl">Tuesday: 8:30 a.m. – 5:00 p.m.</div>
<div class="text-xl">Wednesday: 8:30 a.m. – 5:00 p.m.</div>
<div class="text-xl">Thursday: 8:00 a.m. – 5:00 p.m.</div>
<div class="text-xl">Friday: 8:00 a.m. – 5:00 p.m.</div>
<div class="text-xl">Saturday: 8:00 a.m. – 1:00 p.m.</div>
<div class="text-xl">Sunday: Closed</div>
</div>
</div>
<div class="col-span-1">
<img class=" w-auto" src="/images/contact.png" alt="" />
</div>
</div>
</div>

80
src/routes/delivery/+page.svelte Executable file
View File

@@ -0,0 +1,80 @@
<script lang='ts'>
import "../../app.postcss";
import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public";
let company= [];
let tel_number = "";
let company_name = "";
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/company", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (company = result));
if (company["ok"] == true) {
company_name = company["name"];
tel_number = company["telephone"];
}
});
</script>
<div class=" bg-blue-400">
<div class="max-w-7xl justify-center py-5 mx-auto font-bold text-2xl text-blue-800 px-10">
Heating Oil Delivery
</div>
</div>
<div class="max-w-7xl mx-auto mb-10 px-10">
<div class="grid grid-cols-12 max-w-7xl">
<div class="lg:col-span-6">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold text-2xl my-10">
We know it can be tough to order oil. We make it simple!
</div>
<div class="col-span-12 font-bold text-xl text-blue-600">
Worcester County
</div>
<div class="col-span-12 text-lg">
<ul>100 Gallon Minimum to Worcester County</ul>
<ul>Prime - 25$</ul>
<ul>Same Day - 150$</ul>
</div>
<div class="col-span-12 font-bold mt-10 text-xl text-blue-600">
Payments Methods
</div>
<div class="col-span-12 text-lg">
<ul>Cash on Delivery (C.O.D)</ul>
<ul>Credit Card</ul>
<ul>Money Order</ul>
</div>
<div class="col-span-12 mx-auto bg-red-200">
<img class=" h-20 w-auto" src="/images/creditcards.png" alt="">
</div>
</div>
</div>
<div class="col-span-6">
<div class="col-span-12">
<img alt="" class="w-full p-0 m-0" src="/images/worc.jpg" />
</div>
</div>
<div class="col-span-12 text-blue-600 mb-10 text-bold bg-gray-300 mt-10 text-5xl text-bold p-5 text-center">
Call Today {tel_number}
</div>
</div>
</div>

79
src/routes/servicearea/+page.svelte Executable file
View File

@@ -0,0 +1,79 @@
<div class=" bg-blue-400 mb-10">
<div class="max-w-7xl justify-center py-5 mx-auto font-bold text-2xl text-blue-800 px-10">
Delivery Area
</div>
</div>
<div class="h-auto">
<div class="mx-auto p-5">
<div class="grid grid-cols-12 ">
<div class="col-span-12 py-5 ">
<div class="font-bold text-5xl text-blue-400 max-w-7xl mx-auto text-center md:text-left">
Serving these communites
</div>
<div class="font-bold text-xl bg-blue-400 text-blue-800 h-10 mb-10">
</div>
</div>
<div class="col-span-12 py-5 ">
<div class="invisible md:visible h-0 md:h-auto flex gap-20 justify-center text-3xl">
<div >
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">SouthBridge</div>
<div class="text-2xl">Douglas</div>
<div class="text-2xl">Holden</div>
<div class="text-2xl">Shrewsbury</div>
<div class="text-2xl">Grafton</div>
</div>
<div >
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div>
<div class="text-2xl">Cherry Valley</div>
<div class="text-2xl">Rochdale</div>
<div class="text-2xl">Spencer</div>
<div class="text-2xl">West Brookfield</div>
<div class="text-2xl">Brookfield</div>
<div class="text-2xl">North Brookfield</div>
<div class="text-2xl">Worcester</div>
</div>
</div>
<div class="visible sm:visible md:invisible h-auto sm:h-auto md:h-0">
<div class="text-center">
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">SouthBridge</div>
<div class="text-2xl">Douglas</div>
<div class="text-2xl">Holden</div>
<div class="text-2xl">Shrewsbury</div>
<div class="text-2xl">Grafton</div>
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div>
<div class="text-2xl">Cherry Valley</div>
<div class="text-2xl">Rochdale</div>
<div class="text-2xl">Spencer</div>
<div class="text-2xl">West Brookfield</div>
<div class="text-2xl">Brookfield</div>
<div class="text-2xl">North Brookfield</div>
<div class="text-2xl">Worcester</div>
</div>
</div>
</div>
<div class="col-span-12 py-5 ">
<div class="flex justify-center items-center md:h-auto ">
<img class="" src="/images/map.png">
</div>
</div>
</div>
</div>
</div>