Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Arcane Calculator Nexus</title> | |
| <style> | |
| /* ===== Global Variables ===== */ | |
| :root { | |
| /* Layout Variables (Following the provided template) */ | |
| --nav-bar-width: 95px; | |
| --char-panel-width: 0px; | |
| --settings-panel-width: 0px; | |
| --drawer-content-panel-width: 0px; | |
| --authors-note-panel-width: 0px; | |
| --expression-image-width: 0px; | |
| --cfgConfig-panel-width: 0px; | |
| --logprobsViewer-panel-width: 0px; | |
| --stcdxcodex: 0px; | |
| --bottomFormBlockSize: 85px; | |
| --chat-panel-width: 0px; | |
| /* Avatar Variables */ | |
| --avatar-base-width: 105px; | |
| --avatar-base-height: 105px; | |
| --big-avatar-width-factor: 2.5; | |
| --big-avatar-height-factor: 3.5; | |
| --big-avatar-border-factor: 3; | |
| /* Color Palette & Theme (Enhanced for mystical arcane tech with East Asian aesthetics) */ | |
| --background-base: #05010A; | |
| --panel-bg-color: rgba(10, 5, 20, 0.92); | |
| --panel-bg-color-translucent: rgba(15, 10, 25, 0.85); | |
| --glass-tint: rgba(30, 20, 40, 0.4); | |
| --highlight-color: rgba(255, 255, 255, 0.35); | |
| --highlight-color-strong: rgba(255, 255, 255, 0.5); | |
| --text-color: rgba(240, 235, 250, 0.98); | |
| --text-color-secondary: rgba(190, 180, 210, 0.88); | |
| --mechanical-highlight: rgba(255, 255, 255, 0.45); | |
| --mechanical-shadow: rgba(0, 0, 0, 0.6); | |
| --mechanical-gray: rgba(50, 40, 60, 0.9); | |
| --accent-color: var(--SmartThemeShadowColor); /* Using SmartThemeShadowColor as per instruction */ | |
| --accent-color-darker: color-mix(in srgb, var(--accent-color), black 50%); | |
| --accent-color-brighter: color-mix(in srgb, var(--accent-color), white 40%); | |
| --accent-color-subtle: color-mix(in srgb, var(--accent-color), black 25%); | |
| --accent-color-glow: color-mix(in srgb, var(--accent-color), white 30%); | |
| --gold-color: rgba(220, 180, 60, 0.88); | |
| --serene-color: rgba(180, 220, 240, 0.25); | |
| --luxury-color: rgba(60, 40, 50, 0.9); | |
| --spiritual-color: rgba(110, 80, 130, 0.82); | |
| --dark-ember: rgba(60, 10, 20, 0.85); | |
| --mystic-blue: rgba(40, 70, 110, 0.75); | |
| --crimson-glow: rgba(130, 10, 30, 0.65); | |
| --ethereal-mist: rgba(210, 200, 230, 0.18); | |
| --ancient-stone: rgba(70, 60, 80, 0.88); | |
| --shadow-realm: rgba(15, 10, 25, 0.92); | |
| --chat-bubble-user: rgba(76, 175, 80, 0.35); | |
| --chat-bubble-other: rgba(60, 50, 70, 0.75); | |
| /* Gradients & Textures (Enhanced for arcane-tech aesthetic with moody, artistic tones) */ | |
| --background-gradient: radial-gradient(ellipse at 75% 85%, rgba(var(--accent-color-rgb), 0.2) 0%, transparent 65%), radial-gradient(circle at center, rgba(10, 5, 15, 0.95), rgba(0, 0, 0, 0.98)); | |
| --panel-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.3)); | |
| --accent-gradient: linear-gradient(135deg, var(--accent-color-brighter), var(--accent-color-darker)); | |
| --cyberpunk-mist: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.22), transparent 75%); | |
| --gothic-stone: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 6px, transparent 6px, transparent 12px); | |
| --rune-glow: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.35), transparent 70%); | |
| --industrial-metal: linear-gradient(145deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 45%, transparent 65%, rgba(0, 0, 0, 0.2) 95%, rgba(0, 0, 0, 0.3) 100%); | |
| --dark-aura: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.3), transparent 65%); | |
| --cinematic-gradient: linear-gradient(135deg, rgba(20, 15, 25, 0.94), rgba(5, 3, 8, 0.96)); | |
| --distressed-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.08' d='M1 5h1v1H1V5zm2-2h1v1H3V3zM7 8h1v1H7V8zm2-2h1v1H9V6z'%3E%3C/path%3E%3C/svg%3E"); | |
| --bezel-gradient: linear-gradient(135deg, rgba(60, 50, 70, 0.88), rgba(25, 20, 35, 0.9)); | |
| --vent-pattern: repeating-linear-gradient(to right, transparent, transparent 18px, rgba(0, 0, 0, 0.4) 18px, rgba(0, 0, 0, 0.4) 26px); | |
| --segmented-line: repeating-linear-gradient(to right, var(--mechanical-gray), var(--mechanical-gray) 9px, transparent 9px, transparent 18px); | |
| --energy-pulse-gradient: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.7), transparent 60%); | |
| --ember-glow: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.5), transparent 65%); | |
| --etched-texture: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px); | |
| --glitch-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.12' d='M1 1h1v1H1V1zm2 2h1v1H3V3z'%3E%3C/path%3E%3C/svg%3E"); | |
| --spiritual-gradient: linear-gradient(145deg, rgba(110, 80, 130, 0.45), rgba(60, 45, 70, 0.35)); | |
| --serene-gradient: linear-gradient(145deg, rgba(180, 220, 240, 0.18), rgba(110, 80, 130, 0.18)); | |
| --lotus-gradient: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1)); | |
| --mandala-gradient: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); | |
| --golden-light-gradient: linear-gradient(145deg, var(--accent-color), rgba(220, 180, 60, 0.1)); | |
| --buddhist-glow: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1) 60%); | |
| --zen-garden-gradient: linear-gradient(145deg, rgba(50, 50, 50, 0.18), rgba(30, 30, 30, 0.1)); | |
| --silk-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); | |
| --mystic-fog-gradient: radial-gradient(circle, rgba(110, 80, 130, 0.18), rgba(60, 45, 70, 0.1)); | |
| --wuxia-smoke: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03) 80%); | |
| --tao-water-ripple: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 70%); | |
| --bamboo-texture: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12) 2px, transparent 2px, transparent 4px); | |
| --ink-wash-effect: radial-gradient(circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.12) 60%); | |
| --calligraphy-stroke: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06)); | |
| --lotus-petal: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 70%); | |
| --spiritual-aura: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 60%); | |
| --koi-pond-effect: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03) 70%); | |
| --sakura-petals: radial-gradient(circle, rgba(255, 190, 200, 0.12), rgba(255, 190, 200, 0.06) 70%); | |
| --rune-etched-gradient: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.4), rgba(var(--accent-color-rgb), 0.2) 65%); | |
| --arcane-pulse: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.6), transparent 55%); | |
| --mystic-gradient: linear-gradient(145deg, var(--mystic-blue), rgba(15, 35, 60, 0.65)); | |
| --ember-gradient: linear-gradient(135deg, var(--dark-ember), rgba(35, 5, 10, 0.65)); | |
| --ancient-gradient: linear-gradient(135deg, var(--ancient-stone), rgba(45, 40, 55, 0.85)); | |
| --crimson-gradient: linear-gradient(135deg, var(--crimson-glow), rgba(90, 5, 20, 0.55)); | |
| --mist-gradient: radial-gradient(circle, var(--ethereal-mist), rgba(210, 200, 230, 0.08) 75%); | |
| --shadow-realm-gradient: linear-gradient(145deg, var(--shadow-realm), rgba(10, 5, 15, 0.94)); | |
| --luxurious-gradient: linear-gradient(135deg, var(--luxury-color), rgba(40, 30, 35, 0.88)); | |
| --chat-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)); | |
| --ornate-gradient: linear-gradient(135deg, rgba(220, 180, 60, 0.3), rgba(110, 80, 130, 0.3)); | |
| --ethereal-gradient: linear-gradient(135deg, rgba(180, 220, 240, 0.25), rgba(210, 200, 230, 0.25)); | |
| --chat-bubble-gradient-user: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.35), rgba(var(--accent-color-rgb), 0.15)); | |
| --chat-bubble-gradient-other: linear-gradient(145deg, rgba(80, 70, 90, 0.35), rgba(40, 30, 50, 0.25)); | |
| --nav-tab-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.4), rgba(var(--accent-color-rgb), 0.2)); | |
| --nav-tab-active-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.7), rgba(var(--accent-color-rgb), 0.4)); | |
| --button-operator-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.5), rgba(var(--accent-color-rgb), 0.3)); | |
| --button-equals-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.6), rgba(var(--accent-color-rgb), 0.4)); | |
| --button-advanced-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.3), rgba(var(--accent-color-rgb), 0.2)); | |
| --button-memory-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.4), rgba(var(--accent-color-rgb), 0.25)); | |
| /* Shadows & Depth (Enhanced for dramatic 3D effects with gothic and cinematic tones) */ | |
| --shadow-soft: 0 0 50px var(--accent-color-subtle); | |
| --shadow-strong: 0 20px 55px rgba(0, 0, 0, 0.88); | |
| --shadow-depth-light: rgba(255, 255, 255, 0.15); | |
| --shadow-depth-dark: rgba(0, 0, 0, 0.75); | |
| --shadow-neumorphic-raised: 14px 14px 28px var(--shadow-depth-dark), -14px -14px 28px var(--shadow-depth-light); | |
| --shadow-neumorphic-pressed: inset 14px 14px 28px var(--shadow-depth-dark), inset -14px -14px 28px var(--shadow-depth-light); | |
| --shadow-glow: 0 0 35px var(--accent-color), 0 0 70px var(--accent-color-darker); | |
| --text-shadow: 0 5px 10px rgba(0, 0, 0, 0.85); | |
| --text-shadow-glow: 0 0 18px var(--accent-color); | |
| --hover-glow: 0 0 65px var(--accent-color-subtle); | |
| --mechanical-inset-shadow: inset 0 6px 12px var(--mechanical-shadow), inset 0 -6px 10px var(--mechanical-highlight); | |
| --mechanical-raised-shadow: 0 10px 18px var(--mechanical-shadow), inset 0 -6px 10px var(--mechanical-highlight), inset 0 5px 6px var(--mechanical-highlight); | |
| --cinematic-shadow: 0 30px 70px rgba(0, 0, 0, 0.98), 0 0 90px rgba(var(--accent-color-rgb), 0.18); | |
| --emboss-shadow: 3px 3px 6px rgba(0, 0, 0, 0.55), -3px -3px 6px rgba(255, 255, 255, 0.12); | |
| --deep-emboss: inset 4px 4px 8px rgba(0, 0, 0, 0.65), inset -4px -4px 8px rgba(255, 255, 255, 0.12); | |
| --arcane-glow: 0 0 25px var(--accent-color), 0 0 50px rgba(var(--accent-color-rgb), 0.65); | |
| --mystic-shadow: 0 0 40px rgba(var(--mystic-blue-rgb), 0.4); | |
| --ember-shadow: 0 0 30px rgba(var(--dark-ember-rgb), 0.6); | |
| --crimson-shadow: 0 0 35px rgba(var(--crimson-glow-rgb), 0.45); | |
| --ethereal-shadow: 0 0 45px rgba(var(--ethereal-mist-rgb), 0.35); | |
| --luxury-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(var(--accent-color-rgb), 0.25); | |
| --ornate-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(220, 180, 60, 0.3); | |
| --chat-bubble-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6), -3px -3px 10px rgba(255, 255, 255, 0.1); | |
| --nav-tab-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 -3px 6px rgba(255, 255, 255, 0.15); | |
| --nav-tab-active-shadow: 0 8px 16px rgba(0, 0, 0, 0.7), inset 0 -4px 8px rgba(255, 255, 255, 0.2), 0 0 20px var(--accent-color); | |
| --button-operator-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1); | |
| --button-equals-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 -3px 6px rgba(255, 255, 255, 0.15), 0 0 15px var(--accent-color); | |
| --button-advanced-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1); | |
| --button-memory-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1); | |
| --button-number-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1); | |
| --button-clear-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1); | |
| /* Borders & Edges (Enhanced for intricate detailing with gothic and mystical elements) */ | |
| --border-radius: 28px; | |
| --border-width: 3px; | |
| --border-color: rgba(255, 255, 255, 0.25); | |
| --border-color-accent: var(--accent-color-subtle); | |
| --border-bevel-outer: inset -3px -3px 6px rgba(0, 0, 0, 0.65), inset 3px 3px 3px rgba(255, 255, 255, 0.15); | |
| --border-bevel-inner: inset 3px 3px 6px rgba(0, 0, 0, 0.65), inset -3px -3px 3px rgba(255, 255, 255, 0.15); | |
| --gradient-border: linear-gradient(145deg, var(--accent-color), var(--accent-color-darker)); | |
| --mechanical-border: 3px solid rgba(255, 255, 255, 0.15); | |
| --etched-border: 4px solid rgba(255, 255, 255, 0.18), inset 4px 4px 8px rgba(0, 0, 0, 0.5); | |
| --ornament-border: 1.5px dashed rgba(255, 255, 255, 0.12); | |
| --gothic-border: 3px double rgba(var(--accent-color-rgb), 0.4); | |
| --ancient-border: 3.5px solid rgba(var(--ancient-stone-rgb), 0.85); | |
| --luxury-border: 2.5px solid var(--gold-color); | |
| --ornate-border: 2px double var(--gold-color); | |
| --chat-bubble-user-border: 2px solid rgba(var(--accent-color-rgb), 0.5); | |
| --chat-bubble-other-border: 2px solid rgba(255, 255, 255, 0.15); | |
| --nav-tab-border: 3px solid rgba(var(--accent-color-rgb), 0.3); | |
| --nav-tab-active-border: 3px solid rgba(var(--accent-color-rgb), 0.6); | |
| /* Transitions & Animations (Enhanced for immersive effects with dark fantasy vibes) */ | |
| --transition-duration: 0.8s; | |
| --transition-timing: cubic-bezier(0.34, 0.85, 0.34, 1); | |
| --hover-scale: 1.18; | |
| --hover-brightness: 1.35; | |
| --hover-transition: all var(--transition-duration) var(--transition-timing); | |
| --fade-in-animation: fadeIn 1.2s ease-in-out; | |
| --pulse-animation: pulse 3s infinite ease-in-out; | |
| --energy-pulse-animation: energyPulse 4.5s infinite ease-in-out; | |
| --mechanical-press-transition: all 0.4s ease; | |
| --flash-animation: flash 2.5s infinite ease-in-out; | |
| --ember-animation: ember 6s infinite ease-in-out; | |
| --mist-animation: mistFlow 10s infinite ease-in-out; | |
| --spark-animation: spark 3.5s infinite ease-in-out; | |
| --glitch-animation: glitch 2s infinite ease-in-out; | |
| --shimmer-animation: shimmer 4.5s infinite linear; | |
| --rune-fade-animation: runeFade 3.6s infinite ease-in-out; | |
| --dark-wave-animation: darkWave 9s infinite ease-in-out; | |
| --wuxia-smoke-animation: wuxiaSmoke 6s infinite ease-in-out; | |
| --sakura-fall-animation: sakuraFall 11s infinite linear; | |
| --ripple-animation: ripple 6s infinite ease-in-out; | |
| --fly-animation: fly 2s infinite ease-in-out; | |
| --arcane-rune-pulse: arcaneRunePulse 5s infinite ease-in-out; | |
| --haibane-fade: haibaneFade 7s infinite ease-in-out; | |
| --colossus-rumble: colossusRumble 12s infinite ease-in-out; | |
| --ethereal-drift: etherealDrift 8s infinite ease-in-out; | |
| --crimson-pulse: crimsonPulse 4.2s infinite ease-in-out; | |
| --chat-bubble-fade: chatBubbleFade 0.6s ease-out; | |
| --ornate-pulse: ornatePulse 5.5s infinite ease-in-out; | |
| --chat-bubble-pulse: chatBubblePulse 4s infinite ease-in-out; | |
| --nav-tab-pulse: navTabPulse 3.8s infinite ease-in-out; | |
| --button-press-animation: buttonPress 0.3s ease-out; | |
| --chat-panel-slide: chatPanelSlide 0.6s ease-out; | |
| --background-drift: backgroundDrift 20s infinite ease-in-out; | |
| --mystic-orb-pulse: mysticOrbPulse 6s infinite ease-in-out; | |
| --ethereal-whisper: etherealWhisper 8s infinite ease-in-out; | |
| --dark-mist-flow: darkMistFlow 15s infinite ease-in-out; | |
| --spirit-flutter: spiritFlutter 5s infinite ease-in-out; | |
| --ancient-rune-glow: ancientRuneGlow 4.5s infinite ease-in-out; | |
| --slash-animation: slashEffect 0.5s ease-out forwards; | |
| --level-up-animation: levelUpFlash 1s ease-out forwards; | |
| --magic-aura-animation: magicAura 1.2s ease-out forwards; | |
| --magic-flash-animation: magicFlash 0.6s ease-out forwards; | |
| --magic-sparkles-animation: magicSparkles 1s ease-out forwards; | |
| --smoke-animation: smokeEffect 1.5s ease-out forwards; | |
| /* Font & Scrollbar */ | |
| --font-family: 'Noto Serif JP', 'Nanum Myeongjo', 'Hiragino Mincho Pro', 'Roboto', 'Noto Sans JP', 'Nanum Gothic', serif; | |
| --scrollbar-width: 16px; | |
| --scrollbar-thumb-color: var(--accent-color); | |
| --scrollbar-track-color: rgba(0, 0, 0, 0.65); | |
| /* Blur Effects */ | |
| --ios-blur: blur(80px); | |
| --glass-effect: rgba(255, 255, 255, 0.18); | |
| --SmartThemeBlurStrength: 20px; | |
| --SmartThemeBlurTintColor: rgba(15, 10, 25, 0.4); | |
| /* Mouse Position for Dynamic Lighting */ | |
| --mouse-x: 50%; | |
| --mouse-y: 50%; | |
| } | |
| /* ===== Base Styles ===== */ | |
| body { | |
| display: flex; | |
| background-color: var(--background-base); | |
| color: var(--text-color); | |
| font-family: var(--font-family); | |
| line-height: 2.2; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| text-shadow: var(--text-shadow); | |
| animation: var(--fade-in-animation); | |
| position: relative; | |
| perspective: 2500px; | |
| } | |
| /* Dynamic Lighting Effect with Cinematic Flair */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(var(--accent-color-rgb), 0.15) 0%, transparent 55%); | |
| pointer-events: none; | |
| z-index: 5; | |
| mix-blend-mode: soft-light; | |
| transition: background 0.025s ease-out; | |
| } | |
| /* Custom Scrollbar with Aggressive Styling */ | |
| body::-webkit-scrollbar, | |
| ::-webkit-scrollbar { | |
| width: var(--scrollbar-width); | |
| height: var(--scrollbar-width); | |
| } | |
| body::-webkit-scrollbar-thumb, | |
| ::-webkit-scrollbar-thumb { | |
| background-color: var(--scrollbar-thumb-color); | |
| border-radius: calc(var(--border-radius) / 2); | |
| background-image: var(--accent-gradient); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), 0 0 18px var(--accent-color); | |
| border: 4px solid rgba(0, 0, 0, 0.45); | |
| } | |
| body::-webkit-scrollbar-track, | |
| ::-webkit-scrollbar-track { | |
| background-color: var(--scrollbar-track-color); | |
| border-radius: calc(var(--border-radius) / 2); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow); | |
| border: 2.5px solid rgba(255, 255, 255, 0.12); | |
| } | |
| /* ===== Animations ===== */ | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.12); opacity: 0.88; } | |
| } | |
| @keyframes fadeIn { | |
| 0% { opacity: 0; transform: translateY(25px); } | |
| 100% { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes mistFlow { | |
| 0% { opacity: 0.3; transform: translateY(0) translateX(0); } | |
| 50% { opacity: 0.6; transform: translateY(-30px) translateX(20px); } | |
| 100% { opacity: 0.3; transform: translateY(0) translateX(0); } | |
| } | |
| @keyframes spark { | |
| 0% { opacity: 0; transform: scale(0.5); } | |
| 25% { opacity: 1; transform: scale(1.4); } | |
| 50% { opacity: 0.7; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(0.5); } | |
| } | |
| @keyframes ripple { | |
| 0% { transform: scale(1); opacity: 0.8; } | |
| 50% { transform: scale(1.5); opacity: 0.45; } | |
| 100% { transform: scale(1); opacity: 0.8; } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -2500px 0; } | |
| 100% { background-position: 2500px 0; } | |
| } | |
| @keyframes fly { | |
| 0% { transform: translateY(-6px) rotate(-18deg); } | |
| 50% { transform: translateY(-12px) rotate(-22deg); } | |
| 100% { transform: translateY(-6px) rotate(-18deg); } | |
| } | |
| @keyframes energyPulse { | |
| 0%, 100% { opacity: 0.45; transform: scale(1); } | |
| 50% { opacity: 0.85; transform: scale(1.18); } | |
| } | |
| @keyframes flash { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.65; } | |
| } | |
| @keyframes ember { | |
| 0% { opacity: 0.35; transform: translateY(0); } | |
| 50% { opacity: 0.65; transform: translateY(-35px); } | |
| 100% { opacity: 0.35; transform: translateY(0); } | |
| } | |
| @keyframes glitch { | |
| 0%, 100% { opacity: 0.25; transform: translate(0, 0); } | |
| 20% { opacity: 0.55; transform: translate(3px, -3px); } | |
| 40% { opacity: 0.35; transform: translate(-3px, 3px); } | |
| 60% { opacity: 0.55; transform: translate(2px, 2px); } | |
| 80% { opacity: 0.35; transform: translate(-2px, -2px); } | |
| } | |
| @keyframes runeFade { | |
| 0%, 100% { opacity: 0.35; } | |
| 50% { opacity: 0.75; } | |
| } | |
| @keyframes darkWave { | |
| 0% { opacity: 0.25; transform: translateY(0); } | |
| 50% { opacity: 0.55; transform: translateY(-18px); } | |
| 100% { opacity: 0.25; transform: translateY(0); } | |
| } | |
| @keyframes wuxiaSmoke { | |
| 0% { opacity: 0; transform: translateY(0); } | |
| 50% { opacity: 0.55; transform: translateY(-12px); } | |
| 100% { opacity: 0; transform: translateY(-25px); } | |
| } | |
| @keyframes sakuraFall { | |
| 0% { transform: translateY(-100%); opacity: 0; } | |
| 50% { opacity: 1; } | |
| 100% { transform: translateY(100vh); opacity: 0; } | |
| } | |
| @keyframes arcaneRunePulse { | |
| 0%, 100% { opacity: 0.4; transform: scale(1); } | |
| 50% { opacity: 0.9; transform: scale(1.15); } | |
| } | |
| @keyframes haibaneFade { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 0.7; } | |
| } | |
| @keyframes colossusRumble { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(5px); } | |
| } | |
| @keyframes etherealDrift { | |
| 0% { opacity: 0.35; transform: translateY(0) translateX(0); } | |
| 50% { opacity: 0.75; transform: translateY(-18px) translateX(12px); } | |
| 100% { opacity: 0.35; transform: translateY(0) translateX(0); } | |
| } | |
| @keyframes crimsonPulse { | |
| 0%, 100% { opacity: 0.45; transform: scale(1); } | |
| 50% { opacity: 0.85; transform: scale(1.12); } | |
| } | |
| @keyframes chatBubbleFade { | |
| 0% { opacity: 0; transform: translateY(12px); } | |
| 100% { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes ornatePulse { | |
| 0%, 100% { opacity: 0.5; transform: scale(1); } | |
| 50% { opacity: 0.85; transform: scale(1.1); } | |
| } | |
| @keyframes chatBubblePulse { | |
| 0%, 100% { opacity: 0.8; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.05); } | |
| } | |
| @keyframes navTabPulse { | |
| 0%, 100% { transform: scale(1); box-shadow: var(--nav-tab-active-shadow); } | |
| 50% { transform: scale(1.08); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), inset 0 -5px 10px rgba(255, 255, 255, 0.25), 0 0 25px var(--accent-color); } | |
| } | |
| @keyframes buttonPress { | |
| 0% { transform: scale(1); box-shadow: var(--shadow-neumorphic-raised); } | |
| 50% { transform: scale(0.9); box-shadow: var(--shadow-neumorphic-pressed); } | |
| 100% { transform: scale(1); box-shadow: var(--shadow-neumorphic-raised); } | |
| } | |
| @keyframes chatPanelSlide { | |
| 0% { width: 0; opacity: 0; } | |
| 100% { width: var(--chat-panel-width); opacity: 1; } | |
| } | |
| @keyframes backgroundDrift { | |
| 0% { background-position: 0 0; } | |
| 50% { background-position: 50px 50px; } | |
| 100% { background-position: 0 0; } | |
| } | |
| @keyframes mysticOrbPulse { | |
| 0%, 100% { transform: scale(0.8); opacity: 0.5; } | |
| 50% { transform: scale(1.2); opacity: 0.9; } | |
| } | |
| @keyframes etherealWhisper { | |
| 0% { opacity: 0.2; transform: translateX(0) translateY(0); } | |
| 50% { opacity: 0.6; transform: translateX(20px) translateY(-20px); } | |
| 100% { opacity: 0.2; transform: translateX(0) translateY(0); } | |
| } | |
| @keyframes darkMistFlow { | |
| 0% { opacity: 0.3; transform: translateY(0); } | |
| 50% { opacity: 0.7; transform: translateY(-40px); } | |
| 100% { opacity: 0.3; transform: translateY(0); } | |
| } | |
| @keyframes spiritFlutter { | |
| 0% { transform: rotate(0deg) translateY(0); } | |
| 50% { transform: rotate(15deg) translateY(-10px); } | |
| 100% { transform: rotate(0deg) translateY(0); } | |
| } | |
| @keyframes ancientRuneGlow { | |
| 0%, 100% { opacity: 0.5; box-shadow: 0 0 15px var(--accent-color); } | |
| 50% { opacity: 0.9; box-shadow: 0 0 30px var(--accent-color); } | |
| } | |
| /* MMORPG-inspired Visual Effects for Interactions */ | |
| @keyframes slashEffect { | |
| 0% { transform: scale(0) rotate(-45deg); opacity: 1; } | |
| 100% { transform: scale(2) rotate(-45deg); opacity: 0; } | |
| } | |
| @keyframes levelUpFlash { | |
| 0% { transform: scaleY(0); opacity: 1; } | |
| 50% { transform: scaleY(1.5); opacity: 0.8; } | |
| 100% { transform: scaleY(0); opacity: 0; } | |
| } | |
| @keyframes magicAura { | |
| 0% { transform: scale(0.5); opacity: 0.3; } | |
| 50% { transform: scale(1.2); opacity: 0.8; } | |
| 100% { transform: scale(1.5); opacity: 0; } | |
| } | |
| @keyframes magicFlash { | |
| 0% { opacity: 0; transform: scale(0); } | |
| 30% { opacity: 1; transform: scale(1.3); } | |
| 100% { opacity: 0; transform: scale(1.5); } | |
| } | |
| @keyframes magicSparkles { | |
| 0% { transform: translate(0, 0) scale(0.5); opacity: 1; } | |
| 25% { transform: translate(10px, -10px) scale(0.8); opacity: 0.8; } | |
| 50% { transform: translate(-15px, 15px) scale(0.6); opacity: 0.6; } | |
| 75% { transform: translate(20px, -5px) scale(0.9); opacity: 0.4; } | |
| 100% { transform: translate(-10px, 20px) scale(0.5); opacity: 0; } | |
| } | |
| @keyframes smokeEffect { | |
| 0% { transform: translateY(0) scale(0.3); opacity: 0.8; } | |
| 50% { transform: translateY(-30px) scale(1.2); opacity: 0.5; } | |
| 100% { transform: translateY(-60px) scale(1.5); opacity: 0; } | |
| } | |
| /* ===== Buttons and Interactive Elements ===== */ | |
| button, .button, .button-like, .menu_button { | |
| background-color: var(--panel-bg-color); | |
| background-image: var(--accent-gradient), var(--industrial-metal), var(--ornate-gradient); | |
| border: none; | |
| border-radius: calc(var(--border-radius) / 1.3); | |
| padding: 20px 40px; | |
| color: var(--background-base); | |
| font-family: var(--font-family); | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing); | |
| box-shadow: var(--shadow-neumorphic-raised), 0 6px 14px rgba(0, 0, 0, 0.45), var(--mechanical-raised-shadow), var(--ornate-shadow); | |
| text-shadow: 0 5px 5px rgba(255, 255, 255, 0.45); | |
| position: relative; | |
| overflow: hidden; | |
| transform-style: preserve-3d; | |
| border: 2px solid rgba(var(--accent-color-rgb), 0.35); | |
| } | |
| button::before, .button::before, .button-like::before, .menu_button::before { | |
| content: ''; | |
| position: absolute; | |
| top: -60%; | |
| left: -60%; | |
| width: 220%; | |
| height: 220%; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 65%); | |
| transform: rotate(45deg); | |
| opacity: 0; | |
| transition: opacity var(--transition-duration) var(--transition-timing); | |
| } | |
| button::after, .button::after, .button-like::after, .menu_button::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: rgba(255, 255, 255, 0.28); | |
| pointer-events: none; | |
| } | |
| button:hover, .button:hover, .button-like:hover, .menu_button:hover { | |
| background-color: var(--accent-color); | |
| transform: scale(var(--hover-scale)) translateY(-6px); | |
| filter: brightness(var(--hover-brightness)) contrast(1.25); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--ornate-shadow); | |
| } | |
| button:hover::before, .button:hover::before, .button-like:hover::before, .menu_button:hover::before { | |
| opacity: 1; | |
| } | |
| button:active, .button:active, .button-like:active, .menu_button:active { | |
| transform: scale(0.9) translateY(5px); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), 0 0 25px var(--accent-color); | |
| filter: brightness(0.7); | |
| } | |
| button:focus, .button:focus, .button-like:focus, .menu_button:focus { | |
| outline: 7px solid var(--accent-color-brighter); | |
| outline-offset: 7px; | |
| } | |
| /* ===== Input Fields ===== */ | |
| input, textarea, input[type="text"], input[type="search"], input[type="number"], input[type="password"] { | |
| width: 100%; | |
| background-color: rgba(5, 3, 10, 0.85); | |
| border: 4px solid var(--border-color); | |
| border-radius: calc(var(--border-radius) / 1.5); | |
| padding: 20px 25px; | |
| color: var(--text-color); | |
| font-family: var(--font-family); | |
| font-size: 1.3rem; | |
| transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), var(--deep-emboss); | |
| background-image: var(--industrial-metal); | |
| box-sizing: border-box; | |
| transform-style: preserve-3d; | |
| } | |
| input:hover, textarea:hover { | |
| border-color: var(--border-color-accent); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--hover-glow), var(--mechanical-inset-shadow), var(--deep-emboss); | |
| transform: translateY(-5px); | |
| } | |
| input:focus, textarea:focus { | |
| border-color: var(--border-color-accent); | |
| box-shadow: var(--shadow-neumorphic-pressed), 0 0 0 6px var(--accent-color-darker), var(--mechanical-inset-shadow), var(--deep-emboss); | |
| background-color: rgba(10, 8, 15, 0.9); | |
| outline: none; | |
| } | |
| input::placeholder, textarea::placeholder { | |
| color: var(--text-color-secondary); | |
| opacity: 0.6; | |
| } | |
| /* ===== Calculator Specific Styles ===== */ | |
| .calculator-app { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| } | |
| .nav-bar { | |
| background-color: var(--SmartThemeBlurTintColor); | |
| margin: unset; | |
| position: unset; | |
| height: 100vh; | |
| flex-direction: column; | |
| padding: 16px 8px; | |
| gap: 16px; | |
| justify-content: unset; | |
| width: var(--nav-bar-width); | |
| left: 0; | |
| top: 0; | |
| background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 45%), var(--industrial-metal); | |
| border-right: 12px solid var(--accent-color-darker); | |
| box-shadow: 12px 0 40px rgba(0, 0, 0, 0.8), var(--border-bevel-outer), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -10px 20px rgba(0, 0, 0, 0.5); | |
| backdrop-filter: var(--ios-blur); | |
| -webkit-backdrop-filter: var(--ios-blur); | |
| border-radius: 0 calc(var(--border-radius) * 1.2) calc(var(--border-radius) * 1.2) 0; | |
| padding: 55px 18px; | |
| gap: 40px; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: center; | |
| position: fixed; | |
| z-index: 100; | |
| transition: box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); | |
| display: flex ; | |
| visibility: visible ; | |
| opacity: 1 ; | |
| overflow: visible; | |
| transform-style: preserve-3d; | |
| } | |
| .nav-bar::before { | |
| content: ""; | |
| width: calc(var(--nav-bar-width) * 0.8); | |
| aspect-ratio: 1/1; | |
| background-size: cover; | |
| background-position: center center; | |
| border-radius: 50%; | |
| margin-bottom: 40px; | |
| border: 6px solid var(--accent-color); | |
| box-shadow: 0 0 30px var(--accent-color), inset 0 0 15px rgba(0, 0, 0, 0.8), var(--mechanical-inset-shadow), var(--arcane-glow), inset 0 5px 10px rgba(255, 255, 255, 0.3); | |
| animation: var(--pulse-animation); | |
| background-image: var(--arcane-pulse); | |
| } | |
| .nav-bar::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 25px; | |
| width: 75%; | |
| height: 6px; | |
| background: var(--accent-gradient); | |
| box-shadow: 0 0 25px var(--accent-color); | |
| border-radius: 3px; | |
| } | |
| .nav-bar:hover { | |
| box-shadow: 12px 0 40px rgba(0, 0, 0, 0.8), var(--shadow-neumorphic-raised), var(--hover-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| transform: scaleX(1.03) translateZ(0); | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 18px; | |
| padding: 18px; | |
| width: calc(var(--nav-bar-width) * 0.85); | |
| height: calc(var(--nav-bar-width) * 0.85); | |
| border-radius: 50%; | |
| background-color: var(--panel-bg-color-translucent); | |
| background-image: var(--industrial-metal), var(--nav-tab-gradient); | |
| border: var(--nav-tab-border); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--mechanical-raised-shadow), var(--nav-tab-shadow), 0 0 18px rgba(var(--accent-color-rgb), 0.35), var(--luxury-shadow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.3), inset 0 -5px 10px rgba(0, 0, 0, 0.4); | |
| color: var(--text-color-secondary); | |
| cursor: pointer; | |
| transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing); | |
| font-size: 2.2rem; | |
| position: relative; | |
| z-index: 1; | |
| transform-style: preserve-3d; | |
| } | |
| .nav-item::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.25), transparent 75%); | |
| border-radius: 50%; | |
| opacity: 0; | |
| transition: opacity var(--transition-duration) var(--transition-timing); | |
| } | |
| .nav-item::after { | |
| content: ""; | |
| position: absolute; | |
| top: -10%; | |
| left: -10%; | |
| width: 120%; | |
| height: 120%; | |
| background: radial-gradient(circle at center, rgba(var(--accent-color-rgb), 0.15), transparent 70%); | |
| border-radius: 50%; | |
| opacity: 0; | |
| transform: rotate(45deg); | |
| transition: opacity var(--transition-duration) var(--transition-timing); | |
| pointer-events: none; | |
| } | |
| .nav-item:hover { | |
| background-color: var(--accent-color-darker); | |
| background-image: var(--industrial-metal), var(--nav-tab-active-gradient); | |
| transform: scale(var(--hover-scale)) rotate(15deg) translateY(-6px) translateZ(10px); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--mechanical-raised-shadow), 0 0 35px var(--accent-color), var(--luxury-shadow), var(--ornate-shadow), var(--nav-tab-active-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.3), inset 0 -5px 10px rgba(0, 0, 0, 0.4); | |
| color: var(--text-color); | |
| border: var(--nav-tab-active-border); | |
| } | |
| .nav-item:hover::before, .nav-item:hover::after { | |
| opacity: 1; | |
| } | |
| .nav-item.active { | |
| background-color: var(--accent-color); | |
| background-image: var(--industrial-metal), var(--nav-tab-active-gradient); | |
| color: var(--text-color); | |
| border: var(--nav-tab-active-border); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--mechanical-raised-shadow), var(--nav-tab-active-shadow), var(--luxury-shadow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.3), inset 0 -5px 10px rgba(0, 0, 0, 0.4); | |
| animation: var(--nav-tab-pulse); | |
| } | |
| .nav-item.active::before, .nav-item.active::after { | |
| opacity: 0.6; | |
| } | |
| .main-content { | |
| margin-left: var(--nav-bar-width); | |
| width: calc(100vw - var(--nav-bar-width) - var(--chat-panel-width)); | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-items: center; | |
| background: rgba(var(--primaryBgCol), var(--primaryBgAlpha)), var(--cinematic-gradient); | |
| backdrop-filter: blur(var(--SmartThemeBlurStrength)); | |
| -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength)); | |
| border: none; | |
| box-shadow: var(--cinematic-shadow); | |
| position: fixed; | |
| z-index: 10; | |
| padding: 0; | |
| overflow: hidden; | |
| transition: box-shadow var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing); | |
| } | |
| .calculator-panel { | |
| background-color: var(--panel-bg-color); | |
| background-image: var(--industrial-metal), var(--panel-gradient); | |
| border: var(--border-width) solid var(--border-color); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| border-radius: var(--border-radius); | |
| backdrop-filter: var(--ios-blur); | |
| -webkit-backdrop-filter: var(--ios-blur); | |
| transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); | |
| position: relative; | |
| width: 550px; | |
| height: auto; | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 20; | |
| transform-style: preserve-3d; | |
| animation: var(--fade-in-animation); | |
| padding: 40px; | |
| margin: 30px; | |
| } | |
| .calculator-panel:hover { | |
| border-color: var(--border-color-accent); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| transform: translateY(-6px) translateZ(12px); | |
| } | |
| .calculator-header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| position: relative; | |
| } | |
| .calculator-header h1 { | |
| margin: 0; | |
| font-size: 2.5rem; | |
| color: var(--accent-color-brighter); | |
| text-shadow: var(--text-shadow-glow); | |
| letter-spacing: 5px; | |
| font-weight: 800; | |
| } | |
| .calculator-header::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 90%; | |
| height: 5px; | |
| background: var(--accent-gradient); | |
| box-shadow: 0 0 22px var(--accent-color); | |
| } | |
| .calculator-display-container { | |
| position: relative; | |
| margin-bottom: 35px; | |
| } | |
| .calculator-display { | |
| background-color: rgba(5, 3, 10, 0.92); | |
| border: 6px solid var(--border-color); | |
| border-radius: calc(var(--border-radius) / 1.5); | |
| padding: 30px; | |
| color: var(--text-color); | |
| font-family: var(--font-family); | |
| font-size: 3rem; | |
| text-align: right; | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), var(--mystic-shadow), var(--deep-emboss); | |
| background-image: var(--industrial-metal), var(--mystic-gradient); | |
| transform-style: preserve-3d; | |
| overflow: hidden; | |
| letter-spacing: 4px; | |
| } | |
| .calculator-display::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 40%; | |
| background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent); | |
| pointer-events: none; | |
| } | |
| .calculator-display::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 15px; | |
| background: linear-gradient(to top, rgba(var(--accent-color-rgb), 0.3), transparent); | |
| pointer-events: none; | |
| } | |
| .calculator-buttons { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 20px; | |
| } | |
| .calculator-buttons button { | |
| padding: 25px; | |
| font-size: 1.9rem; | |
| min-height: 90px; | |
| position: relative; | |
| border-radius: calc(var(--border-radius) / 1.6); | |
| overflow: hidden; | |
| border: 2px solid var(--gothic-border); | |
| box-shadow: var(--shadow-neumorphic-raised), 0 5px 10px rgba(0, 0, 0, 0.5), var(--mechanical-raised-shadow), var(--ornate-shadow); | |
| transform-style: preserve-3d; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; | |
| } | |
| .calculator-buttons button::before { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 0; | |
| height: 0; | |
| background: var(--arcane-pulse); | |
| border-radius: 50%; | |
| opacity: 0; | |
| transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out; | |
| } | |
| .calculator-buttons button::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 30%; | |
| background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); | |
| pointer-events: none; | |
| } | |
| .calculator-buttons button:active::before { | |
| width: 170%; | |
| height: 170%; | |
| opacity: 0.7; | |
| } | |
| .calculator-buttons button:hover { | |
| transform: scale(1.1) translateY(-3px) translateZ(5px); | |
| box-shadow: var(--shadow-neumorphic-raised), 0 8px 16px rgba(0, 0, 0, 0.6), var(--mechanical-raised-shadow), var(--ornate-shadow), 0 0 15px rgba(var(--accent-color-rgb), 0.5); | |
| } | |
| .calculator-buttons button:active { | |
| transform: scale(0.9) translateY(2px) translateZ(-2px); | |
| box-shadow: var(--shadow-neumorphic-pressed), 0 2px 4px rgba(0, 0, 0, 0.3), var(--mechanical-inset-shadow); | |
| } | |
| .button-operator { | |
| background-image: var(--button-operator-gradient), var(--industrial-metal); | |
| color: var(--text-color); | |
| font-weight: bold; | |
| box-shadow: var(--shadow-neumorphic-raised), var(--button-operator-shadow), var(--mechanical-raised-shadow); | |
| } | |
| .button-operator:hover { | |
| background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.7), rgba(var(--accent-color-rgb), 0.5)), var(--industrial-metal); | |
| } | |
| .button-advanced { | |
| background-image: var(--button-advanced-gradient), var(--industrial-metal); | |
| color: var(--text-color); | |
| font-size: 1.5rem; | |
| box-shadow: var(--shadow-neumorphic-raised), var(--button-advanced-shadow), var(--mechanical-raised-shadow); | |
| } | |
| .button-advanced:hover { | |
| background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.5), rgba(var(--accent-color-rgb), 0.3)), var(--industrial-metal); | |
| } | |
| .button-clear { | |
| background-image: linear-gradient(135deg, rgba(255, 60, 60, 0.7), rgba(160, 10, 10, 0.7)), var(--industrial-metal); | |
| color: var(--text-color); | |
| font-weight: bold; | |
| box-shadow: var(--shadow-neumorphic-raised), var(--button-clear-shadow), var(--mechanical-raised-shadow); | |
| } | |
| .button-clear:hover { | |
| background-image: linear-gradient(135deg, rgba(255, 60, 60, 0.9), rgba(160, 10, 10, 0.9)), var(--industrial-metal); | |
| } | |
| .button-equals { | |
| background-image: var(--button-equals-gradient), var(--industrial-metal); | |
| color: var(--text-color); | |
| grid-column: span 2; | |
| font-weight: bold; | |
| box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--button-equals-shadow), var(--ornate-shadow); | |
| } | |
| .button-equals:hover { | |
| background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.8), rgba(var(--accent-color-rgb), 0.6)), var(--industrial-metal); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--button-equals-shadow), var(--ornate-shadow), 0 0 25px var(--accent-color); | |
| } | |
| .button-number { | |
| background-image: var(--industrial-metal), var(--panel-gradient); | |
| color: var(--text-color); | |
| font-weight: 600; | |
| box-shadow: var(--shadow-neumorphic-raised), var(--button-number-shadow), var(--mechanical-raised-shadow); | |
| } | |
| .button-number:hover { | |
| background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.1)), var(--industrial-metal), var(--panel-gradient); | |
| } | |
| .button-memory { | |
| background-image: var(--button-memory-gradient), var(--industrial-metal); | |
| color: var(--text-color); | |
| font-size: 1.4rem; | |
| box-shadow: var(--shadow-neumorphic-raised), var(--button-memory-shadow), var(--mechanical-raised-shadow); | |
| } | |
| .button-memory:hover { | |
| background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.6), rgba(var(--accent-color-rgb), 0.4)), var(--industrial-metal); | |
| } | |
| .history-panel { | |
| background-color: var(--panel-bg-color); | |
| background-image: var(--industrial-metal), var(--panel-gradient); | |
| border: var(--border-width) solid var(--border-color); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| border-radius: var(--border-radius); | |
| backdrop-filter: var(--ios-blur); | |
| -webkit-backdrop-filter: var(--ios-blur); | |
| transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); | |
| position: relative; | |
| width: 450px; | |
| height: 700px; | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 20; | |
| transform-style: preserve-3d; | |
| animation: var(--fade-in-animation); | |
| padding: 40px; | |
| margin: 30px; | |
| overflow: hidden; | |
| } | |
| .history-panel:hover { | |
| border-color: var(--border-color-accent); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| transform: translateY(-6px) translateZ(12px); | |
| } | |
| .history-panel h2 { | |
| margin-top: 0; | |
| font-size: 2.2rem; | |
| color: var(--accent-color-brighter); | |
| text-shadow: var(--text-shadow-glow); | |
| text-align: center; | |
| position: relative; | |
| } | |
| .history-panel h2::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 90%; | |
| height: 5px; | |
| background: var(--accent-gradient); | |
| box-shadow: 0 0 22px var(--accent-color); | |
| } | |
| .history-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px 15px; | |
| margin-top: 30px; | |
| background: rgba(5, 3, 10, 0.7); | |
| border-radius: calc(var(--border-radius) / 2.2); | |
| border: 3px solid rgba(255, 255, 255, 0.15); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mystic-shadow), var(--deep-emboss); | |
| } | |
| .history-item { | |
| padding: 20px; | |
| border-bottom: 2px dashed rgba(255, 255, 255, 0.15); | |
| font-size: 1.2rem; | |
| color: var(--text-color-secondary); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; | |
| position: relative; | |
| background: rgba(10, 8, 15, 0.6); | |
| margin-bottom: 15px; | |
| border-radius: calc(var(--border-radius) / 3.5); | |
| box-shadow: var(--emboss-shadow); | |
| transform-style: preserve-3d; | |
| } | |
| .history-item::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 25%; | |
| background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent); | |
| pointer-events: none; | |
| } | |
| .history-item:hover { | |
| background: rgba(var(--accent-color-rgb), 0.3); | |
| color: var(--text-color); | |
| transform: translateY(-5px) translateZ(5px); | |
| box-shadow: var(--emboss-shadow), var(--hover-glow), 0 5px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| .history-item button { | |
| background: transparent; | |
| border: 3px solid var(--accent-color); | |
| color: var(--accent-color-brighter); | |
| padding: 12px 20px; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| border-radius: calc(var(--border-radius) / 2.5); | |
| transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; | |
| box-shadow: var(--mechanical-raised-shadow); | |
| text-shadow: none; | |
| background-image: var(--industrial-metal); | |
| transform-style: preserve-3d; | |
| } | |
| .history-item button:hover { | |
| background: rgba(var(--accent-color-rgb), 0.5); | |
| transform: scale(1.1) translateZ(3px); | |
| box-shadow: var(--arcane-glow), var(--mechanical-raised-shadow), 0 5px 10px rgba(0, 0, 0, 0.4); | |
| } | |
| .clear-history { | |
| margin-top: 30px; | |
| background-image: linear-gradient(135deg, rgba(255, 60, 60, 0.7), rgba(160, 10, 10, 0.7)), var(--industrial-metal); | |
| color: var(--text-color); | |
| padding: 18px; | |
| font-size: 1.4rem; | |
| border-radius: calc(var(--border-radius) / 2.2); | |
| transition: transform 0.4s ease, box-shadow 0.4s ease; | |
| border: 2px solid var(--gothic-border); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--mechanical-raised-shadow); | |
| transform-style: preserve-3d; | |
| } | |
| .clear-history:hover { | |
| transform: translateY(-4px) translateZ(3px); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--mechanical-raised-shadow), 0 6px 12px rgba(0, 0, 0, 0.6); | |
| } | |
| /* ===== Settings Panel ===== */ | |
| .settings-panel { | |
| background-color: var(--panel-bg-color); | |
| background-image: var(--industrial-metal), var(--panel-gradient); | |
| border: var(--border-width) solid var(--border-color); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| border-radius: var(--border-radius); | |
| backdrop-filter: var(--ios-blur); | |
| -webkit-backdrop-filter: var(--ios-blur); | |
| transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); | |
| position: relative; | |
| width: 500px; | |
| height: 650px; | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 20; | |
| transform-style: preserve-3d; | |
| animation: var(--fade-in-animation); | |
| padding: 40px; | |
| margin: 30px; | |
| overflow: hidden; | |
| } | |
| .settings-panel:hover { | |
| border-color: var(--border-color-accent); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| transform: translateY(-6px) translateZ(12px); | |
| } | |
| .settings-panel h2 { | |
| margin-top: 0; | |
| font-size: 2.2rem; | |
| color: var(--accent-color-brighter); | |
| text-shadow: var(--text-shadow-glow); | |
| text-align: center; | |
| position: relative; | |
| } | |
| .settings-panel h2::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 90%; | |
| height: 5px; | |
| background: var(--accent-gradient); | |
| box-shadow: 0 0 22px var(--accent-color); | |
| } | |
| .settings-options { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 28px; | |
| margin-top: 30px; | |
| overflow-y: auto; | |
| padding: 15px; | |
| } | |
| .setting-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .setting-group label { | |
| font-size: 1.3rem; | |
| color: var(--text-color-secondary); | |
| } | |
| .setting-group select, .setting-group input[type="color"] { | |
| background-color: rgba(10, 8, 15, 0.8); | |
| border: 3px solid var(--border-color); | |
| border-radius: calc(var(--border-radius) / 2.2); | |
| padding: 15px; | |
| color: var(--text-color); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--deep-emboss); | |
| transform-style: preserve-3d; | |
| } | |
| .setting-group select:hover, .setting-group input[type="color"]:hover { | |
| border-color: var(--accent-color); | |
| box-shadow: var(--hover-glow), var(--shadow-neumorphic-pressed), var(--deep-emboss); | |
| transform: translateY(-3px) translateZ(2px); | |
| } | |
| .setting-group select:focus, .setting-group input[type="color"]:focus { | |
| outline: none; | |
| border-color: var(--accent-color-brighter); | |
| box-shadow: var(--arcane-glow), var(--shadow-neumorphic-pressed), var(--deep-emboss); | |
| } | |
| /* ===== Info Panel ===== */ | |
| .info-panel { | |
| background-color: var(--panel-bg-color); | |
| background-image: var(--industrial-metal), var(--panel-gradient); | |
| border: var(--border-width) solid var(--border-color); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| border-radius: var(--border-radius); | |
| backdrop-filter: var(--ios-blur); | |
| -webkit-backdrop-filter: var(--ios-blur); | |
| transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); | |
| position: relative; | |
| width: 500px; | |
| height: 650px; | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 20; | |
| transform-style: preserve-3d; | |
| animation: var(--fade-in-animation); | |
| padding: 40px; | |
| margin: 30px; | |
| overflow: hidden; | |
| } | |
| .info-panel:hover { | |
| border-color: var(--border-color-accent); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| transform: translateY(-6px) translateZ(12px); | |
| } | |
| .info-panel h2 { | |
| margin-top: 0; | |
| font-size: 2.2rem; | |
| color: var(--accent-color-brighter); | |
| text-shadow: var(--text-shadow-glow); | |
| text-align: center; | |
| position: relative; | |
| } | |
| .info-panel h2::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 90%; | |
| height: 5px; | |
| background: var(--accent-gradient); | |
| box-shadow: 0 0 22px var(--accent-color); | |
| } | |
| .info-content { | |
| flex: 1; | |
| margin-top: 30px; | |
| padding: 20px; | |
| background: rgba(10, 8, 15, 0.7); | |
| border-radius: calc(var(--border-radius) / 2.2); | |
| border: 3px solid rgba(255, 255, 255, 0.15); | |
| overflow-y: auto; | |
| color: var(--text-color-secondary); | |
| font-size: 1.2rem; | |
| line-height: 1.8; | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--deep-emboss); | |
| transform-style: preserve-3d; | |
| } | |
| .info-content p { | |
| margin: 15px 0; | |
| position: relative; | |
| } | |
| .info-content p::before { | |
| content: "•"; | |
| color: var(--accent-color-brighter); | |
| margin-right: 10px; | |
| font-weight: bold; | |
| } | |
| /* ===== Chat Panel (Enhanced with Sceomorphic Elegance and East Asian Aesthetics) ===== */ | |
| body:has(#chat-panel.openDrawer) { | |
| --chat-panel-width: 380px; | |
| } | |
| #chat-panel { | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| width: var(--chat-panel-width); | |
| height: 100vh; | |
| background-color: var(--panel-bg-color); | |
| background-image: var(--chat-gradient), var(--industrial-metal); | |
| border-left: 6px solid var(--accent-color-darker); | |
| border-radius: calc(var(--border-radius) * 1.2) 0 0 calc(var(--border-radius) * 1.2); | |
| box-shadow: -15px 0 40px rgba(0, 0, 0, 0.85), var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -10px 20px rgba(0, 0, 0, 0.5); | |
| backdrop-filter: var(--ios-blur); | |
| -webkit-backdrop-filter: var(--ios-blur); | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 30; | |
| transform-style: preserve-3d; | |
| transition: width var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing); | |
| padding: 40px 25px; | |
| overflow: hidden; | |
| } | |
| #chat-panel:hover { | |
| box-shadow: -15px 0 40px rgba(0, 0, 0, 0.85), var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow); | |
| } | |
| #chat-panel.openDrawer { | |
| animation: var(--chat-panel-slide); | |
| } | |
| .chat-header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| position: relative; | |
| } | |
| .chat-header h2 { | |
| margin: 0; | |
| font-size: 2.2rem; | |
| color: var(--accent-color-brighter); | |
| text-shadow: var(--text-shadow-glow); | |
| letter-spacing: 4px; | |
| font-weight: 800; | |
| } | |
| .chat-header::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 85%; | |
| height: 5px; | |
| background: var(--accent-gradient); | |
| box-shadow: 0 0 20px var(--accent-color); | |
| border-radius: 2px; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px 15px; | |
| background: rgba(10, 8, 15, 0.7); | |
| border-radius: calc(var(--border-radius) / 2); | |
| border: 3px solid rgba(255, 255, 255, 0.15); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mystic-shadow), var(--deep-emboss), inset 0 5px 10px rgba(255, 255, 255, 0.1), inset 0 -5px 10px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| transform-style: preserve-3d; | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| padding: 18px 25px; | |
| border-radius: calc(var(--border-radius) / 2.5); | |
| font-size: 1.1rem; | |
| color: var(--text-color); | |
| position: relative; | |
| animation: var(--chat-bubble-fade); | |
| box-shadow: var(--chat-bubble-shadow), var(--luxury-shadow), 0 0 10px rgba(var(--accent-color-rgb), 0.3), inset 0 5px 10px rgba(255, 255, 255, 0.2), inset 0 -5px 10px rgba(0, 0, 0, 0.4); | |
| transform-style: preserve-3d; | |
| line-height: 1.6; | |
| overflow: hidden; | |
| border: 2px solid transparent; | |
| background-clip: padding-box; | |
| } | |
| .chat-message.user { | |
| background-color: var(--chat-bubble-user); | |
| background-image: var(--chat-bubble-gradient-user); | |
| align-self: flex-end; | |
| border: var(--chat-bubble-user-border); | |
| animation: var(--chat-bubble-fade), var(--chat-bubble-pulse); | |
| border-radius: calc(var(--border-radius) / 2.5) 0 calc(var(--border-radius) / 2.5) calc(var(--border-radius) / 2.5); | |
| } | |
| .chat-message.other { | |
| background-color: var(--chat-bubble-other); | |
| background-image: var(--chat-bubble-gradient-other); | |
| align-self: flex-start; | |
| border: var(--chat-bubble-other-border); | |
| animation: var(--chat-bubble-fade); | |
| border-radius: 0 calc(var(--border-radius) / 2.5) calc(var(--border-radius) / 2.5) calc(var(--border-radius) / 2.5); | |
| } | |
| .chat-message::before { | |
| content: attr(data-sender); | |
| position: absolute; | |
| top: -15px; | |
| left: 20px; | |
| font-size: 0.9rem; | |
| color: var(--text-color); | |
| background: rgba(0, 0, 0, 0.6); | |
| padding: 5px 12px; | |
| border-radius: calc(var(--border-radius) / 3.5); | |
| box-shadow: var(--shadow-neumorphic-raised); | |
| border: 1px solid rgba(var(--accent-color-rgb), 0.3); | |
| transform-style: preserve-3d; | |
| } | |
| .chat-message::after { | |
| content: attr(data-time); | |
| position: absolute; | |
| bottom: -15px; | |
| right: 20px; | |
| font-size: 0.8rem; | |
| color: var(--text-color-secondary); | |
| opacity: 0.75; | |
| background: rgba(0, 0, 0, 0.5); | |
| padding: 3px 10px; | |
| border-radius: calc(var(--border-radius) / 4); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transform-style: preserve-3d; | |
| } | |
| .chat-message.user::before { | |
| background: rgba(var(--accent-color-rgb), 0.3); | |
| color: var(--text-color); | |
| } | |
| .chat-message.user::after { | |
| background: rgba(var(--accent-color-rgb), 0.2); | |
| color: var(--text-color); | |
| } | |
| .chat-message.user::before, .chat-message.user::after { | |
| border: 1px solid rgba(var(--accent-color-rgb), 0.5); | |
| } | |
| .chat-message.user::after { | |
| right: 20px; | |
| left: auto; | |
| } | |
| .chat-message.other::before { | |
| left: 20px; | |
| right: auto; | |
| } | |
| .chat-message.user::before { | |
| left: auto; | |
| right: 20px; | |
| } | |
| .chat-input-area { | |
| margin-top: 25px; | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| background: rgba(15, 10, 25, 0.5); | |
| padding: 15px; | |
| border-radius: calc(var(--border-radius) / 2); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: var(--shadow-neumorphic-pressed), inset 0 5px 10px rgba(255, 255, 255, 0.1), inset 0 -5px 10px rgba(0, 0, 0, 0.3); | |
| transform-style: preserve-3d; | |
| } | |
| #chat-input { | |
| flex: 1; | |
| background-color: rgba(10, 8, 15, 0.9); | |
| border: 2.5px solid var(--border-color); | |
| border-radius: calc(var(--border-radius) / 2.5); | |
| padding: 15px 22px; | |
| color: var(--text-color); | |
| font-family: var(--font-family); | |
| font-size: 1.1rem; | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), var(--deep-emboss), inset 0 5px 10px rgba(255, 255, 255, 0.1); | |
| transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); | |
| transform-style: preserve-3d; | |
| } | |
| #chat-input:focus { | |
| border-color: var(--accent-color); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--hover-glow), var(--mechanical-inset-shadow), var(--deep-emboss); | |
| transform: translateY(-3px) translateZ(2px); | |
| } | |
| #chat-send { | |
| background-image: var(--accent-gradient), var(--industrial-metal); | |
| border: 2px solid var(--accent-color); | |
| border-radius: calc(var(--border-radius) / 2.2); | |
| padding: 15px 25px; | |
| color: var(--text-color); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--mechanical-raised-shadow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.2); | |
| text-shadow: 0 3px 4px rgba(255, 255, 255, 0.35); | |
| transform-style: preserve-3d; | |
| } | |
| #chat-send:hover { | |
| transform: scale(1.12) translateY(-4px) translateZ(3px); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--mechanical-raised-shadow), var(--ornate-shadow); | |
| } | |
| #chat-send:active { | |
| transform: scale(0.93) translateY(3px) translateZ(-1px); | |
| box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow); | |
| } | |
| .chat-toggle { | |
| position: fixed; | |
| top: 25px; | |
| right: calc(var(--chat-panel-width) + 15px); | |
| background-image: var(--accent-gradient), var(--industrial-metal); | |
| border: 2.5px solid var(--accent-color); | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-color); | |
| font-size: 1.8rem; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.2); | |
| z-index: 40; | |
| transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), right var(--transition-duration) var(--transition-timing); | |
| text-shadow: var(--text-shadow-glow); | |
| transform-style: preserve-3d; | |
| } | |
| .chat-toggle:hover { | |
| transform: scale(1.25) rotate(10deg) translateZ(5px); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--arcane-glow), var(--ornate-shadow); | |
| } | |
| body:has(#chat-panel.openDrawer) .chat-toggle { | |
| right: 15px; | |
| background-image: var(--accent-gradient), var(--industrial-metal); | |
| box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--ornate-shadow); | |
| animation: var(--pulse-animation); | |
| } | |
| /* ===== Mechanical Details for Panels ===== */ | |
| .calculator-panel::before, .history-panel::before, .settings-panel::before, .info-panel::before, #chat-panel::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 40px; | |
| background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); | |
| border-bottom: var(--mechanical-border); | |
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45); | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .calculator-panel::after, .history-panel::after, .settings-panel::after, .info-panel::after, #chat-panel::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 60px; | |
| background: rgba(15, 10, 25, 0.92); | |
| border-top: var(--mechanical-border); | |
| border-radius: 0 0 var(--border-radius) var(--border-radius); | |
| box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.45); | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .screw { | |
| position: absolute; | |
| width: 22px; | |
| height: 22px; | |
| background: var(--mechanical-gray); | |
| border-radius: 50%; | |
| box-shadow: inset 0 6px 7px var(--mechanical-shadow), 0 5px 6px var(--mechanical-highlight); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 3; | |
| pointer-events: none; | |
| transform-style: preserve-3d; | |
| } | |
| .screw::before { | |
| content: ""; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: rgba(25, 20, 35, 0.9); | |
| box-shadow: inset 0 4px 6px var(--mechanical-shadow), 0 0 5px var(--mechanical-highlight); | |
| } | |
| .screw::after { | |
| content: "+"; | |
| position: absolute; | |
| font-size: 11px; | |
| color: var(--mechanical-shadow); | |
| font-weight: bold; | |
| } | |
| .screw-tl { top: 35px; left: 35px; } | |
| .screw-tr { top: 35px; right: 35px; } | |
| .screw-bl { bottom: 35px; left: 35px; } | |
| .screw-br { bottom: 35px; right: 35px; } | |
| /* ===== Rune Decorations ===== */ | |
| .rune-decoration { | |
| position: absolute; | |
| width: 55px; | |
| height: 55px; | |
| background: var(--rune-etched-gradient); | |
| border-radius: 50%; | |
| box-shadow: var(--arcane-glow); | |
| opacity: 0.7; | |
| animation: var(--arcane-rune-pulse); | |
| pointer-events: none; | |
| z-index: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--accent-color-brighter); | |
| font-size: 1.8rem; | |
| text-shadow: var(--text-shadow-glow); | |
| border: 1.5px solid rgba(var(--accent-color-rgb), 0.4); | |
| transform-style: preserve-3d; | |
| } | |
| .rune-tl { top: 25px; left: 90px; } | |
| .rune-tr { top: 25px; right: 90px; } | |
| .rune-bl { bottom: 25px; left: 90px; } | |
| .rune-br { bottom: 25px; right: 90px; } | |
| /* Chat Panel Runes */ | |
| .chat-rune-tl { top: 25px; left: 25px; } | |
| .chat-rune-tr { top: 25px; right: 25px; } | |
| .chat-rune-bl { bottom: 25px; left: 25px; } | |
| .chat-rune-br { bottom: 25px; right: 25px; } | |
| /* ===== MMORPG Visual Effects for Interactions ===== */ | |
| .effect-container { | |
| position: absolute; | |
| pointer-events: none; | |
| z-index: 100; | |
| overflow: hidden; | |
| } | |
| .slash-effect { | |
| position: absolute; | |
| width: 100px; | |
| height: 5px; | |
| background: linear-gradient(to right, transparent, rgba(var(--accent-color-rgb), 0.8), transparent); | |
| transform-origin: center; | |
| animation: var(--slash-animation); | |
| box-shadow: 0 0 10px var(--accent-color); | |
| } | |
| .level-up-effect { | |
| position: absolute; | |
| width: 100%; | |
| height: 100px; | |
| background: linear-gradient(to bottom, transparent, rgba(var(--accent-color-rgb), 0.6), transparent); | |
| transform-origin: center; | |
| animation: var(--level-up-animation); | |
| box-shadow: 0 0 20px var(--accent-color); | |
| } | |
| .magic-aura-effect { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.5), transparent 70%); | |
| border-radius: 50%; | |
| transform-origin: center; | |
| animation: var(--magic-aura-animation); | |
| box-shadow: 0 0 15px var(--accent-color); | |
| } | |
| .magic-flash-effect { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.9), transparent 60%); | |
| border-radius: 50%; | |
| transform-origin: center; | |
| animation: var(--magic-flash-animation); | |
| box-shadow: 0 0 25px var(--accent-color); | |
| } | |
| .magic-sparkles-effect { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background: rgba(var(--accent-color-rgb), 0.8); | |
| border-radius: 50%; | |
| transform-origin: center; | |
| animation: var(--magic-sparkles-animation); | |
| box-shadow: 0 0 5px var(--accent-color); | |
| } | |
| .smoke-effect { | |
| position: absolute; | |
| width: 50px; | |
| height: 50px; | |
| background: radial-gradient(circle, rgba(100, 100, 100, 0.6), transparent 70%); | |
| border-radius: 50%; | |
| transform-origin: center; | |
| animation: var(--smoke-animation); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="calculator-app"> | |
| <div class="nav-bar"> | |
| <div class="nav-item active" onclick="switchMode('calculator')" title="Calculator Mode">算</div> | |
| <div class="nav-item" onclick="switchMode('history')" title="History Log">歴</div> | |
| <div class="nav-item" onclick="switchMode('settings')" title="Settings">設</div> | |
| <div class="nav-item" onclick="switchMode('info')" title="Information">情</div> | |
| <div class="nav-item" onclick="toggleChatPanel()" title="Chat">聊</div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="calculator-panel"> | |
| <div class="screw screw-tl"></div> | |
| <div class="screw screw-tr"></div> | |
| <div class="screw screw-bl"></div> | |
| <div class="screw screw-br"></div> | |
| <div class="rune-decoration rune-tl">符</div> | |
| <div class="rune-decoration rune-tr">文</div> | |
| <div class="rune-decoration rune-bl">術</div> | |
| <div class="rune-decoration rune-br">力</div> | |
| <div class="calculator-header"> | |
| <h1>Arcane Calculator Nexus</h1> | |
| </div> | |
| <div class="calculator-display-container"> | |
| <input type="text" id="calc-display" class="calculator-display" readonly value="0"> | |
| </div> | |
| <div class="calculator-buttons"> | |
| <button class="button-memory" onclick="memoryOperation('mc')">MC</button> | |
| <button class="button-memory" onclick="memoryOperation('mr')">MR</button> | |
| <button class="button-memory" onclick="memoryOperation('m+')">M+</button> | |
| <button class="button-memory" onclick="memoryOperation('m-')">M-</button> | |
| <button class="button-clear" onclick="clearDisplay()">C</button> | |
| <button class="button-advanced" onclick="appendToDisplay('(')">(</button> | |
| <button class="button-advanced" onclick="appendToDisplay(')')">)</button> | |
| <button class="button-operator" onclick="appendToDisplay('/')">/</button> | |
| <button class="button-advanced" onclick="appendFunction('sqrt')">√</button> | |
| <button class="button-number" onclick="appendToDisplay('7')">7</button> | |
| <button class="button-number" onclick="appendToDisplay('8')">8</button> | |
| <button class="button-number" onclick="appendToDisplay('9')">9</button> | |
| <button class="button-operator" onclick="appendToDisplay('*')">×</button> | |
| <button class="button-advanced" onclick="appendFunction('pow')">^</button> | |
| <button class="button-number" onclick="appendToDisplay('4')">4</button> | |
| <button class="button-number" onclick="appendToDisplay('5')">5</button> | |
| <button class="button-number" onclick="appendToDisplay('6')">6</button> | |
| <button class="button-operator" onclick="appendToDisplay('-')">-</button> | |
| <button class="button-advanced" onclick="appendFunction('sin')">sin</button> | |
| <button class="button-number" onclick="appendToDisplay('1')">1</button> | |
| <button class="button-number" onclick="appendToDisplay('2')">2</button> | |
| <button class="button-number" onclick="appendToDisplay('3')">3</button> | |
| <button class="button-operator" onclick="appendToDisplay('+')">+</button> | |
| <button class="button-advanced" onclick="appendFunction('cos')">cos</button> | |
| <button class="button-number" onclick="appendToDisplay('0')">0</button> | |
| <button class="button-number" onclick="appendToDisplay('.')">.</button> | |
| <button class="button-advanced" onclick="appendFunction('log')">log</button> | |
| <button class="button-equals" onclick="calculate()">=</button> | |
| </div> | |
| </div> | |
| <div class="history-panel"> | |
| <div class="screw screw-tl"></div> | |
| <div class="screw screw-tr"></div> | |
| <div class="screw screw-bl"></div> | |
| <div class="screw screw-br"></div> | |
| <div class="rune-decoration rune-tl">歴</div> | |
| <div class="rune-decoration rune-tr">史</div> | |
| <div class="rune-decoration rune-bl">記</div> | |
| <div class="rune-decoration rune-br">録</div> | |
| <h2>Calculation History</h2> | |
| <div class="history-list" id="history-list"> | |
| <!-- History items will be dynamically added here --> | |
| </div> | |
| <button class="clear-history" onclick="clearHistory()">Clear History</button> | |
| </div> | |
| <div class="settings-panel"> | |
| <div class="screw screw-tl"></div> | |
| <div class="screw screw-tr"></div> | |
| <div class="screw screw-bl"></div> | |
| <div class="screw screw-br"></div> | |
| <div class="rune-decoration rune-tl">設</div> | |
| <div class="rune-decoration rune-tr">定</div> | |
| <div class="rune-decoration rune-bl">調</div> | |
| <div class="rune-decoration rune-br">整</div> | |
| <h2>Settings</h2> | |
| <div class="settings-options"> | |
| <div class="setting-group"> | |
| <label for="theme-select">Theme:</label> | |
| <select id="theme-select" onchange="changeTheme(this.value)"> | |
| <option value="arcane">Arcane Nexus (Default)</option> | |
| <option value="demonic">Demonic Citadel</option> | |
| <option value="spiritual">Spiritual Temple</option> | |
| <option value="cyber">Cyber Wasteland</option> | |
| </select> | |
| </div> | |
| <div class="setting-group"> | |
| <label for="accent-color">Accent Color:</label> | |
| <input type="color" id="accent-color" value="#4CAF50" onchange="changeAccentColor(this.value)"> | |
| </div> | |
| <div class="setting-group"> | |
| <label for="animation-toggle">Animations:</label> | |
| <select id="animation-toggle" onchange="toggleAnimations(this.value)"> | |
| <option value="on">On</option> | |
| <option value="off">Off</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="info-panel"> | |
| <div class="screw screw-tl"></div> | |
| <div class="screw screw-tr"></div> | |
| <div class="screw screw-bl"></div> | |
| <div class="screw screw-br"></div> | |
| <div class="rune-decoration rune-tl">情</div> | |
| <div class="rune-decoration rune-tr">報</div> | |
| <div class="rune-decoration rune-bl">指</div> | |
| <div class="rune-decoration rune-br">南</div> | |
| <h2>About Nexus</h2> | |
| <div class="info-content"> | |
| <p>Welcome to the Arcane Calculator Nexus, a mystical tool forged in the realms of ancient magic and futuristic technology.</p> | |
| <p>Version: 2.0.0</p> | |
| <p>Developed by: Ethereal Codex Studios</p> | |
| <p>Inspired by the dark elegance of Castlevania, the haunting beauty of Ico, and the epic grandeur of Demon's Souls.</p> | |
| <p>Use the navigation runes on the left to switch between modes. Customize your experience in Settings.</p> | |
| <p>For support, contact us through the ethereal plane at support@etherealcodex.com.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="chat-panel" class="closedDrawer"> | |
| <div class="screw screw-tl"></div> | |
| <div class="screw screw-tr"></div> | |
| <div class="screw screw-bl"></div> | |
| <div class="screw screw-br"></div> | |
| <div class="rune-decoration chat-rune-tl">聊</div> | |
| <div class="rune-decoration chat-rune-tr">天</div> | |
| <div class="rune-decoration chat-rune-bl">友</div> | |
| <div class="rune-decoration chat-rune-br">伴</div> | |
| <div class="chat-header"> | |
| <h2>Ethereal Chat</h2> | |
| </div> | |
| <div class="chat-messages" id="chat-messages"> | |
| <!-- Chat messages will be dynamically added here --> | |
| </div> | |
| <div class="chat-input-area"> | |
| <input type="text" id="chat-input" placeholder="Type a message..."> | |
| <button id="chat-send" onclick="sendChatMessage()">Send</button> | |
| </div> | |
| </div> | |
| <div class="chat-toggle" onclick="toggleChatPanel()">聊</div> | |
| </div> | |
| <script> | |
| let display = document.getElementById('calc-display'); | |
| let historyList = document.getElementById('history-list'); | |
| let currentInput = '0'; | |
| let history = []; | |
| let navItems = document.querySelectorAll('.nav-item'); | |
| let panels = document.querySelectorAll('.calculator-panel, .history-panel, .settings-panel, .info-panel'); | |
| let memory = 0; | |
| let chatPanel = document.getElementById('chat-panel'); | |
| let chatMessages = document.getElementById('chat-messages'); | |
| let chatInput = document.getElementById('chat-input'); | |
| let chatHistory = []; | |
| let isChatOpen = false; | |
| // Initialize calculator | |
| display.value = currentInput; | |
| function appendToDisplay(value) { | |
| if (currentInput === '0' && value !== '.') { | |
| currentInput = value; | |
| } else { | |
| currentInput += value; | |
| } | |
| display.value = currentInput; | |
| triggerMagicSparkles(display); | |
| } | |
| function appendFunction(func) { | |
| if (func === 'sqrt') { | |
| currentInput += 'Math.sqrt('; | |
| } else if (func === 'pow') { | |
| currentInput += 'Math.pow('; | |
| } else if (func === 'sin') { | |
| currentInput += 'Math.sin(Math.PI/180 * '; | |
| } else if (func === 'cos') { | |
| currentInput += 'Math.cos(Math.PI/180 * '; | |
| } else if (func === 'log') { | |
| currentInput += 'Math.log('; | |
| } | |
| display.value = currentInput; | |
| triggerMagicSparkles(display); | |
| } | |
| function clearDisplay() { | |
| currentInput = '0'; | |
| display.value = currentInput; | |
| triggerSmokeEffect(display); | |
| } | |
| function calculate() { | |
| try { | |
| let expression = currentInput.replace(/×/g, '*'); | |
| let result = eval(expression).toString(); | |
| if (!isFinite(result)) throw new Error('Invalid calculation'); | |
| history.push({ expression: currentInput, result: result }); | |
| updateHistory(); | |
| currentInput = result; | |
| display.value = currentInput; | |
| triggerLevelUpFlash(display); | |
| } catch (error) { | |
| display.value = 'Error'; | |
| setTimeout(clearDisplay, 1000); | |
| triggerSmokeEffect(display); | |
| } | |
| } | |
| function memoryOperation(operation) { | |
| switch (operation) { | |
| case 'mc': | |
| memory = 0; | |
| break; | |
| case 'mr': | |
| currentInput = memory.toString(); | |
| display.value = currentInput; | |
| break; | |
| case 'm+': | |
| memory += parseFloat(currentInput) || 0; | |
| break; | |
| case 'm-': | |
| memory -= parseFloat(currentInput) || 0; | |
| break; | |
| } | |
| triggerMagicAura(display); | |
| } | |
| function updateHistory() { | |
| historyList.innerHTML = ''; | |
| if (history.length === 0) { | |
| historyList.innerHTML = '<p style="text-align: center; color: var(--text-color-secondary);">No calculations yet.</p>'; | |
| return; | |
| } | |
| history.slice(-15).forEach((item, index) => { | |
| let div = document.createElement('div'); | |
| div.className = 'history-item'; | |
| div.innerHTML = ` | |
| <span>${item.expression}</span> | |
| <span>= ${item.result}</span> | |
| <button onclick="recallHistory(${index + history.length - 15})">Recall</button> | |
| `; | |
| historyList.appendChild(div); | |
| }); | |
| historyList.scrollTop = historyList.scrollHeight; | |
| } | |
| function recallHistory(index) { | |
| currentInput = history[index].expression; | |
| display.value = currentInput; | |
| switchMode('calculator'); | |
| triggerMagicFlash(display); | |
| } | |
| function clearHistory() { | |
| history = []; | |
| updateHistory(); | |
| triggerSmokeEffect(historyList); | |
| } | |
| function switchMode(mode) { | |
| navItems.forEach(item => item.classList.remove('active')); | |
| panels.forEach(panel => panel.style.display = 'none'); | |
| if (mode === 'calculator') { | |
| navItems[0].classList.add('active'); | |
| panels[0].style.display = 'flex'; | |
| triggerLevelUpFlash(panels[0]); | |
| } else if (mode === 'history') { | |
| navItems[1].classList.add('active'); | |
| panels[1].style.display = 'flex'; | |
| triggerLevelUpFlash(panels[1]); | |
| } else if (mode === 'settings') { | |
| navItems[2].classList.add('active'); | |
| panels[2].style.display = 'flex'; | |
| triggerLevelUpFlash(panels[2]); | |
| } else if (mode === 'info') { | |
| navItems[3].classList.add('active'); | |
| panels[3].style.display = 'flex'; | |
| triggerLevelUpFlash(panels[3]); | |
| } | |
| } | |
| function changeTheme(theme) { | |
| console.log("Theme changed to: " + theme); | |
| // In a real implementation, this would update CSS variables for different themes | |
| triggerMagicAura(document.body); | |
| } | |
| function changeAccentColor(color) { | |
| document.documentElement.style.setProperty('--accent-color', color); | |
| document.documentElement.style.setProperty('--accent-color-darker', `color-mix(in srgb, ${color}, black 50%)`); | |
| document.documentElement.style.setProperty('--accent-color-brighter', `color-mix(in srgb, ${color}, white 40%)`); | |
| document.documentElement.style.setProperty('--accent-color-subtle', `color-mix(in srgb, ${color}, black 25%)`); | |
| document.documentElement.style.setProperty('--accent-color-glow', `color-mix(in srgb, ${color}, white 25%)`); | |
| triggerMagicFlash(document.body); | |
| } | |
| function toggleAnimations(state) { | |
| // Animation toggle logic can be implemented here if needed | |
| triggerSmokeEffect(document.body); | |
| } | |
| function toggleChatPanel() { | |
| if (isChatOpen) { | |
| chatPanel.classList.remove('openDrawer'); | |
| chatPanel.classList.add('closedDrawer'); | |
| navItems[4].classList.remove('active'); | |
| } else { | |
| chatPanel.classList.remove('closedDrawer'); | |
| chatPanel.classList.add('openDrawer'); | |
| navItems[4].classList.add('active'); | |
| } | |
| isChatOpen = !isChatOpen; | |
| triggerSlashEffect(chatPanel); | |
| } | |
| function sendChatMessage() { | |
| let messageText = chatInput.value.trim(); | |
| if (messageText === '') return; | |
| let now = new Date(); | |
| let timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| // Add user message | |
| let userMessage = document.createElement('div'); | |
| userMessage.className = 'chat-message user'; | |
| userMessage.textContent = messageText; | |
| userMessage.setAttribute('data-sender', 'You'); | |
| userMessage.setAttribute('data-time', timeStr); | |
| chatMessages.appendChild(userMessage); | |
| chatHistory.push({ sender: 'You', text: messageText, time: timeStr }); | |
| // Clear input | |
| chatInput.value = ''; | |
| // Auto-scroll to bottom | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Simulate a response (for demo purposes) | |
| setTimeout(() => { | |
| let responseText = getBotResponse(messageText); | |
| let botMessage = document.createElement('div'); | |
| botMessage.className = 'chat-message other'; | |
| botMessage.textContent = responseText; | |
| botMessage.setAttribute('data-sender', 'Ethereal Bot'); | |
| botMessage.setAttribute('data-time', new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })); | |
| chatMessages.appendChild(botMessage); | |
| chatHistory.push({ sender: 'Ethereal Bot', text: responseText, time: timeStr }); | |
| // Auto-scroll to bottom | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| triggerMagicSparkles(botMessage); | |
| }, 1000); | |
| triggerMagicAura(userMessage); | |
| } | |
| function getBotResponse(message) { | |
| message = message.toLowerCase(); | |
| if (message.includes('hello') || message.includes('hi')) { | |
| return "Greetings, traveler! How may I assist you in the Arcane Nexus?"; | |
| } else if (message.includes('help') || message.includes('support')) { | |
| return "I'm here to aid you. For calculator issues, check the 'About Nexus' panel or contact support@etherealcodex.com."; | |
| } else if (message.includes('bye') || message.includes('goodbye')) { | |
| return "Farewell, may the ethereal winds guide your path."; | |
| } else { | |
| return "I sense your query... Could you elaborate? I’m attuned to assist with the Calculator Nexus."; | |
| } | |
| } | |
| // Dynamic lighting based on mouse movement | |
| document.addEventListener('mousemove', (e) => { | |
| let x = (e.clientX / window.innerWidth) * 100; | |
| let y = (e.clientY / window.innerHeight) * 100; | |
| document.documentElement.style.setProperty('--mouse-x', `${x}%`); | |
| document.documentElement.style.setProperty('--mouse-y', `${y}%`); | |
| }); | |
| // Add event listener for Enter key on chat input | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendChatMessage(); | |
| } | |
| }); | |
| // Initialize history display | |
| updateHistory(); | |
| // Initialize mode | |
| switchMode('calculator'); | |
| // MMORPG Visual Effects Functions | |
| function triggerSlashEffect(element) { | |
| let rect = element.getBoundingClientRect(); | |
| let container = document.createElement('div'); | |
| container.className = 'effect-container'; | |
| container.style.top = `${rect.top + rect.height / 2}px`; | |
| container.style.left = `${rect.left + rect.width / 2}px`; | |
| container.style.width = '0'; | |
| container.style.height = '0'; | |
| document.body.appendChild(container); | |
| let effect = document.createElement('div'); | |
| effect.className = 'slash-effect'; | |
| container.appendChild(effect); | |
| setTimeout(() => container.remove(), 500); | |
| } | |
| function triggerLevelUpFlash(element) { | |
| let rect = element.getBoundingClientRect(); | |
| let container = document.createElement('div'); | |
| container.className = 'effect-container'; | |
| container.style.top = `${rect.top}px`; | |
| container.style.left = `${rect.left}px`; | |
| container.style.width = `${rect.width}px`; | |
| container.style.height = `${rect.height}px`; | |
| document.body.appendChild(container); | |
| let effect = document.createElement('div'); | |
| effect.className = 'level-up-effect'; | |
| container.appendChild(effect); | |
| setTimeout(() => container.remove(), 1000); | |
| } | |
| function triggerMagicAura(element) { | |
| let rect = element.getBoundingClientRect(); | |
| let container = document.createElement('div'); | |
| container.className = 'effect-container'; | |
| container.style.top = `${rect.top + rect.height / 2}px`; | |
| container.style.left = `${rect.left + rect.width / 2}px`; | |
| container.style.width = '0'; | |
| container.style.height = '0'; | |
| document.body.appendChild(container); | |
| let effect = document.createElement('div'); | |
| effect.className = 'magic-aura-effect'; | |
| container.appendChild(effect); | |
| setTimeout(() => container.remove(), 1200); | |
| } | |
| function triggerMagicFlash(element) { | |
| let rect = element.getBoundingClientRect(); | |
| let container = document.createElement('div'); | |
| container.className = 'effect-container'; | |
| container.style.top = `${rect.top + rect.height / 2}px`; | |
| container.style.left = `${rect.left + rect.width / 2}px`; | |
| container.style.width = '0'; | |
| container.style.height = '0'; | |
| document.body.appendChild(container); | |
| let effect = document.createElement('div'); | |
| effect.className = 'magic-flash-effect'; | |
| container.appendChild(effect); | |
| setTimeout(() => container.remove(), 600); | |
| } | |
| function triggerMagicSparkles(element) { | |
| let rect = element.getBoundingClientRect(); | |
| let container = document.createElement('div'); | |
| container.className = 'effect-container'; | |
| container.style.top = `${rect.top + rect.height / 2}px`; | |
| container.style.left = `${rect.left + rect.width / 2}px`; | |
| container.style.width = '0'; | |
| container.style.height = '0'; | |
| document.body.appendChild(container); | |
| for (let i = 0; i < 5; i++) { | |
| let effect = document.createElement('div'); | |
| effect.className = 'magic-sparkles-effect'; | |
| effect.style.animationDelay = `${i * 0.1}s`; | |
| container.appendChild(effect); | |
| } | |
| setTimeout(() => container.remove(), 1000); | |
| } | |
| function triggerSmokeEffect(element) { | |
| let rect = element.getBoundingClientRect(); | |
| let container = document.createElement('div'); | |
| container.className = 'effect-container'; | |
| container.style.top = `${rect.top + rect.height / 2}px`; | |
| container.style.left = `${rect.left + rect.width / 2}px`; | |
| container.style.width = '0'; | |
| container.style.height = '0'; | |
| document.body.appendChild(container); | |
| let effect = document.createElement('div'); | |
| effect.className = 'smoke-effect'; | |
| container.appendChild(effect); | |
| setTimeout(() => container.remove(), 1500); | |
| } | |
| // Add click event listeners to buttons for visual effects | |
| document.querySelectorAll('button').forEach(button => { | |
| button.addEventListener('click', () => triggerSlashEffect(button)); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |