-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
128 lines (128 loc) · 13.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
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
<!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>codebook.dev - Home</title>
<link href='https://fonts.googleapis.com/css?family=JetBrains Mono' rel='stylesheet'>
<script src="https://kit.fontawesome.com/f7c8be4779.js" crossorigin="anonymous"></script>
<meta name="description" content="Coding online just got easier.">
<link rel="stylesheet" href="src/css/index.css">
<link rel="icon" href="images/icons/codebook-logo.ico">
</head>
<body id="index-body" style="overflow-x: hidden;">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(180deg); transition: 0.3s;" viewBox="0 0 1440 280" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(255, 0, 134.373, 1)" offset="0%"/><stop stop-color="rgba(11, 56.614, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,49L48,81.7C96,114,192,180,288,204.2C384,229,480,212,576,179.7C672,147,768,98,864,98C960,98,1056,147,1152,138.8C1248,131,1344,65,1440,32.7C1536,0,1632,0,1728,0C1824,0,1920,0,2016,8.2C2112,16,2208,33,2304,73.5C2400,114,2496,180,2592,245C2688,310,2784,376,2880,334.8C2976,294,3072,147,3168,114.3C3264,82,3360,163,3456,228.7C3552,294,3648,343,3744,351.2C3840,359,3936,327,4032,318.5C4128,310,4224,327,4320,310.3C4416,294,4512,245,4608,187.8C4704,131,4800,65,4896,89.8C4992,114,5088,229,5184,294C5280,359,5376,376,5472,392C5568,408,5664,425,5760,408.3C5856,392,5952,343,6048,326.7C6144,310,6240,327,6336,285.8C6432,245,6528,147,6624,130.7C6720,114,6816,180,6864,212.3L6912,245L6912,490L6864,490C6816,490,6720,490,6624,490C6528,490,6432,490,6336,490C6240,490,6144,490,6048,490C5952,490,5856,490,5760,490C5664,490,5568,490,5472,490C5376,490,5280,490,5184,490C5088,490,4992,490,4896,490C4800,490,4704,490,4608,490C4512,490,4416,490,4320,490C4224,490,4128,490,4032,490C3936,490,3840,490,3744,490C3648,490,3552,490,3456,490C3360,490,3264,490,3168,490C3072,490,2976,490,2880,490C2784,490,2688,490,2592,490C2496,490,2400,490,2304,490C2208,490,2112,490,2016,490C1920,490,1824,490,1728,490C1632,490,1536,490,1440,490C1344,490,1248,490,1152,490C1056,490,960,490,864,490C768,490,672,490,576,490C480,490,384,490,288,490C192,490,96,490,48,490L0,490Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(243, 62, 126.719, 1)" offset="0%"/><stop stop-color="rgba(48.047, 11, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,392L48,383.8C96,376,192,359,288,326.7C384,294,480,245,576,187.8C672,131,768,65,864,81.7C960,98,1056,196,1152,245C1248,294,1344,294,1440,310.3C1536,327,1632,359,1728,383.8C1824,408,1920,425,2016,383.8C2112,343,2208,245,2304,179.7C2400,114,2496,82,2592,106.2C2688,131,2784,212,2880,236.8C2976,261,3072,229,3168,179.7C3264,131,3360,65,3456,81.7C3552,98,3648,196,3744,212.3C3840,229,3936,163,4032,179.7C4128,196,4224,294,4320,326.7C4416,359,4512,327,4608,294C4704,261,4800,229,4896,196C4992,163,5088,131,5184,147C5280,163,5376,229,5472,269.5C5568,310,5664,327,5760,351.2C5856,376,5952,408,6048,383.8C6144,359,6240,278,6336,212.3C6432,147,6528,98,6624,130.7C6720,163,6816,278,6864,334.8L6912,392L6912,490L6864,490C6816,490,6720,490,6624,490C6528,490,6432,490,6336,490C6240,490,6144,490,6048,490C5952,490,5856,490,5760,490C5664,490,5568,490,5472,490C5376,490,5280,490,5184,490C5088,490,4992,490,4896,490C4800,490,4704,490,4608,490C4512,490,4416,490,4320,490C4224,490,4128,490,4032,490C3936,490,3840,490,3744,490C3648,490,3552,490,3456,490C3360,490,3264,490,3168,490C3072,490,2976,490,2880,490C2784,490,2688,490,2592,490C2496,490,2400,490,2304,490C2208,490,2112,490,2016,490C1920,490,1824,490,1728,490C1632,490,1536,490,1440,490C1344,490,1248,490,1152,490C1056,490,960,490,864,490C768,490,672,490,576,490C480,490,384,490,288,490C192,490,96,490,48,490L0,490Z"/></svg>
<div class="page-content">
<div id="name-overlay" class="overlay">
<div class="overlay-content">
<i class="fa-solid fa-times" id="close"></i>
<h1 class="color">Hey There!</h1>
<p>We'll just need your name before we take you to the next page.</p>
<form action="login.html" method="GET" id="index-form">
<input type="text" id="name" name="name" placeholder="Enter your Name" class="name-box" autocomplete="off">
<button disabled id="submit" type="submit" class="code-now-btn-form">Get Started</button>
</form>
</div>
</div>
<div id="main">
<nav class="navbar">
<a class="nav-link" href="login.html">Code</a>
<a class="nav-link" href="https://www.codebook.dev/docs/index.html">Support</a>
<a href="https://www.github.com/JacobPantuso/codebook.dev"><i class="fa fa-github"></i></a>
<i class="fa fa-profile"></i>
</nav>
<div class="title-content">
<div class="titles">
<h1 id="brand-name" class="name"><span style="margin-right:10px;">▶</span>codebook.dev</h1>
<h2>coding <span class="accent">online</span> just got easier<span
class="animate">_</span></h2>
<a id="#top"><button id="code-btn" class="code-now-btn">Get Started</button></a>
</div>
<div class="images">
<img src="images/header-image.png">
</div>
</div>
<div class="title-cards">
<div class="card">
<div class="card-content">
<i class="fa-solid fa-gears color"></i>
<h3>Language Freedom</h3>
<p>
With over 10+ languages available (and more coming) you have the freedom to code in any language you’d like.
Programming paradise, right?
</p>
</div>
</div>
<div class="card">
<div class="card-content">
<i class="fa-solid fa-brush color"></i>
<h3>Personalization</h3>
<p>
Completely personalize your editor and compiler for a truly personal experience.
We’ve taught our editor the true meaning of having a coding companion!
</p>
</div>
</div>
<div class="card">
<div class="card-content">
<i class="fa-solid fa-lock color"></i>
<h3>Privacy & Security</h3>
<p>
Your personal information is never shared with any third-party platforms while you use codebook.
Your information, stays your information.
</p>
</div>
</div>
</div>
<img id="gray-wave" src="images/gray.svg">
<div class="information-container">
<div class="info-content first">
<div class="side-content">
<h3>Built with ease-of-use and simplicity in mind</h3>
<p>
Our editor comes with intellisense built-in for rich and intelligent code auto-completion and suggestions.
Rich syntax highlighting is also available. Users also now have the to import, export, and use VIM-like controls in our editor.
</p>
</div>
<img src="images/blob-1.png">
</div>
<div class="info-content right">
<img src="images/blob-2.png">
<div class="side-content">
<h3>Code in over 10 languages</h3>
<p>
We are always expanding our language library. Code and compile over 10 languages all within our editor.
See realtime code statistics that break down how long your code took to run and how much memory was used.
</p>
</div>
</div>
<div class="info-content">
<div class="side-content">
<h3>The freedom to make it yours</h3>
<p>
At codebook.dev we believe in a truly personal experience for every user that uses our platform.
Apply editor themes, adjust font size, and many other fine details all within our easy to use quick-access toolbar.
</p>
</div>
<img src="images/blob-3.png">
</div>
</div>
<img id="gray-wave-up" src="images/gray.svg">
<div class="get-started">
<h1>Ready to <br>Get Started?</h1>
<p>Start coding for free today</p>
<div class="bottom-row">
<a href="#top"><button id="code-btn-2" class="code-now-btn"><i class="fa-solid fa-arrow-circle-up"></i> Get Started <i class="fa-solid fa-arrow-circle-up"></i></button></a>
<a class="learn-more" href="https://www.codebook.dev/docs/index.html">Learn More</a>
</div>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="bottom-wave" style="transition: 0.3s;" viewBox="0 0 1640 330" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(255, 0, 134.373, 1)" offset="0%"/><stop stop-color="rgba(11, 56.614, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,49L48,81.7C96,114,192,180,288,204.2C384,229,480,212,576,179.7C672,147,768,98,864,98C960,98,1056,147,1152,138.8C1248,131,1344,65,1440,32.7C1536,0,1632,0,1728,0C1824,0,1920,0,2016,8.2C2112,16,2208,33,2304,73.5C2400,114,2496,180,2592,245C2688,310,2784,376,2880,334.8C2976,294,3072,147,3168,114.3C3264,82,3360,163,3456,228.7C3552,294,3648,343,3744,351.2C3840,359,3936,327,4032,318.5C4128,310,4224,327,4320,310.3C4416,294,4512,245,4608,187.8C4704,131,4800,65,4896,89.8C4992,114,5088,229,5184,294C5280,359,5376,376,5472,392C5568,408,5664,425,5760,408.3C5856,392,5952,343,6048,326.7C6144,310,6240,327,6336,285.8C6432,245,6528,147,6624,130.7C6720,114,6816,180,6864,212.3L6912,245L6912,490L6864,490C6816,490,6720,490,6624,490C6528,490,6432,490,6336,490C6240,490,6144,490,6048,490C5952,490,5856,490,5760,490C5664,490,5568,490,5472,490C5376,490,5280,490,5184,490C5088,490,4992,490,4896,490C4800,490,4704,490,4608,490C4512,490,4416,490,4320,490C4224,490,4128,490,4032,490C3936,490,3840,490,3744,490C3648,490,3552,490,3456,490C3360,490,3264,490,3168,490C3072,490,2976,490,2880,490C2784,490,2688,490,2592,490C2496,490,2400,490,2304,490C2208,490,2112,490,2016,490C1920,490,1824,490,1728,490C1632,490,1536,490,1440,490C1344,490,1248,490,1152,490C1056,490,960,490,864,490C768,490,672,490,576,490C480,490,384,490,288,490C192,490,96,490,48,490L0,490Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(243, 62, 126.719, 1)" offset="0%"/><stop stop-color="rgba(48.047, 11, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,392L48,383.8C96,376,192,359,288,326.7C384,294,480,245,576,187.8C672,131,768,65,864,81.7C960,98,1056,196,1152,245C1248,294,1344,294,1440,310.3C1536,327,1632,359,1728,383.8C1824,408,1920,425,2016,383.8C2112,343,2208,245,2304,179.7C2400,114,2496,82,2592,106.2C2688,131,2784,212,2880,236.8C2976,261,3072,229,3168,179.7C3264,131,3360,65,3456,81.7C3552,98,3648,196,3744,212.3C3840,229,3936,163,4032,179.7C4128,196,4224,294,4320,326.7C4416,359,4512,327,4608,294C4704,261,4800,229,4896,196C4992,163,5088,131,5184,147C5280,163,5376,229,5472,269.5C5568,310,5664,327,5760,351.2C5856,376,5952,408,6048,383.8C6144,359,6240,278,6336,212.3C6432,147,6528,98,6624,130.7C6720,163,6816,278,6864,334.8L6912,392L6912,490L6864,490C6816,490,6720,490,6624,490C6528,490,6432,490,6336,490C6240,490,6144,490,6048,490C5952,490,5856,490,5760,490C5664,490,5568,490,5472,490C5376,490,5280,490,5184,490C5088,490,4992,490,4896,490C4800,490,4704,490,4608,490C4512,490,4416,490,4320,490C4224,490,4128,490,4032,490C3936,490,3840,490,3744,490C3648,490,3552,490,3456,490C3360,490,3264,490,3168,490C3072,490,2976,490,2880,490C2784,490,2688,490,2592,490C2496,490,2400,490,2304,490C2208,490,2112,490,2016,490C1920,490,1824,490,1728,490C1632,490,1536,490,1440,490C1344,490,1248,490,1152,490C1056,490,960,490,864,490C768,490,672,490,576,490C480,490,384,490,288,490C192,490,96,490,48,490L0,490Z"/></svg>
</div>
</div>
<footer>
<p>codebook.dev © 2023 - All Rights Reserved</p>
</footer>
</div>
</body>
<script type="module" src="src/js/index.js"></script>
</html>