From d6860663398761bb7f37aeff83404e28492eb65f Mon Sep 17 00:00:00 2001
From: HangerThem <f.borisjuk@hangerthem.com>
Date: Mon, 25 May 2026 17:10:08 +0200
Subject: [PATCH] Block 01, Week 01 added a bit of styling

---
 .../demo/public/style.css                     | 76 +++++++++++++++++++
 .../demo/server.ts                            | 31 +++++---
 2 files changed, 97 insertions(+), 10 deletions(-)
 create mode 100644 block-01/week-01-the_web_under_the_hood/demo/public/style.css

diff --git a/block-01/week-01-the_web_under_the_hood/demo/public/style.css b/block-01/week-01-the_web_under_the_hood/demo/public/style.css
new file mode 100644
index 0000000..1a37786
--- /dev/null
+++ b/block-01/week-01-the_web_under_the_hood/demo/public/style.css
@@ -0,0 +1,76 @@
+* {
+  font-family: "Courier New", Courier, monospace;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #040b04;
+  color: #7cff7c;
+  text-shadow: 0 0 5px rgba(124, 255, 124, 0.35);
+  line-height: 1.5;
+  margin: 0;
+  padding: 24px;
+}
+
+h1 {
+  color: #a8ff9f;
+  text-shadow: 0 0 8px rgba(124, 255, 124, 0.55);
+}
+
+p {
+  color: #7cff7c;
+  font-size: 18px;
+}
+
+a {
+  color: #9fffa0;
+  text-decoration: underline;
+}
+
+a:hover {
+  color: #d6ffd6;
+}
+
+ul {
+  list-style-type: square;
+  padding-left: 24px;
+}
+
+::selection {
+  background: rgba(124, 255, 124, 0.25);
+  color: #ffffff;
+}
+
+form {
+  margin-top: 16px;
+  max-width: 400px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+}
+
+input {
+  padding: 8px;
+  border: 1px solid #7cff7c;
+  background-color: transparent;
+  color: #7cff7c;
+  font-size: 16px;
+  outline: none;
+}
+
+button {
+  padding: 10px 16px;
+  background-color: #7cff7c;
+  color: #040b04;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+button:hover {
+  background-color: #9fffa0;
+}
diff --git a/block-01/week-01-the_web_under_the_hood/demo/server.ts b/block-01/week-01-the_web_under_the_hood/demo/server.ts
index 63ee754..191a9d3 100644
--- a/block-01/week-01-the_web_under_the_hood/demo/server.ts
+++ b/block-01/week-01-the_web_under_the_hood/demo/server.ts
@@ -24,9 +24,13 @@ app.use((req, res, next) => {
   next()
 })
 
+// Serve static files from the "public" directory (for CSS, images, etc.)
+app.use(express.static("public"))
+
 // Simple GET: echoes request info back as HTML
 app.get("/", (req, res) => {
   res.send(`
+		<link rel="stylesheet" href="/style.css" />
     <h1>HTTP Echo Server</h1>
     <p>Check your terminal — the server printed everything it received.</p>
     <h2>Try these:</h2>
@@ -35,6 +39,8 @@ app.get("/", (req, res) => {
       <li><a href="/set-cookie">Set a cookie</a></li>
       <li><a href="/show-cookies">Show cookies the server received</a></li>
       <li><a href="/json">JSON response</a></li>
+			<li><a href="/delay">Delayed response</a></li>
+			<li><a href="/status">HTTP status codes</a></li>
     </ul>
   `)
 })
@@ -42,10 +48,11 @@ app.get("/", (req, res) => {
 // Form page: allows to submit a POST and see the body
 app.get("/form", (req, res) => {
   res.send(`
+		<link rel="stylesheet" href="/style.css" />
     <h1>Login Form</h1>
     <form method="POST" action="/login">
-      <label>Username: <input name="username" type="text" /></label><br/><br/>
-      <label>Password: <input name="password" type="password" /></label><br/><br/>
+      <label>Username: <input name="username" type="text" /></label>
+      <label>Password: <input name="password" type="password" /></label>
       <button type="submit">Login</button>
     </form>
     <p>Submit this and watch the terminal. Also check DevTools → Network tab.</p>
@@ -56,6 +63,7 @@ app.get("/form", (req, res) => {
 app.post("/login", (req, res) => {
   const { username, password } = req.body
   res.send(`
+		<link rel="stylesheet" href="/style.css" />
     <h1>Server received your POST</h1>
     <p><strong>Username:</strong> ${username}</p>
     <p><strong>Password:</strong> ${password}</p>
@@ -71,6 +79,7 @@ app.get("/set-cookie", (req, res) => {
     maxAge: 60 * 60 * 1000, // 1 hour
   })
   res.send(`
+		<link rel="stylesheet" href="/style.css" />
     <h1>Cookie Set</h1>
     <p>The server sent a <code>Set-Cookie</code> header. Check DevTools → Network → Response Headers.</p>
     <p>Now visit <a href="/show-cookies">show-cookies</a> — the browser will automatically send it back.</p>
@@ -81,6 +90,7 @@ app.get("/set-cookie", (req, res) => {
 app.get("/show-cookies", (req, res) => {
   const cookieHeader = req.headers["cookie"] || "none"
   res.send(`
+		<link rel="stylesheet" href="/style.css" />
     <h1>Cookies the server received</h1>
     <p><code>Cookie: ${cookieHeader}</code></p>
     <p>The browser sent this automatically — you didn't write any JavaScript for that.</p>
@@ -100,15 +110,17 @@ app.get("/json", (req, res) => {
 // Delayed response: simulates a slow server
 app.get("/delay", (req, res) => {
   setTimeout(() => {
-    res.send(
-      "<h1>Delayed Response</h1><p>This response was delayed by 5 seconds.</p>",
-    )
+    res.send(`
+			<link rel="stylesheet" href="/style.css" />
+			<h1>Delayed Response</h1><p>This response was delayed by 5 seconds.</p>
+			`)
   }, 5000)
 })
 
 // Show all the different HTTP status codes
 app.get("/status", (req, res) => {
   res.send(`
+		<link rel="stylesheet" href="/style.css" />
 		<h1>HTTP Status Codes</h1>
 		<h2>2xx Success</h2>
 		<ul>
@@ -155,11 +167,10 @@ app.get("/status", (req, res) => {
 // Demonstrates different status codes
 app.get("/status/:code", (req, res) => {
   const code = parseInt(req.params.code)
-  res
-    .status(code)
-    .send(
-      `<h1>Status ${code}</h1><p>This response was sent with HTTP status ${code} (${status[code as keyof typeof status]}).</p>`,
-    )
+  res.status(code).send(`
+			<link rel="stylesheet" href="/style.css" />
+			<h1>Status ${code}</h1><p>This response was sent with HTTP status ${code} (${status[code as keyof typeof status]}).</p>
+			`)
 })
 
 app.listen(3000, () => {