Initial

2024-03-07 23:05:00 +01:00 · 2024-03-07 23:05:00 +01:00 · c6539f8232
commit c6539f8232
8 changed files with 113 additions and 0 deletions
--- a/17
+++ b/17
@ -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"]
--- a/Readme.md
+++ b/Readme.md
@ -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.
--- a/app.py
+++ b/app.py
@ -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')
--- a/static/story1.png
+++ b/static/story1.png
--- a/static/story2.jpeg
+++ b/static/story2.jpeg
--- a/static/story3.jpeg
+++ b/static/story3.jpeg
--- a/static/story4.png
+++ b/static/story4.png
--- a/templates/index.html
+++ b/templates/index.html
@ -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>