madebydanny.uk written in html, css, and a lot of JavaScript I don't understand madebydanny.uk
html css javascript
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

added footer

+130 -60
+4
404.html
··· 23 23 font-family: 'Inter', sans-serif; 24 24 } 25 25 </style> 26 + <!-- Footer Custom Element Script --> 27 + <script src="/script/footer.js"></script> 26 28 </head> 27 29 <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 28 30 ··· 82 84 // Set the current year for the copyright notice 83 85 document.getElementById('currentYear').textContent = new Date().getFullYear(); 84 86 </script> 87 + </div> 88 + <app-info></app-info> 85 89 </body> 86 90 </html>
+11 -10
index.html
··· 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 - <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 + <meta name="viewport" content="width", initial-scale="1.0"> 6 6 <title>Daniel Morrisey</title> 7 7 <meta name="description" content="Writer @ MBD News & HTML, CSS, Javascript & Python developer"> 8 8 ··· 37 37 38 38 <!-- Font Awesome CDN --> 39 39 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 40 + 41 + <!-- Footer--> 42 + <script src="/script/footer.js"></script> 40 43 41 44 <style> 42 45 body { ··· 144 147 </a> 145 148 </div> 146 149 </section> 147 - 150 + 148 151 <hr class="border-gray-200 my-8"> 149 152 150 153 <!-- RSS Feed(s)--> ··· 157 160 158 161 <!-- RSS Feed(s)--> 159 162 <section> 160 - <h2 class="text-2xl font-bold text-gray-900 mb-4">Text Bites <i class="fa-solid fa-book text-lg"></i></h2> 163 + <h2 class="text-2xl font-bold text-gray-900 mb-4">Text Bites <i class="fa-solid fa-arrow-trend-up"></i></h2> 161 164 <div class="articles" id="textbites"></div> 162 165 </section> 163 166 164 - <!-- Footer --> 165 167 <footer class="mt-12 pt-4 text-center text-gray-500 border-t border-gray-200"> 166 - <div class="flex justify-center space-x-6 mb-4 text-lg"> 167 - <a href="javascript:history.back()" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-arrow-left"></i> Back</a> 168 - <a href="/index.html" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-house"></i> Home</a> 169 - </div> 170 168 <!-- Centered Iframe --> 171 169 <div class="flex justify-center mt-8"> 172 - <iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe> 170 + <iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no"></iframe> 173 171 </div> 174 172 <p> 175 173 &copy; 2024-<span id="currentYear"></span> 176 - <a href="https://madebydanny.uk" class="hover:text-indigo-600 transition duration-300 font-medium">Made by Danny UK</a> 174 + <a href="https://madebydanny.uk" target="blank_" class="hover:text-indigo-600 transition duration-300 font-medium">Made by Danny UK</a> 177 175 </p> 178 176 <p class="text-sm mt-1"> 179 177 by Daniel Morrisey 178 + </p> 179 + <p> 180 + MBD is made possible thanks to <a href="https://cloudflare.com" target="blank_">Cloudflare</a> & <a href="https://cloudinary.com" traget="blank_">Cloudinary</a> 180 181 </p> 181 182 </footer> 182 183
+7 -1
projects/index.html
··· 31 31 32 32 <!-- Font Awesome CDN --> 33 33 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 34 - 34 + 35 + <!-- Footer--> 36 + <script src="/script/footer.js"></script> 35 37 <style> 36 38 body { 37 39 font-family: 'Inter', sans-serif; 38 40 } 39 41 </style> 42 + <!-- Footer Custom Element Script --> 43 + <script src="/script/footer.js"></script> 40 44 </head> 41 45 <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 42 46 ··· 181 185 }); 182 186 }); 183 187 </script> 188 + </div> 189 + <app-info></app-info> 184 190 </body> 185 191 </html>
+5
projects/space-shooter/index.html
··· 18 18 <link rel="me" href="https://mastodon.social/@danielmorrisey"/> 19 19 <link rel="icon" type="image/x-icon" href="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg"> 20 20 <script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script> 21 + 21 22 <script src="https://cdn.tailwindcss.com"></script> 23 + <!-- Footer Custom Element Script --> 24 + <script src="/script/footer.js"></script> 22 25 23 26 </head> 24 27 <body> ··· 66 69 </div> 67 70 </div> 68 71 <script src="/script/main.js"></script> 72 + </div> 73 + <app-info></app-info> 69 74 </body> 70 75 </html>
+4
projects/space-shooter/macos.html
··· 31 31 font-family: 'Inter', sans-serif; 32 32 } 33 33 </style> 34 + <!-- Footer Custom Element Script --> 35 + <script src="/script/footer.js"></script> 34 36 </head> 35 37 <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 36 38 ··· 145 147 // Set the current year for the copyright notice 146 148 document.getElementById('currentYear').textContent = new Date().getFullYear(); 147 149 </script> 150 + </div> 151 + <app-info></app-info> 148 152 </body> 149 153 </html>
+5
projects/space-shooter/windows.html
··· 18 18 <link rel="me" href="https://mastodon.social/@danielmorrisey"/> 19 19 <link rel="icon" type="image/x-icon" href="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg"> 20 20 <script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script> 21 + 21 22 <script src="https://cdn.tailwindcss.com"></script> 23 + <!-- Footer Custom Element Script --> 24 + <script src="/script/footer.js"></script> 22 25 23 26 </head> 24 27 <body> ··· 65 68 </div> 66 69 </div> 67 70 <script src="/script/main.js"></script> 71 + </div> 72 + <app-info></app-info> 68 73 </body> 69 74 </html>
+72
script/footer.js
··· 1 + // Define a new class that extends the HTMLElement 2 + class InfoComponent extends HTMLElement { 3 + // The connectedCallback is called when the element is inserted into the DOM 4 + connectedCallback() { 5 + // Create a shadow root to encapsulate the component's content and styling 6 + const shadow = this.attachShadow({ mode: 'open' }); 7 + 8 + // Set the inner HTML of the shadow root to the footer content 9 + shadow.innerHTML = ` 10 + <!-- Link to Font Awesome within the shadow DOM for icons --> 11 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 12 + <script src="https://cdn.tailwindcss.com"></script> 13 + <!-- The styles must be defined inside the shadow DOM to apply --> 14 + <style> 15 + /* Base styles for the component */ 16 + .mt-12 { margin-top: 3rem; } 17 + .pt-4 { padding-top: 1rem; } 18 + .text-center { text-align: center; } 19 + .text-gray-500 { color: #6b7280; } 20 + .border-t { border-top-width: 1px; } 21 + .border-gray-200 { border-color: #e5e7eb; } 22 + .flex { display: flex; } 23 + .justify-center { justify-content: center; } 24 + .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; } 25 + .mb-4 { margin-bottom: 1rem; } 26 + .text-lg { font-size: 1.125rem; } 27 + .text-gray-600 { color: #4b5563; } 28 + .hover\\:text-indigo-600:hover { color: #4f46e5; } 29 + .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.3s; } 30 + .duration-300 { transition-duration: 0.3s; } 31 + .mt-8 { margin-top: 2rem; } 32 + .text-sm { font-size: 0.875rem; } 33 + .mt-1 { margin-top: 0.25rem; } 34 + .font-medium { font-weight: 500; } 35 + a { color: #4b5563; text-decoration: none; } 36 + /* A few specific styles for the iframe to ensure it looks right */ 37 + iframe { 38 + color-scheme: normal; 39 + } 40 + </style> 41 + 42 + <!-- The user's provided footer HTML --> 43 + <footer class="mt-12 pt-4 text-center text-gray-500 border-t border-gray-200"> 44 + <div class="flex justify-center space-x-6 mb-4 text-lg"> 45 + <a href="javascript:history.back()" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-arrow-left"></i> Back</a> 46 + <a href="/index.html" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-house"></i> Home</a> 47 + </div> 48 + <!-- Centered Iframe --> 49 + <div class="flex justify-center mt-8"> 50 + <iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no"></iframe> 51 + </div> 52 + <p> 53 + &copy; 2024-<span id="currentYear"></span> 54 + <a href="https://madebydanny.uk" target="blank_" class="hover:text-indigo-600 transition duration-300 font-medium">Made by Danny UK</a> 55 + </p> 56 + <p class="text-sm mt-1"> 57 + by Daniel Morrisey 58 + </p> 59 + <p> 60 + MBD is made possible thanks to <a href="https://cloudflare.com" target="blank_">Cloudflare</a> & <a href="https://cloudinary.com" target="blank_">Cloudinary</a> 61 + </p> 62 + </footer> 63 + `; 64 + 65 + // Update the current year dynamically 66 + this.shadowRoot.getElementById('currentYear').textContent = new Date().getFullYear(); 67 + } 68 + } 69 + 70 + // Define the new custom element with a hyphenated tag name 71 + // Custom element names must contain a hyphen 72 + customElements.define('app-info', InfoComponent);
+3 -1
textbites/blueskydeck.html
··· 103 103 <hr> 104 104 <br> 105 105 </div> 106 - <script src="/script/main.js"></script> 106 + </div> 107 + <app-info></app-info> 108 + <script src="/script/footer.js"></script> 107 109 </body> 108 110 </html>
+3 -4
textbites/igotamacmini.html
··· 34 34 font-family: 'Inter', sans-serif; 35 35 } 36 36 </style> 37 + <!-- Footer Custom Element Script --> 38 + <script src="/script/footer.js"></script> 37 39 </head> 38 40 <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 39 41 ··· 124 126 </div> 125 127 </div> 126 128 127 - <script> 128 - // Set the current year for the copyright notice 129 - document.getElementById('currentYear').textContent = new Date().getFullYear(); 130 - </script> 129 + <app-info></app-info> 131 130 </body> 132 131 </html>
+7
textbites/index.html
··· 30 30 <!-- Font Awesome CDN --> 31 31 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 32 32 33 + <!-- Footer--> 34 + <script src="/script/footer.js"></script> 35 + 33 36 <style> 34 37 body { 35 38 font-family: 'Inter', sans-serif; 36 39 } 37 40 </style> 41 + <!-- Footer Custom Element Script --> 42 + <script src="/script/footer.js"></script> 38 43 </head> 39 44 <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 40 45 ··· 195 200 }); 196 201 }); 197 202 </script> 203 + </div> 204 + <app-info></app-info> 198 205 </body> 199 206 </html>
+3 -4
textbites/macminiupdateaug15.html
··· 34 34 font-family: 'Inter', sans-serif; 35 35 } 36 36 </style> 37 + <!-- Footer Custom Element Script --> 38 + <script src="/script/footer.js"></script> 37 39 </head> 38 40 <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 39 41 ··· 132 134 </div> 133 135 </div> 134 136 135 - <script> 136 - // Set the current year for the copyright notice 137 - document.getElementById('currentYear').textContent = new Date().getFullYear(); 138 - </script> 137 + <app-info></app-info> 139 138 </body> 140 139 </html>
+3 -4
textbites/mbdstatus.html
··· 34 34 font-family: 'Inter', sans-serif; 35 35 } 36 36 </style> 37 + <!-- Footer Custom Element Script --> 38 + <script src="/script/footer.js"></script> 37 39 </head> 38 40 <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 39 41 ··· 126 128 </div> 127 129 </div> 128 130 129 - <script> 130 - // Set the current year for the copyright notice 131 - document.getElementById('currentYear').textContent = new Date().getFullYear(); 132 - </script> 131 + <app-info></app-info> 133 132 </body> 134 133 </html>
+3 -1
textbites/thepowerofhashtags.html
··· 72 72 </div> 73 73 </div> 74 74 </div> 75 - <script src="/script/main.js"></script> 75 + </div> 76 + <app-info></app-info> 77 + <script src="/script/footer.js"></script> 76 78 </body> 77 79 </html>
-35
tos.html
··· 1 - <!DOCTYPE html> 2 - <html> 3 - <head> 4 - <meta charSet="utf-8"/> 5 - <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6 - <title>Privacy Policy</title> 7 - 8 - <meta name="robots" content="noindex, nofollow"> 9 - 10 - <script src="https://cdn.tailwindcss.com"></script> 11 - </head> 12 - <body> 13 - <div id="__next"> 14 - <div> 15 - <header class="flex flex-col items-center py-12 md:py-16"> 16 - <div class="mb-8"> 17 - <a href="#" class="flex flex-row items-center"> 18 - </a> 19 - </div> 20 - </header> 21 - <div class="w-9/10 max-w-md mx-auto"> 22 - <h3 id="what-is-tsnet" class="mb-2 mt-5 text-xl font-medium first:mt-0">Privacy Policy</h3> 23 - <p> 24 - We use cookies such as <code class="rounded-lg border bg-gray-50 px-1 py-0.5 text-sm">Google Analytics 4</code> and <code class="rounded-lg border bg-gray-50 px-1 py-0.5 text-sm">Cloudflare Analytics</code> to collect data such as Page Views, Soucres and More. 25 - </p> 26 - </div> 27 - <div class="w-9/10 max-w-md mx-auto"> 28 - <br><br> 29 - <p>&copy; 2024-<span id="currentYear"></span> <a href="/leaving.html?link=https://madebydanny.uk" class="text-blue-600 transition-colors hover:text-blue-800">Made by Danny UK</a> <i>by Daniel Morrisey</i></p> 30 - </div> 31 - </div> 32 - </div> 33 - <script src="/script/main.js"></script> 34 - </body> 35 - </html>