Base: Improve default WebServer pages

Add some fancy stuff like semantic tags, styling and the ladyball to
the default web server pages :^).
This commit is contained in:
electrikmilk 2022-02-21 19:04:00 -05:00 committed by Linus Groh
parent 653f01616c
commit 3217b34f5c
Notes: sideshowbarker 2024-07-17 18:21:24 +09:00
3 changed files with 114 additions and 28 deletions

View file

@ -1,18 +1,62 @@
<!DOCTYPE html>
<html>
<head><title>WebServer start page!</title></head>
<body>
<h1>SerenityOS WebServer start page!</h1>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Serenity WebServer Start Page!</title>
<style>
body {
font-size: 16px;
line-height: 1.6;
background: #ababab;
}
main {
background: #ffffff;
width: 500px;
border: 1px solid #000000;
padding: 10px;
margin: 0 auto;
}
header {
text-align: center;
}
.banner {
background: #ababab;
color: white;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.banner.it-works {
background: #ab6e4aff;
}
section {
margin: 5px 0;
}
</style>
</head>
<body>
<main>
<header>
<img src="ladyball.png" />
<h1>Serenity WebServer Start Page!</h1>
</header>
<p class="banner it-works">It works!</p>
<hr />
<section>
<p class="banner">Congratulations!</p>
<p>
<b>Congratulations!</b>
If you are reading this in a browser, I think we may have succeeded!
Unless of course you just loaded the local file in your browser
(cheater!) :^)
</p>
<p>
If you are reading this in a browser, I think we may have
succeeded! Unless of course you just loaded the local file
in your browser (cheater!) :^)
</p>
<p>
Try this <a href="other.html">link</a> to another page!
</p>
</body>
<p>Try this <a href="other.html">link</a> to another page!</p>
</section>
</main>
</body>
</html>

BIN
Base/www/ladyball.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 668 B

View file

@ -1,16 +1,58 @@
<!DOCTYPE html>
<html>
<head><title>WebServer other page!</title></head>
<body>
<h1>SerenityOS WebServer other page!</h1>
<p>
<b>Holy moly!</b>
</p>
<p>
This is not even index.html, how neat is that! :^)
</p>
<p>
Maybe you want to go <a href="index.html">back to index.html</a>?
</p>
</body>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Serenity WebServer Other Page!</title>
<style>
body {
font-size: 16px;
line-height: 1.6;
background: #ababab;
}
main {
background: #ffffff;
width: 500px;
border: 1px solid #000000;
padding: 10px;
margin: 0 auto;
}
header {
text-align: center;
}
.banner {
background: #ababab;
color: white;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.banner.it-works {
background: #ab6e4aff;
}
section {
margin: 5px 0;
}
</style>
</head>
<body>
<main>
<header>
<img src="ladyball.png" />
<h1>Serenity WebServer Other Page!</h1>
</header>
<p class="banner it-works">It works!</p>
<hr />
<section>
<p class="banner">Holy moly!</p>
<p>This is not even index.html, how neat is that! :^)</p>
<p>Maybe you want to go <a href="index.html">back to index.html</a>?</p>
</section>
</main>
</body>
</html>