v0.1.1

Finally added a modal form!
703337 · Apr 10, 2024 · c7f80f0 · c7f80f0
1 parent 6b375ec
commit c7f80f0
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 21 deletions.
diff --git 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
@@ -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
@@ -33,33 +33,23 @@ <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 -->
     <article id="NoveltyHiddenFish">
         <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/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
@@ -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
@@ -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>