Added UI
This commit is contained in:
parent
dc1d179803
commit
0207087433
|
|
@ -0,0 +1,29 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: "Roboto" !important;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
--mdui-color-primary-light: 103, 80, 164;
|
||||||
|
--mdui-color-primary-dark: 208, 188, 255;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dateAppLogo {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mainContainerButtonSection mdui-button {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
|
|
@ -0,0 +1,19 @@
|
||||||
|
(function () {
|
||||||
|
const htmlElement = document.querySelector("html");
|
||||||
|
if (htmlElement.getAttribute("data-bs-theme") === "auto") {
|
||||||
|
function updateTheme() {
|
||||||
|
document
|
||||||
|
.querySelector("html")
|
||||||
|
.setAttribute(
|
||||||
|
"data-bs-theme",
|
||||||
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
? "dark"
|
||||||
|
: "light"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
window
|
||||||
|
.matchMedia("(prefers-color-scheme: dark)")
|
||||||
|
.addEventListener("change", updateTheme);
|
||||||
|
updateTheme();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="mdui-theme-auto" data-bs-theme="auto">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Date Calculator</title>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css" />
|
||||||
|
<script src="assets/js/theme.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
|
||||||
|
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||||
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<!-- Filled -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Outlined -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Rounded -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Sharp -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Two Tone -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div
|
||||||
|
class="container d-flex justify-content-center align-items-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="mainContainer"
|
||||||
|
class="d-flex flex-column flex-md-row flex-sm-column justify-center align-items-center"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="assets/images/icons/dateapp.png"
|
||||||
|
alt="Date Calculator Icon"
|
||||||
|
id="dateAppLogo"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="mainContainerContent"
|
||||||
|
class="text-center text-md-start text-lg-start"
|
||||||
|
>
|
||||||
|
<h1 class="display-1 fw-bold" style="margin: 7px 0">
|
||||||
|
<strong>Date Calculator</strong>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="lead fw-bold">
|
||||||
|
The go-to minimal date calculator
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="mainContainerButtonSection"
|
||||||
|
class="d-flex justify-content-center justify-content-md-start justify-content-lg-start gap-2"
|
||||||
|
>
|
||||||
|
<mdui-button icon="download" class="lead fw-bold"
|
||||||
|
>Download</mdui-button
|
||||||
|
>
|
||||||
|
<mdui-button icon="info" class="lead fw-bold"
|
||||||
|
>FAQ</mdui-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue