changed comics

RJStudios · Sep 30, 2024 · d9150ae · d9150ae
1 parent b3140b5
commit d9150ae
Show file tree

Hide file tree

Showing 26 changed files with 158 additions and 29 deletions.
diff --git a/comics/B1.png b/comics/B1.png
diff --git a/comics/B2.png b/comics/B2.png
diff --git a/comics/B3.png b/comics/B3.png
diff --git a/comics/B4.png b/comics/B4.png
diff --git a/comics/B5.png b/comics/B5.png
diff --git a/comics/B6-1.png b/comics/B6-1.png
diff --git a/comics/B6-2.png b/comics/B6-2.png
diff --git a/comics/fearwords1.png b/comics/fearwords1.png
diff --git a/comics/fearwords2.png b/comics/fearwords2.png
diff --git a/comics/mcnews1.png b/comics/mcnews1.png
diff --git a/comics/mcnews2.png b/comics/mcnews2.png
diff --git a/comics/newmember.png b/comics/newmember.png
diff --git a/comics/oppositeday.png b/comics/oppositeday.png
diff --git a/comics/pablobomb.png b/comics/pablobomb.png
diff --git a/comics/pablospecies.png b/comics/pablospecies.png
diff --git a/comics/pet1.png b/comics/pet1.png
diff --git a/comics/pet2.png b/comics/pet2.png
diff --git a/comics/pet3.png b/comics/pet3.png
diff --git a/comics/pizza1.png b/comics/pizza1.png
diff --git a/comics/pizza2.png b/comics/pizza2.png
diff --git a/comics/playground.png b/comics/playground.png
diff --git a/comics/secretpackage1.png b/comics/secretpackage1.png
diff --git a/comics/secretpackage2.png b/comics/secretpackage2.png
diff --git a/comics/whitevoid.png b/comics/whitevoid.png
diff --git a/index.html b/index.html
@@ -86,47 +86,47 @@ <h1>Comics</h1>
                 Click on a comic to open it full-screen. Hover over it to show its title. <br>
                 If you see comics covered in outlines, the comics are connected / is a comic with multiple pages</p>
                 <div id="images" class="items">
-                    <a href="/comicsfull/pablobomb.png" target="_blank" title="Pablo and the B O M B"><img src="comics/pablobomb.png"></a>
-                    <a href="/comicsfull/pablospecies.png" target="_blank" title="Pablo's Species"><img src="comics/pablospecies.png"></a> <br>
+                    <img src="comics/pablobomb.png" onclick="document.getElementById('1').showModal()" title="Pablo and The BOMB">
+                    <img src="comics/pablospecies.png" onclick="document.getElementById('2').showModal()" title="Pablo and The BOMB"> <br>
                     <span class="combo">
                         <p>At the Pizza Place</p>
-                        <a href="/comicsfull/pizza1.png" target="_blank" title="At the Pizza Place"><img src="comics/pizza1.png"></a>
-                        <a href="/comicsfull/pizza2.png" target="_blank" title="At the Pizza Place"><img src="comics/pizza2.png"></a>
+                        <img src="comics/pizza1.png" onclick="document.getElementById('3').showModal()" title="Pablo and The BOMB">
+                        <img src="comics/pizza2.png" onclick="document.getElementById('4').showModal()" title="Pablo and The BOMB">
                     </span><br>
                     <span class="combo">
                         <p>Pablo's Fear of Long Words</p>
-                        <a href="/comicsfull/fearwords1.png" target="_blank" title="Pablo's Fear of Long Words"><img src="comics/fearwords1.png"></a>
-                        <a href="/comicsfull/fearwords2.png" target="_blank" title="Pablo's Fear of Long Words"><img src="comics/fearwords2.png"></a>
+                        <img src="comics/fearwords1.png" onclick="document.getElementById('5').showModal()" title="Pablo and The BOMB">
+                        <img src="comics/fearwords2.png" onclick="document.getElementById('6').showModal()" title="Pablo and The BOMB">
                     </span>
                     <span class="combo">
                         <p>The Pet - Three part Comic</p>
-                        <a href="/comicsfull/pet1.png" target="_blank" title="Pablo's Phone Obsession"><img src="comics/pet1.png"></a>
-                        <a href="/comicsfull/pet2.png" target="_blank" title="Michael's Pet"><img src="comics/pet2.png"></a>
-                        <a href="/comicsfull/pet3.png" target="_blank" title="About FireFox"><img src="comics/pet3.png"></a>
+                        <img src="comics/pet1.png" onclick="document.getElementById('7').showModal()" title="Pablo's Phone Obsession">
+                        <img src="comics/pet2.png" onclick="document.getElementById('8').showModal()" title="Michael's pet">
+                        <img src="comics/pet3.png" onclick="document.getElementById('9').showModal()" title="About FireFox">
                     </span> <br>
-                    <a href="/comicsfull/playground.png" target="_blank" title="At The Playground"><img src="comics/playground.png"></a>
-                    <a href="/comicsfull/whitevoid.png" target="_blank" title="The White Void"><img src="comics/whitevoid.png"></a>
+                    <img src="comics/playground.png" onclick="document.getElementById('10').showModal()" title="At the Playground">
+                    <img src="comics/whitevoid.png" onclick="document.getElementById('11').showModal()" title="The White Void">
                     <span class="combo">
                         <p>The Button Series (continuation of "The White Void")</p>
