-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathknowledge.html
155 lines (145 loc) · 6.37 KB
/
knowledge.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Knowledge Base - Online Code Editor</title>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./src/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Roboto Mono', monospace;
background-color: #f8f9fa;
}
.kb-section {
margin-top: 40px;
}
.kb-category {
background-color: #28a745;
color: white;
padding: 10px;
border-radius: 5px;
}
.kb-title {
color: #007bff;
font-size: 1.25rem;
font-weight: bold;
}
.search-bar {
margin-bottom: 20px;
}
.article-card {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container kb-section">
<div class="row">
<div class="col-12 text-center">
<h1>Knowledge Base</h1>
<p class="lead">Everything you need to know about using our Online Code Editor</p>
</div>
</div>
<div class="row search-bar">
<div class="col-md-6 offset-md-3">
<input type="text" class="form-control" id="search" placeholder="Search articles...">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="kb-category">Getting Started</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">How to Create a New Project</h5>
<p class="card-text">Learn how to start a new project in the Online Code Editor, including how to write and test HTML, CSS, and JavaScript.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">Getting Started with HTML</h5>
<p class="card-text">A beginner's guide to writing HTML in our online editor, including tags, structure, and syntax.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="kb-category">Troubleshooting</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">Code Not Showing Up in Preview?</h5>
<p class="card-text">If your code isn't showing up in the live preview, here are a few steps to resolve the issue.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">How to Fix Syntax Errors</h5>
<p class="card-text">Learn how to identify and fix common syntax errors in HTML, CSS, and JavaScript.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="kb-category">Advanced Topics</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">Integrating APIs with JavaScript</h5>
<p class="card-text">Explore how to fetch data from APIs using JavaScript and display it in the editor.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">Building a Simple Web App</h5>
<p class="card-text">A step-by-step guide to building a web app with HTML, CSS, and JavaScript using the editor.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="kb-category">User Guides</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">Customizing Your Code Editor</h5>
<p class="card-text">Learn how to adjust the settings in your code editor to improve your coding experience.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="card article-card">
<div class="card-body">
<h5 class="card-title kb-title">Saving & Downloading Code</h5>
<p class="card-text">Instructions on how to save your progress and download your work as a file.</p>
<a href="editor.html" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Basic search functionality (incomplete; add your own search logic)
document.getElementById("search").addEventListener("keyup", function() {
var query = this.value.toLowerCase();
var cards = document.querySelectorAll(".article-card");
cards.forEach(function(card) {
var title = card.querySelector(".kb-title").textContent.toLowerCase();
if (title.includes(query)) {
card.style.display = "block";
} else {
card.style.display = "none";
}
});
});
</script>
</body>
</html>