-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.template.html
36 lines (33 loc) · 2.97 KB
/
index.template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= title %></title>
<link rel="icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
<link rel="manifest" href="/favicon/manifest.json" />
<link rel="canonical" href="https://app.hydration.net" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="title" content="<%= title %>" />
<meta name="description" content="<%= description %>" />
<meta property="og:title" content="<%= title %>" />
<meta property="og:description" content="<%= description %>" />
<meta property="og:image" content="<%= image %>" />
<meta property="og:url" content="https://app.hydration.net" />
<meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://app.hydration.net" />
<meta property="twitter:title" content="<%= title %>" />
<meta property="twitter:description" content="<%= description %>" />
<meta property="twitter:image" content="<%= image %>" />
<style>#root,body,html{height:100%;width:100%}body{font-size:1.6rem;margin:0;font-family:"Geist", sans-serif;background:#060917}body::before{position:absolute;top:0;left:0;width:100%;height:474px;content:"";background:linear-gradient(180deg, #004596 0, rgba(4, 56, 117, 0) 100%)}.loader-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw;position:fixed;inset:0;z-index:1000}.loader{width:145px;height:145px;mask-image:linear-gradient( 120deg, #000 25%, rgba(0, 0, 0, 0.1) 50%, #000 75% );mask-size:800%;mask-position:0;animation:moveGradient 2s linear infinite}@keyframes moveGradient{0%{mask-position:120%}100%{mask-position:0}}</style>
</head>
<body>
<div id="root"></div>
<div class="loader-container"><div class="loader"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.83 165.419"><path fill="#fff" d="m137.3 91.162 5.072-5.064a10.36 10.36 0 0 0 .002-14.667l-4.296-4.291c-15.383 15.364-38.402 18.45-56.856 9.263 12.473 2.303 25.399.509 36.852-5.642 7.663-4.115 9.118-14.494 2.966-20.638L95.676 24.789c-5.667-5.66-14.856-5.66-20.521 0L47.814 52.096c18.005-7.64 39.634-4.1 54.277 10.628-22.34-10.83-50.014-6.988-68.563 11.537l-5.073 5.068a10.361 10.361 0 0 0 0 14.662l4.294 4.29C48.13 82.915 71.15 79.829 89.604 89.016c-12.472-2.303-25.398-.51-36.852 5.642-7.662 4.115-9.117 14.495-2.966 20.638L75.15 140.63c5.668 5.66 14.857 5.66 20.522 0l27.34-27.306c-18.005 7.64-39.634 4.098-54.28-10.63 22.34 10.83 50.015 6.989 68.564-11.535l.004.002z"/></svg></div></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>