From 4c4814006a8d5bc9a03932f63bc07956de6bd075 Mon Sep 17 00:00:00 2001 From: Nathan Woodburn Date: Mon, 30 Dec 2024 19:23:14 +1100 Subject: [PATCH] feat: Add initial humour webpage --- server.py | 9 +++ templates/assets/css/index.css | 112 +++++++++++++++++++++++++++++---- templates/index.html | 55 +++++++++++++++- 3 files changed, 161 insertions(+), 15 deletions(-) diff --git a/server.py b/server.py index 240a1a8..9011d4c 100644 --- a/server.py +++ b/server.py @@ -77,6 +77,15 @@ def index(): return render_template("index.html") +@app.route("/api/joke") +@app.route("/api/v1/joke") +def getJoke(): + # Get a random joke + req = requests.get("https://icanhazdadjoke.com/", headers={"Accept": "application/json"}) + joke = req.json() + return jsonify(joke) + + @app.route("/") def catch_all(path: str): if os.path.isfile("templates/" + path): diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index 9635f9c..96c29b9 100644 --- a/templates/assets/css/index.css +++ b/templates/assets/css/index.css @@ -1,20 +1,108 @@ +/* General Styles */ body { - background-color: #000000; - color: #ffffff; -} -h1 { - font-size: 50px; + font-family: 'Arial', sans-serif; margin: 0; padding: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + transition: background-color 0.3s, color 0.3s; + background-color: #121212; + color: #e0e0e0; } -.centre { - margin-top: 10%; + +body.light-mode { + background-color: #f0f8ff; + color: #333; +} + +/* Heading */ +h1 { + color: #2a9d8f; + font-size: 2.5rem; + margin-bottom: 20px; +} + +/* Joke Display */ +p#joke { + font-size: 1.5rem; + padding: 15px 20px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 600px; text-align: center; + margin: 0; + background-color: #333; + color: #e0e0e0; + transition: background-color 0.3s, color 0.3s; } -a { - color: #ffffff; - text-decoration: none; + +body.light-mode p#joke { + background-color: #e9f5f5; + color: #333; } -a:hover { - text-decoration: underline; + +/* Buttons */ +button { + margin-top: 20px; + padding: 10px 20px; + font-size: 1rem; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + background-color: #2a9d8f; +} + +button:hover { + background-color: #264653; +} + +button:active { + transform: scale(0.98); +} + +body.light-mode button { + background-color: #264653; +} + +body.light-mode button:hover { + background-color: #2a9d8f; +} + +/* Dark Mode Toggle Button */ +#darkModeToggle { + position: fixed; + top: 10px; + right: 10px; + width: 50px; + height: 50px; + border: none; + border-radius: 50%; + background-color: #264653; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s ease, transform 0.3s ease; +} + +#darkModeToggle:hover { + background-color: #2a9d8f; + transform: scale(1.1); +} + +#darkModeToggle i { + font-size: 24px; + color: #fff; + transition: transform 0.3s ease, opacity 0.3s ease; +} + +/* Make light mode icon spin */ +body.light-mode #darkModeToggle i { + transform: rotate(180deg); } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index bb349f8..2eee1e1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -4,16 +4,65 @@ - Nathan.Woodburn/ + Humour | Nathan.Woodburn/ + + + + +
-

Nathan.Woodburn/

+

.Humour

+

+ +
- \ No newline at end of file +