-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhelp.html
More file actions
255 lines (241 loc) · 10.1 KB
/
help.html
File metadata and controls
255 lines (241 loc) · 10.1 KB
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/d01fd9c369.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CodeCraft! FAQ Page</title>
<link rel="icon" type = "image/x-icon" href="favicon-32x32.png">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Times New Roman', serif;
background: url(12.jpg) no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.container {
color:white;
width: 80%;
margin: 50px auto;
background-color: #1211115c;
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
h2 {
text-align: center;
font-size: 36px;
margin-bottom: 30px;
position: relative;
animation: slideInTop 1s ease-in-out;
color:white;
}
@keyframes slideInTop {
0% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.question {
cursor: pointer;
padding: 10px 0;
border-bottom: 1px solid #ddd;
font-size: 28px;
}
.answer {
font-size: 25px;
display: none;
padding: 10px 0;
animation: slideDown 0.3s ease-in-out;
color: white;
}
@keyframes slideDown {
from {
height: 0;
opacity: 0;
}
to {
height: auto;
opacity: 1;
}
}
.like-dislike {
margin-top: 5px;
}
.like-dislike button {
margin-right: 10px;
border: none;
background-color: transparent;
cursor: pointer;
font-size: 24px;
}
.like-dislike button:focus {
outline: none;
}
.like-dislike button:hover {
color: #333;
}
.like {
color: #606770;
}
.dislike {
color: #606770;
}
.like.clicked::before, .dislike.clicked::before {
content: '\2713';
}
.form-container {
margin-top: 30px;
text-align: center;
}
.form-container input[type="text"] {
width: 60%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.form-container input[type="submit"] {
padding: 10px 20px;
background: linear-gradient(to right, rgb(214, 3, 3), rgb(236, 4, 216));
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
h3{
text-align: center;
font-size: 36px;
margin-bottom: 30px;
position: relative;
animation: slideInTop 1s ease-in-out;
color:white;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><i class="fa-solid fa-bug"></i> CodeCraft!</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/loginsystem/welcome1.php"> <i class="fa-solid fa-house"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/loginsystem/New folder/default.php"> <i class="fa-solid fa-code"></i> Editor!</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h2 class="title"><i class="fa-solid fa-circle-question"></i> Frequently Asked Questions</h2>
<div class="question" onclick="toggleAnswer('q1')">Q: Which Languages does it supports ?</div>
<div class="answer" id="q1"><i class="fa-solid fa-arrow-right"></i> Codecraft! is a editor for web developement, so it supports programming Languages such as, HTML5, CSS, and Javascript.<br>
<i class="fa-solid fa-arrow-right"></i> Although, in the upcoming versions you will definetely find more Languages support.
<div class="like-dislike">
<button class="like" onclick="likeAnswer('q1')">👍</button>
<button class="dislike" onclick="dislikeAnswer('q1')">👎</button>
</div>
</div>
<div class="question" onclick="toggleAnswer('q2')">Q: Which Mode to choose classic or default ?</div>
<div class="answer" id="q2"><i class="fa-solid fa-arrow-right"></i> It depends, the default mode has a smaller output screen, so it is better to use defaut mode
when you are using the editor for testing codes and when you are writing the smaller codes.<br>
<i class="fa-solid fa-arrow-right"></i>Whereas on the other hand the classic mode has a larger output screen, so it can be used for testing as well as for developement
purpose and for writing longer codes.
<div class="like-dislike">
<button class="like" onclick="likeAnswer('q2')">👍</button>
<button class="dislike" onclick="dislikeAnswer('q2')">👎</button>
</div>
</div>
<div class="question" onclick="toggleAnswer('q3')">Q: What if dont't log in ?</div>
<div class="answer" id="q3"><i class="fa-solid fa-arrow-right"></i> If you dont log-in, you can still use the CodeCraft! editor, but you can only use it in default mode, moreover
you won't be able to use the download option.<br>
<i class="fa-solid fa-arrow-right"></i> We, would not recommend you to use CodeCraft without log-in, we would love it if you join us and give us your valuable feedback and support us.<br>
<div class="like-dislike">
<button class="like" onclick="likeAnswer('q3')">👍</button>
<button class="dislike" onclick="dislikeAnswer('q3')">👎</button>
</div>
</div>
<div class="question" onclick="toggleAnswer('q4')">Q: Where is my code saved when i click download button ?</div>
<div class="answer" id="q4"><i class="fa-solid fa-arrow-right"></i> In case you are using the default mode, all your codes will be downloaded in text file format, and it
will reflect in your pc's downloads folder.<br>
<i class="fa-solid fa-arrow-right"></i>In case you are using the classic mode, your html code will be downloaded as .html file, your css code will be downloaded as .css file,
and your javascript code will be downloaded as .js file.<br>
<i class="fa-solid fa-arrow-right"></i> All your files will reflect in your downloads folder.
<div class="like-dislike">
<button class="like" onclick="likeAnswer('q4')">👍</button>
<button class="dislike" onclick="dislikeAnswer('q4')">👎</button>
</div>
</div>
<div class="form-container">
<form method = "post" action="<?php echo $_SERVER['PHP_SELF']; ?>"
<h3>Any other question related to <i class="fa-solid fa-bug"></i> CodeCraft?</h3>
<form id="question-form" onsubmit="submitQuestion(event)">
<input type="text" id="question" placeholder="Enter your question">
<br>
<input type="submit" value="Submit">
</form>
<div id="message" style="display: none; color: green; margin-top: 10px;">We will connect with you soon.</div>
</div>
</div>
<script>
function toggleAnswer(id) {
var answer = document.getElementById(id);
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
}
function likeAnswer(id) {
var likeButton = document.querySelector('#' + id + ' .like');
var dislikeButton = document.querySelector('#' + id + ' .dislike');
likeButton.classList.toggle('clicked');
dislikeButton.classList.remove('clicked');
}
function dislikeAnswer(id) {
var likeButton = document.querySelector('#' + id + ' .like');
var dislikeButton = document.querySelector('#' + id + ' .dislike');
dislikeButton.classList.toggle('clicked');
likeButton.classList.remove('clicked');
}
function submitQuestion(event) {
event.preventDefault();
var questionInput = document.getElementById('question');
var message = document.getElementById('message');
if (questionInput.value.trim() !== '') {
message.style.display = 'block';
questionInput.value = '';
}
}
</script>
</body>
</html>