nathanwoodburn/humour-webpage
1
0
Fork 0
generated from nathanwoodburn/python-webserver-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add initial humour webpage
All checks were successful
Build Docker / BuildImage (push) Successful in 53s
Details

Browse Source
This commit is contained in:
Nathan Woodburn 2024-12-30 19:23:14 +11:00
parent 903881dd9e
commit 4c4814006a
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
3 changed files with 161 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
server.py
View File

@ -77,6 +77,15 @@ def index():
return render_template("index.html") 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("/<path:path>") @app.route("/<path:path>")
def catch_all(path: str): def catch_all(path: str):
if os.path.isfile("templates/" + path): if os.path.isfile("templates/" + path):

112
templates/assets/css/index.css
View File

@ -1,20 +1,108 @@
/* General Styles */
body { body {
background-color: #000000; font-family: 'Arial', sans-serif;
color: #ffffff;
}
h1 {
font-size: 50px;
margin: 0; margin: 0;
padding: 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; text-align: center;
margin: 0;
background-color: #333;
color: #e0e0e0;
transition: background-color 0.3s, color 0.3s;
} }
a {
color: #ffffff; body.light-mode p#joke {
text-decoration: none; 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);
} }

55
templates/index.html
View File

@ -4,16 +4,65 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nathan.Woodburn/</title> <title>Humour | Nathan.Woodburn/</title>
<link rel="icon" href="/assets/img/favicon.png" type="image/png"> <link rel="icon" href="/assets/img/favicon.png" type="image/png">
<link rel="stylesheet" href="/assets/css/index.css"> <link rel="stylesheet" href="/assets/css/index.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<script>
function toggleDarkMode() {
const body = document.body;
const icon = document.getElementById('darkModeIcon');
body.classList.toggle('light-mode');
const isLightMode = body.classList.contains('light-mode');
// Toggle icons
icon.classList.toggle('fa-moon', !isLightMode);
icon.classList.toggle('fa-sun', isLightMode);
// Save mode to localStorage
localStorage.setItem('theme', isLightMode ? 'light' : 'dark');
}
window.onload = () => {
const savedTheme = localStorage.getItem('theme');
const body = document.body;
const icon = document.getElementById('darkModeIcon');
// Apply saved theme or default to dark mode
if (savedTheme === 'light') {
body.classList.add('light-mode');
icon.classList.add('fa-sun');
icon.classList.remove('fa-moon');
} else {
body.classList.remove('light-mode');
icon.classList.add('fa-moon');
icon.classList.remove('fa-sun');
}
};
async function fetchJoke() {
const response = await fetch('/api/joke');
const data = await response.json();
document.getElementById('joke').innerText = data.joke;
}
</script>
</head> </head>
<body> <body>
<button id="darkModeToggle" onclick="toggleDarkMode()">
<i id="darkModeIcon" class="fas fa-moon"></i>
</button>
<div class="spacer"></div> <div class="spacer"></div>
<div class="centre"> <div class="centre">
<h1>Nathan.Woodburn/</h1> <h1>.Humour</h1>
<p id="joke"></p>
<button onclick="fetchJoke()">Get a joke</button>
<script>
fetchJoke();
</script>
</div> </div>
</body> </body>
</html> </html>