css darklight

public/index.html

@@ -11,7 +11,7 @@
     <meta property="og:title" content="Fediblock Instance Φ">
     <meta property="og:type" content="service">
     <meta property="og:image" content="favicon.ico">
-    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+    <link rel='stylesheet' type='text/css' media='screen' id="css" href='main.css'>
     <link rel='stylesheet' type='text/css' media='screen' href='loaders.css'>
     <script src='random-text.js'></script>
     <script src='../node_modules/html2canvas/dist/html2canvas.min.js'></script>
@@ -60,7 +60,7 @@
         matrix <a id="matrix" href="/?matrix">off</a> - download json <a id="download_index" href="#"
             target="_blank">index</a> -
         by <a href="https://about.manalejandro.com" target="_blank">ale</a>
-        <s>&copy;</s>2024
+        <s>&copy;</s>2024&nbsp;<a id="darklight" href="#">☼</a>
     </footer>
     <div id="modal">
         <div class="modal-content">

public/light.css

@@ -0,0 +1,378 @@
+body {
+    background-color: #F5F5F5;
+    text-align: center;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    scrollbar-width: thin;
+}
+
+h1,
+h3,
+h4,
+#scan {
+    margin: 0 auto;
+    color: #333333;
+    text-align: center;
+}
+
+h3 {
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 1rem;
+}
+
+a,
+a:hover {
+    color: #333333;
+    text-decoration: none;
+}
+
+input[type="text"] {
+    padding: 10px;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    background-color: #F0F0F0;
+    color: #333333;
+}
+
+#placeholder {
+    font-size: small;
+    margin: 0 auto;
+    color: #333333;
+}
+
+hr {
+    margin: 1rem auto;
+    border-bottom: 1px solid #ccc;
+    width: 50%;
+}
+
+#tooltip {
+    visibility: hidden;
+    font-size: small;
+    text-align: left;
+    width: 2.2in;
+    background-color: #F5F5F5;
+    color: #333333;
+    border-radius: 5px;
+    padding: 1rem 1rem 0 0;
+    position: absolute;
+    z-index: 1;
+    opacity: 0;
+    transition: 0.5s;
+    border: 1px solid #ccc;
+}
+
+#count:hover #tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
+#reverse {
+    margin: 0.5rem;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    background-color: #333333;
+    color: #F5F5F5;
+}
+
+#reverse:hover {
+    color: #333333;
+    background-color: #F5F5F5;
+    cursor: pointer;
+}
+
+#instancelist {
+    list-style-type: none;
+    margin: 20px 0;
+    padding: 0;
+    color: #333333;
+    max-height: 58vh;
+    overflow: auto;
+    scrollbar-width: thin;
+}
+
+@media (min-width: 992px) {
+    #instancelist li {
+        width: 28%;
+    }
+
+    #instancelist li:hover {
+        width: 33%;
+    }
+
+    #instance,
+    #placeholder,
+    h4 {
+        width: 30%;
+    }
+}
+
+@media (min-width: 600px) and (max-width: 992px) {
+    #instancelist li {
+        width: 60%;
+    }
+
+    #instancelist li:hover {
+        width: 65%;
+    }
+
+    #instance,
+    #placeholder,
+    h4 {
+        width: 63%;
+    }
+}
+
+@media (max-width: 600px) {
+    #instancelist li {
+        width: 80%;
+    }
+
+    #instancelist li:hover {
+        width: 85%;
+    }
+
+    #instance,
+    #placeholder,
+    h4 {
+        width: 83%;
+    }
+
+    #apigit {
+        display: none;
+    }
+}
+
+#instancelist li {
+    color: #333333;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    margin: 0 auto;
+    max-height: 1.5em;
+    overflow: hidden;
+    min-height: 1.5em;
+    line-height: 1.5;
+}
+
+#instancelist li:hover {
+    background-color: #F0F0F0;
+    cursor: pointer;
+    max-height: fit-content;
+}
+
+#instancelist li img {
+    width: 70%;
+    margin: 0 auto;
+}
+
+@keyframes opacity {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+footer {
+    text-align: center;
+    font-size: 12px;
+    padding: 10px;
+    color: #666666;
+}
+
+#count {
+    text-decoration: underline dotted #333333;
+    cursor: help;
+    position: relative;
+    display: inline-block;
+    text-underline-offset: 2px;
+}
+
+#blocklist {
+    width: 90%;
+    text-align: left;
+    list-style: none;
+    padding: 1rem;
+}
+
+#blocklist li {
+    color: #F5F5F5;
+    white-space: nowrap;
+    word-wrap: break-word;
+    overflow: hidden;
+}
+
+#blocklist li:hover {
+    white-space: inherit;
+    cursor: pointer;
+    color: #F5F5F5;
+}
+
+#blocklist li a,
+#blocklist li a:hover,
+#blocklist li a:visited {
+    color: #F5F5F5;
+    text-decoration: underline;
+}
+
+#blockinstance a,
+#blockinstance a:hover {
+    color: #F5F5F5;
+    text-decoration: underline;
+    cursor: help;
+}
+
+#blockcount {
+    font-weight: bolder;
+}
+
+#modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    scrollbar-width: thin;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    position: relative;
+    background-color: #F5F5F5;
+    margin: 10px auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 25%;
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+}
+
+@media only screen and (max-width: 600px) {
+    .modal-content {
+        width: 90%;
+    }
+}
+
+.modal-header {
+    padding: 6px;
+    background-color: #333333;
+    color: #F5F5F5;
+}
+
+.modal-body {
+    padding: 6px;
+}
+
+.modal-footer {
+    padding: 6px;
+    background-color: #333333;
+    color: #F5F5F5;
+}
+
+#closemodal,
+#download,
+#capture {
+    color: #aaa;
+    float: right;
+    font-size: 3rem;
+    font-weight: bolder;
+    margin: 0px 15px;
+}
+
+#closemodal:hover,
+#closemodal:focus,
+#download:hover,
+#download:focus,
+#capture:hover,
+#capture:focus {
+    color: #333333;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+@keyframes animatetop {
+    from {
+        top: -300px;
+        opacity: 0;
+    }
+
+    to {
+        top: 0;
+        opacity: 1;
+    }
+}
+
+@keyframes animatebottom {
+    from {
+        top: 0;
+        opacity: 1;
+    }
+
+    to {
+        top: -300px;
+        opacity: 0
+    }
+}
+
+h4 {
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+    border-left: 1px solid #f5f5f5;
+    border-right: 1px solid #f5f5f5;
+    transition: 0.2s;
+}
+
+h4 p {
+    margin: 0.3rem 0;
+}
+
+h4:hover {
+    width: 90%;
+}
+
+#bounce {
+    display: inline-block;
+    animation: marquee 90s linear infinite;
+}
+
+#bounce:hover {
+    animation-play-state: paused;
+}
+
+@keyframes marquee {
+    0% {
+        transform: translateX(100vw);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+#loader-content {
+    z-index: 1;
+    background-color: #0004;
+    width: 100%;
+    height: 100%;
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: auto;
+    scrollbar-width: thin;
+}
+
+#loader {
+    background-color: #f5f5f5;
+    width: fit-content;
+    margin: 50vh auto;
+    z-index: 2;
+}

public/main.js

@@ -128,6 +128,15 @@ document.addEventListener('DOMContentLoaded', function () {
         event.preventDefault()
         event.stopPropagation()
     })
+    document.getElementById('darklight').addEventListener('click', function(event) {
+        if(event.target.innerText === '☼') {
+            document.getElementById('css').setAttribute('href', 'light.css')
+            event.target.innerText = '☽'
+        } else {
+            document.getElementById('css').setAttribute('href', 'main.css')
+            event.target.innerText = '☼'
+        }
+    })
     function keypress(content) {
         loading()
         if (timeout) {