feat: add system monitor component and API for performance metrics
feat: implement conversations API with message retrieval and posting feat: add avatar URL handling for users and update user role definitions feat: create chat system tables in the database with initial seed data fix: update user roles from "sales_user" to "sales" for consistency chore: add middleware for system API route access fixed fuckups on john's side, added a benchmark Made Graphs actualy load from database and realtime data, graphs will update and percentages will be mathematically made, and made realtime added chatcart edits, made graphs glow. added in some little small home feeling fuctions added in a slide show, in login with qoutes from creators because i want to leave a print on it saying we made this shit, we built it brick for brick login page added qoutes some random, and made them shuffle from left to right one dissapears other come in adding shape to the textbox for the qoutes Fixed my chat fuckups when it comes to chats
This commit is contained in:
@@ -63,6 +63,7 @@
|
||||
--sidebar-ring: 224.3 76.3% 48%;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
@@ -71,4 +72,253 @@
|
||||
@apply bg-background text-foreground;
|
||||
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
/* Login page custom styles */
|
||||
.left-panel {
|
||||
background: #0a0a0f;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.right-panel {
|
||||
background: #111118;
|
||||
width: 420px;
|
||||
flex: none;
|
||||
position: relative;
|
||||
}
|
||||
.panel-divider {
|
||||
width: 1px;
|
||||
background: rgba(180, 192, 210, 0.1);
|
||||
flex: none;
|
||||
}
|
||||
.growth-word {
|
||||
position: relative;
|
||||
color: #1BB0CE;
|
||||
}
|
||||
.growth-word::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #1BB0CE;
|
||||
animation: pulseUnderline 2.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulseUnderline {
|
||||
0%, 100% { background-color: #1BB0CE; }
|
||||
50% { background-color: rgba(180, 192, 210, 0.6); }
|
||||
}
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 32px;
|
||||
gap: 0;
|
||||
}
|
||||
.stat {
|
||||
flex: 1;
|
||||
max-width: 120px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.stat::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #1BB0CE, rgba(180,192,210,1), #1BB0CE);
|
||||
background-size: 200% 100%;
|
||||
animation: statSweep 2.5s ease-in-out infinite;
|
||||
}
|
||||
.stat:nth-child(2)::before {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.stat:nth-child(3)::before {
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
@keyframes statSweep {
|
||||
0% { background-position: 0% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1BB0CE;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: rgba(232,232,239,0.3);
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.testimonial {
|
||||
border-left: 2px solid rgba(27,176,206,0.25);
|
||||
background: rgba(27,176,206,0.06);
|
||||
padding: 10px 14px;
|
||||
}
|
||||
.stars-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.wave-canvas {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: #0a0a0f;
|
||||
}
|
||||
.accent-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #1BB0CE, rgba(232,232,239,0.15), transparent);
|
||||
animation: pulseAccent 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulseAccent {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
.input-sheen {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.input-sheen::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -100%;
|
||||
width: 60%;
|
||||
height: 120%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
|
||||
transform: rotate(-15deg);
|
||||
animation: sheenFloat 3.2s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.input-sheen-delayed::before {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.input-sheen:focus-within::before {
|
||||
animation: none;
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes sheenFloat {
|
||||
0% { left: -100%; }
|
||||
100% { left: 200%; }
|
||||
}
|
||||
.login-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #0d0d15, #151520, #0d0d15);
|
||||
background-size: 200% 200%;
|
||||
animation: bgShift 6s ease-in-out infinite;
|
||||
border: 1.5px solid rgba(180,192,210,0.15);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #e8e8ef;
|
||||
padding: 0 12px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-input::placeholder {
|
||||
color: rgba(232,232,239,0.2);
|
||||
}
|
||||
.login-input:focus {
|
||||
border-color: #1BB0CE;
|
||||
outline: none;
|
||||
background: #111118;
|
||||
animation: none;
|
||||
}
|
||||
@keyframes bgShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(232,232,239,0.3);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
}
|
||||
.password-toggle:hover {
|
||||
color: rgba(232,232,239,0.5);
|
||||
}
|
||||
.login-checkbox {
|
||||
accent-color: #1BB0CE;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.auth-btn {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
background: #1BB0CE;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 13px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.auth-btn:hover {
|
||||
background: #17a0bc;
|
||||
}
|
||||
.auth-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.auth-btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
animation: btnSweep 2.2s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes btnSweep {
|
||||
0% { left: -100%; }
|
||||
100% { left: 200%; }
|
||||
}
|
||||
.login-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(232,232,239,0.4);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.body-text { color: rgba(232,232,239,0.5); }
|
||||
.subheading-text { color: rgba(232,232,239,0.38); }
|
||||
.checkbox-text { color: rgba(232,232,239,0.38); }
|
||||
.footer-text { color: rgba(232,232,239,0.2); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user