-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (102 loc) · 6.67 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowboard - AlpineJS</title>
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://unpkg.com/navigo"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body x-data="{ foo: 'bar', counter: false, count: 0 }">
<!-- This is an example component -->
<div class="flex flex-row h-full">
<!-- Sidebar -->
<nav class="bg-gray-900 w-20 justify-between flex flex-col ">
<div class="mt-10 mb-10">
<a href="/about" data-navigo>
<img src="https://lh3.googleusercontent.com/ogw/ADGmqu9sA13IIanNwaMDMHOTEveA4TjKalFa6gyy2xcupGA=s64-c-mo"
class="rounded-full w-10 h-10 mb-3 mx-auto" />
</a>
<div class="mt-10">
<ul>
<li class="mb-6">
<a href="/products?a=b" data-navigo>
<span>
<svg class="fill-current h-5 w-5 text-gray-300 mx-auto hover:text-green-500 "
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 3V3.28988C16.8915 4.15043 19 6.82898 19 10V17H20V19H4V17H5V10C5 6.82898 7.10851 4.15043 10 3.28988V3C10 1.89543 10.8954 1 12 1C13.1046 1 14 1.89543 14 3ZM7 17H17V10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10V17ZM14 21V20H10V21C10 22.1046 10.8954 23 12 23C13.1046 23 14 22.1046 14 21Z"
fill="currentColor" />
</svg>
</span>
</a>
</li>
<li class="mb-6">
<a href="/userlist" data-navigo>
<span>
<svg class="fill-current h-5 w-5 mx-auto text-gray-300 hover:text-green-500"
viewBox="0 0 24 24">
<path d="M12 4a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0
014-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4
8-4z"></path>
</svg>
</span>
</a>
</li>
<li class="mb-6">
<a href="/about" data-navigo>
<span class="">
<svg class="fill-current h-5 w-5 text-gray-300 mx-auto hover:text-green-500"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li>
<a href="/slotpage" data-navigo>
<span>
<svg class="fill-current h-5 w-5 text-gray-300 mx-auto hover:text-green-500"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M22.775 8C22.9242 8.65461 23 9.32542 23 10H14V1C14.6746 1 15.3454 1.07584 16 1.22504C16.4923 1.33724 16.9754 1.49094 17.4442 1.68508C18.5361 2.13738 19.5282 2.80031 20.364 3.63604C21.1997 4.47177 21.8626 5.46392 22.3149 6.55585C22.5091 7.02455 22.6628 7.5077 22.775 8ZM20.7082 8C20.6397 7.77018 20.5593 7.54361 20.4672 7.32122C20.1154 6.47194 19.5998 5.70026 18.9497 5.05025C18.2997 4.40024 17.5281 3.88463 16.6788 3.53284C16.4564 3.44073 16.2298 3.36031 16 3.2918V8H20.7082Z"
fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1 14C1 9.02944 5.02944 5 10 5C10.6746 5 11.3454 5.07584 12 5.22504V12H18.775C18.9242 12.6546 19 13.3254 19 14C19 18.9706 14.9706 23 10 23C5.02944 23 1 18.9706 1 14ZM16.8035 14H10V7.19648C6.24252 7.19648 3.19648 10.2425 3.19648 14C3.19648 17.7575 6.24252 20.8035 10 20.8035C13.7575 20.8035 16.8035 17.7575 16.8035 14Z"
fill="currentColor" />
</svg>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="mb-4">
<a href="/logout" data-navigo>
<span>
<svg class="fill-current h-5 w-5 text-gray-300 mx-auto hover:text-red-500" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 4.00894C13.0002 3.45665 12.5527 3.00876 12.0004 3.00854C11.4481 3.00833 11.0002 3.45587 11 4.00815L10.9968 12.0116C10.9966 12.5639 11.4442 13.0118 11.9965 13.012C12.5487 13.0122 12.9966 12.5647 12.9968 12.0124L13 4.00894Z"
fill="currentColor" />
<path
d="M4 12.9917C4 10.7826 4.89541 8.7826 6.34308 7.33488L7.7573 8.7491C6.67155 9.83488 6 11.3349 6 12.9917C6 16.3054 8.68629 18.9917 12 18.9917C15.3137 18.9917 18 16.3054 18 12.9917C18 11.3348 17.3284 9.83482 16.2426 8.74903L17.6568 7.33481C19.1046 8.78253 20 10.7825 20 12.9917C20 17.41 16.4183 20.9917 12 20.9917C7.58172 20.9917 4 17.41 4 12.9917Z"
fill="currentColor" />
</svg>
</span>
</a>
</div>
</nav>
<!-- Content -->
<div class="px-16 py-4 text-gray-700 bg-gray-200 h-screen w-screen">
<div id="content"></div>
</div>
</div>
<script src="js/router.js"></script>
<script src="js/alpine-custom.js"></script>
</body>
</html>