From d82ca66d1288604aea24e5d52fa2f4cb8d3ef906 Mon Sep 17 00:00:00 2001
From: CatAClock <CatAClock@proton.me>
Date: Mon, 12 May 2025 18:40:09 -0700
Subject: [PATCH] Beutification successful. That's all I will be doing for now.
---
CSS/expanded.css | 17 +++++++++-
CSS/index.css | 67 +++++++++++++++++++++++++-------------
CSS/mail.css | 42 ++++++++++++++++++++++++
CSS/post.css | 28 ++++++++++++++++
CSS/setting.css | 47 ++++++++++++++++++++++++++
HTML/expanded.html | 6 ++--
HTML/mail.html | 14 +++++---
HTML/post.html | 26 ++++++++-------
HTML/setting.html | 31 +++++++++++++-----
Icons/IndexBackground.png | Bin 0 -> 180 bytes
JS/setting.js | 4 +--
index.html | 9 +++--
12 files changed, 235 insertions(+), 56 deletions(-)
create mode 100644 Icons/IndexBackground.png
diff --git a/CSS/expanded.css b/CSS/expanded.css
index 0889f7a..a4a9d07 100644
--- a/CSS/expanded.css
+++ b/CSS/expanded.css
@@ -6,6 +6,11 @@ img, video {
width: 45%;
}
+html {
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
/* Classes */
.Handle {
background-color: white;
@@ -16,7 +21,7 @@ img, video {
}
.PostText {
- background-color: #00ECE8;
+ background-color: #00FFFF;
}
.Images {
@@ -25,3 +30,13 @@ img, video {
flex-wrap: wrap;
background-color: #050505;
}
+
+.Button {
+ margin-top: 30px;
+
+ border-style: solid;
+ border-width: 1px;
+
+ width: 100px;
+ height: 100px;
+}
diff --git a/CSS/index.css b/CSS/index.css
index 231b039..1207c5b 100644
--- a/CSS/index.css
+++ b/CSS/index.css
@@ -111,18 +111,17 @@ html {
}
/* Classes for the main page */
-.MainBefore {
+.MainBefore, .MainAfter {
position: absolute;
top: 0px;
left: 0px;
- visibility: collapse;
+ background-image: url("../Icons/IndexBackground.png");
}
-.MainAfter {
- position: absolute;
- top: 0px;
- left: 0px;
+/* Animation things to get it working smoothly */
+.MainBefore {
+ visibility: collapse;
}
.MainFadeInAnimation {
@@ -161,6 +160,7 @@ html {
height: 5vh;
}
+/* Stuff that goes into the posts. */
.Arrow {
position: absolute;
top: 35vh;
@@ -182,11 +182,21 @@ html {
.Post {
overflow: hidden;
+ margin-top: 1%;
+ margin-bottom: 1%;
+ margin-left: 1%;
+ margin-right: 1%;
+
border-style: solid;
border-width: 2px;
+ border-top-left-radius: 2% 50%;
+ border-top-right-radius: 2% 50%;
+ border-bottom-left-radius: 2% 50%;
+ border-bottom-right-radius: 2% 50%;
- width: 24%;
- height: 25%;
+ background-color: #FFFFFF;
+ width: 22%;
+ height: 23%;
}
.Post:hover {
@@ -196,35 +206,46 @@ html {
.Username {
text-align: center;
font-weight: bold;
+ font-size: 2ch;
+
+ margin-top: -5px;
}
.PostContent {
- font-size: 1ch;
+ font-size: 0.9ch;
}
-.Setting {
- border-style: solid;
- border-width: 1px;
-}
-
-.Mail {
- border-style: solid;
- border-width: 1px;
-}
-
-.Posting {
+/* Footer things */
+.Setting, .Posting, .Mail {
+ margin-top: 30px;
+
border-style: solid;
border-width: 1px;
+ width: 100px;
+ height: 100px;
+}
+
+.Time {
+ font-size: 4ch;
+}
+
+.Posting {
margin-right: 5%;
}
.MainFooter {
display: flex;
- margin-top: 75vh;
-
text-align: center;
justify-content: center;
- height: 15vh;
+ background: linear-gradient(#dcdcdc, #b4b4b4);
+
+ margin-top: 75vh;
+
+ border-top-style: solid;
+ border-width: 2px;
+ border-color: #00FFFF;
+
+ height: 20vh;
}
diff --git a/CSS/mail.css b/CSS/mail.css
index e18b85f..f1a1769 100644
--- a/CSS/mail.css
+++ b/CSS/mail.css
@@ -1,3 +1,36 @@
+/* Combination */
+header, footer {
+ style="position: relative;
+ z-index: 1;
+}
+
+/* Singletons */
+html {
+ background: linear-gradient(#b4b4b4, #dcdcdc, #b4b4b4);
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+header {
+ height: 5vh;
+}
+
+section {
+ position: absolute;
+ width: 100%;
+ height: 80vh;
+}
+
+.Button {
+ margin-top: 30px;
+
+ border-style: solid;
+ border-width: 1px;
+
+ width: 100px;
+ height: 100px;
+}
+
.Favorite {
border-style: solid;
border-width: 2px;
@@ -42,3 +75,12 @@
.Notification:hover {
overflow: visible;
}
+
+footer {
+ display: flex;
+ justify-content: center;
+
+ margin-top: -10vh;
+
+ height: 20vh;
+}
diff --git a/CSS/post.css b/CSS/post.css
index 8b13789..8d19465 100644
--- a/CSS/post.css
+++ b/CSS/post.css
@@ -1 +1,29 @@
+html {
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+header {
+ height: 5vh;
+}
+
+section {
+ height: 75vh;
+}
+
+.SmallButton {
+ margin-top: 30px;
+
+ border-style: solid;
+ border-width: 1px;
+
+ width: 100px;
+ height: 100px;
+}
+
+footer {
+ display: flex;
+ justify-content: center;
+
+ height: 5vh;
+}
diff --git a/CSS/setting.css b/CSS/setting.css
index e69de29..a86bd3d 100644
--- a/CSS/setting.css
+++ b/CSS/setting.css
@@ -0,0 +1,47 @@
+html {
+ background-color: black;
+ color: white;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+header {
+ border-bottom-style: solid;
+
+ height: 5vh;
+}
+
+.Hidden {
+ visibility: hidden;
+ display: none;
+}
+
+.Button {
+ border-style: solid;
+ border-width: 6px;
+ border-color: #00FFFF;
+
+ padding: 25vh 8vw;
+
+ background: linear-gradient(#dcdcdc, #b4b4b4);
+ color: black;
+}
+
+.SmallButton {
+ margin-top: 30px;
+
+ border-style: solid;
+ border-width: 1px;
+
+ width: 100px;
+ height: 100px;
+}
+
+footer {
+ display: flex;
+ justify-content: center;
+
+ border-top-style: solid;
+
+ height: 10vh;
+}
diff --git a/HTML/expanded.html b/HTML/expanded.html
index 76ce64e..c295f75 100644
--- a/HTML/expanded.html
+++ b/HTML/expanded.html
@@ -19,11 +19,13 @@
<p class="PostText"></p>
<div class="Images">
</div>
- <div>
+ <div "display: flex;">
<p class="Favorite">Favorite!</p>
<p class="Boost">Boost!</p>
<p class="Reply">Reply!</p>
</div>
- <p onclick="history.back()"><b>Back</b></p>
+ <footer>
+ <p class="Button" onclick="history.back()"><b>Back</b></p>
+ </footer>
</body>
</html>
diff --git a/HTML/mail.html b/HTML/mail.html
index d9417a7..37ce1fe 100644
--- a/HTML/mail.html
+++ b/HTML/mail.html
@@ -12,12 +12,16 @@
</head>
<body style="margin: 0px; text-align: center;">
- <section style="position: absolute; width: 100%; height: 100%" class="Favorites"></section>
- <section style="position: absolute; width: 100%; height: 100%" class="Bookmarks"></section>
- <section style="position: absolute; width: 100%; height: 100%" class="Notifications"></section>
- <header style="position: relative; z-index: 1;">
+ <header>
<h1>Mail</h1>
- <p onclick="history.back();"><b>Back</b></p>
</header>
+ <div style="height: 85vh;">
+ <section class="Favorites"></section>
+ <section class="Bookmarks"></section>
+ <section class="Notifications"></section>
+ </div>
+ <footer>
+ <p class="Button" onclick="history.back();"><b>Back</b></p>
+ </footer>
</body>
</html>
diff --git a/HTML/post.html b/HTML/post.html
index 612c6e9..55733ca 100644
--- a/HTML/post.html
+++ b/HTML/post.html
@@ -15,16 +15,20 @@
<header>
<h1>Post</h1>
</header>
- <textarea cols="50" rows="25" class="Text" placeholder="status here..."></textarea>
- <div>
- <select class="PostVisibility">
- <option value="Public">Public Post</option>
- <option value="Quiet">Quiet Public Post</option>
- <option value="Friend">Friends Only Post</option>
- <option value="Private">Private Post</option>
- </select>
- </div>
- <p class="Button">POST!</p>
- <p onclick="history.back();"><b>Back</b></p>
+ <section>
+ <textarea cols="50" rows="25" class="Text" placeholder="status here..."></textarea>
+ <div>
+ <select class="PostVisibility">
+ <option value="Public">Public Post</option>
+ <option value="Quiet">Quiet Public Post</option>
+ <option value="Friend">Friends Only Post</option>
+ <option value="Private">Private Post</option>
+ </select>
+ </div>
+ <p class="Button">POST!</p>
+ </section>
+ <footer>
+ <p class="SmallButton" onclick="history.back();"><b>Back</b></p>
+ </footer>
</body>
</html>
diff --git a/HTML/setting.html b/HTML/setting.html
index 51f38ed..d085474 100644
--- a/HTML/setting.html
+++ b/HTML/setting.html
@@ -15,14 +15,27 @@
<header>
<h1>Setting</h1>
</header>
- <p class="Local">Toggle Local</p>
- <p class="Remote">Toggle Remote</p>
- <p class="Login Mastodon"><em>Login to Mastodon</em></p>
- <input type="text" class="WebInput Mastodon" placeholder="Website (mastodon.social)"/>
- <p class="Logout Mastodon" style="visibility: hidden;"><em>Logout of Mastodon</em></p>
- <p class="Login Bluesky"><em>Login to Bluesky</em></p>
- <input type="text" class="WebInput Bluesky" placeholder="Website (bsky.social)" />
- <p class="Logout Bluesky" style="visibility: hidden;"><em>Logout of Bluesky</em></p>
- <p onclick="window.location.href = window.location.origin"><b>Back</b></p>
+ <div style="display: flex; justify-content: center; height: 75vh;">
+ <div class="Button" style="margin: auto;">
+ <p class="Local">Toggle Local</p>
+ <p class="Remote">Toggle Remote</p>
+ </div>
+ <div class="Button" style="display: flex; justify-content: center; margin: auto;">
+ <!-- Sorry people! -->
+ <div>
+ <input type="text" class="WebInput Mastodon" placeholder="Website (mastodon.social)"/>
+ <p class="Login Mastodon"><em>Login to Mastodon</em></p>
+ <p class="Logout Mastodon Hidden"><em>Logout of Mastodon</em></p>
+ </div>
+ <div>
+ <input type="text" class="WebInput Bluesky" placeholder="Website (bsky.social)"/>
+ <p class="Login Bluesky"><em>Login to Bluesky</em></p>
+ <p class="Logout Bluesky Hidden"><em>Logout of Bluesky</em></p>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <p class="SmallButton" onclick="window.location.href = window.location.origin"><b>Back</b></p>
+ </footer>
</body>
</html>
diff --git a/Icons/IndexBackground.png b/Icons/IndexBackground.png
new file mode 100644
index 0000000000000000000000000000000000000000..94981bfca28559b01a8445ee6ddc9467be905e44
GIT binary patch
literal 180
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqjKx9jPK-BC>eK@{Ea{HEjtmSN
z`?>!lvI6-E$sR$z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBD8X6a
z5n0T@pr;JNj1^1m%YcHio-U3d5|@+r6hA*#&t}um*~qY<nd#X7|Nk%Fn8;wD#6GWl
S=Yn%Ug$$mqelF{r5}E)dATXc+
literal 0
HcmV?d00001
diff --git a/JS/setting.js b/JS/setting.js
index 779975d..39efa0c 100644
--- a/JS/setting.js
+++ b/JS/setting.js
@@ -85,7 +85,7 @@ async function CheckLogin() {
// Swap the buttons
MastodonLoginButton.remove();
MastodonWebInput.remove();
- MastodonLogoutButton.setAttribute("style", "");
+ MastodonLogoutButton.classList.remove("Hidden");
} else {
// Auto log in
await MastodonAPI.GainToken(Variables.MastodonWebsite);
@@ -95,7 +95,7 @@ async function CheckLogin() {
// Swap the buttons
BlueskyLoginButton.remove();
BlueskyWebInput.remove();
- BlueskyLogoutButton.setAttribute("style", "");
+ BlueskyLogoutButton.classList.remove("Hidden");
} else {
// Auto log in
await BlueskyAPI.GainTokens();
diff --git a/index.html b/index.html
index 8ca936d..f716ede 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,12 @@
<section class="WarningMessage">
<h2>Warning! Care for yourself!</h2>
<p>
- The world might seem like an uncaring place. At a glance, that might seem true. However, that doesn't mean nobody cares. The average person has enough affection to share with you, so please share it back. <br>
- You are also cute :3 <br>
- <em>Safety options are available here: https://CrowdedGames.Group</em>
+ The world might seem like an uncaring place. At a glance, that might seem true looking at social media.<br><br>
+ However, that doesn't mean nobody cares. The average person has enough affection to share with you. You just need to ask. Trust us.<br><br>
+ There are mean people on the internet. Pay no attention to them and block them. They don't matter. You do.<br><br>
+ One more thing... There are people who might also be down. Please spread around the affection. It's for the best.<br><br>
+ You are also cute :3<br><br>
+ <em>Safety options are available here: https://CrowdedGames.Group</em><br><br>
<noscript>Look. Javascript is required to run this. I'm sorry, there isn't anything I can do about it.</noscript>
</p>
<p class="BlinkAnimation"><b>Click on this webpage to continue</b></p>