From c7f80f01412794f8921ed5336933331ca9a7b741 Mon Sep 17 00:00:00 2001
From: 703337 <da703337@gmail.com>
Date: Wed, 10 Apr 2024 18:51:18 +1200
Subject: [PATCH] v0.1.1

Finally added a modal form!
---
 css/defaultstyle.css | 15 +++++++++++++++
 css/screensize.css   |  8 ++++++++
 index.html           | 28 +++++++++-------------------
 js/script.js         | 15 +++++++++++++++
 mods.html            |  5 ++++-
 tools.html           |  5 ++++-
 6 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/css/defaultstyle.css b/css/defaultstyle.css
index 0bc1c9a..6aa149f 100644
--- a/css/defaultstyle.css
+++ b/css/defaultstyle.css
@@ -16,6 +16,11 @@ article {
     border-bottom: 2px solid #fcc600;
 }
 
+/* Article for website info on the Home page */
+article.HomepageInfo {
+    padding: 1px;
+}
+
 /* Articles for the current page's name */
 article.PageName {
     padding: 1px;
@@ -173,6 +178,16 @@ button.Nav:active {
     width: 100px;
 }
 
+/* Style for the Modal Form */
+#ModalForm {
+    background-color: rgba(0, 0, 0, 0.5);
+    height: 100%;
+    position: absolute;
+        top: 0%;
+        left: 0%;
+    width: 100%;
+}
+
 /* Other Styles */
 /* Preview images for mods and tools */
 img.Preview {
diff --git a/css/screensize.css b/css/screensize.css
index 47ef568..2279182 100644
--- a/css/screensize.css
+++ b/css/screensize.css
@@ -1,6 +1,14 @@
 /* Styles for screens 640px or larger */
 @media (min-width: 640px) {
     /* Container Styles */
+    /* Article for website info on the Home page */
+    article.HomepageInfo {
+        border-left: 2px solid #fcc600;
+        border-right: 2px solid #fcc600;
+        margin: auto;
+        max-width: 758px;
+    }
+
     /* Articles for mods and tools */
     article.ModTool {
         border-left: 2px solid #fcc600;
diff --git a/index.html b/index.html
index 2aa0dfc..a68b7c8 100644
--- a/index.html
+++ b/index.html
@@ -33,24 +33,11 @@ <h1>InsaniModding</h1>
         <article class="PageName">
             <h2>Home</h2>
         </article>
-        <p>Oops! Looks like this is just ...</p>
-        <p>Looks like this is just a ...</p>
-        <p>like this is just a layout ...</p>
-        <p>this is just a layout test...</p>
-        <p>Oops! is just a layout test...</p>
-        <p>Oops! Looks just a layout test...</p>
-        <p>Oops! Looks like a layout test...</p>
-        <p>Oops! Looks like this layout test...</p>
-        <p>Oops! Looks like this is test...</p>
-        <p>Oops! Looks like this is just ...</p>
-        <p>Looks like this is just a ...</p>
-        <p>like this is just a layout ...</p>
-        <p>Oops! is just a layout test...</p>
-        <p>Oops! Looks just a layout test...</p>
-        <p>Oops! Looks like a layout test...</p>
-        <p>Oops! Looks like this layout test...</p>
-        <p>Oops! Looks like this is test...</p>
-        <p>Huh, I guess there's still nothing here... perhaps a modal from will do...</p>
+        <article class="HomepageInfo">
+            <p>Welcome to the InsaniModding website! It's not a forum like Insaniquarium Guide was, and it's not editable freely like Fandom is.</p>
+            <p>But it's much nicer to look at than Fandom (no ads here!), and aims to gives a little bit more info on mods and modding tools.</p>
+        </article>
+        
     </main>
 
     <!-- Novelty Hidden Fish -->
@@ -58,8 +45,11 @@ <h2>Home</h2>
         <img width="43px" src="images/misc/fish.png">
     </article>
 
+    <!-- Modal Form -->
+    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc8XJOoe0FrswOJZcIM07lIRz6WzfzBfzmEwb_o4NiD5BZheQ/viewform?embedded=true" width="640" height="928" frameborder="0" marginheight="0" marginwidth="0" id="ModalForm">Loading…</iframe>
+
     <footer>
-        <p>Copyright Text (credit PopCap, EA, etc.)</p>
+        <button id="ModalFormReveal">Feedback</button>
     </footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index be0c545..f489eb5 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,5 +1,20 @@
 // Ensure no code is executed before the page is loaded
 $(function() {
+    // The following chunk of code is for hiding and unhiding the Modal Form
+    $("#ModalForm").hide();
+    $("#ModalFormReveal").click(function(){
+        // If the Modal Form is hidden, show it and change #ModalFormReveal's text to "Back"
+        if ($("#ModalForm").is(":hidden")) {
+            $("#ModalForm").show();
+            $("#ModalFormReveal").html("Back");
+        }
+        // Otherwise, hide the Modal Form and change #ModalFormReveal's text back to "Feedback"
+        else {
+            $("#ModalForm").hide();
+            $("#ModalFormReveal").html("Feedback");
+        }
+    });
+
     // The following code is for every article that has the ID associated with a mod or tools hosted on the site. This is done to make reordering
     // (if done for whatever reason) much easier to do in the future
     // mods.html
diff --git a/mods.html b/mods.html
index 8fd8cb8..07fe245 100644
--- a/mods.html
+++ b/mods.html
@@ -59,8 +59,11 @@ <h3 class="Name"></h3>
         <img width="43px" src="images/misc/fish.png">
     </article>
 
+    <!-- Modal Form -->
+    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc8XJOoe0FrswOJZcIM07lIRz6WzfzBfzmEwb_o4NiD5BZheQ/viewform?embedded=true" width="640" height="928" frameborder="0" marginheight="0" marginwidth="0" id="ModalForm">Loading…</iframe>
+
     <footer>
-        <p>Copyright Text (credit PopCap, EA, etc.)</p>
+        <button id="ModalFormReveal">Feedback</button>
     </footer>
 </body>
 </html>
diff --git a/tools.html b/tools.html
index 828f92b..3e70e77 100644
--- a/tools.html
+++ b/tools.html
@@ -94,8 +94,11 @@ <h3 class="Name"></h3>
         <img width="43px" src="images/misc/fish.png">
     </article>
 
+    <!-- Modal Form -->
+    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc8XJOoe0FrswOJZcIM07lIRz6WzfzBfzmEwb_o4NiD5BZheQ/viewform?embedded=true" width="640" height="928" frameborder="0" marginheight="0" marginwidth="0" id="ModalForm">Loading…</iframe>
+
     <footer>
-        <p>Copyright Text (credit PopCap, EA, etc.)</p>
+        <button id="ModalFormReveal">Feedback</button>
     </footer>
 </body>
 </html>
\ No newline at end of file