Beutification successful. That's all I will be doing for now.

This commit is contained in:
CatAClock 2025-05-12 18:40:09 -07:00
parent d87faaf38e
commit d82ca66d12
12 changed files with 235 additions and 56 deletions

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

BIN
Icons/IndexBackground.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 B

View file

@ -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();

View file

@ -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>