Updated /latest/ to include new features

Nsfw filter based on twitter's
Support for Multiple Images

static/main.js

@@ -1,7 +1,8 @@
 var tweetCount = 1,
     page = 0,
     loading = false,
-    bigArray = [];
+    bigArray = [],
+    isNSFWSHOW = false;
 const iosHeight = () => {
     document.documentElement.style.setProperty("--ios-height", window.innerHeight + "px");
 };
@@ -11,22 +12,48 @@ window.onload = () => {
     //ios height
     iosHeight();
     const contwarn = document.querySelector("#contwarn");
+    const notsafe = document.querySelector("#notsafe");
+    if (document.cookie.includes("NSFW=true")) {
+        notsafe.checked = true;
+        document.querySelectorAll(".nsfw").forEach(e => e.classList.add("noff"));
+        addCookie("NSFW", true);
+        isNSFWSHOW = true;
+    }
     if (document.cookie.includes("always=true")) {
         contwarn.checked = true;
         forNow();
     }
-
     contwarn.addEventListener("change", () => {
-        if (contwarn.checked) {
+        if (contwarn.checked)
-            document.cookie = `always = true; max-age=15780000; SameSite=None; Secure`;
+            addCookie("always", true);
-        } else {
+        else
-            document.cookie = "always=false";
+            addCookie("always", false);
+    })
+    notsafe.addEventListener("change", () => {
+        if (notsafe.checked) {
+            document.querySelectorAll(".nsfw").forEach(e => e.classList.add("noff"));
+            addCookie("NSFW", true);
+            isNSFWSHOW = true;
         }
+        else {
+            document.querySelectorAll(".noff").forEach(e => e.classList.remove("noff"));
+            isNSFWSHOW = false;
+            addCookie("NSFW", false);
+        }
+
     })
 }
+
+function addCookie(name, state) {
+    if (document.cookie.includes(name))
+        document.cookie = document.cookie.replace(`${name}=${!state}`, `${name}=${state}`);
+    else
+        document.cookie += `${name}=${state}; max-age=15780000; SameSite=None; Secure`;
+}
+
 function cookieTime() {
     document.querySelector("#contwarn").checked = true;
-    document.cookie = `always = true; max-age=15780000; SameSite=None; Secure`;
+    addCookie("always", true);
     forNow();
 }
 function forNow() {
@@ -149,31 +176,78 @@ function createTweet(json) {
             tweet.appendChild(desc);
         }
 
+        if (json["nsfw"]) { //beware
+            var nsfw = createEl("div", "nsfw");
+            const ncont = createEl("div", "ncont");
+            const ninfo = createEl("div", "ninfo", { inner: "This is a NSFW Tweet <br> Press \"Show me\" if you want to see it" });
+            var nshow = createEl("div", "nshow", { inner: "Show me" });
+            ncont.appendChild(ninfo);
+            ncont.appendChild(nshow);
+            nsfw.appendChild(ncont);
+            if (isNSFWSHOW === true)
+                nsfw.classList.add("noff");
+        }
+
+
         switch (json["type"]) {
             case "Text":
                 //so empty
                 break;
             case "Image":
+                if (json["images"][4] > "1" && json["images"][4]) { //multiple images!!??
+                    const grid = createEl("div", "imgCont");
+                    for (let i = 0; i < json["images"][4]; i++)
+                        grid.appendChild(createEl("img", "media", {
+                            src: json["images"][i],
+                            lazy: true
+                        }));
+                    //console.log(json["images"][4])
+                    if (nsfw)
+                        nsfw.appendChild(grid);
+                    else
+                        tweet.appendChild(grid);
+                }
+                else {
                     const media = createEl("img", "media", {
                         src: json["thumbnail"],
                         lazy: true
                     });
+                    if (nsfw)
+                        nsfw.appendChild(media);
+                    else
                         tweet.appendChild(media);
+                }
+
                 break;
             case "Video":
                 const video = createEl("video", "media", {
                     video: json["url"]
                 });
+                if (nsfw)
+                    nsfw.appendChild(video);
+                else
                     tweet.appendChild(video);
                 break;
             default:
                 const video2 = createEl("video", "media", {
                     video: json["url"]
                 });
+                if (nsfw)
+                    nsfw.appendChild(video2);
+                else
                     tweet.appendChild(video2);
                 //console.log("this should not happen!");
                 break;
         }
+
+        if (nsfw) {
+            tweet.appendChild(nsfw);
+            nshow.addEventListener("click", () => {
+                nsfw.classList.add("noff");
+            });
+        }
+
+
         const qrtob = json["qrt"];
 
         if ((Object.keys(qrtob).length === 0 && Object.getPrototypeOf(qrtob) === Object.prototype) == false) {
@@ -207,6 +281,7 @@ function createTweet(json) {
         share.addEventListener("click", () =>
             navigator.clipboard.writeText(json["tweet"].replace("https://t", "https://fxt"))
         );
+
         tweetCount++;
     } else {
         if (bigArray.length > 100) //pro memory management 😎

static/style.css

@@ -6,7 +6,7 @@
 
 :root {
     --ios-height: 100vh;
-    --top-height: calc(6vh + 2vw);
+    --top-height: calc(4.5vh + 1.25vw);
 }
 
 body {
@@ -80,16 +80,18 @@ a:hover{
     justify-content: center;
     text-align: center;
     box-sizing: border-box;
-    font-size: 9vmin;
+    font-size: 7vmin;
     padding: 1vmin 0 1vmin;
     /*margin: 0 20vw 0;
     border-bottom: #e8e8e8 .1vmin solid;*/
     box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
 }
+
 .top:hover {
     color: #8ebf42;
     cursor: pointer;
 }
+
 .bottom {
     flex: 1;
     display: flex;
@@ -120,36 +122,45 @@ a:hover{
     overflow-y: auto;
     max-height: calc(var(--ios-height) - var(--top-height) - calc(1vh + .25vw));
 }
+
 .by {
     color: #8ebf42;
 }
+
 .by:hover {
     color: #F74843;
 }
+
 /* Tweet */
 .desc {
     padding: 0 calc(1.5vh + .25vw) 0;
 }
 
-.auth,.meta{
+.auth,
+.meta {
     display: flex;
     flex-direction: row;
     gap: 1%;
     font-size: 1.2em;
     padding: 0 calc(.5vh + .125vw) 0;
 }
+
 .aname {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
 }
-.aname,.type{
+
+.aname,
+.type {
     flex: 1;
 }
+
 .type {
     text-align: right;
     margin: auto 2% auto;
 }
+
 .aimage {
     border-radius: 50%;
     border: #8ebf42 .3vmin solid;
@@ -163,6 +174,83 @@ a:hover{
     -o-user-drag: none;
 }
 
+.nsfw {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.ncont {
+    position: absolute;
+    z-index: 1;
+    bottom: 20%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2vmin;
+    background-color: #17171788;
+    border-radius: .5vmin;
+    padding: 1vw;
+
+}
+
+.ninfo {
+    text-align: center;
+}
+
+.nshow {
+    padding: 1vh 1vw;
+    background-color: #171717;
+    border: solid .5vmin #8ebf42;
+    color: #e8e8e8;
+    border-radius: .5vmin;
+    transition-duration: .2s;
+    transition-timing-function: ease-in-out;
+    cursor: pointer;
+    user-select: none;
+    font-size: 1em;
+}
+
+
+.nshow:hover {
+    transform: scale(1.1);
+    border: solid .5vmin #bf4242;
+}
+
+.nshow:active {
+    transform: scale(.98);
+}
+
+.nsfw .media {
+    filter: blur(30px);
+
+}
+
+.noff div:not(.imgCont) {
+    display: none;
+}
+
+.noff .media {
+    display: unset;
+    filter: unset;
+}
+
+.imgCont {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+
+
+}
+
+.imgCont .media {
+    max-width: 50%;
+    max-height: 35vh;
+}
+
 .media {
     box-sizing: border-box;
     width: 100%;
@@ -170,7 +258,9 @@ a:hover{
     max-height: 60vh;
     object-fit: scale-down;
     background-color: black;
+
 }
+
 .quote {
     margin: auto;
     width: 90%;
@@ -178,45 +268,66 @@ a:hover{
     border: #222222 solid .5vmin;
     padding: .5vmin;
 }
+
 .qname {
     color: #8ebf42;
 }
-.cont,.date{
+
+.cont,
+.date {
     margin: auto 0 auto;
 
 }
+
 .date {
     margin-left: 2%;
 }
+
 .share {
     margin-left: auto;
     height: 2em;
     transition-duration: .2s;
     transition-timing-function: ease-in-out;
 }
+
 .share:hover {
     transform: scale(.8);
 }
+
 .share:active {
     transform: scale(2);
 }
-.auth,.desc,.media,.quote{
+
+.auth,
+.desc,
+.quote {
     margin-bottom: 2vmin;
 }
 
 /* Settings */
-.settings,.info{
+.settings,
+.info {
     font-size: 35px;
     padding: 1vmin;
 }
+
+.settings {
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+}
+
 .opt {
     font-size: .49em;
     user-select: none;
     white-space: nowrap;
+    flex-wrap: nowrap;
 }
+
 .Iinner {
     font-size: .5em;
 }
+
 /* Preview */
 
 img:not(.previmg, .aimage) {
@@ -263,16 +374,19 @@ img:not(.previmg,.aimage){
     font-size: calc(1.75vh + .25vw);
     text-align: center;
 }
+
 #block .warn {
     font-size: 2em;
     color: #F74843;
     text-align: center;
 }
+
 .boptions {
     display: flex;
     flex-direction: row;
     gap: 1.5vmin;
 }
+
 .boptions>div {
     padding: 2vh 2vw;
     border: solid .5vmin #c5c5c5;
@@ -294,16 +408,21 @@ img:not(.previmg,.aimage){
     transform: scale(.98);
 }
 
-@media (max-aspect-ratio: 4/4), (max-height: 500px), (max-width: 1100px){
+@media (max-aspect-ratio: 4/4),
+(max-height: 500px),
+(max-width: 1100px) {
     .side {
         display: none;
     }
+
     .tweet {
         font-size: 12px;
     }
+
     .tweetCont {
         padding: 0 5% 0;
     }
+
     .boptions {
         flex-direction: column;
     }

templates/latest.html

@@ -21,8 +21,8 @@
     <div class="base">
         <div id="block">
             <p class="warn">Warning!!</p>
-            <p>Twitfix does not filter out any content.</p>
+            <p>Twitfix only filters the content specified as NSFW.</p>
-            <p>Following content is most certainly NSFW.</p>
+            <p>Following content might be NSFW.</p>
             <p>Prepare yourself mentally and pick one of the options</p>
             <p>Do you want to see the latest twitfix requests?</p>
             <br>