-                        <a href="/comicsfull/B1.png" target="_blank" title="The Button - 1"><img src="comics/B1.png"></a>
-                        <a href="/comicsfull/B2.png" target="_blank" title="The Button - 2"><img src="comics/B2.png"></a>
-                        <a href="/comicsfull/B3.png" target="_blank" title="The Button - 3"><img src="comics/B3.png"></a>
-                        <a href="/comicsfull/B4.png" target="_blank" title="The Button - 4"><img src="comics/B4.png"></a>
-                        <a href="/comicsfull/B5.png" target="_blank" title="The Button - 5"><img src="comics/B5.png"></a>
-                        <a href="/comicsfull/B6-1.png" target="_blank" title="The Button - 6 - part 1"><img src="comics/B6-1.png"></a>
-                        <a href="/comicsfull/B6-2.png" target="_blank" title="The Button - 6 - part 2"><img src="comics/B6-2.png"></a>
+                        <img src="comics/B1.png" onclick="document.getElementById('12').showModal()" title="The Button - 1">
+                        <img src="comics/B2.png" onclick="document.getElementById('13').showModal()" title="The Button - 2">
+                        <img src="comics/B3.png" onclick="document.getElementById('14').showModal()" title="The Button - 3">
+                        <img src="comics/B4.png" onclick="document.getElementById('15').showModal()" title="The Button - 4">
+                        <img src="comics/B5.png" onclick="document.getElementById('16').showModal()" title="The Button - 5">
+                        <img src="comics/B6-1.png" onclick="document.getElementById('17').showModal()" title="The Button - 6 part 1">
+                        <img src="comics/B6-2.png" onclick="document.getElementById('18').showModal()" title="The Button - 6 part 2">
                     </span> <br>
                     <span class="combo">
                         <p>The Secret Package</p>
-                        <a href="/comicsfull/secretpackage1.png" target="_blank" title="The Secret Package"><img src="comics/secretpackage1.png"></a>
-                        <a href="/comicsfull/secretpackage2.png" target="_blank" title="The Secret Package"><img src="comics/secretpackage2.png"></a>
+                        <img src="comics/secretpackage1.png" onclick="document.getElementById('19').showModal()" title="The Secret Package">
+                        <img src="comics/secretpackage2.png" onclick="document.getElementById('20').showModal()" title="The Secret Package">
                     </span> <br>
-                        <a href="/comicsfull/oppositeday.png" target="_blank" title="Opposite Day"><img src="comics/oppositeday.png"></a>
-                        <a href="/comicsfull/newmember.png" target="_blank" title="New Member (New Character - Jenny)"><img src="comics/newmember.png"></a>
+                        <img src="comics/oppositeday.png" onclick="document.getElementById('21').showModal()" title="Opposite day">
+                        <img src="comics/newmember.png" onclick="document.getElementById('22').showModal()" title="New Member (Introducing Jenny)">
                     <span class="combo">
                         <p>Minecraft News</p>
-                        <a href="/comicsfull/mcnews1.png" target="_blank" title="Minecraft News"><img src="comics/mcnews1.png"></a>
-                        <a href="/comicsfull/mcnews2.png" target="_blank" title="Minecraft News"><img src="comics/mcnews2.png"></a>
+                        <img src="comics/mcnews1.png" onclick="document.getElementById('23').showModal()" title="Minecraft News (Introducing News Guy (yes that is his full real name...) )">
+                        <img src="comics/mcnews2.png" onclick="document.getElementById('24').showModal()" title="Minecraft News">
                     </span>
                     </div>
             </div>
@@ -177,6 +177,110 @@ <h3>Minecraft Live 2024</h3>
     </div>
 
     </div>
