diff --git a/static/main.js b/static/main.js
index e61ede5..5610a90 100644
--- a/static/main.js
+++ b/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) {
- document.cookie = `always = true; max-age=15780000; SameSite=None; Secure`;
- } else {
- document.cookie = "always=false";
+ if (contwarn.checked)
+ addCookie("always", true);
+ else
+ 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
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":
- const media = createEl("img", "media", {
- src: json["thumbnail"],
- lazy: true
- });
- tweet.appendChild(media);
+ 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"]
});
- tweet.appendChild(video);
+ if (nsfw)
+ nsfw.appendChild(video);
+ else
+ tweet.appendChild(video);
break;
default:
const video2 = createEl("video", "media", {
video: json["url"]
});
- tweet.appendChild(video2);
+ 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 😎
diff --git a/static/style.css b/static/style.css
index 4670103..581659b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2,23 +2,23 @@
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;
height: var(--ios-height);
overflow: hidden;
-}
+}
-a{
+a {
color: unset;
text-decoration: unset;
}
@@ -29,18 +29,18 @@ a:focus,
a:visited,
a:active,
a:-webkit-any-link,
-:link{
+:link {
color: unset;
text-decoration: unset;
}
-a:hover{
+a:hover {
color: #8ebf42;
}
::-webkit-scrollbar {
width: 1vmin;
-
+
}
::-webkit-scrollbar-track {
@@ -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 ) );
-}
-.by{
- color: #8ebf42;
-}
-.by:hover{
- color: #F74843;
-}
-/* Tweet */
-.desc{
- padding: 0 calc( 1.5vh + .25vw ) 0;
+ max-height: calc(var(--ios-height) - var(--top-height) - calc(1vh + .25vw));
}
-.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;
+ 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){
- .side{
+@media (max-aspect-ratio: 4/4),
+(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;
}
-}
+}
\ No newline at end of file
diff --git a/templates/latest.html b/templates/latest.html
index b817140..f4fdb00 100644
--- a/templates/latest.html
+++ b/templates/latest.html
@@ -6,12 +6,12 @@