-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
136 lines (131 loc) · 6.76 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
<!DOCTYPE html>
<html lang="en-US" data-theme="dark">
<head>
<title>kodeWeave: Your on the go code playground!</title>
<meta charset="utf-8" />
<meta name="description" content="kodeWeave is your on the go coding playground! Design with TailwindCSS, Pico.css or any library or framework of your choosing. See how your app or website will look and behave on a desktop.">
<meta name="author" content="Michael Schwartz">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="kodeWeave">
<meta name="apple-mobile-web-app-title" content="kodeWeave">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="hsl(207, 31%, 11%)">
<meta name="msapplication-navbutton-color" content="hsl(207, 31%, 11%)">
<meta name="msapplication-starturl" content="./index.html">
<link rel="apple-touch-icon" href="imgs/logo.png">
<link rel="icon" href="imgs/logo.svg" type="image/x-icon" />
<meta property="og:url" content="https://michaelsboost.com/kodeWeave" />
<meta property="og:type" content="website" />
<meta property="og:title" content="kodeWeave" />
<meta property="og:description" content="kodeWeave is your on the go coding playground! Design with TailwindCSS, Pico.css or any library or framework of your choosing. See how your app or website will look and behave on a desktop." />
<meta property="og:image" content="https://michaelsboost.com/kodeWeave/imgs/header.png" />
<link rel="stylesheet" href="go/libraries/pico/pico.classless.min.css">
<link rel="stylesheet" href="go/libraries/tailwind/tailwind-mod.min.css">
<link rel="stylesheet" href="go/libraries/font-awesome/css/all.min.css">
</head>
<body class="text-white bg-gray-900">
<nav class="fixed top-0 inset-x-0 flex align-center place-items-center justify-between px-2 py-4 bg-gray-900 border-0 border-b border-solid border-purple-900 bg-opacity-50 backdrop-filter backdrop-blur-lg">
<div>
<a href="https://github.com/michaelsboost/kodeWeave/" target="_blank" class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2">
<i class="fa fa-brands fa-github"></i>
</a>
<a href="https://twitter.com/kodeweave_app" target="_blank" class="text-white mx-1 sm:mx-2 px-1 sm:px-2 py-2">
<i class="fa fa-brands fa-x-twitter"></i>
</a>
<a href="https://michaelsboost.com/donate/" target="_blank" class="mx-1 sm:mx-2 px-1 sm:px-2 py-2">
<i class="fa fa-heart text-red-400"></i>
</a>
</div>
<!-- <div class="hidden sm:inline-block"> -->
<div>
<span class="font-thin text-xl">
<img class="h-5 inline-block sm:hidden" src="imgs/logo.svg" alt="kodeWeave">
<span class="hidden sm:inline-block">kodeWeave</span>
</span>
</div>
<div>
<a class="block w-auto bg-blue-500" role="button" href="./go">
<span class="px-2">
<i class="pr-2 fa fa-play"></i>
Launch
</span>
</a>
</div>
</nav>
<main class="pt-28">
<section>
<div>
<h1>
<mark>kodeWeave</mark> <br/>
Your on the go code playground!
</h1>
<p>
kodeWeave is your on the go coding playground! Design with TailwindCSS, Pico.css or any library or framework of your choosing. See how your app or website will look and behave on a desktop.
</p>
<p>
If you've ever used jsfiddle, jsbin, dabblet, liveweave, codepen, cssdeck, cssdesk, tinkerbin, d3 playground, plunker and/or pastebin kodeWeave is the tool for you when you're away from a computer!
</p>
<div class="text-center md:text-left">
<a class="block w-full md:inline-block md:w-auto bg-blue-500" role="button" href="./go">
Launch
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-arrow-right">
<g class="head">
<path d="M10 16L14 12"></path>
<path d="M10 8L14 12"></path>
</g>
<path class="line" d="M0 12H14"></path>
</svg>
</a>
</div>
</div>
<div class="pt-10">
<iframe class="w-full h-64 md:h-96" src="https://www.youtube.com/embed/ylQwVfBhWn8?autoplay=0&fs=1&iv_load_policy=3&showinfo=1&rel=0&cc_load_policy=0&start=0&end=0" name="kodeWeave"></iframe>
</div>
<div>
<article class="whitespace-nowrap overflow-auto">
<a href="" target="_blank">
<img src="imgs/screenshots/kodeweave.png" class="h-64 md:h-96 mr-4" alt="kodeWeave">
</a>
<a href="" target="_blank">
<img src="imgs/screenshots/emmet.png" class="h-64 md:h-96 mr-4" alt="kodeWeave">
</a>
<a href="" target="_blank">
<img src="imgs/screenshots/lintandconsole.png" class="h-64 md:h-96 mr-4" alt="kodeWeave">
</a>
<img src="imgs/screenshots/markdown.png" class="h-64 md:h-96 mr-4" alt="kodeWeave">
</a>
<a href="" target="_blank">
<img src="imgs/screenshots/menu.png" class="h-64 md:h-96 mr-4" alt="kodeWeave">
</a>
<a href="" target="_blank">
<img src="imgs/screenshots/settings.png" class="h-64 md:h-96 mr-4" alt="kodeWeave">
</a>
</article>
</div>
</section>
</main>
<script>
// Select all the images on the page
const images = document.querySelectorAll('img');
// Loop through each image
images.forEach(image => {
// Get the parent anchor element
const parentAnchor = image.parentNode;
// Check if the parent is an anchor element
if (parentAnchor.tagName === 'A') {
// Set the href of the anchor to the src of the image
parentAnchor.href = image.src;
}
});
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-75970821-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>