Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
4154d58e7c |
@ -1,403 +1,554 @@
|
||||
body {
|
||||
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 15s ease infinite;
|
||||
color: #212529;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
:root {
|
||||
--bg-start: #040814;
|
||||
--bg-end: #0b1330;
|
||||
--ink: #f6fbff;
|
||||
--muted: rgba(219, 231, 255, 0.72);
|
||||
--line: rgba(255, 255, 255, 0.12);
|
||||
--glass: rgba(8, 15, 36, 0.54);
|
||||
--glow-a: #5dd6ff;
|
||||
--glow-b: #79ffb1;
|
||||
--glow-c: #ffe27a;
|
||||
--glow-d: #ff8a5b;
|
||||
--shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
|
||||
--footer-height: 112px;
|
||||
--pointer-x: 50vw;
|
||||
--pointer-y: 50vh;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(93, 214, 255, 0.12), transparent 30%),
|
||||
radial-gradient(circle at 78% 16%, rgba(121, 255, 177, 0.08), transparent 22%),
|
||||
radial-gradient(circle at 50% 120%, rgba(255, 138, 91, 0.12), transparent 36%),
|
||||
linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 58%, #030610 100%);
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle 180px at var(--pointer-x) var(--pointer-y), rgba(93, 214, 255, 0.12), transparent 72%),
|
||||
radial-gradient(circle 240px at calc(var(--pointer-x) + 8%) calc(var(--pointer-y) - 6%), rgba(121, 255, 177, 0.08), transparent 70%);
|
||||
pointer-events: none;
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.space-scene,
|
||||
.error-stage,
|
||||
.footer-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 85%;
|
||||
padding: 0.85rem 1.1rem;
|
||||
border-radius: 16px;
|
||||
line-height: 1.5;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||||
animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px) scale(0.95); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.message.visitor {
|
||||
align-self: flex-end;
|
||||
background: linear-gradient(135deg, #212529 0%, #343a40 100%);
|
||||
color: #fff;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.message.bot {
|
||||
align-self: flex-start;
|
||||
background: #ffffff;
|
||||
color: #212529;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
padding: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.chat-input-area form {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.chat-input-area input {
|
||||
flex: 1;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1rem;
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-input-area input:focus {
|
||||
border-color: #23a6d5;
|
||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
|
||||
}
|
||||
|
||||
.chat-input-area button {
|
||||
background: #212529;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-input-area button:hover {
|
||||
background: #000;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Background Animations */
|
||||
.bg-animations {
|
||||
.space-scene {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.blob {
|
||||
.starfield,
|
||||
.nebula,
|
||||
.orbit,
|
||||
.planet,
|
||||
.comet,
|
||||
.dust-glow,
|
||||
.stellar-wave {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.starfield {
|
||||
inset: -10%;
|
||||
background-repeat: repeat;
|
||||
animation: drift linear infinite;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.starfield-far {
|
||||
background-image:
|
||||
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.4px),
|
||||
radial-gradient(circle at 44% 72%, rgba(162, 214, 255, 0.55) 0 1px, transparent 1.6px),
|
||||
radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px),
|
||||
radial-gradient(circle at 72% 82%, rgba(121, 255, 177, 0.42) 0 1px, transparent 1.6px),
|
||||
radial-gradient(circle at 24% 86%, rgba(255, 226, 122, 0.35) 0 1px, transparent 1.5px);
|
||||
background-size: 340px 340px;
|
||||
animation-duration: 180s;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.starfield-mid {
|
||||
background-image:
|
||||
radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.82) 0 1.2px, transparent 1.9px),
|
||||
radial-gradient(circle at 54% 68%, rgba(93, 214, 255, 0.8) 0 1.1px, transparent 1.7px),
|
||||
radial-gradient(circle at 86% 42%, rgba(255, 255, 255, 0.72) 0 1.2px, transparent 1.8px),
|
||||
radial-gradient(circle at 66% 14%, rgba(121, 255, 177, 0.6) 0 1.1px, transparent 1.8px),
|
||||
radial-gradient(circle at 28% 76%, rgba(255, 226, 122, 0.5) 0 1.1px, transparent 1.7px);
|
||||
background-size: 240px 240px;
|
||||
animation-duration: 110s;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.starfield-near {
|
||||
background-image:
|
||||
radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.98) 0 1.8px, transparent 2.4px),
|
||||
radial-gradient(circle at 50% 58%, rgba(93, 214, 255, 0.95) 0 1.7px, transparent 2.4px),
|
||||
radial-gradient(circle at 84% 34%, rgba(255, 255, 255, 0.92) 0 1.9px, transparent 2.5px),
|
||||
radial-gradient(circle at 76% 78%, rgba(121, 255, 177, 0.72) 0 1.7px, transparent 2.3px),
|
||||
radial-gradient(circle at 14% 70%, rgba(255, 226, 122, 0.82) 0 1.7px, transparent 2.3px);
|
||||
background-size: 170px 170px;
|
||||
animation-duration: 70s;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.nebula {
|
||||
width: 46vw;
|
||||
height: 46vw;
|
||||
filter: blur(22px);
|
||||
opacity: 0.48;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
|
||||
mix-blend-mode: screen;
|
||||
animation: pulseNebula 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
background: rgba(238, 119, 82, 0.4);
|
||||
.nebula-left {
|
||||
top: -8vw;
|
||||
left: -10vw;
|
||||
background: radial-gradient(circle, rgba(93, 214, 255, 0.24), rgba(93, 214, 255, 0.06) 42%, transparent 68%);
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
background: rgba(35, 166, 213, 0.4);
|
||||
animation-delay: -7s;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
.nebula-right {
|
||||
right: -12vw;
|
||||
bottom: -16vw;
|
||||
background: radial-gradient(circle, rgba(255, 138, 91, 0.2), rgba(121, 255, 177, 0.06) 38%, transparent 70%);
|
||||
animation-delay: -9s;
|
||||
}
|
||||
|
||||
.blob-3 {
|
||||
top: 40%;
|
||||
left: 30%;
|
||||
background: rgba(231, 60, 126, 0.3);
|
||||
animation-delay: -14s;
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
.orbit {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 999px;
|
||||
box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||||
33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
|
||||
66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
|
||||
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
|
||||
.orbit-one {
|
||||
width: min(80vw, 1200px);
|
||||
height: min(80vw, 1200px);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(8deg);
|
||||
}
|
||||
|
||||
.header-link {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
.orbit-two {
|
||||
width: min(56vw, 860px);
|
||||
height: min(56vw, 860px);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-12deg);
|
||||
}
|
||||
|
||||
.header-link:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-decoration: none;
|
||||
.planet {
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--shadow);
|
||||
animation: floatPlanet 22s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Admin Styles */
|
||||
.admin-container {
|
||||
max-width: 900px;
|
||||
margin: 3rem auto;
|
||||
padding: 2.5rem;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.planet::before,
|
||||
.planet::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.admin-container h1 {
|
||||
margin-top: 0;
|
||||
color: #212529;
|
||||
font-weight: 800;
|
||||
.planet::before {
|
||||
background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.6), transparent 24%);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 8px;
|
||||
margin-top: 1.5rem;
|
||||
.planet::after {
|
||||
inset: auto;
|
||||
width: 140%;
|
||||
height: 18%;
|
||||
left: -20%;
|
||||
top: 42%;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
transform: rotate(-18deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
color: #6c757d;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 1px;
|
||||
.planet-one {
|
||||
width: clamp(160px, 18vw, 260px);
|
||||
height: clamp(160px, 18vw, 260px);
|
||||
top: 12%;
|
||||
right: 10%;
|
||||
background:
|
||||
radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92), transparent 18%),
|
||||
radial-gradient(circle at 42% 40%, rgba(93, 214, 255, 0.95), rgba(44, 93, 255, 0.62) 58%, rgba(13, 19, 55, 0.9) 100%);
|
||||
}
|
||||
|
||||
.table td {
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
.planet-two {
|
||||
width: clamp(92px, 10vw, 150px);
|
||||
height: clamp(92px, 10vw, 150px);
|
||||
left: 8%;
|
||||
top: 18%;
|
||||
background:
|
||||
radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.8), transparent 16%),
|
||||
radial-gradient(circle at 42% 42%, rgba(121, 255, 177, 0.96), rgba(29, 125, 101, 0.74) 58%, rgba(8, 24, 30, 0.94) 100%);
|
||||
animation-duration: 26s;
|
||||
animation-delay: -8s;
|
||||
}
|
||||
|
||||
.table tr td:first-child { border-radius: 12px 0 0 12px; }
|
||||
.table tr td:last-child { border-radius: 0 12px 12px 0; }
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
.planet-three {
|
||||
width: clamp(200px, 24vw, 360px);
|
||||
height: clamp(200px, 24vw, 360px);
|
||||
left: -4%;
|
||||
bottom: -8%;
|
||||
background:
|
||||
radial-gradient(circle at 36% 20%, rgba(255, 255, 255, 0.84), transparent 14%),
|
||||
radial-gradient(circle at 44% 38%, rgba(255, 226, 122, 0.95), rgba(255, 138, 91, 0.78) 52%, rgba(73, 22, 15, 0.95) 100%);
|
||||
animation-duration: 28s;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
.planet-four {
|
||||
width: clamp(72px, 8vw, 122px);
|
||||
height: clamp(72px, 8vw, 122px);
|
||||
right: 18%;
|
||||
bottom: 20%;
|
||||
background:
|
||||
radial-gradient(circle at 38% 20%, rgba(255, 255, 255, 0.76), transparent 16%),
|
||||
radial-gradient(circle at 44% 42%, rgba(255, 170, 109, 0.95), rgba(169, 74, 224, 0.64) 56%, rgba(20, 12, 46, 0.95) 100%);
|
||||
animation-duration: 24s;
|
||||
animation-delay: -12s;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
.comet {
|
||||
top: -18vh;
|
||||
left: -24vw;
|
||||
width: clamp(120px, 16vw, 220px);
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 40%, rgba(93, 214, 255, 0.25) 100%);
|
||||
box-shadow: 0 0 14px rgba(93, 214, 255, 0.35);
|
||||
opacity: 0;
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #23a6d5;
|
||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
|
||||
.comet::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(93, 214, 255, 0.7) 48%, rgba(93, 214, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.comet-one {
|
||||
animation: cometFly 14s linear infinite;
|
||||
}
|
||||
|
||||
.header-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
.comet-two {
|
||||
animation: cometFly 18s linear infinite;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 2.5rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
.comet-three {
|
||||
animation: cometFly 22s linear infinite;
|
||||
animation-delay: 11s;
|
||||
}
|
||||
|
||||
.admin-card h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 700;
|
||||
.dust-glow {
|
||||
width: 22vw;
|
||||
height: 22vw;
|
||||
border-radius: 50%;
|
||||
filter: blur(48px);
|
||||
opacity: 0.18;
|
||||
animation: glowFloat 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
.dust-glow-one {
|
||||
top: 20%;
|
||||
left: 18%;
|
||||
background: radial-gradient(circle, rgba(93, 214, 255, 0.8), transparent 65%);
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: #212529;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
.dust-glow-two {
|
||||
right: 22%;
|
||||
bottom: 14%;
|
||||
background: radial-gradient(circle, rgba(121, 255, 177, 0.75), transparent 65%);
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: #0088cc;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
.error-stage {
|
||||
min-height: calc(100vh - var(--footer-height));
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 5vh 5vw calc(var(--footer-height) + 2vh);
|
||||
}
|
||||
|
||||
.webhook-url {
|
||||
font-size: 0.85em;
|
||||
color: #555;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.history-table-container {
|
||||
overflow-x: auto;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.history-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.history-table-time {
|
||||
width: 15%;
|
||||
white-space: nowrap;
|
||||
font-size: 0.85em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.history-table-user {
|
||||
width: 35%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.history-table-ai {
|
||||
width: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.no-messages {
|
||||
.error-hero {
|
||||
text-align: center;
|
||||
color: #777;
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
.error-kicker {
|
||||
margin: 0 0 1.25rem;
|
||||
letter-spacing: 0.44em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.error-code {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
font-size: clamp(9rem, 34vw, 28rem);
|
||||
line-height: 0.88;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.08em;
|
||||
color: #f8fdff;
|
||||
text-shadow:
|
||||
0 0 22px rgba(93, 214, 255, 0.32),
|
||||
0 0 80px rgba(93, 214, 255, 0.18),
|
||||
0 26px 120px rgba(0, 0, 0, 0.62);
|
||||
animation: codeFloat 10s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.error-code::before,
|
||||
.error-code::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.error-code::before {
|
||||
color: rgba(93, 214, 255, 0.38);
|
||||
transform: translate(-6px, 2px);
|
||||
}
|
||||
|
||||
.error-code::after {
|
||||
color: rgba(255, 138, 91, 0.28);
|
||||
transform: translate(6px, -2px);
|
||||
}
|
||||
|
||||
.error-subtitle {
|
||||
margin: 1rem auto 0;
|
||||
max-width: 560px;
|
||||
font-size: clamp(1rem, 1.8vw, 1.25rem);
|
||||
line-height: 1.7;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 1rem 1.25rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.8rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, rgba(10, 18, 42, 0.88), rgba(6, 10, 24, 0.76));
|
||||
backdrop-filter: blur(16px);
|
||||
box-shadow: var(--shadow);
|
||||
pointer-events: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 46px;
|
||||
padding: 0.8rem 1.1rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-link:hover,
|
||||
.footer-link:focus-visible {
|
||||
color: var(--ink);
|
||||
border-color: rgba(93, 214, 255, 0.45);
|
||||
background: rgba(93, 214, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.stellar-wave {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -8px;
|
||||
margin-top: -8px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 0 18px rgba(93, 214, 255, 0.24);
|
||||
animation: waveExpand 1.6s ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
from { transform: translate3d(0, 0, 0); }
|
||||
to { transform: translate3d(-140px, 180px, 0); }
|
||||
}
|
||||
|
||||
@keyframes pulseNebula {
|
||||
0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
|
||||
50% { transform: scale(1.08) translate3d(3vw, -2vw, 0); }
|
||||
}
|
||||
|
||||
@keyframes floatPlanet {
|
||||
0%, 100% { transform: translate3d(0, 0, 0); }
|
||||
50% { transform: translate3d(0, -18px, 0); }
|
||||
}
|
||||
|
||||
@keyframes cometFly {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) rotate(-24deg) scaleX(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
8% {
|
||||
opacity: 1;
|
||||
}
|
||||
62% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(140vw, 85vh, 0) rotate(-24deg) scaleX(1.08);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowFloat {
|
||||
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
|
||||
50% { transform: translate3d(24px, -18px, 0) scale(1.08); }
|
||||
}
|
||||
|
||||
@keyframes codeFloat {
|
||||
0%, 100% { transform: translate3d(0, 0, 0); }
|
||||
50% { transform: translate3d(0, -10px, 0); }
|
||||
}
|
||||
|
||||
@keyframes waveExpand {
|
||||
from {
|
||||
transform: scale(0.2);
|
||||
opacity: 0.86;
|
||||
}
|
||||
to {
|
||||
transform: scale(24);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
:root {
|
||||
--footer-height: 132px;
|
||||
}
|
||||
|
||||
.orbit-one {
|
||||
width: 110vw;
|
||||
height: 110vw;
|
||||
}
|
||||
|
||||
.orbit-two {
|
||||
width: 82vw;
|
||||
height: 82vw;
|
||||
}
|
||||
|
||||
.planet-one {
|
||||
top: 10%;
|
||||
right: 2%;
|
||||
}
|
||||
|
||||
.planet-three {
|
||||
left: -14%;
|
||||
bottom: -6%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
:root {
|
||||
--footer-height: 168px;
|
||||
}
|
||||
|
||||
.error-stage {
|
||||
padding-top: 9vh;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.error-kicker {
|
||||
letter-spacing: 0.28em;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.error-subtitle {
|
||||
max-width: 320px;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
width: min(100%, 560px);
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
flex: 1 1 calc(50% - 0.6rem);
|
||||
}
|
||||
|
||||
.planet-two {
|
||||
left: 0;
|
||||
top: 12%;
|
||||
}
|
||||
|
||||
.planet-four {
|
||||
right: 6%;
|
||||
bottom: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@ -1,39 +1,57 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const chatForm = document.getElementById('chat-form');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
const root = document.documentElement;
|
||||
const scene = document.getElementById('space-scene');
|
||||
const stage = document.getElementById('error-stage');
|
||||
const parallaxItems = Array.from(document.querySelectorAll('.parallax-item'));
|
||||
const backLink = document.querySelector('[data-action="back"]');
|
||||
|
||||
const appendMessage = (text, sender) => {
|
||||
const msgDiv = document.createElement('div');
|
||||
msgDiv.classList.add('message', sender);
|
||||
msgDiv.textContent = text;
|
||||
chatMessages.appendChild(msgDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
const moveScene = (clientX, clientY) => {
|
||||
const xRatio = clientX / window.innerWidth - 0.5;
|
||||
const yRatio = clientY / window.innerHeight - 0.5;
|
||||
|
||||
root.style.setProperty('--pointer-x', `${clientX}px`);
|
||||
root.style.setProperty('--pointer-y', `${clientY}px`);
|
||||
|
||||
parallaxItems.forEach((item) => {
|
||||
const depth = Number.parseFloat(item.dataset.depth || '0');
|
||||
const moveX = xRatio * depth;
|
||||
const moveY = yRatio * depth;
|
||||
item.style.transform = `translate3d(${moveX}px, ${moveY}px, 0)`;
|
||||
});
|
||||
};
|
||||
|
||||
chatForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const message = chatInput.value.trim();
|
||||
if (!message) return;
|
||||
document.addEventListener('pointermove', (event) => {
|
||||
moveScene(event.clientX, event.clientY);
|
||||
}, { passive: true });
|
||||
|
||||
appendMessage(message, 'visitor');
|
||||
chatInput.value = '';
|
||||
const spawnWave = (clientX, clientY) => {
|
||||
if (!scene) return;
|
||||
const wave = document.createElement('span');
|
||||
wave.className = 'stellar-wave';
|
||||
wave.style.left = `${clientX}px`;
|
||||
wave.style.top = `${clientY}px`;
|
||||
scene.appendChild(wave);
|
||||
window.setTimeout(() => wave.remove(), 1600);
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('api/chat.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// Artificial delay for realism
|
||||
setTimeout(() => {
|
||||
appendMessage(data.reply, 'bot');
|
||||
}, 500);
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
appendMessage("Sorry, something went wrong. Please try again.", 'bot');
|
||||
}
|
||||
stage?.addEventListener('click', (event) => {
|
||||
spawnWave(event.clientX, event.clientY);
|
||||
});
|
||||
|
||||
backLink?.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
if (window.history.length > 1) {
|
||||
window.history.back();
|
||||
return;
|
||||
}
|
||||
window.location.href = '/';
|
||||
});
|
||||
|
||||
window.addEventListener('blur', () => {
|
||||
parallaxItems.forEach((item) => {
|
||||
item.style.transform = 'translate3d(0, 0, 0)';
|
||||
});
|
||||
});
|
||||
|
||||
moveScene(window.innerWidth / 2, window.innerHeight / 2);
|
||||
});
|
||||
|
||||
182
index.php
182
index.php
@ -1,150 +1,78 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
@ini_set('display_errors', '1');
|
||||
@error_reporting(E_ALL);
|
||||
|
||||
@date_default_timezone_set('UTC');
|
||||
|
||||
$phpVersion = PHP_VERSION;
|
||||
$now = date('Y-m-d H:i:s');
|
||||
$siteName = $_SERVER['PROJECT_NAME'] ?? ($_SERVER['HTTP_HOST'] ?? 'Your Site');
|
||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Минималистичная космическая 404-страница с огромной цифрой 404, медленно парящими планетами и летящими кометами.';
|
||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
$currentPath = $_SERVER['REQUEST_URI'] ?? '/';
|
||||
$footerLinks = [
|
||||
['label' => 'На главную', 'href' => '/'],
|
||||
['label' => 'Обновить сигнал', 'href' => $currentPath],
|
||||
['label' => 'К старту', 'href' => '/'],
|
||||
['label' => 'Назад', 'href' => '#back', 'action' => 'back'],
|
||||
];
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<?php
|
||||
// Read project preview data from environment
|
||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
?>
|
||||
<?php if ($projectDescription): ?>
|
||||
<!-- Meta description -->
|
||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||
<!-- Open Graph meta tags -->
|
||||
<title>404 — Потерянная страница в космосе | <?= htmlspecialchars($siteName) ?></title>
|
||||
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<!-- Twitter meta tags -->
|
||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<?php endif; ?>
|
||||
<?php if ($projectImageUrl): ?>
|
||||
<!-- Open Graph image -->
|
||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<!-- Twitter image -->
|
||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<?php endif; ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes bg-pan {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.loader {
|
||||
margin: 1.25rem auto 1.25rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap; border: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
code {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?= htmlspecialchars((string)filemtime(__DIR__ . '/assets/css/custom.css')) ?>">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
</div>
|
||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||
</div>
|
||||
<div class="space-scene" id="space-scene" aria-hidden="true">
|
||||
<div class="starfield starfield-far"></div>
|
||||
<div class="starfield starfield-mid"></div>
|
||||
<div class="starfield starfield-near"></div>
|
||||
<div class="nebula nebula-left"></div>
|
||||
<div class="nebula nebula-right"></div>
|
||||
<div class="orbit orbit-one"></div>
|
||||
<div class="orbit orbit-two"></div>
|
||||
<div class="planet planet-one parallax-item" data-depth="26"></div>
|
||||
<div class="planet planet-two parallax-item" data-depth="-18"></div>
|
||||
<div class="planet planet-three parallax-item" data-depth="12"></div>
|
||||
<div class="planet planet-four parallax-item" data-depth="-10"></div>
|
||||
<div class="comet comet-one"></div>
|
||||
<div class="comet comet-two"></div>
|
||||
<div class="comet comet-three"></div>
|
||||
<div class="dust-glow dust-glow-one"></div>
|
||||
<div class="dust-glow dust-glow-two"></div>
|
||||
</div>
|
||||
|
||||
<main class="error-stage" id="error-stage">
|
||||
<section class="error-hero" aria-labelledby="error-title">
|
||||
<p class="error-kicker">lost transmission • deep space</p>
|
||||
<h1 class="error-code parallax-item" id="error-title" data-text="404" data-depth="8">404</h1>
|
||||
<p class="error-subtitle">Потерянная страница дрейфует где-то между орбитами.</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
|
||||
<footer class="footer-wrap">
|
||||
<nav class="footer-nav" aria-label="Footer navigation">
|
||||
<?php foreach ($footerLinks as $link): ?>
|
||||
<a
|
||||
class="footer-link"
|
||||
href="<?= htmlspecialchars($link['href']) ?>"
|
||||
<?php if (!empty($link['action'])): ?> data-action="<?= htmlspecialchars($link['action']) ?>"<?php endif; ?>
|
||||
><?= htmlspecialchars($link['label']) ?></a>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js?v=<?= htmlspecialchars((string)filemtime(__DIR__ . '/assets/js/main.js')) ?>" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user