-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (172 loc) · 9.07 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Comet - Decentralize your notes</title>
<link href="./output.css" rel="stylesheet" />
<link rel="icon" href="./favicon/favicon.ico" sizes="16x16" type="image/x-icon" />
<link rel="icon" href="./favicon/" sizes="32x32" type="image/png" />
<link rel="icon" href="./favicon/favicon-16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="./favicon/favicon-32x32.png" sizes="32x32" type="image/png" />
</head>
<body class="bg-gray-900 overflow-hidden">
<header class="absolute inset-x-0 top-0 z-50">
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5 flex items-center gap-2">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="./images/logo.png" alt="" />
<span class="text-white text-lg font-orbitron">Comet</span>
<span class="text-gray-400 text-[0.6rem] p-0.5 border border-gray-500 rounded-lg">ALPHA</span>
</a>
</div>
<!-- <div class="flex lg:hidden"> -->
<!-- <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"> -->
<!-- <span class="sr-only">Open main menu</span> -->
<!-- <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" -->
<!-- aria-hidden="true"> -->
<!-- <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> -->
<!-- </svg> -->
<!-- </button> -->
<!-- </div> -->
<!-- <div class="hidden lg:flex lg:gap-x-12"> -->
<div class="flex lg:gap-x-12">
<!-- <a href="#" class="text-sm font-semibold leading-6 text-white">Features</a> -->
<!-- <a href="#" class="text-sm font-semibold leading-6 text-white">Marketplace</a> -->
<!-- <a href="#" class="text-sm font-semibold leading-6 text-white">Company</a> -->
<a href="https://github.com/nodetec/comet" rel="noopener noreferrer" target="_blank"
class="text-sm font-semibold leading-6 text-white flex gap-1 items-center">
<svg class="w-5 h-5" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
</svg>
GitHub</a>
</div>
<!-- <div class="hidden lg:flex lg:flex-1 lg:justify-end"> -->
<!-- <a href="#" class="text-sm font-semibold leading-6 text-white">Log in <span aria-hidden="true">→</span></a> -->
<!-- </div> -->
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
<!-- <div class="lg:hidden" role="dialog" aria-modal="true"> -->
<!-- Background backdrop, show/hide based on slide-over state. -->
<!-- <div class="fixed inset-0 z-50"></div> -->
<!-- <div -->
<!-- class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10"> -->
<!-- <div class="flex items-center justify-between"> -->
<!-- <a href="#" class="-m-1.5 p-1.5"> -->
<!-- <span class="sr-only">Your Company</span> -->
<!-- <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="" /> -->
<!-- </a> -->
<!-- <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-400"> -->
<!-- <span class="sr-only">Close menu</span> -->
<!-- <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" -->
<!-- aria-hidden="true"> -->
<!-- <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> -->
<!-- </svg> -->
<!-- </button> -->
<!-- </div> -->
<!-- <div class="mt-6 flow-root"> -->
<!-- <div class="-my-6 divide-y divide-gray-500/25"> -->
<!-- <div class="space-y-2 py-6"> -->
<!-- <a href="#" -->
<!-- class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Product</a> -->
<!-- <a href="#" -->
<!-- class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Features</a> -->
<!-- <a href="#" -->
<!-- class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Marketplace</a> -->
<!-- <a href="#" -->
<!-- class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Company</a> -->
<!-- </div> -->
<!-- <div class="py-6"> -->
<!-- <a href="#" -->
<!-- class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white hover:bg-gray-800">Log -->
<!-- in</a> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
</header>
<div class="relative isolate pt-14">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div
class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"></div>
</div>
<div class="py-24 sm:py-32 lg:pb-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<div>
<h1 class="text-3xl font-semibold tracking-wide text-white sm:text-6xl">
Decentralize your notes
</h1>
<p class="mt-6 text-lg tracking-wide leading-8 text-gray-300">
Encrypted, shareable, yours forever.
</p>
<div class="mt-10 flex items-center flex-col justify-center gap-6">
<div class="flex gap-6 flex-col sm:flex-row">
<a href="https://github.com/nodetec/comet/releases/download/v0.1.0-alpha1/Comet-0.1.0-alpha1-aarch64.dmg"
class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Download
MacOS Arm</a>
<a href="https://github.com/nodetec/comet/releases/download/v0.1.0-alpha1/comet-0.1.0-alpha1-x86_64-linux-gnu.AppImage"
class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Download
Linux AppImage</a>
</div>
<!-- <a href="#" class="text-sm font-semibold leading-6 text-white">More platforms<span -->
<!-- aria-hidden="true">→</span></a> -->
</div>
</div>
</div>
<img src="./images/demo.png" alt="App screenshot" class="mt-10 md:px-24" />
</div>
</div>
<div
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true">
<div
class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"></div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>