From e6196418d44c0dcc7a14fd139cdde4d480ed1033 Mon Sep 17 00:00:00 2001
From: genki_angel <genki@banii.cafe>
Date: Tue, 15 Apr 2025 01:42:04 +0100
Subject: [PATCH] added pets page

---
 src/components/pet.vue |  87 +++++++++++++++++++++++++++++++++
 src/views/PetsView.vue | 108 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 193 insertions(+), 2 deletions(-)
 create mode 100644 src/components/pet.vue

diff --git a/src/components/pet.vue b/src/components/pet.vue
new file mode 100644
index 0000000..c04aeef
--- /dev/null
+++ b/src/components/pet.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="pet">
+        <div>
+            <h3>{{ props.name }}</h3>
+            <img class="info" :src="getPetUrl()">
+        </div>
+        <slot></slot>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    name: String,
+    image: String,
+    desc: String
+})
+
+function getPetUrl() {
+    return new URL(`../assets/images/pets/${props.image}.webp`, import.meta.url).href
+}
+</script>
+<style scoped>
+.pet {
+    border: 2px dotted rgba(222, 222, 108, 1);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    background-color: black;
+    box-sizing: border-box;
+
+    padding: .5em;
+
+    justify-content: flex-start;
+
+    div {
+        display: flex;
+        flex-direction: column;
+
+        justify-content: center;
+        align-items: center;
+
+        width: fit-content;
+    }
+
+    /* @media screen and (max-width: 1250px) {
+        div {
+            width: 100%;
+        }
+    } */
+}
+
+.small {
+    width: fit-content;
+}
+
+h3 {
+    margin: 0;
+}
+
+p {
+    margin: 0;
+}
+
+img {
+    width: 256px;
+    height: 256px;
+    margin: .5em;
+
+    border: 2px solid;
+}
+
+@media screen and (max-width: 800px) {
+    .pet {
+        flex-direction: column;
+    }
+    h3 {
+        font-size: 22px;
+        text-align: center;
+    }
+}
+@media screen and (max-width: 500px) {
+    img {
+        width: 128px;
+        height: 128px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/PetsView.vue b/src/views/PetsView.vue
index 0bf0604..ed124fd 100644
--- a/src/views/PetsView.vue
+++ b/src/views/PetsView.vue
@@ -1,8 +1,112 @@
 <template>
-    <Underconstruction />
+    <!-- <Underconstruction /> -->
+    <div id="pets">
+        <h1>MY CREATURES</h1>
+        <p
+            style="background-color: black; border: 2px dashed rgba(222, 222, 108, 1); padding: 1em; text-align: center;">
+            below are the
+            creatures I currently have in my possession<br>they are mostly <span class="highlight">bugs</span> so you
+            have been <span class="warning">warned!!!</span></p>
+        <h2>CATS</h2>
+        <pet :name="'JESSIE'" :image="'cat1'">
+            <p><span class="warning">very silly kitty</span>, loves to climb everywhere and scratch everything <br> her
+                favourite food is <span class="info">tuna</span></p>
+        </pet>
+        <h2>TARANTULAS</h2>
+        <pet :name="'FANGER'" :image="'tarantula1'">
+            <div>
+                <h4 class="highlight">Texas Tan</h4>
+                <p>my first tarantula! i have no idea if they're a boy or girl but i will update once i find out
+                    x3<br>they like to hide a lot so i dont get to see them much except for feeding</p>
+            </div>
+        </pet>
+        <pet :name="'???'" :image="'tarantula2'">
+            <div>
+                <h4 class="highlight">Orange baboon</h4>
+                <p>gotten shortly after fanger, i still have no idea what gender it is either...<br>this guy also likes
+                    to hide but makes a lot of webbing!</p>
+            </div>
+        </pet>
+        <pet :name="'???'" :image="'tarantula3'">
+            <div>
+                <h4 class="highlight">Venezuelan Suntiger</h4>
+                <p>currently my biggest tarantula!<br>they have not been here for long, but they love to climb around in
+                    their enclosure and hide behind their wall<br><span class="info">picture coming soon!</span></p>
+            </div>
+        </pet>
+        <h2>ISOPODS</h2>
+        <div class="flexwrap">
+            <pet class="small" :name="'UK Native Mix'" :image="'pod1'" />
+            <pet class="small" :name="'Dairy Cows'" :image="'pod2'" />
+            <pet class="small" :name="'Dwarf Whites'" :image="'pod3'" />
+            <pet class="small" :name="'Lava'" :image="'pod4'" />
+            <pet class="small" :name="'Powder Orange'" :image="'pod5'" />
+            <pet class="small" :name="'Granulated'" :image="'pod6'" />
+        </div>
+        <br>
+        <h2>MORE BUGS COMING SOON...</h2>
+        <br>
+    </div>
 </template>
 <script setup lang="ts">
 import Underconstruction from '@/components/underconstruction.vue';
+import pet from '@/components/pet.vue';
 
 </script>
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+h1 {
+    margin: 0;
+    margin-top: 1em;
+    text-align: center;
+}
+
+h2 {
+    text-align: center;
+    text-decoration: underline;
+    margin-bottom: 0;
+}
+
+h4 {
+    margin-bottom: 0;
+}
+
+p {
+    text-align: left;
+    font-size: 24px;
+}
+
+@media screen and (max-width: 800px) {
+    h1, h2, h4 {
+        font-size: 32px;
+        margin: 0;
+    }
+
+    h4 {
+    text-align: center;
+    margin-top: 0;
+}
+    p {
+        text-align: center;
+        font-size: 20px;
+    }
+}
+
+#pets {
+    display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+
+
+}
+
+.flexwrap {
+    display: flex;
+    flex-wrap: wrap;
+
+    justify-content: center;
+    gap: 1em;
+}
+</style>
\ No newline at end of file