Added species_information page

.gitignore

@@ -214,3 +214,6 @@ __marimo__/
 
 # Streamlit
 .streamlit/secrets.toml
+database/add_entry.py
+database/database_maker.py
+database/species.db

routes/homepage.py

@@ -1,8 +1,10 @@
 from flask import render_template, Blueprint
 from routes.donation.donation import donation_page
+from routes.species_info.species_info import species_info_page
 
 home_page = Blueprint("home", __name__, url_prefix="/")
 home_page.register_blueprint(donation_page)
+home_page.register_blueprint(species_info_page)
 
 
 @home_page.route("/")

routes/species_info/species_info.py

@@ -0,0 +1,50 @@
+from flask import render_template, Blueprint
+import sqlite3
+
+species_info_page = Blueprint("species_information", __name__)
+
+
+def animal_from_database(species_id):
+    conn = sqlite3.connect("database/species.db")
+    cursor = conn.cursor()
+
+    cursor.execute(
+        """
+        SELECT species_id,
+               species_english,
+               species_latin,
+               body_text,
+               created_at
+        FROM species
+        WHERE species_english = ?
+    """,
+        (animal_id,),
+    )
+
+    row = cursor.fetchone()
+    conn.close()
+    # print(row)
+    return row
+
+
+# animal_from_database expects five variables:
+# id, english_name, latin_name, body_text and created_at
+# if this needs changing feel free to adjust but...
+# species_information.jinja does expect english_name, latin_name and main_text
+# this page works by taking the "species_id" from the url and using that to
+# read the database.
+# Because of this we are able to create one page and simply generate links
+# based on the contents of the database
+# i.e. we can create a button with the hyperlink /species/iguana and this will
+# allow the user to view the information about the species
+
+
+@species_info_page.route("/species/<species_id>")
+def data(species_id):
+    var1, var2, latin_name, body_text, var5 = animal_from_database(species_id)
+    return render_template(
+        "species_information/species_information.jinja",
+        english_name=var2,
+        latin_name=latin_name,
+        main_text=body_text,
+    )

static/styles.css

@@ -33,7 +33,9 @@ body {
   font-size: 80;
   font-weight: bold;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-  text-shadow: 20px 20px 20px;
+  text-shadow: 
+        0 20px 40px rgba(255, 255, 255, 0.2),
+        0 80px 200px rgba(255, 255, 255, 0.15);
 }
 
 a {
@@ -528,21 +530,3 @@ input:focus {
 .komodo_crop {
   margin-top: -1px;
 }
-
-.mirror-shadow {
-    font-size: 60px;
-    position: relative;
-    display: inline-block;
-    margin-bottom: 60px;
-}
-
-.mirror-shadow::after {
-    content: attr(data-text);
-    position: absolute;
-    inset: 0;                 /* shorthand for top/left/right/bottom */
-    transform: translateY(290%) scaleY(-3);
-    transform-origin: top;
-    opacity: 0.8;
-    filter: blur(1px);
-    pointer-events: none;
-}

templates/donation/donation.jinja

@@ -1,5 +1,5 @@
 {% extends "base.jinja" %}
-{% block title %}Home{% endblock %}
+{% block title %}Donations{% endblock %}
 {% block head %}
 {% endblock %}
 {% block content %}

templates/home/home.jinja

@@ -6,7 +6,7 @@
 {% from 'button.jinja' import button %}
 <!-- Banner section -->
 <section id="hero" style="padding: 0px 20px 0px 20px; text-align: center;">
-    <h1 class="mirror-shadow" data-text="Komodo Hub">Komodo Hub</h1>   
+    <h1 class="title" data-text="Komodo Hub">Komodo Hub</h1>   
     <img src="/images/image.png" class="komodo_crop half-width" alt="I stole this photo from the internet"> 
     <h1>Protecting Indonesia's Endangered Species Together</h1>
     <p>Komodo Hub is dedicated to safeguarding the incredible biodiversity of Indonesia. Join us in our mission to
@@ -32,7 +32,7 @@
     <h2>Featured Species</h2>
     <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px;">
         <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px; width: 250px;">
-            <h3><a href="/species/komodo-dragon" style="text-decoration: none; color: #333;">Komodo Dragon</a></h3>
+            <h3><a href="/animal/iguana" style="text-decoration: none; color: #333;">Fecking iguana</a></h3>
             <p>Main category: Reptile</p>
         </div>
         <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px; width: 250px;">

templates/species_information/species_information.jinja

@@ -0,0 +1,15 @@
+{% extends "base.jinja" %}
+{% block title %}{{ english_name }} {% endblock %}
+{% block head %}
+{% endblock %}
+{% block content %}
+{% from 'button.jinja' import button %}
+<!-- Banner section -->
+<section id="hero" style="padding: 100px 20px; text-align: center;"> 
+    <h1>{{ english_name }}</h1>
+    <h2><em>{{ latin_name }}</em></h2>
+    <img src="/images/species_database/{{ english_name }}.jpg">
+
+    <p>{{ main_text }}</p>
+</section>
+{% endblock %}