Files
rentalcalculator/public/index.html
2023-06-07 21:53:50 +01:00

130 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Rental Calculator" />
<meta name="keywords" content="Real estate" />
<meta name="author" content="Withinpixels" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<base href="/" />
<link href="%PUBLIC_URL%/assets/tailwind-base.css" rel="stylesheet" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<!-- You can choose main icon from variety of the material ui icon fonts-->
<link
href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsOutlined.css"
rel="stylesheet"
/>
<!-- <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIcons.css" rel="stylesheet">-->
<!-- <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsRound.css" rel="stylesheet">-->
<!-- <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsSharp.css" rel="stylesheet">-->
<!-- <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsTwoTone.css" rel="stylesheet">-->
<link href="%PUBLIC_URL%/assets/fonts/inter/inter.css" rel="stylesheet" />
<link href="%PUBLIC_URL%/assets/fonts/meteocons/style.css" rel="stylesheet" />
<noscript id="emotion-insertion-point"></noscript>
<title>Rental Calculator</title>
<!-- FUSE Splash Screen CSS -->
<style>
body #fuse-splash-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #111827;
color: #f9fafb;
z-index: 999999;
pointer-events: none;
opacity: 1;
visibility: visible;
transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
body #fuse-splash-screen img {
width: 120px;
max-width: 120px;
}
#spinner {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
width: 56px;
}
#spinner > div {
width: 12px;
height: 12px;
background-color: #1e96f7;
border-radius: 100%;
display: inline-block;
-webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
animation: fuse-bouncedelay 1s infinite ease-in-out both;
}
#spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
#spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes fuse-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes fuse-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
<!-- / FUSE Splash Screen CSS -->
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root" class="flex">
<!-- FUSE Splash Screen -->
<div id="fuse-splash-screen">
<div class="logo">
<img width="128" src="assets/images/logo/logo.svg" alt="logo" />
</div>
<div id="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<!-- / FUSE Splash Screen -->
</div>
</body>
</html>