From 1cb791a419c7dff411d05a2f03ba2bca1fdcc9cd Mon Sep 17 00:00:00 2001
From: Baitinq <manuelpalenzuelamerino@gmail.com>
Date: Fri, 28 Oct 2022 01:55:30 +0200
Subject: Frontend: Logically structure html

---
 frontend/src/main.rs | 74 +++++++++++++++++++++++++++-------------------------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index 0195a88..0ef78d9 100644
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -120,42 +120,46 @@ fn osse() -> Html {
 
     html! {
         <>
-        <nav class="navbar bg-light sticky-top">
-            <div class="container-fluid">
-                <div>
-                    <a href="https://github.com/Baitinq/OSSE" class="navbar-brand mb-0 h1 mx-2">{"OSSE"}</a>
-                    <span class="navbar-text mb-0">{"| Your favorite independent search engine."}</span>
-                </div>
-                <a href="https://github.com/Baitinq" class="navbar-text mb-0">{"Made by Baitinq"}</a>
-            </div>
-        </nav>
-        <div class="container d-flex h-100">
-            <div class="row align-self-center w-100">
-                <div class="col">
-                        <b class="display-4">{"OSSE"}</b>
-                        <p>{"Your favorite independent search engine."}</p>
-                        <form onsubmit={on_submit}>
-                            <div class="input-group input-group-lg my-2">
-                                <input oninput={search_query_changed} value={curr_state.search_query}type="text" class="form-control" placeholder="Search with OSSE" />
-                                <button class="btn btn-primary" type="submit" >{"Search!"}</button>
-                            </div>
-                        </form>
-                        <section>
-                            {display_results(&curr_state.results)}
-                        </section>
-                </div>
-            </div>
-        </div>
-        <nav class="navbar bg-light bottom">
-            <div class="container-fluid">
-                <div>
-                    <a href="https://github.com/Baitinq/OSSE" class="navbar-brand mb-0 h1 mx-2">{"OSSE"}</a>
-                    <span class="navbar-text mb-0">{"| Your favorite independent search engine."}</span>
+            <header>
+                <nav class="navbar bg-light sticky-top">
+                    <div class="container-fluid">
+                        <div>
+                            <a href="https://github.com/Baitinq/OSSE" class="navbar-brand mb-0 h1 mx-2">{"OSSE"}</a>
+                            <span class="navbar-text mb-0">{"| Your favorite independent search engine."}</span>
+                        </div>
+                        <a href="https://github.com/Baitinq" class="navbar-text mb-0">{"Made by Baitinq"}</a>
+                    </div>
+                </nav>
+            </header>
+            <main class="container d-flex h-100">
+                <div class="row align-self-center w-100">
+                    <div class="col">
+                            <b class="display-4">{"OSSE"}</b>
+                            <p>{"Your favorite independent search engine."}</p>
+                            <form onsubmit={on_submit}>
+                                <div class="input-group input-group-lg my-2">
+                                    <input oninput={search_query_changed} value={curr_state.search_query}type="text" class="form-control" placeholder="Search with OSSE" />
+                                    <button class="btn btn-primary" type="submit" >{"Search!"}</button>
+                                </div>
+                            </form>
+                            <section>
+                                {display_results(&curr_state.results)}
+                            </section>
+                    </div>
                 </div>
-                <a href="https://github.com/Baitinq" class="navbar-text mb-0">{"Made by Baitinq"}</a>
-            </div>
-        </nav>
-    </>
+            </main>
+            <footer>
+                <nav class="navbar bg-light bottom">
+                    <div class="container-fluid">
+                        <div>
+                            <a href="https://github.com/Baitinq/OSSE" class="navbar-brand mb-0 h1 mx-2">{"OSSE"}</a>
+                            <span class="navbar-text mb-0">{"| Your favorite independent search engine."}</span>
+                        </div>
+                        <a href="https://github.com/Baitinq" class="navbar-text mb-0">{"Made by Baitinq"}</a>
+                    </div>
+                </nav>
+            </footer>
+        </>
     }
 }
 
-- 
cgit 1.4.1