feat: add darkmode

This commit is contained in:
ffqq 2023-07-11 20:29:47 +00:00
parent 8222502610
commit b56ec9454c
5 changed files with 244 additions and 144 deletions

View File

@ -268,4 +268,101 @@ body {
.hidden { .hidden {
display: none; display: none;
}
@media (prefers-color-scheme: dark) {
:root {
--gray-950: #030712;
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
--gray-600: #4b5563;
--gray-500: #6b7280;
--gray-400: #9ca3af;
--gray-300: #d1d5db;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--gray-50: #f9fafb;
}
textarea {
background-color: var(--gray-800);
color: white
}
/* fix some profile issues, this is important do NOT remove!!!! */
iframe {
background-color: white;
}
body {
color: white;
background-color: var(--gray-900);
}
h1 {
color: white;
}
.post button, .post .commentdiv input, input, button {
background-color: var(--gray-700);
border-color: var(--gray-600);
color: white;
}
.navbar {
background-color: var(--gray-800);
}
.navbar a, a {
color: white;
border-size: 0px;
border-color: var(--gray-800);
}
.accountform button {
background-color: var(--gray-700);
border-color: var(--gray-600);
color: white;
}
.profileDiv .edit-button {
color: var(--gray-50);
text-decoration: none;
}
.post {
background-color: var(--gray-800);
}
.usernamelink {
color: white;
}
.post .date {
color: var(--gray-400);
}
.post .commentsdiv {
background-color: var(--gray-700);
}
.messageBar {
background-color: var(--gray-900);
}
.channelDiv {
background-color: var(--gray-800);
}
.channelDiv button {
background-color: var(--gray-700);
color: white;
}
.channelDiv button:hover {
background-color: var(--gray-600);
}
}
} }

View File

@ -1,56 +1,56 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<style> <style>
body { body {
overflow-y: hidden; overflow-y: hidden;
} }
</style> </style>
<head> <head>
<title>burgercat</title> <title>burgercat</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" /> <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head> </head>
<body> <body>
<div class="navbar"> <div class="navbar">
<h1>burgercat</h1> <h1>burgercat</h1>
<a href="/">home</a> <a href="/">home</a>
<a class="selected" href="/chat">chat</a> <a class="selected" href="/chat">chat</a>
<a href="/post">post</a> <a href="/post">post</a>
{% if userdata %} {% if userdata %}
<a href="/settings/logout" class="right r">log out</a> <a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a> <a href="/settings" class="right">{{ userdata.username }}</a>
{% else %} {% else %}
<a href="/signup" class="right r">sign up</a> <a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a> <a href="/login" class="right">log in</a>
{% endif %} {% endif %}
</div> </div>
<div class="postDiv"> <div class="postDiv">
{% if userdata %} {% if userdata %}
{% if userdata.banned == "0" %} {% if userdata.banned == "0" %}
{% else %} {% else %}
<p class="warning">Your account has been banned. Reason: "{{ userdata.banned }}". <a href="/settings/logout">Log out</a></p> <p class="warning">Your account has been banned. Reason: "{{ userdata.banned }}". <a href="/settings/logout">Log out</a></p>
{% endif %} {% endif %}
{% endif %} {% endif %}
<div class="chatDiv"> <div class="chatDiv">
<div id="channelDiv" class="channelDiv"> <div id="channelDiv" class="channelDiv">
<p class="statusMessage" id="statusMessage">Connected</p> <p class="statusMessage" id="statusMessage">Connected</p>
</div> </div>
<div id="messageDiv" class="messageDiv"> <div id="messageDiv" class="messageDiv">
</div> </div>
<div class="messageBar"> <div class="messageBar">
<input id="messageBox" type="text" placeholder="Type something.." id="chatBox"> <input id="messageBox" type="text" placeholder="Type something.." id="chatBox">
</div> </div>
</div> </div>
</div> </div>
<script src="/static/js/chat.js"></script> <script src="/static/js/chat.js"></script>
</body> </body>
</html> </html>

View File

