-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
157 lines (149 loc) · 9.19 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<title>kodeWeave: Your on the go code playground!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
<meta name="description" content="kodeWeave is your on the go coding playground! Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.">
<meta name="author" content="kodeWeave">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="kodeWeave: Your on the go code playground!">
<meta name="theme-color" content="#13171f">
<meta name="apple-mobile-web-app-title" content="kodeWeave: Your on the go code playground!">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="./index.html">
<meta name="msapplication-navbutton-color" content="#13171f">
<meta property="og:url" content="https://michaelsboost.com/kodeWeave/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="kodeWeave: Your on the go code playground!" />
<meta property="og:description" content="kodeWeave is your on the go coding playground! Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop." />
<meta property="og:image" content="https://raw.githubusercontent.com/michaelsboost/kodeWeave/main/imgs/header.png" />
<link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
<link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
<link rel="apple-touch-icon" href="imgs/logo.svg">
<link rel="stylesheet" href="dist/bundle.css">
</head>
<body>
<div class="container" id="home">
<nav class="relative md:sticky top-0 inset-x-0 flex-col md:flex-row items-center py-4 bg-[#13171f] bg-opacity-50 backdrop-filter backdrop-blur-lg">
<ul class="flex items-center gap-0 md:gap-3">
<!-- Logo -->
<li>
<a href="#home" class="text-2xl font-bold">
<img src="imgs/logo.svg" alt="kodeWeave Logo" class="h-8">
</a>
</li>
</ul>
<!-- Links -->
<ul class="hidden md:flex items-center gap-0 md:gap-3 text-xs sm:text-base md:text-base">
<li class="flex gap-3 py-2">
<div class="bg-[#cf06bc] rounded-md px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="#home">Home</a>
</div>
<div class="px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="https://github.com/michaelsboost/kodeWeave" target="_blank">Github</a>
</div>
<div class="px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="https://twitter.com/michaelsboost" target="_blank">Twitter</a>
</div>
<div class="px-2 py-1 md:px-4 md:py-3">
<a class="no-underline text-white" href="https://michaelsboost.com/donate" target="_blank">Support</a>
</div>
</li>
</ul>
<!-- Get Started Button -->
<ul class="hidden md:flex items-center gap-0 md:gap-3">
<li>
<a href="./go" class="no-underline text-white bg-[#0d6efd] hover:bg-[#0b5ed7] active:bg-[#0a58ca] px-3 py-2 md:px-4 md:py-3 rounded-lg">
Get Started
</a>
</li>
</ul>
</nav>
<main class="flex flex-col items-center justify-center min-h-screen py-12">
<hgroup class="text-center mb-8">
<h1 class="text-4xl font-bold">
Code with Speed, Preview with Power
</h1>
<h2 class="text-lg mt-4">
A blazing fast PWA coding playground that lets you build, test, and deploy websites seamlessly across desktop and mobile.
</h2>
</hgroup>
<div class="mb-8">
<img class="w-full h-full object-cover object-center rounded-lg shadow-lg shadow-blue-900" src="imgs/screenshot.webp" srcset="https://michaelsboost.com/kodeWeave/imgs/screenshot-640w.webp 640w, https://michaelsboost.com/kodeWeave/imgs/screenshot-1280w.webp 1280w" alt="kodeWeave">
</div>
<a href="./go" class="w-full text-center no-underline text-white bg-[#0d6efd] hover:bg-[#0b5ed7] active:bg-[#0a58ca] text-xl px-5 py-4 rounded-lg">
Try kodeWeave Now!
</a>
</main>
<article id="features">
<section class="container py-16">
<hgroup class="text-center mb-8">
<h1 class="text-4xl font-bold">
Why kodeWeave?
</h1>
<h2 class="text-lg mt-4">
Discover how kodeWeave helps you code faster, preview live, and deploy effortlessly.
</h2>
</hgroup>
<div class="w-1/2 m-auto">
<hr>
</div>
<div class="grid md:grid-cols-2 gap-8 p-4">
<div class="text-center">
<img src="imgs/lighthouse.png" alt="Blazing Fast" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Blazing Fast Performance</h3>
<p>Experience unmatched speed, powered by kodeWeave’s client-side architecture.</p>
</div>
<div class="text-center">
<img src="imgs/pwa.png" alt="PWA Export" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Export as PWA</h3>
<p>Turn your projects into fully functional PWAs with just one click.</p>
</div>
<div class="text-center">
<img src="imgs/frameworks.png" alt="Framework Support" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Supports Multiple Frameworks</h3>
<p>Built-in support for popular frameworks like React, Vue, AlpineJS, and more.</p>
</div>
<div class="text-center">
<img src="imgs/capture.svg" alt="Full Website Screenshot" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Screenshot Full Websites</h3>
<p>Capture full-page screenshots with ease, perfect for documentation or sharing.</p>
</div>
<div class="text-center">
<img src="imgs/multiplatform.svg" alt="Full Website Screenshot" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Mobile and Desktop</h3>
<p>Experience the same creative freedom on both desktop and mobile devices.</p>
</div>
<div class="text-center">
<img src="imgs/github.svg" alt="Full Website Screenshot" loading="lazy" class="mx-auto mb-4 rounded-lg">
<h3 class="text-xl font-bold mb-2">Open Source and Free</h3>
<p>kodeWeave is completely free for personal and commercial use under the MIT license.</p>
</div>
</div>
</section>
</article>
<footer class="py-8 mt-16">
<div class="container mx-auto flex flex-col items-center">
<img src="imgs/author.jpg" alt="Michael Schwartz" class="w-64 h-64 rounded-full mb-4 shadow-lg">
<p class="text-sm my-4">Created by Michael Schwartz</p>
<div class="flex space-x-4 items-center">
<!-- Twitter -->
<a href="https://twitter.com/michaelsboost" target="_blank" class="text-white no-underline text-2xl hover:text-[#1DA1F2]">
<svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m.058 1l9.267 12.39L0 23.462h2.099l8.163-8.82l6.596 8.82H24l-9.788-13.087L22.892 1h-2.1l-7.517 8.122L7.2 1zm3.087 1.546h3.28l14.488 19.37h-3.28L3.145 2.547Z"/></svg>
</a>
<!-- Website -->
<a href="https://michaelsboost.com" target="_blank" class="text-white no-underline text-2xl hover:text-[#00d4ff]">
<svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10"></path><path stroke-linecap="round" stroke-linejoin="round" d="M13 2.05S16 6 16 12m-5 9.95S8 18 8 12s3-9.95 3-9.95M2.63 15.5H12m-9.37-7h18.74"></path><path d="M21.879 17.917c.494.304.463 1.043-.045 1.101l-2.567.291l-1.151 2.312c-.228.459-.933.234-1.05-.334l-1.255-6.116c-.099-.48.333-.782.75-.525z" clip-rule="evenodd"></path></g></svg>
</a>
<!-- Support -->
<a class="text-red-400" href="https://michaelsboost.com/donate/" target="_blank">
<svg class="w-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" d="M240 102c0 70-103.79 126.66-108.21 129a8 8 0 0 1-7.58 0C119.79 228.66 16 172 16 102a62.07 62.07 0 0 1 62-62c20.65 0 38.73 8.88 50 23.89C139.27 48.88 157.35 40 178 40a62.07 62.07 0 0 1 62 62"></path></svg>
</a>
</div>
</div>
</footer>
</div>
</body>
</html>