mirror of
https://github.com/shadoll/www.shadoll.git
synced 2026-08-28 03:28:32 +00:00
Initial commit: Shadoll animated placeholder page
This commit is contained in:
+696
@@ -0,0 +1,696 @@
|
||||
/* ===== CSS Custom Properties ===== */
|
||||
:root {
|
||||
/* Gradient colors */
|
||||
--gradient-color-1: #667eea;
|
||||
--gradient-color-2: #764ba2;
|
||||
--gradient-color-3: #f093fb;
|
||||
--gradient-color-4: #4facfe;
|
||||
|
||||
/* Animation timings (can be overridden via speed multiplier) */
|
||||
--speed-multiplier: 1;
|
||||
--gradient-duration: calc(15s / var(--speed-multiplier));
|
||||
--logo-shake-duration: calc(3s / var(--speed-multiplier));
|
||||
--logo-rotate-duration: calc(8s / var(--speed-multiplier));
|
||||
--logo-tilt-duration: calc(4s / var(--speed-multiplier));
|
||||
--neon-duration: calc(2s / var(--speed-multiplier));
|
||||
--color-change-duration: calc(5s / var(--speed-multiplier));
|
||||
--explosion-duration: calc(3s / var(--speed-multiplier));
|
||||
}
|
||||
|
||||
/* ===== Reset & Base Styles ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
/* ===== Background Styles ===== */
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
background: linear-gradient(45deg, var(--gradient-color-1), var(--gradient-color-2));
|
||||
}
|
||||
|
||||
/* Animated Background */
|
||||
.background--animated {
|
||||
animation: gradientShift var(--gradient-duration) ease infinite;
|
||||
background-size: 400% 400%;
|
||||
}
|
||||
|
||||
/* Gradient Types */
|
||||
.background--linear {
|
||||
background: linear-gradient(45deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4));
|
||||
}
|
||||
|
||||
.background--radial {
|
||||
background: radial-gradient(circle at center, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4));
|
||||
}
|
||||
|
||||
.background--conic {
|
||||
background: conic-gradient(from 0deg at 50% 50%, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4), var(--gradient-color-1));
|
||||
}
|
||||
|
||||
/* ===== Background Animations ===== */
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
background-position: 50% 100%;
|
||||
filter: hue-rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
background-position: 50% 0%;
|
||||
filter: hue-rotate(270deg);
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Logo Container ===== */
|
||||
.logo-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100vmin;
|
||||
height: 100vmin;
|
||||
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* SVG groups for proper scaling and positioning */
|
||||
.logo-element {
|
||||
transform-origin: center;
|
||||
transform-box: fill-box;
|
||||
}
|
||||
|
||||
/* ===== Full Logo Animations ===== */
|
||||
|
||||
/* Shake Animation */
|
||||
.logo--shake {
|
||||
animation: shake var(--logo-shake-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-2px, -2px) rotate(-1deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(2px, 2px) rotate(1deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(-2px, 2px) rotate(-1deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(2px, -2px) rotate(1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-2px, -2px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(2px, 2px) rotate(1deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(-2px, 2px) rotate(-1deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, -2px) rotate(1deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(-2px, -2px) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Rotate Animation */
|
||||
.logo--rotate {
|
||||
animation: rotate var(--logo-rotate-duration) linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tilt Animation */
|
||||
.logo--tilt {
|
||||
animation: tilt var(--logo-tilt-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes tilt {
|
||||
0%, 100% {
|
||||
transform: perspective(400px) rotateY(0deg) rotateX(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: perspective(400px) rotateY(15deg) rotateX(-10deg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(400px) rotateY(0deg) rotateX(10deg);
|
||||
}
|
||||
75% {
|
||||
transform: perspective(400px) rotateY(-15deg) rotateX(-10deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* All Full Logo Animations Combined */
|
||||
.logo--all {
|
||||
animation:
|
||||
shake var(--logo-shake-duration) ease-in-out infinite,
|
||||
rotate calc(var(--logo-rotate-duration) * 2) linear infinite,
|
||||
tilt calc(var(--logo-tilt-duration) * 1.5) ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ===== Internal Element Animations ===== */
|
||||
|
||||
/* Neon Blinking */
|
||||
.logo-element--neon {
|
||||
animation: neonBlink var(--neon-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes neonBlink {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 5px currentColor);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor) drop-shadow(0 0 30px currentColor);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Change */
|
||||
.logo-element-l--color {
|
||||
animation: colorChangeL var(--color-change-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logo-element-s--color {
|
||||
animation: colorChangeS var(--color-change-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes colorChangeL {
|
||||
0%, 100% {
|
||||
fill: #222;
|
||||
}
|
||||
25% {
|
||||
fill: #667eea;
|
||||
}
|
||||
50% {
|
||||
fill: #f093fb;
|
||||
}
|
||||
75% {
|
||||
fill: #4facfe;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes colorChangeS {
|
||||
0%, 100% {
|
||||
fill: #dc2108;
|
||||
}
|
||||
25% {
|
||||
fill: #f093fb;
|
||||
}
|
||||
50% {
|
||||
fill: #ffd700;
|
||||
}
|
||||
75% {
|
||||
fill: #00ff00;
|
||||
}
|
||||
}
|
||||
|
||||
/* Explosion Animation */
|
||||
.logo-element-l--explosion {
|
||||
animation: explosionL var(--explosion-duration) ease-in-out infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.logo-element-s--explosion {
|
||||
animation: explosionS var(--explosion-duration) ease-in-out infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes explosionL {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translate(30px, -30px) scale(1.5) rotate(45deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes explosionS {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-30px, 30px) scale(1.5) rotate(-45deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse Animation (bonus) */
|
||||
.logo-element--pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* All Element Animations Combined */
|
||||
.logo-element--all {
|
||||
animation:
|
||||
neonBlink var(--neon-duration) ease-in-out infinite,
|
||||
pulse calc(var(--neon-duration) * 1.5) ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logo-element-l--all {
|
||||
animation:
|
||||
colorChangeL var(--color-change-duration) ease-in-out infinite,
|
||||
explosionL var(--explosion-duration) ease-in-out infinite,
|
||||
neonBlink var(--neon-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logo-element-s--all {
|
||||
animation:
|
||||
colorChangeS var(--color-change-duration) ease-in-out infinite,
|
||||
explosionS var(--explosion-duration) ease-in-out infinite,
|
||||
neonBlink var(--neon-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Individual S paths */
|
||||
.s-path-1, .s-path-2 {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.s-path-1--fly {
|
||||
animation: flyPath1 var(--explosion-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
.s-path-2--fly {
|
||||
animation: flyPath2 var(--explosion-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes flyPath1 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-40px, 40px) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyPath2 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-40px, -40px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Toast Notification ===== */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-100px);
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
color: #fff;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
color: var(--gradient-color-1);
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ===== Help Button ===== */
|
||||
.help-button {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: #fff;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.help-button:hover {
|
||||
background: rgba(102, 126, 234, 0.9);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.help-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* ===== Help Window ===== */
|
||||
.help-window {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
width: 500px;
|
||||
max-width: calc(100vw - 40px);
|
||||
max-height: calc(100vh - 120px);
|
||||
background: rgba(20, 20, 30, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
.help-window.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.help-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.help-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.help-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.help-close:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: 20px 24px;
|
||||
max-height: calc(100vh - 220px);
|
||||
overflow-y: auto;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.help-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.help-content::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.help-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(102, 126, 234, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.help-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(102, 126, 234, 0.7);
|
||||
}
|
||||
|
||||
.help-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.help-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.help-section h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gradient-color-1);
|
||||
margin: 0 0 12px 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.help-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.help-item kbd {
|
||||
display: inline-block;
|
||||
min-width: 28px;
|
||||
padding: 4px 8px;
|
||||
margin-right: 12px;
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
border: 1px solid rgba(102, 126, 234, 0.4);
|
||||
border-radius: 4px;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: var(--gradient-color-1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.help-section-url {
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.help-code {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
color: var(--gradient-color-3);
|
||||
margin-bottom: 16px;
|
||||
word-break: break-all;
|
||||
border: 1px solid rgba(249, 147, 251, 0.2);
|
||||
}
|
||||
|
||||
.help-params {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.help-params div {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.help-params strong {
|
||||
color: var(--gradient-color-1);
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* ===== Responsive Design ===== */
|
||||
@media (max-width: 768px) {
|
||||
.logo {
|
||||
width: 60vmin;
|
||||
height: 60vmin;
|
||||
}
|
||||
|
||||
.toast {
|
||||
top: 15px;
|
||||
padding: 12px 20px;
|
||||
font-size: 13px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.help-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.help-window {
|
||||
top: 70px;
|
||||
right: 10px;
|
||||
width: calc(100vw - 20px);
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.help-header {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.help-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo {
|
||||
width: 70vmin;
|
||||
height: 70vmin;
|
||||
}
|
||||
|
||||
.toast {
|
||||
top: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.help-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 18px;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.help-window {
|
||||
top: 60px;
|
||||
right: 8px;
|
||||
width: calc(100vw - 16px);
|
||||
max-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
.help-header {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.help-header h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.help-item {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.help-item kbd {
|
||||
font-size: 12px;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.help-code {
|
||||
font-size: 11px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Accessibility ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user