@ -1,42 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>burgercat</title> <title>burgercat</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" /> <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head> </head>
<body> <body>
<div class="navbar"> <div class="navbar">
<h1>burgercat</h1> <h1>burgercat</h1>
<a class="selected" href="/">home</a> <a class="selected" href="/">home</a>
<a href="/post">post</a> <a href="/chat">chat</a>
{% if userdata %} <a href="/post">post</a>
<a href="/settings/logout" class="right r">log out</a> {% if userdata %}
<a href="/settings" class="right">{{ userdata.username }}</a> <a href="/settings/logout" class="right r">log out</a>
{% else %} <a href="/settings" class="right">{{ userdata.username }}</a>
<a href="/signup" class="right r">sign up</a> {% else %}
<a href="/login" class="right">log in</a> <a href="/signup" class="right r">sign up</a>
{% endif %} <a href="/login" class="right">log in</a>
</div> {% endif %}
<div class="postDiv"> </div>
<div class="profileDiv"> <div class="postDiv">
{% if userdata %} <div class="profileDiv">
{% if pageuser.id == userdata.id %} {% if userdata %}
<h2>edit mode</h2> {% if pageuser.id == userdata.id %}
<p>remote content from media.tenor.com and cdn.discordapp.com is allowed</p> <h2>edit mode</h2>
<form class="editThing" method="post" enctype="multipart/form-data"> <p>remote content from media.tenor.com and cdn.discordapp.com is allowed</p>
<textarea class="htmlBox" name="code" type="text" placeholder="<p>Hello World!</p>">{{ userdata.htmldescription }}</textarea> <form class="editThing" method="post" enctype="multipart/form-data">
<br><br> <textarea class="htmlBox" name="code" type="text" placeholder="<p>Hello World!</p>">{{ userdata.htmldescription }}</textarea>
<input class="submit" type="submit" value="save"> <br><br>
</form> <input class="submit" type="submit" value="save">
{% endif %} </form>
{% endif %} {% endif %}
</div> {% endif %}
</div> </div>
</body> </div>
</body>
</html> </html>

View File

@ -13,6 +13,7 @@
<div class="navbar"> <div class="navbar">
<h1>burgercat</h1> <h1>burgercat</h1>
<a href="/">home</a> <a href="/">home</a>
<a href="/chat">chat</a>
<a href="/post">post</a> <a href="/post">post</a>
{% if userdata %} {% if userdata %}
<a href="/settings/logout" class="right r">log out</a> <a href="/settings/logout" class="right r">log out</a>

View File

@ -1,49 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>burgercat</title> <title>burgercat</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" /> <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head> </head>
<body> <body>
<div class="navbar"> <div class="navbar">
<h1>burgercat</h1> <h1>burgercat</h1>
<a class="selected" href="/">home</a> <a class="selected" href="/">home</a>
<a href="/post">post</a> <a href="/chat">chat</a>
{% if userdata %} <a href="/post">post</a>
<a href="/settings/logout" class="right r">log out</a> {% if userdata %}
<a href="/settings" class="right">{{ userdata.username }}</a> <a href="/settings/logout" class="right r">log out</a>
{% else %} <a href="/settings" class="right">{{ userdata.username }}</a>
<a href="/signup" class="right r">sign up</a> {% else %}
<a href="/login" class="right">log in</a> <a href="/signup" class="right r">sign up</a>
{% endif %} <a href="/login" class="right">log in</a>
</div> {% endif %}
<div class="postDiv"> </div>
<div class="profileDiv"> <div class="postDiv">
<h2>{{ pageuser.username }}</h2> <div class="profileDiv">
<div class="badgeDiv"> <h2>{{ pageuser.username }}</h2>
{% if pageuser.administrator == 1 %} <div class="badgeDiv">
<p>Administrator</p> {% if pageuser.administrator == 1 %}
{% endif %} <p>Administrator</p>
</div> {% endif %}
<p>Joined on {{ createddate }}</p> </div>
{% if userdata %} <p>Joined on {{ createddate }}</p>
{% if pageuser.id == userdata.id %} {% if userdata %}
<a style="color: rgb(104, 104, 104); text-decoration: none;" href="/@{{ userdata.username }}/edit">edit page</a> {% if pageuser.id == userdata.id %}
<br><br> <a style="color: rgb(104, 104, 104); text-decoration: none;" href="/@{{ userdata.username }}/edit">edit page</a>
{% endif %} <br><br>
{% endif %} {% endif %}
</div> {% endif %}
<iframe src="/api/page/{{ pageuser.id }}" class="profileIFrame" sandbox=""></iframe> </div>
</div> <iframe src="/api/page/{{ pageuser.id }}" class="profileIFrame" sandbox=""></iframe>
<style> </div>
body { <style>
overflow-y: hidden body {
} overflow-y: hidden
</style> }
</body> </style>
</body>
</html> </html>