Spaces:
Configuration error
Configuration error
| title: Ready.art | |
| pinned: false | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ready.Art</title> | |
| <style> | |
| :root { | |
| /* Light mode colors */ | |
| --light-bg: #f5f5f7; | |
| --light-card-bg: rgba(255, 255, 255, 0.9); | |
| --light-section-bg: rgba(245, 245, 245, 0.8); | |
| --light-text: #333333; | |
| --light-accent: #ff4400; | |
| --light-accent-secondary: #ff7733; | |
| --light-border: rgba(120, 60, 40, 0.2); | |
| /* Dark mode colors */ | |
| --dark-bg: #1a0f0f; | |
| --dark-card-bg: rgba(40, 25, 25, 0.9); | |
| --dark-section-bg: rgba(50, 30, 30, 0.8); | |
| --dark-text: #ffddcc; | |
| --dark-accent: #ff4400; | |
| --dark-accent-secondary: #ff7733; | |
| --dark-border: rgba(120, 60, 40, 0.5); | |
| /* Common colors */ | |
| --lava-red: #ff4400; | |
| --lava-orange: #ff7733; | |
| --lava-yellow: #ffaa44; | |
| --neon-blue: #33aaff; | |
| --neon-purple: #aa33ff; | |
| /* Default to dark mode */ | |
| --current-bg: var(--dark-bg); | |
| --current-card-bg: var(--dark-card-bg); | |
| --current-section-bg: var(--dark-section-bg); | |
| --current-text: var(--dark-text); | |
| --current-accent: var(--dark-accent); | |
| --current-accent-secondary: var(--dark-accent-secondary); | |
| --current-border: var(--dark-border); | |
| } | |
| /* Light mode media query */ | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| --current-bg: var(--light-bg); | |
| --current-card-bg: var(--light-card-bg); | |
| --current-section-bg: var(--light-section-bg); | |
| --current-text: var(--light-text); | |
| --current-accent: var(--light-accent); | |
| --current-accent-secondary: var(--light-accent-secondary); | |
| --current-border: var(--light-border); | |
| } | |
| /* Adjust animations for light mode */ | |
| .bg-animation { | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(255, 68, 0, 0.05) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 119, 51, 0.05) 0%, transparent 20%), | |
| radial-gradient(circle at 50% 50%, rgba(255, 68, 0, 0.02) 0%, transparent 50%); | |
| } | |
| .matrix-char { | |
| color: rgba(255, 119, 51, 0.2); | |
| } | |
| .lava-bubble { | |
| background: radial-gradient(circle, var(--lava-red) 0%, var(--lava-orange) 70%, transparent 100%); | |
| opacity: 0.3; | |
| } | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: var(--current-bg); | |
| color: var(--current-text); | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| position: relative; | |
| min-height: 100vh; | |
| } | |
| /* Animated background */ | |
| .bg-animation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -2; | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(255, 68, 0, 0.08) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 119, 51, 0.08) 0%, transparent 20%), | |
| radial-gradient(circle at 50% 50%, rgba(255, 68, 0, 0.04) 0%, transparent 50%); | |
| animation: bgPulse 20s ease-in-out infinite; | |
| } | |
| @keyframes bgPulse { | |
| 0%, 100% { opacity: 0.5; } | |
| 50% { opacity: 0.8; } | |
| } | |
| /* Matrix-style code rain */ | |
| .matrix-rain { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.02; | |
| pointer-events: none; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 30px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .main-container { | |
| background: var(--current-card-bg); | |
| border-radius: 16px; | |
| padding: 40px; | |
| box-shadow: | |
| 0 0 20px rgba(255, 68, 0, 0.3), | |
| 0 0 60px rgba(255, 119, 51, 0.2), | |
| inset 0 0 15px rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--current-border); | |
| position: relative; | |
| overflow: hidden; | |
| backdrop-filter: blur(8px); | |
| transform: perspective(1000px) rotateX(0.3deg); | |
| transition: all 0.5s ease; | |
| } | |
| .main-container:hover { | |
| transform: perspective(1000px) rotateX(0deg); | |
| box-shadow: | |
| 0 0 30px rgba(255, 68, 0, 0.4), | |
| 0 0 80px rgba(255, 119, 51, 0.3), | |
| inset 0 0 20px rgba(0, 0, 0, 0.6); | |
| } | |
| .main-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, | |
| rgba(255, 68, 0, 0.08) 0%, | |
| transparent 20%, | |
| transparent 80%, | |
| rgba(255, 170, 68, 0.08) 100%); | |
| pointer-events: none; | |
| z-index: -1; | |
| animation: containerGlow 10s ease-in-out infinite alternate; | |
| } | |
| @keyframes containerGlow { | |
| 0% { opacity: 0.2; } | |
| 100% { opacity: 0.5; } | |
| } | |
| /* Header */ | |
| .header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| position: relative; | |
| padding-bottom: 20px; | |
| } | |
| .header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 25%; | |
| right: 25%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--current-accent), var(--lava-yellow), var(--current-accent), transparent); | |
| border-radius: 3px; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { background-position: -100% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| .model-name { | |
| font-size: 3.5em; | |
| background: linear-gradient(135deg, var(--current-accent), var(--current-accent-secondary), var(--lava-yellow)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: lightskyblue; | |
| text-shadow: 0 0 20px rgba(255, 119, 51, 0.5); | |
| margin: 0; | |
| letter-spacing: -1px; | |
| font-weight: 900; | |
| animation: titleGlow 5s ease-in-out infinite alternate; | |
| position: relative; | |
| display: inline-block; | |
| padding: 0 20px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| filter: none !important; | |
| } | |
| .model-name::before, .model-name::after { | |
| content: '✦'; | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: lightskyblue; | |
| font-size: 0.6em; | |
| animation: spin 12s linear infinite; | |
| } | |
| .model-name::before { | |
| left: 0; | |
| } | |
| .model-name::after { | |
| right: 0; | |
| } | |
| @keyframes spin { | |
| 0% { transform: translateY(-50%) rotate(0deg); } | |
| 100% { transform: translateY(-50%) rotate(360deg); } | |
| } | |
| @keyframes titleGlow { | |
| 0% { | |
| text-shadow: 0 0 15px rgba(255, 119, 51, 0.5), | |
| 0 0 30px rgba(255, 170, 68, 0.3); | |
| } | |
| 100% { | |
| text-shadow: 0 0 25px rgba(255, 170, 68, 0.7), | |
| 0 0 50px rgba(255, 200, 100, 0.5); | |
| } | |
| } | |
| .version { | |
| font-size: 1.8em; | |
| color: var(--current-accent); | |
| margin: 10px 0; | |
| text-shadow: 0 0 8px rgba(255, 119, 51, 0.5); | |
| animation: versionPulse 6s ease-in-out infinite; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| @keyframes versionPulse { | |
| 0%, 100% { opacity: 0.8; } | |
| 50% { opacity: 1; } | |
| } | |
| .subtitle { | |
| color: var(--current-text); | |
| font-size: 1.4em; | |
| margin-top: 15px; | |
| text-shadow: 0 0 8px rgba(255, 119, 51, 0.4); | |
| animation: subtitleFloat 10s ease-in-out infinite; | |
| position: relative; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| @keyframes subtitleFloat { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-3px); } | |
| } | |
| /* Waifu Container */ | |
| .waifu-container { | |
| margin: 30px -40px; | |
| width: calc(100% + 80px); | |
| overflow: hidden; | |
| border-radius: 12px; | |
| border: 1px solid var(--current-border); | |
| position: relative; | |
| box-shadow: 0 0 30px rgba(255, 68, 0, 0.3); | |
| transform: perspective(1000px) rotateY(0.3deg); | |
| transition: all 0.5s ease; | |
| } | |
| .waifu-container:hover { | |
| transform: perspective(1000px) rotateY(0deg); | |
| box-shadow: 0 0 50px rgba(255, 119, 51, 0.5); | |
| } | |
| .waifu-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(45deg, | |
| rgba(255, 119, 51, 0.15) 0%, | |
| transparent 30%, | |
| transparent 70%, | |
| rgba(255, 170, 68, 0.15) 100%); | |
| pointer-events: none; | |
| z-index: 1; | |
| animation: gradientSlide 15s linear infinite; | |
| mix-blend-mode: overlay; | |
| } | |
| @keyframes gradientSlide { | |
| 0% { background-position: 0% 0%; } | |
| 100% { background-position: 100% 100%; } | |
| } | |
| .waifu-img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: all 0.8s ease; | |
| filter: sepia(0.2) saturate(1.1) brightness(0.95) contrast(1.05); | |
| transform: scale(1.01); | |
| } | |
| .waifu-img:hover { | |
| transform: scale(1.03); | |
| filter: sepia(0.05) saturate(1.3) brightness(1) contrast(1.1); | |
| } | |
| /* Section */ | |
| .section { | |
| margin: 35px 0; | |
| padding: 25px; | |
| background: var(--current-section-bg); | |
| border-radius: 12px; | |
| border: 1px solid var(--current-border); | |
| position: relative; | |
| transition: all 0.4s ease; | |
| box-shadow: 0 0 12px rgba(120, 60, 40, 0.3); | |
| overflow: hidden; | |
| backdrop-filter: blur(5px); | |
| } | |
| .section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--current-accent), var(--lava-yellow)); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.5s ease; | |
| } | |
| .section:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .section::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at center, rgba(255, 119, 51, 0.08) 0%, transparent 70%); | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| pointer-events: none; | |
| } | |
| .section:hover::after { | |
| opacity: 1; | |
| } | |
| .section:hover { | |
| border-color: rgba(255, 119, 51, 0.7); | |
| box-shadow: 0 0 20px rgba(255, 119, 51, 0.5); | |
| transform: translateY(-3px); | |
| } | |
| .section-title { | |
| font-size: 2em; | |
| margin-bottom: 20px; | |
| color: var(--current-accent); | |
| text-shadow: 0 0 12px rgba(255, 119, 51, 0.5); | |
| position: relative; | |
| display: inline-block; | |
| padding-bottom: 8px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--current-accent), var(--lava-yellow)); | |
| transition: width 0.5s ease; | |
| } | |
| .section:hover .section-title::after { | |
| width: 100%; | |
| } | |
| .section p, .section ul { | |
| color: var(--current-text); | |
| line-height: 1.6; | |
| margin-bottom: 15px; | |
| } | |
| .section ul { | |
| padding-left: 20px; | |
| } | |
| .section li { | |
| margin-bottom: 10px; | |
| position: relative; | |
| padding-left: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .section li:hover { | |
| transform: translateX(3px); | |
| color: var(--current-text); | |
| } | |
| .section li::before { | |
| content: '▶'; | |
| position: absolute; | |
| left: -15px; | |
| color: var(--current-accent); | |
| font-size: 0.8em; | |
| transition: all 0.3s ease; | |
| } | |
| .section li:hover::before { | |
| transform: scale(1.2); | |
| color: var(--lava-yellow); | |
| } | |
| .section strong { | |
| color: var(--current-accent); | |
| } | |
| /* Links and Buttons */ | |
| .quant-links { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin: 25px 0; | |
| } | |
| .link-card { | |
| padding: 20px; | |
| background: rgba(70, 40, 30, 0.8); | |
| border-radius: 10px; | |
| transition: all 0.4s ease; | |
| border: 1px solid var(--current-border); | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 0 12px rgba(120, 60, 40, 0.2); | |
| backdrop-filter: blur(5px); | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .link-card { | |
| background: rgba(255, 200, 180, 0.8); | |
| } | |
| } | |
| .link-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--current-accent), var(--lava-yellow)); | |
| transform: translateX(-100%); | |
| transition: transform 0.5s ease; | |
| } | |
| .link-card:hover::before { | |
| transform: translateX(0); | |
| } | |
| .link-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(255, 119, 51, 0.4); | |
| border-color: rgba(255, 119, 51, 0.7); | |
| } | |
| .link-card h3 { | |
| margin-top: 0; | |
| color: var(--current-accent) !important; | |
| font-size: 1.5em; | |
| margin-bottom: 15px; | |
| text-shadow: 0 0 8px rgba(255, 119, 51, 0.4); | |
| } | |
| .link-button { | |
| display: inline-flex; | |
| align-items: center; | |
| background: rgba(120, 60, 40, 0.3); | |
| color: var(--current-text) !important; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| border: 1px solid rgba(255, 119, 51, 0.5); | |
| margin: 8px 0; | |
| transition: all 0.4s ease; | |
| font-size: 1.1em; | |
| position: relative; | |
| overflow: hidden; | |
| backdrop-filter: blur(5px); | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .link-button { | |
| background: rgba(255, 150, 120, 0.3); | |
| } | |
| } | |
| .link-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 170, 68, 0.3), transparent); | |
| transition: all 0.6s ease; | |
| } | |
| .link-button:hover { | |
| background: rgba(150, 80, 50, 0.5); | |
| border-color: rgba(255, 170, 68, 0.8); | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 15px rgba(255, 119, 51, 0.5); | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .link-button:hover { | |
| background: rgba(255, 170, 140, 0.5); | |
| } | |
| } | |
| .link-button:hover::before { | |
| left: 100%; | |
| } | |
| .link-button::after { | |
| content: '→'; | |
| margin-left: 12px; | |
| opacity: 0.8; | |
| transition: all 0.3s ease; | |
| } | |
| .link-button:hover::after { | |
| transform: translateX(5px); | |
| opacity: 1; | |
| } | |
| /* Disclaimer and Badges */ | |
| .disclaimer { | |
| color: var(--current-accent); | |
| border-left: 3px solid var(--current-accent); | |
| padding: 15px 20px; | |
| margin: 25px 0; | |
| position: relative; | |
| background: rgba(100, 50, 30, 0.3); | |
| border-radius: 0 8px 8px 0; | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .disclaimer { | |
| background: rgba(255, 200, 180, 0.3); | |
| } | |
| } | |
| .disclaimer::before { | |
| content: '⚠️'; | |
| position: absolute; | |
| left: -30px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 1.5em; | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: translateY(-50%) scale(1); } | |
| 50% { transform: translateY(-50%) scale(1.1); } | |
| } | |
| .badge { | |
| display: inline-block; | |
| padding: 8px 15px; | |
| border-radius: 6px; | |
| background: rgba(150, 80, 50, 0.3); | |
| border: 1px solid var(--current-accent); | |
| margin: 8px; | |
| font-size: 0.9em; | |
| animation: badgePulse 5s ease-in-out infinite; | |
| transition: all 0.3s ease; | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .badge { | |
| background: rgba(255, 170, 140, 0.3); | |
| } | |
| } | |
| .badge:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 12px rgba(255, 119, 51, 0.6); | |
| } | |
| @keyframes badgePulse { | |
| 0%, 100% { | |
| box-shadow: 0 0 8px rgba(255, 119, 51, 0.4); | |
| border-color: var(--current-accent); | |
| } | |
| 50% { | |
| box-shadow: 0 0 15px rgba(255, 170, 68, 0.6); | |
| border-color: var(--current-accent-secondary); | |
| } | |
| } | |
| /* Interactive features */ | |
| .remember-this { | |
| position: relative; | |
| } | |
| .remember-this::after { | |
| content: 'The heat is rising...'; | |
| position: absolute; | |
| bottom: -25px; | |
| right: 0; | |
| font-size: 0.8em; | |
| color: var(--current-accent); | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| pointer-events: none; | |
| font-style: italic; | |
| } | |
| .remember-this:hover::after { | |
| opacity: 0.7; | |
| transition-delay: 1s; | |
| } | |
| .shifty-section { | |
| transition: transform 0.3s ease; | |
| } | |
| .shifty-section:hover { | |
| transform: translateX(10px); | |
| } | |
| .shifty-section::before { | |
| content: 'The volcano stirs...'; | |
| position: absolute; | |
| top: -25px; | |
| left: 10px; | |
| font-size: 0.7em; | |
| color: var(--current-accent); | |
| opacity: 0.7; | |
| transition: opacity 3s ease; | |
| pointer-events: none; | |
| font-style: italic; | |
| } | |
| .shifty-section:hover::before { | |
| opacity: 0; | |
| transition-delay: 5s; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 50px; | |
| position: relative; | |
| padding: 20px; | |
| border-top: 1px solid rgba(255, 119, 51, 0.2); | |
| } | |
| .hidden-message { | |
| position: absolute; | |
| bottom: -30px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 0.8em; | |
| color: var(--current-accent); | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| pointer-events: none; | |
| font-style: italic; | |
| } | |
| footer:hover .hidden-message { | |
| opacity: 0.7; | |
| } | |
| .flash-warning { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: rgba(150, 80, 50, 0.3); | |
| padding: 15px; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 119, 51, 0.6); | |
| backdrop-filter: blur(5px); | |
| z-index: 1000; | |
| animation: flashWarning 30s ease-in-out forwards; | |
| box-shadow: 0 0 15px rgba(255, 119, 51, 0.4); | |
| } | |
| @keyframes flashWarning { | |
| 0% { opacity: 0.7; } | |
| 10% { opacity: 0; } | |
| 20% { opacity: 0.7; } | |
| 30% { opacity: 0; } | |
| 40% { opacity: 0.7; } | |
| 50% { opacity: 0; } | |
| 60% { opacity: 0.7; } | |
| 70% { opacity: 0; } | |
| 80% { opacity: 0.7; } | |
| 90% { opacity: 0; } | |
| 100% { opacity: 0; display: none; } | |
| } | |
| /* Lava bubble animation */ | |
| .lava-bubble { | |
| position: fixed; | |
| bottom: -50px; | |
| width: 20px; | |
| height: 20px; | |
| background: radial-gradient(circle, var(--lava-red) 0%, var(--lava-orange) 70%, transparent 100%); | |
| border-radius: 50%; | |
| opacity: 0.5; | |
| animation: lavaBubble 18s linear infinite; | |
| z-index: -1; | |
| filter: blur(1px); | |
| } | |
| @keyframes lavaBubble { | |
| 0% { | |
| transform: translateY(0) scale(1); | |
| opacity: 0.5; | |
| } | |
| 50% { | |
| transform: translateY(-100vh) scale(1.3); | |
| opacity: 0.2; | |
| } | |
| 100% { | |
| transform: translateY(-200vh) scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| /* Matrix rain characters */ | |
| .matrix-char { | |
| position: absolute; | |
| color: rgba(255, 119, 51, 0.5); | |
| font-family: monospace; | |
| font-size: 14px; | |
| animation: matrixFall linear forwards; | |
| } | |
| @keyframes matrixFall { | |
| to { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 15px; | |
| } | |
| .main-container { | |
| padding: 20px; | |
| } | |
| .model-name { | |
| font-size: 2.5em; | |
| } | |
| .version { | |
| font-size: 1.4em; | |
| } | |
| .quant-links { | |
| grid-template-columns: 1fr; | |
| } | |
| .waifu-container { | |
| margin: 20px -20px; | |
| width: calc(100% + 40px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-animation"></div> | |
| <div class="matrix-rain" id="matrix-rain"></div> | |
| <div id="lava-bubbles"></div> | |
| <div class="container"> | |
| <div class="main-container"> | |
| <div class="header"> | |
| <h1 class="model-name">Ready.Art</h1> | |
| <div class="version">Quantization and Fine Tuning</div> | |
| <p class="subtitle"></p> | |
| </div> | |
| <div class="waifu-container"> | |
| <video width="960" height="960" controls autoplay> | |
| <source src="https://huggingface.co/spaces/ReadyArt/README/resolve/main/readyart-video.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| <div class="section shifty-section"> | |
| <h2 class="section-title">⚙️ ReadyArt Current Members</h2> | |
| <ul> | |
| <li>GECFDO</li> | |
| <li>AesSedai</li> | |
| <li>FrenzyBiscuit</li> | |
| </ul> | |
| </div> | |
| <div class="section remember-this"> | |
| <h2 class="section-title">🎖️ Honorary Members</h2> | |
| <ul> | |
| <li>Sleep Deprived (We miss you and will remember you)</li> | |
| </ul> | |
| </div> | |
| <div class="section remember-this"> | |
| <h2 class="section-title">📜 Model Release Cycle</h2> | |
| <ul> | |
| <li>We will release our models as GGUF's for the first two weeks</li> | |
| <li>After two weeks have passed from the models release we will release raw weights</li> | |
| </ul> | |
| </div> | |
| <div class="section remember-this"> | |
| <h2 class="section-title">🗒️ Free API Service</h2> | |
| <ul> | |
| <li>We offer a free API service.</li> | |
| <li>Models run: Primarily 70B, sometimes larger.</li> | |
| <li>If you're interested, join our discord and DM FrenzyBiscuit.</li> | |
| <li>Pros: Privacy focused</li> | |
| <li>Cons: Uptime not guaranteed.</li> | |
| </ul> | |
| </div> | |
| <footer> | |
| <p>Ready.Art | Quantization and Fine Tuning</p> | |
| <div class="hidden-message">Welcome...</div> | |
| </footer> | |
| </div> | |
| </div> | |
| <script> | |
| // Create lava bubbles | |
| function createLavaBubbles() { | |
| const container = document.getElementById('lava-bubbles'); | |
| for (let i = 0; i < 15; i++) { | |
| const bubble = document.createElement('div'); | |
| bubble.className = 'lava-bubble'; | |
| bubble.style.left = `${Math.random() * 100}vw`; | |
| bubble.style.animationDelay = `${Math.random() * 18}s`; | |
| bubble.style.width = `${8 + Math.random() * 20}px`; | |
| bubble.style.height = bubble.style.width; | |
| container.appendChild(bubble); | |
| } | |
| } | |
| function createMatrixRain() { | |
| const container = document.getElementById('matrix-rain'); | |
| const chars = '01'; | |
| for (let i = 0; i < 60; i++) { | |
| setTimeout(() => { | |
| const char = document.createElement('div'); | |
| char.className = 'matrix-char'; | |
| char.textContent = chars[Math.floor(Math.random() * chars.length)]; | |
| char.style.left = `${Math.random() * 100}vw`; | |
| char.style.animationDuration = `${6 + Math.random() * 12}s`; | |
| char.style.fontSize = `${10 + Math.random() * 6}px`; | |
| char.style.opacity = `${0.05 + Math.random() * 0.15}`; | |
| container.appendChild(char); | |
| // Remove character after animation completes | |
| setTimeout(() => { | |
| if (char.parentNode) { | |
| char.parentNode.removeChild(char); | |
| } | |
| }, parseFloat(char.style.animationDuration) * 1000); | |
| }, i * 300); | |
| } | |
| // Continue creating new characters | |
| setInterval(createMatrixRain, 12000); | |
| } | |
| // Add parallax effect to background | |
| function addParallaxEffect() { | |
| document.addEventListener('mousemove', (e) => { | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| document.querySelector('.bg-animation').style.transform = `translate(${x * 15}px, ${y * 15}px)`; | |
| }); | |
| } | |
| function addCursorEffects() { | |
| document.addEventListener('mousemove', (e) => { | |
| if(Math.random() > 0.97) { | |
| document.documentElement.style.cursor = 'wait'; | |
| setTimeout(() => { | |
| document.documentElement.style.cursor = ''; | |
| }, 100); | |
| } | |
| // Create cursor trail effect occasionally | |
| if(Math.random() > 0.96) { | |
| const trail = document.createElement('div'); | |
| trail.style.position = 'fixed'; | |
| trail.style.left = `${e.clientX}px`; | |
| trail.style.top = `${e.clientY}px`; | |
| trail.style.width = '8px'; | |
| trail.style.height = '8px'; | |
| trail.style.background = 'radial-gradient(circle, var(--current-accent), transparent)'; | |
| trail.style.borderRadius = '50%'; | |
| trail.style.pointerEvents = 'none'; | |
| trail.style.zIndex = '9999'; | |
| trail.style.animation = 'trailFade 1s forwards'; | |
| document.body.appendChild(trail); | |
| setTimeout(() => { | |
| if (trail.parentNode) { | |
| trail.parentNode.removeChild(trail); | |
| } | |
| }, 1000); | |
| } | |
| }); | |
| } | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes trailFade { | |
| 0% { transform: scale(1); opacity: 0.6; } | |
| 100% { transform: scale(2.5); opacity: 0; } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| function addFlashWarning() { | |
| setTimeout(() => { | |
| const reminder = document.createElement('div'); | |
| reminder.className = 'flash-warning'; | |
| reminder.textContent = 'The temperature is rising... are you feeling the heat?'; | |
| reminder.style.animation = 'flashWarning 15s ease-in-out forwards'; | |
| document.body.appendChild(reminder); | |
| setInterval(() => { | |
| if(Math.random() > 0.9) { | |
| document.body.appendChild(reminder.cloneNode(true)); | |
| } | |
| }, 50000); | |
| }, 30000); | |
| } | |
| function addSectionShift() { | |
| setInterval(() => { | |
| if(document.hidden) { | |
| document.querySelectorAll('.shifty-section').forEach(section => { | |
| section.style.transform = `translateX(${Math.random() > 0.5 ? '' : '-'}${Math.random() * 6}px)`; | |
| }); | |
| } | |
| }, 2000); | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| createLavaBubbles(); | |
| createMatrixRain(); | |
| addParallaxEffect(); | |
| addCursorEffects(); | |
| addFlashWarning(); | |
| addSectionShift(); | |
| setInterval(() => { | |
| if(Math.random() > 0.7) { | |
| const title = document.querySelector('.model-name'); | |
| const originalText = title.textContent; | |
| title.textContent = 'D4RK 05M0515'; | |
| title.style.color = '#ff33aa'; | |
| title.style.textShadow = '0 0 15px #ff33aa'; | |
| setTimeout(() => { | |
| title.textContent = originalText; | |
| title.style.color = ''; | |
| title.style.textShadow = ''; | |
| }, 100); | |
| } | |
| }, 10000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |