Added pages and changed layout

This commit is contained in:
Jonathan Herrewijnen 2023-12-29 21:37:15 +00:00
parent 297f706d9c
commit 5639e55ac8
13 changed files with 252 additions and 42 deletions

View File

@ -14,10 +14,10 @@ RUN --mount=type=cache,target=/root/.cache/pip pip install --no-cache-dir -r req
FROM base AS dev
# Make port 5000 available to the world outside this container
EXPOSE 5000
EXPOSE 5001
# Define environment variable
ENV NAME World
# Run app.py when the container launches
CMD ["flask", "run", "--host=0.0.0.0"]
CMD ["flask", "run", "--host=0.0.0.0", "--port=5002"]

11
app.py
View File

@ -84,6 +84,17 @@ def repository_page(folder):
else:
return f"Documentation not found for repository folder: {folder}"
@app.route('/contact')
def contact():
return render_template('pages/contact.html')
@app.route('/about')
def about():
return render_template('pages/about.html')
@app.route('/pages/strongholdkingdoms')
def strongholdkingdoms():
return render_template('pages/strongholdkingdoms.html')
if __name__ == "__main__":
_clone_repositories()

View File

@ -5,4 +5,5 @@ services:
context: .
target: dev # specify the build target if needed
ports:
- "5000:5000"
- "5002:5002"
command: ["flask", "run", "--host=0.0.0.0", "--port=5002"]

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

View File

@ -1,7 +1,13 @@
@font-face {
font-family: 'Herreweb';
src: url('static/ring_of_races_font.ttf') format('tff');
/* You can add additional font formats (e.g., ttf, eot) for better compatibility */
}
body {
background-color: rgb(92, 41, 7);
background-color: rgb(228, 218, 210);
color: white;
font-family: 'Arial', sans-serif;
font-family: 'Herreweb', sans-serif;
}
.main-container {
@ -10,55 +16,39 @@ body {
}
h1 {
font-family: 'Times New Roman', serif;
/* font-family: 'Times New Roman', serif; */
font-size: 36px;
margin-top: 20px;
}
.folder-container {
/* .folder-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
} */
.document-button {
width: 150px;
height: 200px;
margin: 10px;
background-color: #8B4513; /* Dark SaddleBrown color */
width: 200px;
height: 300px;
margin: 4%;
background-color: #bda99b; /* Dark SaddleBrown color */
border: 2px solid #8B4513;
border-radius: 10px;
position: relative;
overflow: hidden;
color: white;
}
/* Add a papyrus-like texture to the document buttons */
.document-button:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px),
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px);
background-size: 30px 30px;
border-radius: 8px;
z-index: -1;
color: rgb(17, 5, 5);
}
/* Add a subtle shadow for depth */
.document-button:hover {
width: 150px;
height: 200px;
margin: 10px;
transition: all 0.3s ease;
width: 200px;
height: 300px;
margin: 4%;
background-color: #8B4513; /* Dark SaddleBrown color */
border: 2px solid #8B4513;
background:
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px),
repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px);
repeating-linear-gradient(in hsl longer hue, rgb(85, 48, 25), rgb(148, 94, 50) 50px);
border-radius: 10px;
position: relative;
overflow: hidden;

5
templates/footer.html Normal file
View File

@ -0,0 +1,5 @@
<!-- footer.html -->
<footer style="background-color: #461f19; padding: 10px; text-align: center; color: #ffd700;">
<p>&copy; 2023 Herreweb. All rights reserved.</p>
<!-- Add any additional content or links for the footer -->
</footer>

18
templates/header.html Normal file
View File

@ -0,0 +1,18 @@
<!-- header.html -->
<header style="background-color: #461f19; padding: 10px; text-align: center;">
<h1 style="color: #ffd700; margin-bottom: 10px;">Herreweb</h1>
<nav>
<ul style="list-style-type: none; padding: 0; display: flex; gap: 10px; justify-content: center;">
{% for page in ['hello', 'contact', 'about'] %}
<li>
<a href="{{ url_for(page.lower()) }}" style="text-decoration: none;">
<button style="background-color: #5d4643; color: #ffd700; border: 2px solid #2b1d1b; padding: 10px; cursor: pointer; transition: all 0.3s;">
{{ page }}
</button>
</a>
</li>
{% endfor %}
</ul>
</nav>
</header>