+
+
+    <!-- Dialogs for comics -->
+    <dialog id="1">
+        <button onclick="document.getElementById('1').close()">X</button>
+        <img src="comicsfull/pablobomb.png" width="550px">
+    </dialog>
+    <dialog id="2">
+        <button onclick="document.getElementById('2').close()">X</button>
+        <img src="comicsfull/pablospecies.png" width="800px">
+    </dialog>
+    <dialog id="3">
+        <button onclick="document.getElementById('3').close()">X</button>
+        <img src="comicsfull/pizza1.png" width="640px">
+    </dialog>
+    <dialog id="4">
+        <button onclick="document.getElementById('4').close()">X</button>
+        <img src="comicsfull/pizza2.png" width="575px">
+    </dialog>
+    <dialog id="5">
+        <button onclick="document.getElementById('5').close()">X</button>
+        <img src="comicsfull/fearwords1.png" width="575px">
+    </dialog>
+    <dialog id="6">
+        <button onclick="document.getElementById('6').close()">X</button>
+        <img src="comicsfull/fearwords2.png" width="575px">
+    </dialog>
+    <dialog id="7">
+        <button onclick="document.getElementById('7').close()">X</button>
+        <img src="comicsfull/pet1.png" width="800px">
+    </dialog>
+    <dialog id="8">
+        <button onclick="document.getElementById('8').close()">X</button>
+        <img src="comicsfull/pet2.png" width="800px">
+    </dialog>
+    <dialog id="9">
+        <button onclick="document.getElementById('9').close()">X</button>
+        <img src="comicsfull/pet3.png" width="800px">
+    </dialog>
+    <dialog id="10">
+        <button onclick="document.getElementById('10').close()">X</button>
+        <img src="comicsfull/playground.png" width="800px">
+    </dialog>
+    <dialog id="11">
+        <button onclick="document.getElementById('11').close()">X</button>
+        <img src="comicsfull/whitevoid.png" width="800px">
+    </dialog>
+    <dialog id="12">
+        <button onclick="document.getElementById('12').close()">X</button>
+        <img src="comicsfull/B1.png" width="800px">
+    </dialog>
+    <dialog id="13">
+        <button onclick="document.getElementById('13').close()">X</button>
+        <img src="comicsfull/B2.png" width="800px">
+    </dialog>
+    <dialog id="14">
+        <button onclick="document.getElementById('14').close()">X</button>
+        <img src="comicsfull/B3.png" width="800px">
+    </dialog>
+    <dialog id="15">
+        <button onclick="document.getElementById('15').close()">X</button>
+        <img src="comicsfull/B4.png" width="800px">
+    </dialog>
+    <dialog id="16">
+        <button onclick="document.getElementById('16').close()">X</button>
+        <img src="comicsfull/B5.png" width="800px">
+    </dialog>
+    <dialog id="17">
+        <button onclick="document.getElementById('17').close()">X</button>
+        <img src="comicsfull/B6-1.png" width="800px">
+    </dialog>
+    <dialog id="18">
+        <button onclick="document.getElementById('18').close()">X</button>
+        <img src="comicsfull/B6-2.png" width="800px">
+    </dialog>
+    <dialog id="19">
+        <button onclick="document.getElementById('19').close()">X</button>
+        <img src="comicsfull/secretpackage1.png" width="800px">
+    </dialog>
+    <dialog id="20">
+        <button onclick="document.getElementById('20').close()">X</button>
+        <img src="comicsfull/secretpackage2.png" width="800px">
+    </dialog>
+    <dialog id="21">
+        <button onclick="document.getElementById('21').close()">X</button>
+        <img src="comicsfull/oppositeday.png" width="800px">
+    </dialog>
+    <dialog id="22">
+        <button onclick="document.getElementById('22').close()">X</button>
+        <img src="comicsfull/newmember.png" width="800px">
+    </dialog>
+    <dialog id="23">
+        <button onclick="document.getElementById('23').close()">X</button>
+        <img src="comicsfull/mcnews1.png" width="800px">
+    </dialog>
+    <dialog id="24">
+        <button onclick="document.getElementById('24').close()">X</button>
+        <img src="comicsfull/mcnews2.png" width="800px"> 
+    </dialog>
+
+
+
+
+    <!-- End of Dialogs for comics-->
     <script>
         function showContent(sectionId) {
             const contents = document.querySelectorAll('.content');

diff --git a/style.css b/style.css
@@ -1,6 +1,7 @@
 :root {
     --primary-color: #735588;
     --secondary-color: #c72fa6;
+    --secondary-color-hover: #aa1e8c;
     --bg-color: rgba(0, 0, 0, 0.8);
     --text-color: #ffffff;
     --card-bg: rgba(255, 255, 255, 0.1);
@@ -145,7 +146,33 @@ button.asearch:hover {
 
 /* yes, if u ask, after i make a website, i always put the NEW css for other things that werent in the 1st ver on the side. idk why */
 
-
+dialog {
+    background-color: #00000000;
+    border-style: hidden;
+    button {
+        border-radius: 100px;
+        padding: 10px 15px;
+        margin-left: 15px;
+        font-size: large;
+        float: inline-end;
+        border-style: none;
+        background-color: var(--secondary-color);
+        color: var(--text-color);
+        cursor: pointer;
+        transition: .3s;
+    }
+    button:hover {
+        border-radius: 100px;
+        padding: 10px 15px;
+        margin-left: 15px;
+        font-size: large;
+        float: inline-end;
+        border-style: none;
+        background-color: var(--secondary-color-hover);
+        color: var(--text-color);
+        transform: scale(1.3);
+    }
+}
 a {
     color: var(--secondary-color);
 }
@@ -207,11 +234,10 @@ h1 a:hover{
 }
 div.items {
     overflow-y: auto;
-    border: 3px solid rgba(255, 255, 255, 0.5);
-    border-radius: 13px;
     padding: 10px;
     height: 50vh;
-    min-width: 10vh;
+    min-width:fit-content;
+    flex-wrap: wrap;
 }
 .repo-item {
     background-color: rgba(255, 255, 255, 0.1);
@@ -431,5 +457,4 @@ div#images#items {
     background: #493f50;
     border-radius: 25px; 
     width: 3px;
-    cursor: row-resize;
 }