generated from nathanwoodburn/python-webserver-template
feat: Add initial humour webpage
All checks were successful
Build Docker / BuildImage (push) Successful in 53s
All checks were successful
Build Docker / BuildImage (push) Successful in 53s
This commit is contained in:
parent
903881dd9e
commit
4c4814006a
GPG Key ID:
203B000478AD0EF1
@ -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("/<path:path>")
|
||||
def catch_all(path: str):
|
||||
if os.path.isfile("templates/" + path):
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -4,16 +4,65 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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>
|
||||
|
||||
<body>
|
||||
<button id="darkModeToggle" onclick="toggleDarkMode()">
|
||||
<i id="darkModeIcon" class="fas fa-moon"></i>
|
||||
</button>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user