Merge pull request 'main' (#46) from TussockyJoker/Komodo-Hub:main into main

Reviewed-on: Ugric/Komodo-Hub#46

routes/species/species.py

@@ -5,9 +5,9 @@ from database.db_commands import get_all_species
 
 config = configparser.ConfigParser()
 
-page = Blueprint("species", __name__)
+page = Blueprint("species", __name__, url_prefix="/species")
 
-@page.route("/species")
+@page.route("")
 def all_species():
     config.read('config.ini')
     
@@ -24,4 +24,10 @@ def all_species():
         "species/species.jinja",
         species=species_list,
         featured_species=featured_species
-        )
+        )
+    
+@page.route("/search")
+def search():
+    query = request.args.get("search-query")
+    
+    return render_template("/species/species_search.jinja", results=results)

static/images/extinction_risk/template.svg

@@ -7,7 +7,7 @@
    viewBox="0 0 200 200"
    version="1.1"
    id="svg1"
-   inkscape:export-filename="extinct.png"
+   inkscape:export-filename="endangered.png"
    inkscape:export-xdpi="96"
    inkscape:export-ydpi="96"
    inkscape:version="1.4.3 (0d15f75, 2025-12-25)"
@@ -28,11 +28,11 @@
      inkscape:document-units="mm"
      inkscape:zoom="0.59"
      inkscape:cx="305.9322"
-     inkscape:cy="391.52542"
-     inkscape:window-width="1205"
+     inkscape:cy="369.49153"
+     inkscape:window-width="1637"
      inkscape:window-height="685"
-     inkscape:window-x="1705"
-     inkscape:window-y="227"
+     inkscape:window-x="1715"
+     inkscape:window-y="111"
      inkscape:window-maximized="0"
      inkscape:current-layer="layer1" />
   <defs
@@ -65,18 +65,25 @@
        id="path1"
        cy="100"
        cx="100"
-       r="100" />
+       r="100"
+       inkscape:label="border" />
+    <circle
+       style="fill:#ff6600;fill-opacity:1;stroke-width:0.251354"
+       id="path1-6"
+       cy="100"
+       cx="100"
+       r="95"
+       inkscape:label="bg" />
     <text
        xml:space="preserve"
-       transform="matrix(0.38366503,0,0,0.65248606,-47.970025,2.7267278)"
+       transform="matrix(0.33940673,0,0,0.42414264,-29.953106,38.567598)"
        id="text3"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:263.496px;font-family:'.ADT Slab Numeric';-inkscape-font-specification:'.ADT Slab Numeric, @wght=400';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'wght' 400;text-align:center;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4);fill:#f9f9f9"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:263.496px;font-family:'Arial Unicode MS';-inkscape-font-specification:'Arial Unicode MS, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4);display:inline;fill:#1a1a1a"
        x="375.42374"
-       y="0"><tspan
-         x="203.55659"
-         y="244.86848"
-         id="tspan2"><tspan
-           style="baseline-shift:baseline"
-           id="tspan1">EX</tspan></tspan></text>
+       y="0"
+       inkscape:label="text"><tspan
+         x="194.10007"
+         y="239.14691"
+         id="tspan2">EN</tspan></text>
   </g>
 </svg>

static/styles.css

@@ -219,39 +219,6 @@ input:focus {
   outline: none;
 }
 
