-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
92 lines (92 loc) · 3 KB
/
index.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<title>OnlyStore</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
font-size: 2rem;
background-color: #1f1f1f;
color: #fff;
width: 100vw;
height: 100vh;
}
svg {
height: 20vmin;
}
#ring {
/* transform-origin: 50% 26%; */
transform-origin: center 24%;
animation: spin 1.2s infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div id="root">
<div class="main">
<!-- Our logo loading -->
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="logo">
<rect
id="backbox"
x="6"
y="12"
width="36"
height="26"
fill="#FEDD0A"
/>
<g id="ring">
<path
id="Ellipse 8"
d="M34 11C34 8.08262 32.8411 5.28473 30.7782 3.22183C28.7153 1.15893 25.9174 2.20256e-07 23 0C20.0826 -2.20256e-07 17.2847 1.15892 15.2218 3.22182C13.1589 5.28472 12 8.08262 12 11L15.3 11C15.3 8.95783 16.1112 6.99931 17.5553 5.55528C18.9993 4.11125 20.9578 3.3 23 3.3C25.0422 3.3 27.0007 4.11125 28.4447 5.55528C29.8888 6.99931 30.7 8.95783 30.7 11H34Z"
fill="#FEDD0A"
/>
<path
id="Ellipse 9"
d="M12 11C12 13.9174 13.1589 16.7153 15.2218 18.7782C17.2847 20.8411 20.0826 22 23 22C25.9174 22 28.7153 20.8411 30.7782 18.7782C32.8411 16.7153 34 13.9174 34 11L30.7 11C30.7 13.0422 29.8888 15.0007 28.4447 16.4447C27.0007 17.8888 25.0422 18.7 23 18.7C20.9578 18.7 18.9993 17.8888 17.5553 16.4447C16.1112 15.0007 15.3 13.0422 15.3 11L12 11Z"
fill="#1F1F1F"
/>
</g>
<path
id="outerbox"
d="M8.43959 10H37.6115C38.3447 10 38.9705 10.5301 39.0911 11.2534L43.2577 36.2534C43.4101 37.1677 42.7051 38 41.7782 38H41H5H4.65171C3.73377 38 3.03113 37.1829 3.16864 36.2753L6.95652 11.2753C7.06762 10.542 7.69794 10 8.43959 10Z"
stroke="#FEDD0A"
stroke-width="6"
/>
</g>
</svg>
onlyStore
</div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>