Almost finished implementing guestbook; More consistency in cards

3 files changed, 43 insertions, 67 deletions

diff --git a/src/pages/downloads/osft-software-archive.astro b/src/pages/downloads/osft-software-archive.astro
index 2074910..c106cef 100644
--- a/src/pages/downloads/osft-software-archive.astro
+++ b/src/pages/downloads/osft-software-archive.astro
@@ -1,20 +1,21 @@
 ---
 import Page from "../../layouts/Page.astro";
+import '../../styles/cards.css';
 ---
 <Page title="Philip Adams Software Archive" description="The ultimate software collection of Philip Adams' software.">
     <main>
         <div class="content-warning">
-            <h1>Content Warning</h1>
+            <h2>Content Warning</h2>
             <p>Some of the software in this pack contains a jumpscare. If you have epilepsy, please be cautious.</p>
             <p>Disable your antivirus as it can detect false positive, feel free to use a VM in case this feels not safe.</p>
         </div>
-        <div class="box note">
-            <h1>Note</h1>
+        <div class="card note">
+            <h2>Note</h2>
             <p>There was a mention back in the AstralPhaser Chats that the Histacom 1.8.5 (2013) copy in IndieDB is not the original copy from Phil.</p>
             <p>I have retrieved the original 2010 copy from Phil himself which has the original compile date of July 5th 2010, and I will be keeping both versions for the time being.</p>
         </div>
-        <h1>Minimal Requirements</h1>
-        <div class="box requirements">
+        <div class="card requirements">
+            <h2>Minimal Requirements</h2>
             <ul>
                 <li>OS: Windows XP SP3/Vista SP2 (Depends on each program)</li>
                 <li>CPU: Intel/AMD x86 or x64 1 GHz Processor</li>
@@ -23,8 +24,8 @@ import Page from "../../layouts/Page.astro";
                 <li>Frameworks: Adobe Flash Player, .NET Framework 3.5, 4.0 and/or 4.5</li>
             </ul>
         </div>
-        <h1>Programs</h1>
-        <div class="box programs">
+        <div class="card programs">
+            <h2>Programs</h2>
             <ul>
                 <li>Amazing Maze (Requires Flash Player)</li>
                 <li>Artpad (from ShiftOS)</li>
@@ -82,9 +83,10 @@ import Page from "../../layouts/Page.astro";
         padding: 1.2em;
         border-radius: 20px;
         gap: 0.5em;
+        margin: 0.5em;
     }
 
-    .content-warning h1 {
+    .content-warning h2 {
         margin-top: 0.2em;
     }
 
@@ -96,13 +98,6 @@ import Page from "../../layouts/Page.astro";
         margin-top: 0.2em;
     }
 
-    .box {
-        background-color: #3B513B;
-        padding: 1.2em;
-        border-radius: 20px;
-        gap: 0.5em;
-    }
-
     a {
         font-size: 1.5em;
     }
diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
index 0aebd9c..3ea4c28 100644
--- a/src/pages/guestbook.astro
+++ b/src/pages/guestbook.astro
@@ -1,44 +1,21 @@
 ---
 import Page from '../layouts/Page.astro'
 import "../styles/cards.css";
+import GuestbookForm from '../components/GuestbookForm'
+import Guestbook from '../components/Guestbook'
 ---
 <Page title="Guestbook" description="Use this page to send me a message">
     <main>
-        <form class="card">
-            <h2>Submit Message</h2>
-            <label>
-                Name<br>
-                <input type="text" name="name" placeholder="Name" required />
-            </label>
-            <br>
-            <label>
-                Email Address<br>
-                <input type="email" name="email" placeholder="Email Address (Optional)" />
-            </label>
-            <br>
-            <label>
-                Your Website<br>
-                <input type="url" name="link" placeholder="https://example.com" required />
-            </label>
-            <br>
-            <label>
-                Message<br>
-                <textarea name="message" placeholder="Message" required></textarea>
-            </label>
-            <button type="submit">Send</button>
-        </form>
+        <div class="card">
+            <h2>Welcome to my Guestbook!</h2>
+            <p>Feel free to send a nice message here!</p>
+        </div>
+        <GuestbookForm client:visible />
         <div class="grid">
-            <article class="card">
-                <h1>John Doe</h1>
-                <small>January 1, 2024</small>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Nam id orci non diam bibendum euismod quis sit amet purus.
-                    Fusce fermentum facilisis placerat. Mauris varius ante elit, et
-                    luctus enim blandit sit amet.
-                    Pellentesque ullamcorper dapibus suscipit.
-                </p>
-                <a href="https://google.com">Website</a>
-            </article>
+            <Guestbook client:visible />
         </div>
     </main>
 </Page>
+<script>
+
+</script>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 37cec1a..33452c8 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -4,24 +4,28 @@ import projects from "../data/projects.json";
 import "../styles/cards.css";
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">
-    <main class="grid">
-        {
-            projects.map((project) => {
-                return (
-                        <article class="card">
-                            <h1>{project.name}</h1>
-                            <p>{project.description}</p>
-                            <div class="row">
-                                {project.links.map((link) => {
-                                    return (
-                                            <a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a>
-                                    )
-                                })}
-                            </div>
-                        </article>
-                )
-            })
-        }
+    <main>
+        <div class="grid">
+            {
+                projects.map((project) => {
+                    return (
+                            <article class="card">
+                                <h1>{project.name}</h1>
+                                <p>{project.description}</p>
+                                <div class="row">
+                                    {project.links.map((link) => {
+                                        return (
+                                                <a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a>
+                                        )
+                                    })}
+                                </div>
+                            </article>
+                    )
+                })
+            }
+        </div>
+        <h2>Archived Repositories</h2>
+        <p><a href="https://github.com/alee14-projects" target="_blank">Alee Productions/AleeCorp Software</a></p>
     </main>
 </Page>
 <style>