Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

init #19

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

init #19

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
77910d0
init
Jul 30, 2023
3188724
update
Jul 30, 2023
eeb6c00
updateII
Jul 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 86 additions & 128 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,133 +1,91 @@
<!DOCTYPE html>
<html lang="en">

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#000000</title>
<link type="image/x-icon" rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGD4z0ABYBw1gGE0DBhGw4BhWIQBAE5OEAELnjVHAAAAAElFTkSuQmCC">
<style>
:root {
--color: #000000;
--color-transparent: #00000022;
}

::selection {
background: var(--color-transparent);
}

html,
body {
background: var(--color);
height: 100%;
margin: 0;
}

body {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

#color {
background: white;
color: var(--color);
font-size: 2.5rem;
font-weight: 300;
padding: 2.25rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
cursor: text;
}
</style>
<title>Coming Soon - North Prairie Medical Group</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.container {
text-align: center;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
}

.title {
font-size: 24px;
font-weight: bold;
color: #333333;
margin-bottom: 10px;
}

.subtitle {
font-size: 18px;
color: #666666;
margin-bottom: 20px;
}

.countdown {
font-size: 28px;
color: #ff0000;
margin-bottom: 30px;
}

.contact {
font-size: 16px;
color: #999999;
}
</style>
</head>

<body>
<p id="color">#000000</p>
<script>
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

function hslToHex(h, s, l) {
h /= 360;
s /= 100;
l /= 100;
var r = void 0,
g = void 0,
b = void 0;
if (s === 0) {
r = g = b = l; // achromatic
} else {
var hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
var toHex = function toHex(x) {
var hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}

window.onload = function () {
let stopProp = function (ev) {
ev.stopPropagation();
}

var colorElement = document.getElementById("color");
colorElement.addEventListener("click", stopProp, false);
colorElement.addEventListener("mousedown", stopProp, false);

var setFavicon = function (hex) {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var ctx = canvas.getContext('2d');
ctx.fillStyle = hex;
ctx.fillRect(0, 0, 16, 16);
document.getElementsByTagName('link')[0].href = canvas.toDataURL("image/x-icon");
}

var setRandomColor = function setRandomColor() {
var h = void 0,
s = void 0,
l = void 0;

h = randomInt(0, 359);
s = randomInt(55, 75);
l = randomInt(40, 60);

document.documentElement.style.setProperty('--color', 'hsl(' + h + ', ' + s + '%, ' + l + '%)');
var hex = hslToHex(h, s, l);
document.title = hex;
colorElement.innerHTML = hex;
document.documentElement.style.setProperty('--color-transparent', hex + '22');

setFavicon(hex);
};
setRandomColor();

var body = document.getElementsByTagName("body")[0];
body.addEventListener("mousedown", function (ev) {
ev.preventDefault();
});
body.addEventListener("click", function () {
setRandomColor();
}, false);
};
</script>
<div class="container">
<div class="title">North Prairie Medical Group</div>
<div class="subtitle">Coming Soon</div>
<div class="countdown">Launching in:</div>
<div id="countdown-timer"></div>
<div class="contact">For inquiries, please contact: <a href="mailto:[email protected]">[email protected]</a></div>
</div>

<script>
// Set the launch date and time (YYYY-MM-DD HH:MM:SS format)
var launchDate = new Date("2023-08-15 09:00:00").getTime();

// Update the countdown every second
var countdown = setInterval(function() {
var now = new Date().getTime();
var timeRemaining = launchDate - now;

// Calculate days, hours, minutes, and seconds
var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

// Display the countdown timer
document.getElementById("countdown-timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

// If the countdown is over, display a message
if (timeRemaining < 0) {
clearInterval(countdown);
document.getElementById("countdown-timer").innerHTML = "Now Open!";
}
}, 1000);
</script>
</body>

</html>
</html>