-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (126 loc) · 6.35 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
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>G++ Server</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Styles -->
<style>
body {
background-color: #f8f9fa;
}
.header {
background-color: #343a40;
color: white;
padding: 50px 0;
text-align: center;
}
.header h1 {
font-size: 3rem;
font-weight: 700;
}
.cpp_logo img {
display: block;
margin: 40px auto;
max-width: 200px;
}
.footer {
background-color: #343a40;
color: white;
text-align: center;
padding: 20px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- Header Section -->
<div class="header">
<h1>Welcome to the G++ Server</h1>
<p class="lead">Powered by a custom HTTP server written in C++</p>
</div>
<!-- Content Section -->
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<div class="cpp_logo">
<img src="img/cpp-logo.png" alt="C++ Logo" class="img-fluid">
</div>
<p class="mt-4">Multithread server using raw C++ and is fully optimized to handle your requests efficiently.</p>
</div>
</div>
</div>
<!-- Instructions Section -->
<div class="container">
<h2 class="text-center mt-5">Instructions</h2>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="accordion" id="instructionsAccordion">
<!-- Accordion Item 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Access the Homepage
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#instructionsAccordion">
<div class="accordion-body">
<strong>To access the homepage:</strong> Simply navigate to <code>http://localhost:8082/</code> in your browser. The server will automatically serve the <code>index.html</code> file.
</div>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
View Static Images
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#instructionsAccordion">
<div class="accordion-body">
<strong>To view images:</strong> You can access any image served by the server by visiting its URL directly. For example, to view the C++ logo, go to <code>http://localhost:8082/img/cpp-logo.png</code>.
</div>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Access the CSS Stylesheet
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#instructionsAccordion">
<div class="accordion-body">
<strong>To access the CSS stylesheet:</strong> The stylesheet can be viewed by navigating to <code>http://localhost:8082/style.css</code>. This file contains the styles applied to the webpage.
</div>
</div>
</div>
<!-- Accordion Item 4 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Add More Files to the Server
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#instructionsAccordion">
<div class="accordion-body">
<strong>To add more files:</strong> Place the files (HTML, images, CSS, JS, etc.) in the <code>project1_httpserver</code> folder. Once added, these files can be accessed directly by navigating to <code>http://localhost:8082/filename</code>.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<div class="footer">
<p>© 2024 G++ Server. All rights reserved.</p>
</div>
<!-- Bootstrap JS and dependencies (Optional but recommended for additional functionality) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>