-
Notifications
You must be signed in to change notification settings - Fork 1
/
get-started.html
127 lines (127 loc) · 6.82 KB
/
get-started.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
<!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 - Get Started</title>
<link href='https://fonts.googleapis.com/css?family=JetBrains Mono' rel='stylesheet'>
<script src="https://kit.fontawesome.com/f7c8be4779.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="src/css/main.css">
<link rel="stylesheet" href="src/css/styles.css">
</head>
<body style="overflow: hidden;">
<div class="get-started-container">
<div class="overlay">
<div class="get-started-card">
<h3 id="name" class="card-text"></h3>
<p>welcome to <span class="color">codebook.dev</span></p>
<div class="descriptions">
<div class="box-desc">
<img src="images/language.png" class="box-desc-img">
<h4>over 10+ languages available</h4>
<p class="desc-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 class="box-desc">
<img src="images/brush.png" class="box-desc-img" style="width: 63px;">
<h4><span class="color">programming</span> just got personal</h4>
<p class="desc-p">
you can now completely personalize your editor and compiler for a truly personal experience.
</p>
</div>
<div class="box-desc">
<img src="images/lock.png" class="box-desc-img" style="width: 40px;">
<h4>your information is <span class="color">secure</span></h4>
<p class="desc-p">
your personal information is never shared with any third-party platforms while you use codebook. Your information, stays your information. </p>
</div>
</div>
<h4>are you ready?</h4>
<a href="code.html"><p class="get-started-text">click me to start coding!</p></a>
</div>
</div>
<div class="landing-page">
<div id="landing-bar" class="landing-toolbar">
<a><i class="fa-solid fa-bars-staggered"></i></a>
<div id="nav-settings" class="tooltip">
<a><i class="fa-solid fa-gear"></i></a>
<span id="settings-tooltip" class="tooltiptext">Settings</span>
</div>
<div id="nav-language" class="tooltip">
<a onclick="toggleSetting('language')"><i class="fa-solid fa-file-code"></i></a>
<span id="language-tooltip" class="tooltiptext">Language</span>
</div>
<div id="nav-theme" class="tooltip">
<a onclick="toggleSetting('theme')"><i class="fa-solid fa-brush"></i></a>
<span id="theme-tooltip" class="tooltiptext">Themes</span>
</div>
<div style="margin-top: auto;" class="tooltip">
<a id="lang-doc" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"><img src="images/icons/js.svg" class="svg" id="lang-icon"></i></a>
<span class="tooltiptext">Open Docs</span>
</div>
<div class=" tooltip">
<a><i class="fa-solid fa-circle-info"></i></a>
<span class="tooltiptext">v1.0 ALPHA</span>
</div>
</div>
<div class="code">
<div class="landing-nav">
<a style="font-size: 18px;" href="index.html" class="color">codebook.dev</a>
<a class="run-btn"><i class="fa-solid fa-play"></i> Run</a>
</div>
<div class="landing-page-container">
<div class="editor-and-tab-container">
<div class="tabs">
<button class="selectedtab" id="1" onclick="changeTab('1')">
file.js
<i class="fa-solid fa-xmark tab-close-icon"></i>
</button>
<button id="2" onclick="changeTab('2')">
file.py
<i class="fa-solid fa-xmark tab-close-icon"></i>
</button>
<button id="3" onclick="changeTab('3')">
file.java
<i class="fa-solid fa-xmark tab-close-icon"></i>
</button>
</div>
<div id="editor"></div>
</div>
<div class="landing-info-terminal-container">
<div id="info" class="landing-info">
<h1 class="color">Hey There! <i class="fa-solid fa-hands-clapping"></i></i></h1>
<h2 class="color">How To Use:</h2>
<p style="color:rgb(236, 236, 236);">Begin typing and the program will
automatically swap
the
compiler
to the language
your coding in! At
the top, you can quickly access the documentation for the selected language
to help with
any
confusion!
</p>
<h2 class="color">Editor Tips:</h2>
<p style="color:rgb(236, 236, 236);">Oh no, it looks like your compilation
failed. You may
want
to
check
if you inputted the file name
correctly or you don’t have any syntactical errors in your file.
</p>
<button onclick="hideInfoPopup()" class="landing-info-button"><i
class="fa-solid fa-circle-xmark"></i></button>
</div>
<div id="terminal"><span class="term-blue">▶ user.io@shell: ~$</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>