zxq5/zxq5.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

idk

Browse Source
This commit is contained in:
FantasyPvP
2024-12-10 11:57:08 +00:00
parent 1707309d95
commit fb1c13bfa0
81 changed files with 2900 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/Cargo.toml
+6 -2
View File
@@ -20,7 +20,11 @@ web-sys = { version = "0.3", features = [
"CloseEvent",
"Window",
"Location",
"History"
"History",
"HtmlCanvasElement",
"HtmlImageElement",
"CanvasRenderingContext2d",
"ImageData"
]}
futures = "0.3"
chrono = "0.4"
chrono = "0.4"
frontend/Trunk.toml
+2
View File
@@ -0,0 +1,2 @@
[serve]
port = 8080
frontend/dist/chatapp-frontend-2d9721327d80d1a4.js → frontend/dist/chatapp-frontend-2879b3175985551e.js
Vendored
+44 -54
View File
@@ -119,6 +119,28 @@ const CLOSURE_DTORS = (typeof FinalizationRegistry === 'undefined')
wasm.__wbindgen_export_7.get(state.dtor)(state.a, state.b)
});
function makeClosure(arg0, arg1, dtor, f) {
const state = { a: arg0, b: arg1, cnt: 1, dtor };
const real = (...args) => {
// First up with a closure we increment the internal reference
// count. This ensures that the Rust closure environment won't
// be deallocated while we're invoking it.
state.cnt++;
try {
return f(state.a, state.b, ...args);
} finally {
if (--state.cnt === 0) {
wasm.__wbindgen_export_7.get(state.dtor)(state.a, state.b);
state.a = 0;
CLOSURE_DTORS.unregister(state);
}
}
};
real.original = state;
CLOSURE_DTORS.register(real, state, state);
return real;
}
function makeMutClosure(arg0, arg1, dtor, f) {
const state = { a: arg0, b: arg1, cnt: 1, dtor };
const real = (...args) => {
@@ -144,28 +166,6 @@ function makeMutClosure(arg0, arg1, dtor, f) {
return real;
}
function makeClosure(arg0, arg1, dtor, f) {
const state = { a: arg0, b: arg1, cnt: 1, dtor };
const real = (...args) => {
// First up with a closure we increment the internal reference
// count. This ensures that the Rust closure environment won't
// be deallocated while we're invoking it.
state.cnt++;
try {
return f(state.a, state.b, ...args);
} finally {
if (--state.cnt === 0) {
wasm.__wbindgen_export_7.get(state.dtor)(state.a, state.b);
state.a = 0;
CLOSURE_DTORS.unregister(state);
}
}
};
real.original = state;
CLOSURE_DTORS.register(real, state, state);
return real;
}
function debugString(val) {
// primitive types
const type = typeof val;
@@ -231,23 +231,19 @@ function debugString(val) {
return className;
}
function __wbg_adapter_42(arg0, arg1, arg2) {
wasm.closure130_externref_shim(arg0, arg1, arg2);
wasm.closure400_externref_shim(arg0, arg1, arg2);
}
function __wbg_adapter_45(arg0, arg1, arg2) {
wasm.closure540_externref_shim(arg0, arg1, arg2);
function __wbg_adapter_47(arg0, arg1, arg2) {
wasm.closure612_externref_shim(arg0, arg1, arg2);
}
function __wbg_adapter_48(arg0, arg1, arg2) {
wasm.closure616_externref_shim(arg0, arg1, arg2);
function __wbg_adapter_50(arg0, arg1, arg2) {
wasm.closure700_externref_shim(arg0, arg1, arg2);
}
function __wbg_adapter_51(arg0, arg1, arg2) {
wasm.closure638_externref_shim(arg0, arg1, arg2);
}
function __wbg_adapter_54(arg0, arg1, arg2) {
wasm.closure647_externref_shim(arg0, arg1, arg2);
function __wbg_adapter_53(arg0, arg1, arg2) {
wasm.closure717_externref_shim(arg0, arg1, arg2);
}
async function __wbg_load(module, imports) {
@@ -386,13 +382,6 @@ function __wbg_get_imports() {
const ret = Array.from(arg0);
return ret;
};
imports.wbg.__wbg_getItem_561976eef304cebe = function() { return handleError(function (arg0, arg1, arg2, arg3) {
const ret = arg1.getItem(getStringFromWasm0(arg2, arg3));
var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len1 = WASM_VECTOR_LEN;
getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
}, arguments) };
imports.wbg.__wbg_getRandomValues_bcb4912f16000dc4 = function() { return handleError(function (arg0, arg1) {
arg0.getRandomValues(arg1);
}, arguments) };
@@ -571,14 +560,15 @@ function __wbg_get_imports() {
const ret = arg0.__yew_listener_id;
return isLikeNone(ret) ? 0x100000001 : (ret) >>> 0;
};
imports.wbg.__wbg_localStorage_05bfbeeb8946b5bf = function() { return handleError(function (arg0) {
const ret = arg0.localStorage;
return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
}, arguments) };
imports.wbg.__wbg_location_54d35e8c85dcfb9c = function(arg0) {
const ret = arg0.location;
return ret;
};
imports.wbg.__wbg_log_c3d56bb0009edd6a = function(arg0, arg1) {
var v0 = getArrayJsValueFromWasm0(arg0, arg1).slice();
wasm.__wbindgen_free(arg0, arg1 * 4, 4);
console.log(...v0);
};
imports.wbg.__wbg_message_142844ca2fe283e3 = function(arg0) {
const ret = arg0.message;
return ret;
@@ -924,24 +914,24 @@ function __wbg_get_imports() {
const ret = false;
return ret;
};
imports.wbg.__wbindgen_closure_wrapper280 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 131, __wbg_adapter_42);
imports.wbg.__wbindgen_closure_wrapper1214 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 613, __wbg_adapter_47);
return ret;
};
imports.wbg.__wbindgen_closure_wrapper5502 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 541, __wbg_adapter_45);
imports.wbg.__wbindgen_closure_wrapper1482 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 701, __wbg_adapter_50);
return ret;
};
imports.wbg.__wbindgen_closure_wrapper7256 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 617, __wbg_adapter_48);
imports.wbg.__wbindgen_closure_wrapper1516 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 718, __wbg_adapter_53);
return ret;
};
imports.wbg.__wbindgen_closure_wrapper7485 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 639, __wbg_adapter_51);
imports.wbg.__wbindgen_closure_wrapper681 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 401, __wbg_adapter_42);
return ret;
};
imports.wbg.__wbindgen_closure_wrapper7756 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 648, __wbg_adapter_54);
imports.wbg.__wbindgen_closure_wrapper683 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 401, __wbg_adapter_42);
return ret;
};
imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
frontend/dist/chatapp-frontend-2879b3175985551e_bg.wasm
Vendored
BIN
View File
Binary file not shown.
frontend/dist/chatapp-frontend-2d9721327d80d1a4_bg.wasm
Vendored
BIN
View File
Binary file not shown.
frontend/dist/styles-a0f557a2c187e84.css → frontend/dist/components-c4a55600848b6fb1.css
Vendored
+163 -139
View File
@@ -1,30 +1,4 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--blur-amount: 10px;
--border-radius: 15px;
--glow-color: rgba(255, 255, 255, 0.3);
--message-bubble-color: rgba(255, 255, 255, 0.1);
--border-color: rgba(255, 255, 255, 0.1);
--shadow-color: rgba(0, 0, 0, 0.2);
}
html, body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background: linear-gradient(135deg, #1a2a6c, #2a4858, #141E30);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: white;
}
.app-container {
.base-container {
height: 100vh;
width: 100vw;
display: flex;
@@ -32,17 +6,18 @@ html, body {
overflow: hidden;
}
.chat-container {
.app-container {
flex: 1;
margin: 0 2rem;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
width: calc(100% - 4rem);
max-width: 1400px;
margin-left: auto;
margin-right: auto;
height: calc(100vh - 80px); /* Account for navbar height */
overflow: hidden;
}
@@ -60,6 +35,37 @@ html, body {
flex-direction: column;
gap: 1rem;
width: 100%;
min-height: 0; /* This is crucial for flex child scrolling */
}
.meme-license-container {
flex: 1;
overflow-y: auto;
padding: 0;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: 40px;
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
display: flex;
flex-direction: row;
gap: 1rem;
width: 100%;
min-height: 0; /* This is crucial for flex child scrolling */
}
.ui-server-list {
height: 100%;
overflow-y: auto;
margin: 16px;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
}
.message {
@@ -103,17 +109,17 @@ html, body {
.username {
font-weight: 600;
font-size: 0.9rem;
color: #fff;
color: var(--text-color, #fff);
text-shadow: 0 2px 4px var(--shadow-color);
}
.timestamp {
color: rgba(255, 255, 255, 0.6);
color: var(--text-secondary, rgba(255, 255, 255, 0.6));
font-size: 0.8rem;
}
.message-content {
color: rgba(255, 255, 255, 0.9);
color: var(--text-color, rgba(255, 255, 255, 0.9));
font-size: 0.95rem;
}
@@ -132,41 +138,68 @@ html, body {
.message-input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1rem;
color: white;
background: var(--background-element, rgba(255, 255, 255, 0.1));
border: none;
padding: 0.4rem 1.5rem;
color: var(--text-color, white);
font-size: 1rem;
resize: vertical;
min-height: 1.5rem;
max-height: 150px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.message-input:hover, .message-input:focus {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
outline: none;
background-color: rgba(255, 255, 255, 0.3);
}
.send-button {
background: rgba(255, 255, 255, 0.1);
.ui-button {
background: var(--background-element, rgba(255, 255, 255, 0.1));
padding: 0.4rem 1.5rem;
color: var(--text-color, white);
font-size: 1rem;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
.ui-group {
display: flex;
flex-direction: row;
background: var(--background-element, rgba(255, 255, 255, 0.1));
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
width: 100%;
color: var(--text-color, white);
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
overflow: hidden;
}
.ui-layout-horizontal {
display: flex;
flex-direction: row;
gap: 1rem;
margin: 0;
padding: 0;
width: 100%;
}
.ui-element-standalone {
background: var(--background-element, rgba(255, 255, 255, 0.1));
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: white;
color: var(--text-color, white);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.send-button:hover {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
background: rgba(255, 255, 255, 0.2);
.ui-button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.navbar {
@@ -174,122 +207,113 @@ html, body {
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.1);
background: var(--background-element, rgba(255, 255, 255, 0.1));
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border: none;
border-bottom: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
margin: 0;
box-shadow: 0 2px 8px var(--shadow-color);
position: relative;
z-index: 1000;
}
.nav-brand {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-shadow: 0 2px 4px var(--shadow-color);
white-space: nowrap;
}
/* Login styles */
.login-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
}
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
.selector {
position: relative;
display: inline-block;
background: rgba(255, 255, 255, 0.01);
width: max-content;
/* background: var(--background-element, rgba(255, 255, 255, 0.1)); */
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
}
.login-title {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
color: white;
text-shadow: 0 2px 4px var(--shadow-color);
margin-bottom: 1rem;
}
.login-input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1rem;
color: white;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.login-input:hover, .login-input:focus {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
outline: none;
}
.login-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.login-button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: white;
color: var(--text-color, white);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
text-align: center;
text-decoration: none;
z-index: 1001;
}
.login-button:hover {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
background: rgba(255, 255, 255, 0.2);
}
.selector-items {
display: none;
position: absolute;
top: calc(100% + 1px);
left: -1px;
right: -1px;
.login-text {
color: rgba(255, 255, 255, 0.9);
text-align: center;
margin: 0.5rem 0;
}
.login-link {
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.login-link:hover {
text-shadow: 0 0 10px var(--glow-color);
}
.login-error {
background: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.3);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: white;
font-size: 1rem;
text-align: center;
box-shadow: 0 4px 12px var(--shadow-color);
z-index: 1002;
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
box-shadow: 0 2px 8px var(--shadow-color);
overflow: hidden;
}
.selector:hover .selector-items {
display: block;
}
.selector-button {
background: none;
width: 100%;
padding: 0.4rem 1.5rem;
border: none;
color: var(--text-color, white);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
white-space: nowrap;
}
.selector-label {
background: none;
width: 100%;
padding: 0.4rem 1.5rem;
border: none;
color: var(--text-color, white);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
white-space: nowrap;
position: relative;
padding-right: 2rem;
border-radius: var(--border-radius);
}
.selector-label::after {
content: "▼";
position: absolute;
right: 0.8rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
opacity: 0.7;
}
.selector-button:hover {
color: var(--glow-color);
background-color: rgba(255, 255, 255, 0.1);
}
.selector-button.active {
color: var(--glow-color);
font-weight: 500;
}
/* Custom scrollbar */
frontend/dist/form-3a77ed11d71d542d.css
Vendored
+104
View File
@@ -0,0 +1,104 @@
/* Form styles */
.form-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
}
.form-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
}
.form-title {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
color: var(--text-color);
text-shadow: 0 2px 4px var(--shadow-color);
margin-bottom: 1rem;
}
.form-input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1rem;
color: var(--text-color);
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.form-input:hover, .form-input:focus {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
outline: none;
}
.form-input::placeholder {
color: var(--text-color);
text-align: center;
}
.form-button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: var(--text-color);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
text-align: center;
text-decoration: none;
}
.form-button:hover {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
background: rgba(255, 255, 255, 0.2);
}
.form-text {
color: var(--text-color);
text-align: center;
margin: 0.5rem 0;
}
.form-link {
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
}
.form-link:hover {
text-shadow: 0 0 10px var(--glow-color);
}
.form-error {
background: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.3);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: var(--text-color);
font-size: 1rem;
text-align: center;
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
box-shadow: 0 2px 8px var(--shadow-color);
}
frontend/dist/global-7cfadbee4d5b1bff.css
Vendored
+45
View File
@@ -0,0 +1,45 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
--blur-amount: 10px;
--border-radius: 15px;
--shadow-color: rgba(0, 0, 0, 0.4);
}
*[theme="default"] {
--background: linear-gradient(135deg, #1a2a6c, #2a4858, #141E30);
--glow-color: rgba(255, 255, 255, 0.3);
--message-bubble-color: rgba(255, 255, 255, 0.1);
--border-color: rgba(255, 255, 255, 0.1);
--text-color: #ffffff;
}
*[theme="light"] {
--background: #ffffff;
--glow-color: rgba(100, 149, 237, 0.3);
--message-bubble-color: rgba(100, 149, 237, 0.1);
--border-color: rgba(100, 149, 237, 0.2);
--text-color: #000000;
}
*[theme="dark"] {
--background: linear-gradient(135deg, #121212, #1a1a1a, #232323);
--glow-color: rgba(147, 112, 219, 0.4);
--message-bubble-color: rgba(147, 112, 219, 0.15);
--border-color: rgba(255, 255, 255, 0.1);
--text-color: #ffffff;
}
html, body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background: var(--background);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--text-color, white);
}
frontend/dist/index.html
Vendored
+7 -5
View File
@@ -5,14 +5,16 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<link rel="stylesheet" href="/styles-a0f557a2c187e84.css" integrity="sha384&#x2D;IY1p3eyyGzgt1dx8oous21mdUqg5fUoBJDo0cnEt0Dzc0zNGKH5Z&#x2F;fRO8S&#x2F;o&#x2F;z&#x2B;X"/>
<link rel="modulepreload" href="/chatapp-frontend-2d9721327d80d1a4.js" crossorigin=anonymous integrity="sha384-NUMxiXeKeAJvxebMe8KYjMxliEtODVyz5/Z481fZRPDW2uYnad9e2ra9tGdLMFpa"><link rel="preload" href="/chatapp-frontend-2d9721327d80d1a4_bg.wasm" crossorigin=anonymous integrity="sha384-2mAsbkb1UNVlDtYPNO/P2i3j3N0eQcSD4sqqXRdf0Y5CtCnprvY5LjoqgSeLoJul" as="fetch" type="application/wasm"></head>
<link rel="stylesheet" href="/components-c4a55600848b6fb1.css" integrity="sha384&#x2D;Mmjo1ZomS0FElJau47rDNd04eUSEv&#x2B;T87iRK8eeVFIde&#x2B;LiwQrTeAxKj59XzYmS0"/>
<link rel="stylesheet" href="/global-7cfadbee4d5b1bff.css" integrity="sha384&#x2D;GWbuMob1xic&#x2F;G9k3FZveeVrVpzetubRiLpE&#x2B;4CtBpx5J2DZNCanPoio&#x2B;UXP2JwLS"/>
<link rel="stylesheet" href="/form-3a77ed11d71d542d.css" integrity="sha384&#x2D;lGHpEuixlt7WvJpZs7XP&#x2F;wQBg2&#x2F;v7C84a6g4l&#x2B;T1HkuUXDhYhqa5QqVli&#x2B;HKVWUi"/>
<link rel="modulepreload" href="/chatapp-frontend-2879b3175985551e.js" crossorigin=anonymous integrity="sha384-xlUUO7QtKu3SefdFpX08aFCGPCxeKLHtvHmbI/KU3AQFTKDOBLeNcVN9mu7mT68u"><link rel="preload" href="/chatapp-frontend-2879b3175985551e_bg.wasm" crossorigin=anonymous integrity="sha384-+mwYLmuuW0jPSy0jqOY+Qya/mYwxANqWd3CYV11ajVWiHIDvr4gfJOZ/oZnbdK8t" as="fetch" type="application/wasm"></head>
<body>
<div id="root"></div>
<script type="module" nonce="2WTPFE+DH5nuGYeLSROE+A==">
import init, * as bindings from '/chatapp-frontend-2d9721327d80d1a4.js';
const wasm = await init('/chatapp-frontend-2d9721327d80d1a4_bg.wasm');
<script type="module" nonce="0K6lbx5zqmDuxEdTEHz1Eg==">
import init, * as bindings from '/chatapp-frontend-2879b3175985551e.js';
const wasm = await init('/chatapp-frontend-2879b3175985551e_bg.wasm');
window.wasmBindings = bindings;
frontend/index.html
+3 -1
View File
@@ -5,7 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<link data-trunk rel="css" href="styles.css">
<link data-trunk rel="css" href="style/components.css">
<link data-trunk rel="css" href="style/global.css">
<link data-trunk rel="css" href="style/form.css">
</head>
<body>
<div id="root"></div>
frontend/src/components/button.rs
+19
View File
@@ -0,0 +1,19 @@
use yew::{function_component, html, Callback, Html, MouseEvent, Properties};
#[derive(PartialEq, Properties)]
pub struct Props {
pub onclick: Callback<MouseEvent>,
pub text: String,
pub class: Option<String>
}
#[function_component(Button)]
pub fn button(props: &Props) -> Html {
html! {
<button
class={props.class.clone().unwrap_or("button".to_string())}
onclick={props.onclick.clone()}>
{props.text.clone()}
</button>
}
}
frontend/src/components/chat.rs
+25 -33
View File
@@ -1,30 +1,30 @@
use gloo::console::log;
use serde::{Deserialize, Serialize};
use yew::prelude::*;
use web_sys::HtmlInputElement;
use chrono::prelude::*;
use crate::hooks::websocket::use_websocket;
use crate::{components::{navbar::Navbar, serverlist::ServerList}, hooks::websocket::use_websocket};
use crate::{WS_URL, API_URL};
#[derive(Clone, Debug, Serialize, Deserialize)]
pub struct RealTimeMessage {
pub message_id: i32,
pub user_id: i32,
pub user_id: String,
pub display_name: String,
pub created_at: i64,
pub content: String,
}
#[function_component(Chat)]
pub fn chat() -> Html {
let ws = use_websocket("ws://localhost:8000/messenger/connect/1");
let input_ref = use_node_ref();
let dark_theme = use_state(|| true);
#[derive(PartialEq, Properties)]
pub struct Props {
pub id: String
}
// let theme_toggle = {
// let dark_theme = dark_theme.clone();
// Callback::from(move |_| {
// dark_theme.set(!*dark_theme);
// })
// };
#[function_component(Chat)]
pub fn chat(props: &Props) -> Html {
let id = props.id.clone();
let ws = use_websocket(format!("{WS_URL}/messenger/connect/1/{id}").as_str());
let input_ref = use_node_ref();
let onsubmit = {
let ws = ws.ws.clone();
@@ -43,30 +43,22 @@ pub fn chat() -> Html {
};
html! {
<div class={classes!("app-container", if *dark_theme { "dark-theme" } else { "light-theme" })}>
<nav class="navbar">
<div class="nav-brand">{"Chat App"}</div>
// <div class="theme-toggle">
// <button onclick={theme_toggle} class="theme-button">
// if *dark_theme {
// {"🌞"}
// } else {
// {"🌙"}
// }
// </button>
// </div>
</nav>
<div class="chat-container">
<div class="ui-layout-horizontal">
// <ServerList/>
<div class="app-container">
<div class="messages-container">
{ws.messages.messages().iter().map(|msg| {
let timestamp = Local.timestamp_millis_opt(msg.created_at).unwrap();
let formatted_time = timestamp.format("%d/%m/%y %H:%M").to_string();
let userid = msg.user_id;
let userid = msg.user_id.clone();
html! {
<div class="message">
// load profile, if not - load fallback / default
<div class="profile-picture" style={ format!(
"background-image: url('http://localhost:8000/static/pfp/{userid}.png')"
"background-image:
url('{API_URL}/static/pfp/{}.png'),
url('{API_URL}/static/public/default_pfp.png')",
userid
)}></div>
<div class="message-bubble">
<div class="message-header">
@@ -84,14 +76,14 @@ pub fn chat() -> Html {
{format!("Error: {}", error)}
</div>
}
<form {onsubmit} class="message-form">
<form {onsubmit} class="ui-layout-horizontal">
<input
type="text"
ref={input_ref}
class="message-input"
class="message-input ui-element-standalone"
placeholder="Type a message..."
/>
<button type="submit" class="send-button">{"Send"}</button>
<button type="submit" class="ui-button ui-element-standalone">{"Send"}</button>
</form>
</div>
</div>
frontend/src/components/incidents.rs
+35
View File
@@ -0,0 +1,35 @@
use yew::{function_component, html, Html, Properties};
use crate::API_URL;
#[derive(PartialEq, Properties)]
pub struct Props {
pub incident: String
}
#[function_component(Incidents)]
pub fn incidents(props: &Props) -> Html {
let content = match props.incident.as_str() {
"boats" => (
"The Boat Incident.",
"the boat incident involved many boats being dropped on panic attack's tower. he then proceedeed to accidentally blow himself up along with all his stuff using a tnt cannon."
),
_ => ("", "")
};
html! {
<div class="app-container">
<div class="meme-license-container" style="min-height: 500px;">
<div style="display: flex; flex-grow: 1; flex-direction: column; align-items: center; padding: 2rem; gap: 2rem">
<h1 style="font-size: 4vw; text-align: center">{content.0}</h1>
<div style="display: flex; flex-direction: column; align-items: left; width: max-content; justify-content: center">
<div style="display: flex; flex-direction: row; align-items: center; width: max-content; gap: 1rem">
<p style="text-align: left; width: 50vw; font-size: 1.5vw">{content.1}</p>
// <p style="text-align: left; width: max-content; font-size: 1.5vw">{value}</p>
</div>
</div>
</div>
</div>
</div>
}
}
frontend/src/components/login.rs
+12 -11
View File
@@ -7,6 +7,7 @@ use web_sys::HtmlInputElement;
use wasm_bindgen::JsCast;
use wasm_bindgen_futures::spawn_local;
use crate::API_URL;
use crate::Route;
#[function_component(Login)]
@@ -32,7 +33,7 @@ pub fn login_page() -> Html {
let login_success = login_success_clone.clone();
spawn_local(async move {
match login(username, password).await {
Ok(_) => navigator.push(&Route::Chat),
Ok(_) => navigator.push(&Route::Chat { id: "test".to_string() }),
Err(_) => login_success.set(false),
}
});
@@ -47,12 +48,12 @@ pub fn login_page() -> Html {
};
html! {
<div class="login-container">
<form {onsubmit} class="login-form">
<h2 class="login-title">{"Login"}</h2>
<div class="form-container">
<form {onsubmit} class="form-form">
<h2 class="form-title">{"Login"}</h2>
<input
ref={username_ref}
class="login-input"
class="form-input"
type="text"
id="username"
name="username"
@@ -60,27 +61,27 @@ pub fn login_page() -> Html {
/>
<input
ref={password_ref}
class="login-input"
class="form-input"
type="password"
id="password"
name="password"
placeholder="Password"
/>
<button class="login-button" type="submit">{"Login"}</button>
<button class="form-button" type="submit">{"Login"}</button>
{
if !(*login_success) {
html! {
<p class="login-error">{"Incorrect username or password"}</p>
<p class="form-error">{"Incorrect username or password"}</p>
}
} else {
html! {}
}
}
<p class="login-text">{"Don't have an account?"}</p>
<p class="form-text">{"Don't have an account?"}</p>
<a onclick={go_to_signup}
href=""
class="login-button"
class="form-button"
>
{"Create Account"}
</a>
@@ -101,7 +102,7 @@ async fn login(username: String, password: String) -> Result<(), String> {
password,
};
match Request::post("http://127.0.0.1:8000/login")
match Request::post(format!("{API_URL}/login").as_str())
.json(&login_request)
.map_err(|e| e.to_string())?
.send()
frontend/src/components/meme_license.rs
+51
View File
@@ -0,0 +1,51 @@
use yew::{function_component, html, Html, Properties};
use crate::API_URL;
#[derive(PartialEq, Properties)]
pub struct Props {
pub username: String
}
#[function_component(MemeLicense)]
pub fn meme_license(props: &Props) -> Html {
html! {
<div class="app-container">
<div class="meme-license-container" style="min-height: 500px;">
<div class="profile-picture" style={ format!(
"background-image:
url('{API_URL}/static/pfp/{}.png'),
url('{API_URL}/static/public/default_pfp.png');
height: 25vw;
max-height: 100%;
width: revert;
aspect-ratio: 1/1;
border-radius: 40px 0px 40px 0px;
flex-shrink: 0;
box-shadow: 0 2px 8px var(--shadow-color);
",
props.username
)}></div>
<div style="display: flex; flex-grow: 1; flex-direction: column; align-items: center; padding: 2rem; gap: 2rem">
<h1 style="font-size: 4vw; text-align: center">{"Meme Stealing License"}</h1>
<div style="display: flex; flex-direction: column; align-items: left; width: max-content; justify-content: center">
{[
("Username", props.username.as_str()),
("Valid From", "2024"),
("Expires", "2026"),
("Issuer", "Steven"),
].iter()
.map(|(field, value)| html! {
<div style="display: flex; flex-direction: row; align-items: center; width: max-content; gap: 1rem">
<p style="text-align: left; width: 10vw; font-size: 1.5vw">{field}</p>
<p style="text-align: left; width: max-content; font-size: 1.5vw">{value}</p>
</div>
})
.collect::<Html>()
}
</div>
</div>
</div>
</div>
}
}
frontend/src/components/navbar.rs
+43
View File
@@ -0,0 +1,43 @@
use yew::{function_component, html, use_context, Html, Callback};
use yew_router::hooks::use_navigator;
use crate::{
components::selector::Selector,
hooks::theme::{use_theme, Theme, ThemeManager}, Route
};
#[function_component(Navbar)]
pub fn navbar() -> Html {
let ctx = use_context::<ThemeManager>().unwrap();
let on_select_theme = {
Callback::from(move |selected: Theme| {
ctx.set_theme.emit(selected);
})
};
let go_to_route = {
let navigator = use_navigator().unwrap();
Callback::from(move |selected: Route| {
navigator.push(&selected);
})
};
html! {
<nav class="navbar ui-layout-horizontal">
<div class="nav-brand">{"ZXQ5.Dev"}</div>
<div style="width: 100%;"/>
<Selector<Theme>
text={"Theme".to_string()}
args={vec![Theme::Default, Theme::Light, Theme::Dark]}
onselect={on_select_theme}
/>
<Selector<Route>
text={"My Account".to_string()}
args={vec![Route::Login, Route::Signup]}
onselect={go_to_route}
/>
</nav>
}
}
frontend/src/components/selector.rs
+34
View File
@@ -0,0 +1,34 @@
use std::fmt::Display;
use yew::prelude::*;
use crate::components::button::Button;
#[derive(Properties, PartialEq)]
pub struct Props<T: Display + Clone + PartialEq + 'static> {
pub args: Vec<T>,
pub onselect: Callback<T>,
pub text: String,
}
#[function_component(Selector)]
pub fn selector<T: Display + Clone + PartialEq + 'static>(props: &Props<T>) -> Html {
html! {
<div class="selector">
<div class="selector-label">{&props.text}</div>
<div class="selector-items">
{props.args.iter().map(|arg| {
let onclick = {
let arg = arg.clone();
let onselect = props.onselect.clone();
Callback::from(move |_| {
onselect.emit(arg.clone())
})
};
html! {
<Button class={Some("selector-button".to_string())} text={arg.to_string()} onclick={onclick} />
}
}).collect::<Html>()}
</div>
</div>
}
}
frontend/src/components/serverlist.rs
+68
View File
@@ -0,0 +1,68 @@
use std::fmt::Display;
use gloo_net::http::Request;
use serde::{Deserialize, Serialize};
use yew::prelude::*;
use crate::{components::button::Button, API_URL};
#[derive(Clone, Debug, Serialize, Deserialize)]
struct Server {
id: String,
name: String,
}
#[function_component(ServerList)]
pub fn serverlist() -> Html {
let servers = use_state(|| Vec::<Server>::new());
{
let servers = servers.clone();
use_effect_with((), move |_| {
let servers = servers.clone();
wasm_bindgen_futures::spawn_local(async move {
let fetched = if let Ok(fetched) = Request::get(format!("{API_URL}/servers").as_str())
.send()
.await
{
fetched.json()
.await
.unwrap()
} else {
Vec::new()
};
servers.set(fetched);
});
})
}
let onselect = {
let servers = servers.clone();
Callback::from(move |server: Server| {
servers.set(vec![server]);
})
};
html! {
<div class="ui-server-list">
<p style="text-align: center; padding: 1rem;"> {"Servers"} </p>
{ servers.iter().map(|server| {
html! {
<Button
text={server.name.clone()}
onclick={
let onselect = onselect.clone();
let server = server.clone();
Callback::from(move |_| {
onselect.emit(server.clone());
})
}
class={Some("selector-button".to_string())}
/>
}
}).collect::<Html>() }
</div>
}
}
frontend/src/components/signup.rs
+33 -22
View File
@@ -7,7 +7,7 @@ use web_sys::HtmlInputElement;
use wasm_bindgen::JsCast;
use wasm_bindgen_futures::spawn_local;
use crate::Route;
use crate::{Route, API_URL};
#[function_component(Signup)]
pub fn signup_page() -> Html {
@@ -15,11 +15,13 @@ pub fn signup_page() -> Html {
let username_ref = use_node_ref();
let password_ref = use_node_ref();
let confirm_password_ref = use_node_ref();
let token_ref = use_node_ref();
let signup_error = use_state(|| None::<String>);
let navigator_clone = navigator.clone();
let username_ref_clone = username_ref.clone();
let password_ref_clone = password_ref.clone();
let token_ref_clone = token_ref.clone();
let confirm_password_ref_clone = confirm_password_ref.clone();
let signup_error_clone = signup_error.clone();
@@ -28,8 +30,9 @@ pub fn signup_page() -> Html {
let username = username_ref_clone.cast::<HtmlInputElement>().unwrap().value();
let password = password_ref_clone.cast::<HtmlInputElement>().unwrap().value();
let confirm_password = confirm_password_ref_clone.cast::<HtmlInputElement>().unwrap().value();
let token = token_ref_clone.cast::<HtmlInputElement>().unwrap().value();
if username.is_empty() || password.is_empty() {
if username.is_empty() || password.is_empty() || token.is_empty() {
signup_error_clone.set(Some("Please fill in all fields".to_string()));
return;
}
@@ -42,8 +45,12 @@ pub fn signup_page() -> Html {
let navigator = navigator_clone.clone();
let signup_error = signup_error_clone.clone();
spawn_local(async move {
match signup(username, password).await {
Ok(_) => navigator.push(&Route::Chat),
match signup(SignupRequest {
username,
password,
token
}).await {
Ok(_) => navigator.push(&Route::Chat { id: "test".to_string() }),
Err(e) => signup_error.set(Some(e)),
}
});
@@ -57,12 +64,12 @@ pub fn signup_page() -> Html {
};
html! {
<div class="login-container">
<form {onsubmit} class="login-form">
<h2 class="login-title">{"Sign Up"}</h2>
<div class="form-container">
<form {onsubmit} class="form-form">
<h2 class="form-title">{"Sign Up"}</h2>
<input
ref={username_ref}
class="login-input"
class="form-input"
type="text"
id="username"
name="username"
@@ -70,7 +77,7 @@ pub fn signup_page() -> Html {
/>
<input
ref={password_ref}
class="login-input"
class="form-input"
type="password"
id="password"
name="password"
@@ -78,27 +85,35 @@ pub fn signup_page() -> Html {
/>
<input
ref={confirm_password_ref}
class="login-input"
class="form-input"
type="password"
id="confirm_password"
name="confirm_password"
placeholder="Confirm Password"
/>
<button class="login-button" type="submit">{"Sign Up"}</button>
<input
ref={token_ref}
class="form-input"
type="password"
id="access_token"
name="access_token"
placeholder="Access Token"
/>
<button class="form-button" type="submit">{"Sign Up"}</button>
{
if let Some(error) = (*signup_error).clone() {
html! {
<p class="login-error">{error}</p>
<p class="form-error">{error}</p>
}
} else {
html! {}
}
}
<p class="login-text">{"Already have an account?"}</p>
<p class="form-text">{"Already have an account?"}</p>
<a onclick={go_to_login}
href=""
class="login-button"
class="form-button"
>
{"Login"}
</a>
@@ -111,16 +126,12 @@ pub fn signup_page() -> Html {
struct SignupRequest {
username: String,
password: String,
token: String,
}
async fn signup(username: String, password: String) -> Result<(), String> {
let signup_request = SignupRequest {
username,
password,
};
match Request::post("http://127.0.0.1:8000/signup")
.json(&signup_request)
async fn signup(req: SignupRequest) -> Result<(), String> {
match Request::post(format!("{API_URL}/signup").as_str())
.json(&req)
.map_err(|e| e.to_string())?
.send()
.await
frontend/src/hooks/theme.rs
+73
View File
@@ -0,0 +1,73 @@
use std::fmt;
use yew::prelude::*;
use web_sys;
use gloo::console::log;
#[derive(Clone, Copy, PartialEq, Debug)]
pub enum Theme {
Default,
Light,
Dark,
}
impl Theme {
pub fn as_str(&self) -> &'static str {
match self {
Theme::Default => "default",
Theme::Light => "light",
Theme::Dark => "dark",
}
}
}
impl fmt::Display for Theme {
fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
write!(f, "{}", self.as_str())
}
}
#[derive(Clone, PartialEq)]
pub struct ThemeManager {
pub current: Theme,
pub set_theme: Callback<Theme>,
}
impl ThemeManager {
pub fn new(set_theme: Callback<Theme>) -> Self {
Self {
current: Theme::Default,
set_theme,
}
}
}
#[derive(Clone)]
pub struct UseThemeHandle {
pub set_theme: Callback<Theme>,
}
#[hook]
pub fn use_theme(initial: Theme) -> UseThemeHandle {
let theme = use_state(|| initial);
let set_theme = {
let theme = theme.clone();
Callback::from(move |new_theme: Theme| {
if let Some(window) = web_sys::window() {
if let Some(doc) = window.document() {
if let Some(body) = doc.body() {
if let Err(e) = body.set_attribute("theme", new_theme.as_str()) {
log!("Failed to set theme:", e);
}
}
}
}
theme.set(new_theme);
})
};
UseThemeHandle {
set_theme,
}
}
frontend/src/main.rs
+101 -18
View File
@@ -1,21 +1,49 @@
use hooks::theme::{use_theme, Theme, ThemeManager};
use yew::prelude::*;
use yew_router::prelude::*;
use gloo::storage::{LocalStorage, Storage};
use gloo::{console::log, storage::{LocalStorage, Storage}};
#[cfg(debug_assertions)]
pub(crate) const API_URL: &str = "http://localhost:8000";
#[cfg(debug_assertions)]
pub(crate) const WS_URL: &str = "ws://localhost:8000";
#[cfg(not(debug_assertions))]
pub(crate) const API_URL: &str = "https://api.zxq5.dev";
#[cfg(not(debug_assertions))]
pub(crate) const WS_URL: &str = "wss://api.zxq5.dev";
mod hooks {
pub mod websocket;
pub mod theme;
}
mod components {
pub mod chat;
pub mod signup;
pub mod login;
pub mod navbar;
pub mod button;
pub mod selector;
pub mod serverlist;
pub mod meme_license;
pub mod incidents;
pub mod form;
}
use components::{
chat::Chat,
login::Login,
signup::Signup,
navbar::Navbar,
button::Button,
selector::Selector,
serverlist::ServerList,
meme_license::MemeLicense,
incidents::Incidents,
form::Form,
};
#[derive(Clone, Routable, PartialEq)]
@@ -26,35 +54,90 @@ enum Route {
Login,
#[at("/signup")]
Signup,
#[at("/chat")]
Chat,
#[at("/chat/:id")]
Chat { id: String },
#[at("/profile")]
Profile,
#[at("/logout")]
Logout,
#[at("/invite")]
Invite,
#[at("/license/:username")]
MemeLicense { username: String },
#[at("/incidents/:incident")]
Incidents { incident: String },
#[not_found]
#[at("/404")]
NotFound,
}
impl std::fmt::Display for Route {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{}", match self {
Route::Root => "Home",
Route::Login => "Login",
Route::Signup => "Signup",
Route::Chat { id: _ } => "Chat",
Route::NotFound => "404",
Route::Profile => "Profile",
Route::Logout => "Logout",
Route::Invite => "Invite",
Route::MemeLicense { username: _ } => "Meme License",
Route::Incidents { incident: _ } => "Incidents",
})
}
}
fn switch(route: Route) -> Html {
match route {
Route::Root => html! { <Redirect<Route> to={Route::Login}/> },
Route::Login => html! { <Login /> },
Route::Signup => html! { <Signup /> },
Route::Chat => {
if let Ok(token) = LocalStorage::get::<String>("auth_token") {
html! { <Chat /> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
Route::NotFound => html! { <h1>{"404 Not Found"}</h1> },
// // check if user is logged in
// if user not logged in:
// html! {}
html ! {
<div class="base-container">
<Navbar/>
{ match route {
Route::Root => html! { <Redirect<Route> to={Route::Login}/> },
Route::Login => html! { <Login /> },
Route::Signup => html! { <Signup /> },
// Route::Chat { id: token } => {
// if let Ok(token) = LocalStorage::get::<String>("auth-token") {
// html! { <Chat id={token}/> }
// } else {
// html! { <Redirect<Route> to={Route::Login}/> }
// }
// }
Route::Chat { id: token } => html! { <Chat id={token}/> },
Route::Incidents { incident: incident } => html! { <Incidents incident={incident}/> },
Route::MemeLicense { username: username } => html! { <MemeLicense username={username}/> },
_ => html! { <h1>{"404 Not Found"}</h1> },
}}
</div>
}
}
#[function_component(App)]
fn app() -> Html {
let theme_handle = use_theme(Theme::Default);
let ctx = use_state(|| ThemeManager::new(theme_handle.set_theme));
{
let ctx = ctx.clone();
use_effect_with((), move |_| {
ctx.set_theme.emit(Theme::Default);
});
}
html! {
<BrowserRouter>
<Switch<Route> render={switch} />
</BrowserRouter>
<ContextProvider<ThemeManager> context={(*ctx).clone()}>
<BrowserRouter>
<Switch<Route> render={switch} />
</BrowserRouter>
</ContextProvider<ThemeManager>>
}
}
frontend/styles.css → frontend/style/components.css
+163 -139
View File
@@ -1,30 +1,4 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--blur-amount: 10px;
--border-radius: 15px;
--glow-color: rgba(255, 255, 255, 0.3);
--message-bubble-color: rgba(255, 255, 255, 0.1);
--border-color: rgba(255, 255, 255, 0.1);
--shadow-color: rgba(0, 0, 0, 0.2);
}
html, body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background: linear-gradient(135deg, #1a2a6c, #2a4858, #141E30);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: white;
}
.app-container {
.base-container {
height: 100vh;
width: 100vw;
display: flex;
@@ -32,17 +6,18 @@ html, body {
overflow: hidden;
}
.chat-container {
.app-container {
flex: 1;
margin: 0 2rem;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
width: calc(100% - 4rem);
max-width: 1400px;
margin-left: auto;
margin-right: auto;
height: calc(100vh - 80px); /* Account for navbar height */
overflow: hidden;
}
@@ -60,6 +35,37 @@ html, body {
flex-direction: column;
gap: 1rem;
width: 100%;
min-height: 0; /* This is crucial for flex child scrolling */
}
.meme-license-container {
flex: 1;
overflow-y: auto;
padding: 0;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: 40px;
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
display: flex;
flex-direction: row;
gap: 1rem;
width: 100%;
min-height: 0; /* This is crucial for flex child scrolling */
}
.ui-server-list {
height: 100%;
overflow-y: auto;
margin: 16px;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
}
.message {
@@ -103,17 +109,17 @@ html, body {
.username {
font-weight: 600;
font-size: 0.9rem;
color: #fff;
color: var(--text-color, #fff);
text-shadow: 0 2px 4px var(--shadow-color);
}
.timestamp {
color: rgba(255, 255, 255, 0.6);
color: var(--text-secondary, rgba(255, 255, 255, 0.6));
font-size: 0.8rem;
}
.message-content {
color: rgba(255, 255, 255, 0.9);
color: var(--text-color, rgba(255, 255, 255, 0.9));
font-size: 0.95rem;
}
@@ -132,41 +138,68 @@ html, body {
.message-input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1rem;
color: white;
background: var(--background-element, rgba(255, 255, 255, 0.1));
border: none;
padding: 0.4rem 1.5rem;
color: var(--text-color, white);
font-size: 1rem;
resize: vertical;
min-height: 1.5rem;
max-height: 150px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.message-input:hover, .message-input:focus {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
outline: none;
background-color: rgba(255, 255, 255, 0.3);
}
.send-button {
background: rgba(255, 255, 255, 0.1);
.ui-button {
background: var(--background-element, rgba(255, 255, 255, 0.1));
padding: 0.4rem 1.5rem;
color: var(--text-color, white);
font-size: 1rem;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
.ui-group {
display: flex;
flex-direction: row;
background: var(--background-element, rgba(255, 255, 255, 0.1));
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
width: 100%;
color: var(--text-color, white);
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
overflow: hidden;
}
.ui-layout-horizontal {
display: flex;
flex-direction: row;
gap: 1rem;
margin: 0;
padding: 0;
width: 100%;
}
.ui-element-standalone {
background: var(--background-element, rgba(255, 255, 255, 0.1));
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: white;
color: var(--text-color, white);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.send-button:hover {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
background: rgba(255, 255, 255, 0.2);
.ui-button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.navbar {
@@ -174,122 +207,113 @@ html, body {
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.1);
background: var(--background-element, rgba(255, 255, 255, 0.1));
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border: none;
border-bottom: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
margin: 0;
box-shadow: 0 2px 8px var(--shadow-color);
position: relative;
z-index: 1000;
}
.nav-brand {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-shadow: 0 2px 4px var(--shadow-color);
white-space: nowrap;
}
/* Login styles */
.login-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
}
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
.selector {
position: relative;
display: inline-block;
background: rgba(255, 255, 255, 0.01);
width: max-content;
/* background: var(--background-element, rgba(255, 255, 255, 0.1)); */
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
}
.login-title {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
color: white;
text-shadow: 0 2px 4px var(--shadow-color);
margin-bottom: 1rem;
}
.login-input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1rem;
color: white;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.login-input:hover, .login-input:focus {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
outline: none;
}
.login-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.login-button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: white;
color: var(--text-color, white);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
text-align: center;
text-decoration: none;
z-index: 1001;
}
.login-button:hover {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
background: rgba(255, 255, 255, 0.2);
}
.selector-items {
display: none;
position: absolute;
top: calc(100% + 1px);
left: -1px;
right: -1px;
.login-text {
color: rgba(255, 255, 255, 0.9);
text-align: center;
margin: 0.5rem 0;
}
.login-link {
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.login-link:hover {
text-shadow: 0 0 10px var(--glow-color);
}
.login-error {
background: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.3);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: white;
font-size: 1rem;
text-align: center;
box-shadow: 0 4px 12px var(--shadow-color);
z-index: 1002;
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
box-shadow: 0 2px 8px var(--shadow-color);
overflow: hidden;
}
.selector:hover .selector-items {
display: block;
}
.selector-button {
background: none;
width: 100%;
padding: 0.4rem 1.5rem;
border: none;
color: var(--text-color, white);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
white-space: nowrap;
}
.selector-label {
background: none;
width: 100%;
padding: 0.4rem 1.5rem;
border: none;
color: var(--text-color, white);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
white-space: nowrap;
position: relative;
padding-right: 2rem;
border-radius: var(--border-radius);
}
.selector-label::after {
content: "▼";
position: absolute;
right: 0.8rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
opacity: 0.7;
}
.selector-button:hover {
color: var(--glow-color);
background-color: rgba(255, 255, 255, 0.1);
}
.selector-button.active {
color: var(--glow-color);
font-weight: 500;
}
/* Custom scrollbar */
frontend/style/form.css
+104
View File
@@ -0,0 +1,104 @@
/* Form styles */
.form-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
}
.form-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 4px 24px var(--shadow-color);
}
.form-title {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
color: var(--text-color);
text-shadow: 0 2px 4px var(--shadow-color);
margin-bottom: 1rem;
}
.form-input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1rem;
color: var(--text-color);
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
}
.form-input:hover, .form-input:focus {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
outline: none;
}
.form-input::placeholder {
color: var(--text-color);
text-align: center;
}
.form-button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: var(--text-color);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px var(--shadow-color);
text-align: center;
text-decoration: none;
}
.form-button:hover {
border-color: var(--glow-color);
box-shadow: 0 0 15px var(--glow-color);
background: rgba(255, 255, 255, 0.2);
}
.form-text {
color: var(--text-color);
text-align: center;
margin: 0.5rem 0;
}
.form-link {
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
}
.form-link:hover {
text-shadow: 0 0 10px var(--glow-color);
}
.form-error {
background: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.3);
border-radius: var(--border-radius);
padding: 0.8rem 1.5rem;
color: var(--text-color);
font-size: 1rem;
text-align: center;
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
box-shadow: 0 2px 8px var(--shadow-color);
}
frontend/style/global.css
+45
View File
@@ -0,0 +1,45 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
--blur-amount: 10px;
--border-radius: 15px;
--shadow-color: rgba(0, 0, 0, 0.4);
}
*[theme="default"] {
--background: linear-gradient(135deg, #1a2a6c, #2a4858, #141E30);
--glow-color: rgba(255, 255, 255, 0.3);
--message-bubble-color: rgba(255, 255, 255, 0.1);
--border-color: rgba(255, 255, 255, 0.1);
--text-color: #ffffff;
}
*[theme="light"] {
--background: #ffffff;
--glow-color: rgba(100, 149, 237, 0.3);
--message-bubble-color: rgba(100, 149, 237, 0.1);
--border-color: rgba(100, 149, 237, 0.2);
--text-color: #000000;
}
*[theme="dark"] {
--background: linear-gradient(135deg, #121212, #1a1a1a, #232323);
--glow-color: rgba(147, 112, 219, 0.4);
--message-bubble-color: rgba(147, 112, 219, 0.15);
--border-color: rgba(255, 255, 255, 0.1);
--text-color: #ffffff;
}
html, body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background: var(--background);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--text-color, white);
}