Initial
This commit is contained in:
commit
c6539f8232
17
Dockerfile
Normal file
17
Dockerfile
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# Use an official Python runtime as a parent image
|
||||||
|
FROM python:3.8-slim-buster
|
||||||
|
|
||||||
|
# Set the working directory in the container to /app
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Add the current directory contents into the container at /app
|
||||||
|
ADD . /app
|
||||||
|
|
||||||
|
# Install any needed packages specified in requirements.txt
|
||||||
|
RUN pip install --no-cache-dir -r requirements.txt
|
||||||
|
|
||||||
|
# Make port 80 available to the world outside this container
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
# Run app.py when the container launches
|
||||||
|
CMD ["python", "app.py"]
|
23
Readme.md
Normal file
23
Readme.md
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# Bible Stories
|
||||||
|
|
||||||
|
This is a simple Flask application that can be run in a Docker container.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
You need to have Docker installed on your machine. You can download Docker [here](https://www.docker.com/products/docker-desktop).
|
||||||
|
|
||||||
|
## Building the Docker Image
|
||||||
|
|
||||||
|
To build the Docker image, navigate to the project root directory (where the Dockerfile is located) in your terminal and run the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker build -t your-image-name .
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deploy
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -p 4000:80 your-image-name
|
||||||
|
```
|
||||||
|
|
||||||
|
This will start the Docker container and map port 80 in the container to port 4000 on your host machine.
|
35
app.py
Normal file
35
app.py
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
from flask import Flask, render_template
|
||||||
|
import random
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
stories = [
|
||||||
|
{
|
||||||
|
'image': 'story1.png',
|
||||||
|
'title': 'Nuttig is mijn naam, onzeker mijn bestaan.',
|
||||||
|
'answer': 'Onesimus in de brief van Paulus aan Filemon. Onesimus betekent nuttig en was een weg gelopen slaaf die, met een brief van Paulus, terug ging naar zijn meester Filemon.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'image': 'story2.jpeg',
|
||||||
|
'title': 'Mijn komst is geprofeteerd maar in Israel wordt ik niet vereerd',
|
||||||
|
'answer': 'Kores. Kores wordt in Jesaja 45:1 genoemd als de gezalfde van God. Hij was het die de Joden toestemming gaf om terug te keren naar Jeruzalem.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'image': 'story3.jpeg',
|
||||||
|
'title': 'Samen zijn we overdonderend.',
|
||||||
|
'answer': 'Jacobes en Johannes. De gebroederes van de donder genoemd in Markus 3:17'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'image': 'story4.png',
|
||||||
|
'title': 'Ooit was ik groot en blij. Nu is het onrustig met mij in de wei',
|
||||||
|
'answer': 'Nebukadnezar. In Daniël 4:30 wordt Nebukadnezar de koning van Babel genoemd. Hij was de koning die een tijd als een beest leefde.'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
@app.route('/')
|
||||||
|
def index():
|
||||||
|
story = random.choice(stories)
|
||||||
|
return render_template('index.html', story=story)
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.run(host='0.0.0.0')
|
BIN
static/story1.png
Normal file
BIN
static/story1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 478 KiB |
BIN
static/story2.jpeg
Normal file
BIN
static/story2.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 78 KiB |
BIN
static/story3.jpeg
Normal file
BIN
static/story3.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 147 KiB |
BIN
static/story4.png
Normal file
BIN
static/story4.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 478 KiB |
38
templates/index.html
Normal file
38
templates/index.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>{{ story.title }}</title>
|
||||||
|
<!-- Include Bootstrap CSS -->
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #333; /* Dark grey background */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-9">
|
||||||
|
<div class="card mt-5">
|
||||||
|
<img src="{{ url_for('static', filename=story.image) }}" class="card-img-top" alt="{{ story.title }}">
|
||||||
|
<div class="card-body text-center"> <!-- Add text-center class here -->
|
||||||
|
<h5 class="card-title">{{ story.title }}</h5>
|
||||||
|
<!-- Collapsible answer -->
|
||||||
|
<a class="btn btn-primary" data-toggle="collapse" href="#answer" role="button" aria-expanded="false" aria-controls="answer">
|
||||||
|
Show/Hide Answer
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="answer">
|
||||||
|
<div class="card card-body mt-2">
|
||||||
|
{{ story.answer }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Include jQuery, Popper.js, and Bootstrap JS -->
|
||||||
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue
Block a user