Merge pull request #52 from DorukSega/main

Latest Section Update

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,46 @@ window.onload = () => {
     //ios height
     iosHeight();
     const contwarn = document.querySelector("#contwarn");
+    const notsafe = document.querySelector("#notsafe");
+    if (document.cookie.includes("NSFW=true")) {
+        notsafe.checked = 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 (state)
+        document.cookie = `${name}=${state}; max-age=15780000; SameSite=None; Secure`;
+    else
+        document.cookie = `${name}=`;
+}
+
 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 +174,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 +279,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

@@ -2,14 +2,14 @@
     font-family: NotoColorEmojiLimited;
     unicode-range: U+1F1E6-1F1FF;
     src: url("https://fxtwitter.com/font.ttf");
-  }
+}
 
 :root {
     --ios-height: 100vh;
-    --top-height: calc(6vh + 2vw);
+    --top-height: calc(4.5vh + 1.25vw);
- }
+}
 
-body{
+body {
     margin: 0;
     width: 100vw;
     height: 100vh;
@@ -18,7 +18,7 @@ body{
 }
 
 
-a{
+a {
     color: unset;
     text-decoration: unset;
 }
@@ -29,12 +29,12 @@ a:focus,
 a:visited,
 a:active,
 a:-webkit-any-link,
-:link{
+:link {
     color: unset;
     text-decoration: unset;
 }
 
-a:hover{
+a:hover {
     color: #8ebf42;
 }
 
@@ -63,94 +63,105 @@ a:hover{
     background-color: #e8e8e8;
 }
 
-.base{
+.base {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
-    font-family: 'Paytone One','NotoColorEmojiLimited', sans-serif;
+    font-family: 'Paytone One', 'NotoColorEmojiLimited', sans-serif;
     background-color: #222222;
     color: #e8e8e8;
 }
 
-.top{
+.top {
     height: var(--top-height);
     display: flex;
     flex-direction: column;
     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{
+
+.top:hover {
     color: #8ebf42;
     cursor: pointer;
 }
+
 .bottom {
     flex: 1;
     display: flex;
     flex-direction: row;
 }
 
-.tweetCont{
+.tweetCont {
     flex: 2;
-    padding: calc( 1vh + .25vw ) 10% 0;
+    padding: calc(1vh + .25vw) 10% 0;
 
     overflow-y: auto;
-    max-height: calc( var(--ios-height) - var(--top-height)  - calc( 1vh + .25vw )  );
+    max-height: calc(var(--ios-height) - var(--top-height) - calc(1vh + .25vw));
 }
 
-.tweet{
+.tweet {
     display: flex;
     position: relative;
     flex-direction: column;
     background-color: #171717;
-    margin: 0 0 calc( 2vh + .5vw );
+    margin: 0 0 calc(2vh + .5vw);
     padding: 1vmin 0 1vmin;
     box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 7px;
     font-size: 18px;
 }
 
-.side{
+.side {
     flex: 1;
     overflow-y: auto;
-    max-height: calc( var(--ios-height) - var(--top-height) - calc( 1vh + .25vw ) );
+    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{
+.by {
+    color: #8ebf42;
+}
+
+.by:hover {
+    color: #F74843;
+}
+
+/* Tweet */
+.desc {
+    padding: 0 calc(1.5vh + .25vw) 0;
+}
+
+.auth,
+.meta {
     display: flex;
     flex-direction: row;
     gap: 1%;
     font-size: 1.2em;
-    padding: 0 calc( .5vh + .125vw ) 0;
+    padding: 0 calc(.5vh + .125vw) 0;
 }
-.aname{
+
+.aname {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
 }
-.aname,.type{
+
+.aname,
+.type {
     flex: 1;
 }
-.type{
+
+.type {
     text-align: right;
     margin: auto 2% auto;
 }
-.aimage{
+
+.aimage {
     border-radius: 50%;
     border: #8ebf42 .3vmin solid;
     height: 100%;
@@ -163,63 +174,163 @@ a:hover{
     -o-user-drag: none;
 }
 
-.media{
+.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%;
     height: auto;
     max-height: 60vh;
     object-fit: scale-down;
     background-color: black;
+
 }
-.quote{
+
+.quote {
     margin: auto;
     width: 90%;
     border-radius: .5vmin;
     border: #222222 solid .5vmin;
     padding: .5vmin;
 }
-.qname{
+
+.qname {
     color: #8ebf42;
 }
-.cont,.date{
+
+.cont,
+.date {
     margin: auto 0 auto;
 
 }
-.date{
+
+.date {
     margin-left: 2%;
 }
-.share{
+
+.share {
     margin-left: auto;
     height: 2em;
     transition-duration: .2s;
     transition-timing-function: ease-in-out;
 }
-.share:hover{
+
+.share:hover {
     transform: scale(.8);
 }
-.share:active{
+
+.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;
 }
-.opt{
+
+.settings {
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+}
+
+.opt {
     font-size: .49em;
     user-select: none;
     white-space: nowrap;
+    flex-wrap: nowrap;
 }
-.Iinner{
+
+.Iinner {
     font-size: .5em;
 }
+
 /* Preview */
 
-img:not(.previmg,.aimage){
+img:not(.previmg, .aimage) {
     cursor: pointer;
     transition-duration: .2s;
     transition-timing-function: ease-in-out;
@@ -263,16 +374,19 @@ img:not(.previmg,.aimage){
     font-size: calc(1.75vh + .25vw);
     text-align: center;
 }
-#block .warn{
+
+#block .warn {
     font-size: 2em;
     color: #F74843;
     text-align: center;
 }
-.boptions{
+
+.boptions {
     display: flex;
     flex-direction: row;
     gap: 1.5vmin;
 }
+
 .boptions>div {
     padding: 2vh 2vw;
     border: solid .5vmin #c5c5c5;
@@ -294,17 +408,22 @@ 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),
-    .side{
+(max-height: 500px),
+(max-width: 1100px) {
+    .side {
         display: none;
     }
-    .tweet{
+
+    .tweet {
         font-size: 12px;
     }
-    .tweetCont{
+
+    .tweetCont {
         padding: 0 5% 0;
     }
-    .boptions{
+
+    .boptions {
         flex-direction: column;
     }
 }

templates/latest.html

@@ -6,12 +6,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Twitfix Latest</title>
-    <link rel="stylesheet" href={{ url_for('static', filename='style.css') }}>
+    <link rel="stylesheet" href={{ url_for('static', filename='style.css' ) }}>
     <link href="https://fonts.googleapis.com/css2?family=Paytone+One&display=swap" rel="stylesheet">
 </head>
 
 <body>
-    <script src={{ url_for('static', filename='main.js') }}></script>
+    <script src={{ url_for('static', filename='main.js' ) }}></script>
 
     <div class="previmgcont" onclick="document.querySelector('.previmgcont').style.display = 'none'; "
         style="display: none;">
@@ -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>
@@ -60,9 +60,15 @@
             </div>
             <div class="settings side">
                 <div>Settings</div>
+                <div>
                     <input type="checkbox" id="contwarn" name="contwarn">
                     <label class="opt" for="contwarn">Skip Content Warning</label>
                 </div>
+                <div>
+                    <input type="checkbox" id="notsafe" name="notsafe">
+                    <label class="opt" for="notsafe">Don't Hide NSFW Tweets</label>
+                </div>
+            </div>
         </div>
     </div>
 </body>