View File

@ -1,21 +1,83 @@
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Include the header template -->
{% include 'header.html' %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Herreweb Repository</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<style>
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
margin-bottom: -20%;
}
.image {
position: absolute;
top: 0;
left: 3%;
width: 70%;
/* Adjust as needed */
height: 55%;
object-fit: cover;
}
.content {
position: absolute;
top: 45%;
right: 0;
left: 55%;
right: 6%;
transform: translateY(-50%);
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
cursor: pointer;
color: black;
transition: background-color 0.3s, color 0.3s;
}
.content:hover {
background-color: #555;
color: white;
}
.content a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.content a:hover {
color: #fff;
}
</style>
</head>
<body>
<div class="main-container">
<h1>Our Projects</h1>
<div class="container">
<img src="{{ url_for('static', filename='images/frontpage/Screenshot 2023-12-29 220355.png') }}" alt="Your Image" class="image">
<div class="content" onclick="location.href='{{ url_for('strongholdkingdoms') }}';">
<h2><a href="{{ url_for('strongholdkingdoms') }}">Project Thelendar</a></h2>
<p>This project describes our adventures on the game Stronghold Kingdoms. We played a lot of games from the stronghold series, and Eljakim made a bot to automate a lot of manual stuff in Stronghold Kingdoms. This project was dubbed 'Artemis' for the visual bot, and 'Thelendar' for the headless bot.</p>
</div>
</div>
<div class="folder-container">
{% for folder in repository_folders %}
<a href="{{ url_for('repository_page', folder=folder) }}">
<button class="document-button">{{ folder }}</button>
</a>
{% for folder in repository_folders if folder != 'images' %}
<a href="{{ url_for('repository_page', folder=folder) }}">
<button class="document-button">{{ folder }}</button>
</a>
{% endfor %}
</div>
</div>
{% include 'footer.html' %}
</body>
</html>

View File

@ -0,0 +1,27 @@
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Herreweb</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<!-- Add any additional styles or scripts for the about page -->
</head>
<body>
<div class="main-container">
<h2>About Us</h2>
<p>Welcome to Herreweb, where we are passionate about creating innovative solutions that make a difference. Our team is dedicated to pushing the boundaries of technology and delivering high-quality projects.</p>
<h3>Our Mission</h3>
<p>At Herreweb, our mission is to blend creativity and technology to build solutions that inspire and solve real-world challenges. We strive to create a positive impact on the world through our work.</p>
<h3>Our Team</h3>
<p>We have a diverse and talented team of professionals with expertise in various domains, including programming, design, and project management. Together, we collaborate to bring ideas to life.</p>
<h3>Contact Us</h3>
<p>If you have any questions or would like to learn more about our projects, feel free to contact us.</p>
</div>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!-- contact.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Herreweb</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<!-- Add any additional styles or scripts for the contact page -->
</head>
<body>
<div class="main-container">
<h2>Contact Us</h2>
<p>Have a question or want to get in touch? We'd love to hear from you. Please feel free to reach out through any of the following methods:</p>
<h3>Email</h3>
<p>Email us at: <a href="mailto:info@herreweb.com">info@herreweb.com</a></p>
</div>
</body>
</html>

View File

@ -0,0 +1,74 @@
<!-- page.html -->
<!DOCTYPE html>
<html lang="en">
<head>
{% include 'header.html' %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thelandar Bot - Stronghold Kingdoms</title>
<!-- Include any necessary styles or scripts here -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p {
line-height: 1.6;
}
/* Add any additional styling as needed */
</style>
</head>
<body>
<header>
<h1>Thelandar Bot - Stronghold Kingdoms</h1>
</header>
<div class="container">
<h2>Welcome to the Thelandar Bot Page!</h2>
<p>
Thank you for using the Thelandar bot for Stronghold Kingdoms. This page provides additional information and resources for using the bot effectively.
</p>
<h3>Features</h3>
<ul>
<li>Automated resource management</li>
<li>Strategic troop deployment</li>
<li>Real-time notifications</li>
<!-- Add more features as needed -->
</ul>
<h3>Documentation</h3>
<p>
For detailed instructions and documentation on using the Thelandar bot, please refer to the official documentation provided with the bot.
</p>
<!-- Add any additional content or sections as needed -->
</div>
{% include 'footer.html' %}
</body>
</html>