Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@IceBotYT
IceBotYT committed Apr 14, 2024
1 parent 64c3b20 commit a38403b
Show file tree
Hide file tree
Showing 2 changed files with 479 additions and 0 deletions.
215 changes: 215 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SPCountdown</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script
src="https://kit.fontawesome.com/d2dd9afdb0.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="px-4 py-5 my-5 text-center">
<!-- <img
class="d-block mx-auto mb-4"
src="/docs/5.3/assets/brand/bootstrap-logo.svg"
alt=""
width="72"
height="57"
/> -->
<h1 class="display-5 fw-bold text-body-emphasis">SPCountdown</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">
Plenty of countdowns to different weather products. SPC for now, and
more on the way.
</p>
<!-- <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-primary btn-lg px-4 gap-3">
Primary button
</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-4">
Secondary
</button>
</div> -->
</div>
</div>
<h1 class="display-8 fw-bold text-body-emphasis text-center">
Storm Prediction Center
</h1>

<div class="container">
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Day 1</h4>
</div>
<div class="card-body">
<h1
class="card-title pricing-card-title text-body-emphasis display-5 fw-bold"
>
<span id="spc-1-countdown">00:00:00</span>
</h1>
<!-- Show the user in their local time when the next outlook comes out -->
<p class="text-muted">
<span id="spc-1-local-time"></span>
</p>
<!-- Progress bar that counts down to the next outlook -->
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 0%; transition: width 1s ease-in-out"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
id="spc-1-progress-bar"
></div>
</div>
<a
type="button"
class="w-100 btn btn-lg btn-primary"
href="https://www.spc.noaa.gov/products/outlook/day1otlk.html"
target="_blank"
rel="noopener noreferrer"
>
View <i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Day 2</h4>
</div>
<div class="card-body">
<h1
class="card-title pricing-card-title text-body-emphasis display-5 fw-bold"
>
<span id="spc-2-countdown">00:00:00</span>
</h1>
<!-- Show the user in their local time when the next outlook comes out -->
<p class="text-muted">
<span id="spc-2-local-time"></span>
</p>
<!-- Progress bar that counts down to the next outlook -->
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 0%; transition: width 1s ease-in-out"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
id="spc-2-progress-bar"
></div>
</div>
<a
type="button"
class="w-100 btn btn-lg btn-primary"
href="https://www.spc.noaa.gov/products/outlook/day2otlk.html"
target="_blank"
rel="noopener noreferrer"
>
View <i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Day 3</h4>
</div>
<div class="card-body">
<h1
class="card-title pricing-card-title text-body-emphasis display-5 fw-bold"
>
<span id="spc-3-countdown">00:00:00</span>
</h1>
<!-- Show the user in their local time when the next outlook comes out -->
<p class="text-muted">
<span id="spc-3-local-time"></span>
</p>
<!-- Progress bar that counts down to the next outlook -->
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 0%; transition: width 1s ease-in-out"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
id="spc-3-progress-bar"
></div>
</div>
<a
type="button"
class="w-100 btn btn-lg btn-primary"
href="https://www.spc.noaa.gov/products/outlook/day3otlk.html"
target="_blank"
rel="noopener noreferrer"
>
View <i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Day 4-8</h4>
</div>
<div class="card-body">
<h1
class="card-title pricing-card-title text-body-emphasis display-5 fw-bold"
>
<span id="spc-4-8-countdown">00:00:00</span>
</h1>
<!-- Show the user in their local time when the next outlook comes out -->
<p class="text-muted">
<span id="spc-4-8-local-time"></span>
</p>
<!-- Progress bar that counts down to the next outlook -->
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 0%; transition: width 1s ease-in-out"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
id="spc-4-8-progress-bar"
></div>
</div>
<a
type="button"
class="w-100 btn btn-lg btn-primary"
href="https://www.spc.noaa.gov/products/exper/day4-8/"
target="_blank"
rel="noopener noreferrer"
>
View <i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
</div>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<script src="spc.js"></script>
</body>
</html>
Loading

0 comments on commit a38403b

Please sign in to comment.