-.search {
-  display: flex;
-  flex-direction: row;
-  margin: 2.5rem 0;
-  justify-content: center;
-}
-
-.search .bar {
-  width: 500px;
-  height: 50px;
-  border-radius: 25px;
-  color: var(--text);
-  background-color: var(--secondary);
-  border: 1px solid var(--primary);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 1rem;
-}
-
-.search .button {
-  width: 100px;
-  border-radius: 25px;
-  margin-left: 1rem;
-  color: var(--text);
-  background-color: var(--primary);
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
 .results {
   display: flex;
   flex-direction: column;
@@ -388,7 +355,7 @@ input:focus {
 }
 
 ::-webkit-scrollbar {
-  width: 5px;
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -660,8 +627,8 @@ input:focus {
 }
 
 #featured-species .container-lite {
-  flex: 1;                /* Makes all container-lite elements within the featured species section even */
-  min-width: 250px;       
+  flex: 1;
+  min-width: 200px;       
   max-width: 30%;
   max-height: 100%;
 }
@@ -715,7 +682,6 @@ input:focus {
 }
 
 
-/* Form group */
 .form-group {
   display: flex;
   flex-direction: column;
@@ -790,4 +756,37 @@ input:focus {
   padding: 10px 20px;
   text-decoration: none;
   border-radius: 5px;
+}
+
+.search {
+    display: flex;
+    flex-direction: row;
+    margin: 2.5rem 0;
+    justify-content: center;
+}
+
+.search .bar {
+    width: 500px;
+    height: 50px;
+    border-radius: 25px;
+    color: black;
+    background-color: var(--secondary);
+    border: 1px solid var(--primary);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+}
+
+.search .button {
+    width: 100px;
+    border-radius: 25px;
+    margin-left: 1rem;
+    color: var(--text);
+    background-color: var(--primary);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 }

templates/home/home.jinja

@@ -14,7 +14,7 @@
     <!-- Main buttons -->
     <div class="homepage-buttons">
         {{ button(url='/donation', button_text='Donate Now', extra_classes='homepage-btn') }}
-        {{ button(url='#featured-species', button_text='Explore Species', extra_classes='homepage-btn') }}
+        {{ button(url='/species', button_text='Explore Species', extra_classes='homepage-btn') }}
         {{ button(url='/register', button_text='Join the Movement', extra_classes='homepage-btn') }}
     </div>
 </section>

templates/species/species.jinja

@@ -12,6 +12,12 @@ Species Database
 {# If you want to change the featured species please do so in config.ini - CS #}
 {{featured_species_section(featured_species, False)}}
 {# All Species #}
+<div>
+    <form action="/species/search" method="GET" class="search">
+        <input type="text" name="search-query" placeholder="Search all species..." class="bar">
+        <input type="submit" value="Search" class="button">
+    </form>
+</div>
 <h2 style="text-align: center; margin-top: 30px;">All Species</h2>
 <section class="species-grid">
     {% for sp in species %}

templates/species/species_search.jinja

@@ -0,0 +1,33 @@
+{% extends "base.jinja" %}
+{% block title %}Species Database{% endblock %}
+{% block head %}
+{% endblock %}
+{% block content %}
+{% from 'button.jinja' import button %}
+{% from 'featured_species.jinja' import featured_species_section%}
+<section class="title">
+Species Database
+</section>
+{# All Species #}
+<div>
+    <form action="/species/search" method="GET" class="search">
+        <input type="text" name="search-query" placeholder="Search all species..." class="bar">
+        <input type="submit" value="Search" class="button">
+    </form>
+</div>
+<h2 style="text-align: center; margin-top: 30px;">All Species</h2>
+<section class="species-grid">
+    {% for sp in results %}
+    <a href="/species/{{ sp['species_english'] }}" class="container-lite">
+        <h3 class="plain-white-text">{{ sp['species_english'] }}</h3>
+        <div 
+        style="background-image: url('{{ url_for('static', filename='images/species_database/' ~ sp['species_english'] ~ '.jpg') }}');" class="div-image">
+        </div>
+        <p style="color: var(--text)">
+        Main category: {{ sp['category'] }}
+        </p>
+    </a>
+
+    {% endfor %}
+</section>
+{% endblock %}

templates/species_information/species_information.jinja

@@ -5,7 +5,7 @@
 {% block content %}
 {% from 'button.jinja' import button %}
 <!-- Banner section -->
-<section id="hero" style="padding: 100px 20px; text-align: center;" class="container">
+<section id="hero" style="padding: 10px 20px; text-align: center;" class="container">
     <h1>{{ english_name }}</h1>
     <h2><em>{{ latin_name }}</em></h2>
     <p>Category: {{category}}</p>