index.html (4664B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>CAT</title> 8 <link rel="stylesheet" href="/inter.css"> 9 <link rel="stylesheet" href="/new.css"> 10 <link rel="icon" type="image/x-icon" href="/images/win95.png"> 11 <link rel="apple-touch-icon" href="/images/win95.png"> 12 <style> 13 .blue-box { 14 background-color: #007BFF; 15 padding: 20px; 16 display: flex; 17 flex-direction: column; 18 justify-content: center; 19 align-items: center; 20 position: relative; 21 border-radius: 8px; 22 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 23 margin: 20px 0; 24 } 25 26 .red-button { 27 background-color: #FF6347; 28 border: none; 29 padding: 10px 20px; 30 color: white; 31 border-radius: 8px; 32 cursor: pointer; 33 margin-top: 20px; 34 transition: background-color 0.3s; 35 } 36 37 .red-button:hover { 38 background-color: #FF4500; 39 } 40 41 .cat-image-frame { 42 width: 80%; 43 max-width: 300px; 44 border: 3px solid #f4f4f4; 45 border-radius: 12px; 46 overflow: hidden; 47 } 48 49 .cat-image-frame img { 50 width: 100%; 51 height: 100%; 52 object-fit: cover; 53 } 54 55 /* Dark Mode Styles */ 56 @media (prefers-color-scheme: dark) { 57 body { 58 background-color: #121212; 59 color: #FFFFFF; 60 } 61 62 header { 63 background-color: #1f1f1f; 64 color: #FFFFFF; 65 } 66 67 nav a { 68 color: #BBDEFB; 69 } 70 71 nav a:hover { 72 color: #90CAF9; 73 } 74 75 .blue-box { 76 background-color: #0057C0; 77 box-shadow: 0 5px 10px rgba(255, 255, 255, 0.1); 78 } 79 80 .cat-image-frame { 81 border-color: #333; 82 } 83 84 footer { 85 background-color: #1f1f1f; 86 color: #FFFFFF; 87 } 88 89 footer a { 90 color: #BBDEFB; 91 } 92 93 footer a:hover { 94 color: #90CAF9; 95 } 96 } 97 </style> 98 </head> 99 100 <body> 101 <header> 102 <h1>CAT</h1> 103 <nav> 104 <a href="/">Home</a> / 105 <a href="../projects.html">Purrjects</a> / 106 <a href="../blog.html">Catablog</a> / 107 <a href="../resume.pdf">Resumeow</a> / 108 <a href="../contact.html">Contact Meow</a> 109 </nav> 110 </header> 111 112 <main> 113 <div class="blue-box"> 114 <div class="cat-image-frame"> 115 <!-- Empty spot for the image --> 116 </div> 117 <button class="red-button" onclick="displayRandomCat()">CAT</button> 118 </div> 119 </main> 120 121 <footer> 122 <p>© Copyright 2024. Made with <a href="https://newcss.net/">love and NewCSS</a> by Reagan Fischer. Cat 123 images sourced from <a href="https://www.kaggle.com/datasets/crawford/cat-dataset">this Kaggle Dataset</a> 124 </p> 125 </footer> 126 127 <script> 128 function displayRandomCat() { 129 const randomNum = Math.floor(Math.random() * 9937); // Generate random number between 0 and 9936 130 const catImgSrc = `images/cat${randomNum}.jpg`; 131 const imageFrame = document.querySelector(".cat-image-frame"); 132 133 // Check if there's already an image and replace it, or create a new one 134 let img = imageFrame.querySelector("img"); 135 if (img) { 136 img.src = catImgSrc; 137 } else { 138 img = document.createElement("img"); 139 img.src = catImgSrc; 140 imageFrame.appendChild(img); 141 } 142 } 143 displayRandomCat(); 144 </script> 145 <script defer> 146 var _paq = window._paq = window._paq || []; 147 /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ 148 _paq.push(['trackPageView']); 149 _paq.push(['enableLinkTracking']); 150 (function () { 151 var u = "//matomo.thespringstechguy.com/"; 152 _paq.push(['setTrackerUrl', u + 'matomo.php']); 153 _paq.push(['setSiteId', '1']); 154 var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; 155 g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); 156 })(); 157 </script> 158 </body> 159 160 </html>