| <!DOCTYPE html><html lang="en" style="margin:0; padding:0; width:100%; height:100%;"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>L3.3-Shakudo-70b</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* GOTHIC ALCHEMIST THEME */ | |
| /* Base styles */ | |
| /* DEBUG STYLES FOR SMALL SCREENS - Added temporarily to diagnose responsive issues */ | |
| @media (max-width: 480px) { | |
| .debug-overflow { | |
| border: 2px solid red !important; | |
| } | |
| } | |
| /* Fix for vertical text in composition list on mobile */ | |
| @media (max-width: 480px) { | |
| .composition-list li { | |
| grid-template-columns: 1fr; /* Change to single column on mobile */ | |
| } | |
| .model-component a { | |
| display: inline; /* Change from block to inline */ | |
| word-break: break-word; /* Better word breaking behavior */ | |
| } | |
| } | |
| /* Remove horizontal padding on containers for mobile */ | |
| @media (max-width: 480px) { | |
| .container { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Lora', serif; | |
| background-color: #1A1A1A; | |
| color: #E0EAE0; | |
| line-height: 1.6; | |
| background: radial-gradient(ellipse at center, #2a2a2a 0%, #1A1A1A 70%); | |
| background-attachment: fixed; | |
| position: relative; | |
| overflow-x: hidden; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 16px; | |
| overflow-y: auto; | |
| min-height: 100vh; | |
| height: auto; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(0, 255, 127, 0.15) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(218, 165, 32, 0.15) 0%, transparent 40%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* Typography */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Cinzel Decorative', serif; | |
| font-weight: 700; | |
| color: #E0EAE0; | |
| margin-bottom: 1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| p { | |
| margin-bottom: 1.5rem; | |
| color: rgba(224, 234, 224, 0.9); | |
| } | |
| a { | |
| color: #00FF7F; /* Vibrant Green */ | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| a:hover { | |
| color: #DAA520; /* Rich Gold */ | |
| text-shadow: 0 0 10px rgba(218, 165, 32, 0.7); | |
| } | |
| /* Aesthetic neon details */ | |
| .neon-border { | |
| border: 1px solid #00FF7F; | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.5); | |
| } | |
| .glowing-text { | |
| color: #00FF7F; | |
| text-shadow: | |
| 0 0 5px rgba(0, 255, 127, 0.7), | |
| 0 0 10px rgba(0, 255, 127, 0.5), | |
| 0 0 15px rgba(0, 255, 127, 0.3); | |
| } | |
| /* Form elements */ | |
| input, select, textarea, button { | |
| font-family: 'Lora', serif; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid rgba(0, 255, 127, 0.5); | |
| background-color: rgba(10, 26, 26, 0.8); | |
| color: #E0EAE0; | |
| border-radius: 0; | |
| transition: all 0.3s ease; | |
| } | |
| input:focus, select:focus, textarea:focus { | |
| outline: none; | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.5); | |
| } | |
| button { | |
| cursor: pointer; | |
| background-color: rgba(0, 255, 127, 0.2); | |
| border: 1px solid #00FF7F; | |
| border-radius: 0; | |
| } | |
| button:hover { | |
| background-color: rgba(0, 255, 127, 0.4); | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.5); | |
| } | |
| /* Details and summary */ | |
| details { | |
| margin-bottom: 1.5rem; | |
| } | |
| summary { | |
| padding: 1rem; | |
| background: rgba(0, 255, 127, 0.1); | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| font-weight: 600; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0; | |
| transition: all 0.3s ease; | |
| } | |
| summary:hover { | |
| background: rgba(0, 255, 127, 0.2); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.4); | |
| } | |
| summary::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 8px; | |
| height: 100%; | |
| background: linear-gradient(135deg, #00FF7F, #DAA520); | |
| opacity: 0.7; | |
| } | |
| details[open] summary { | |
| margin-bottom: 1rem; | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.4); | |
| } | |
| /* Code blocks */ | |
| code { | |
| font-family: 'Cascadia Code', 'Source Code Pro', monospace; | |
| background: rgba(0, 255, 127, 0.1); | |
| padding: 0.2rem 0.4rem; | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| border-radius: 0; | |
| font-size: 0.9rem; | |
| color: #00FF7F; | |
| } | |
| pre { | |
| background: rgba(10, 26, 26, 0.8); | |
| padding: 1.5rem; | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| overflow-x: auto; | |
| margin-bottom: 1.5rem; | |
| border-radius: 0; | |
| } | |
| pre code { | |
| background: transparent; | |
| padding: 0; | |
| border: none; | |
| color: #E0EAE0; | |
| } | |
| /* Scrollbar styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| background-color: #1A1A1A; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, #00FF7F, #DAA520); | |
| border-radius: 0; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background-color: rgba(26, 26, 26, 0.8); | |
| border-radius: 0; | |
| } | |
| /* Selection styling */ | |
| ::selection { | |
| background-color: rgba(0, 255, 127, 0.3); | |
| color: #E0EAE0; | |
| } | |
| /* Metrics section */ | |
| .metrics-section { | |
| margin-bottom: 30px; | |
| position: relative; | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| padding: 20px; | |
| clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.15); | |
| } | |
| /* Core metrics grid */ | |
| .core-metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 30px; | |
| } | |
| .info-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| } | |
| /* Metric box */ | |
| .metric-box { | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| border-radius: 0; | |
| padding: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| position: relative; | |
| overflow: hidden; | |
| clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.15); | |
| transition: all 0.3s ease; | |
| } | |
| .metric-box:hover { | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .metric-box::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%), | |
| linear-gradient(-45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%); | |
| background-size: 10px 10px; | |
| pointer-events: none; | |
| opacity: 0.5; | |
| } | |
| .metric-box .label { | |
| color: #E0EAE0; | |
| font-size: 14px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.3); | |
| } | |
| .metric-box .value { | |
| color: #00FF7F; | |
| font-size: 28px; | |
| font-weight: 700; | |
| text-shadow: | |
| 0 0 10px rgba(0, 255, 127, 0.5), | |
| 0 0 20px rgba(0, 255, 127, 0.3); | |
| letter-spacing: 1px; | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| /* Progress metrics */ | |
| .progress-metrics { | |
| display: grid; | |
| gap: 15px; | |
| padding: 20px; | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| position: relative; | |
| overflow: hidden; | |
| clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.15); | |
| } | |
| .progress-metric { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .progress-label { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: #E0EAE0; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.3); | |
| } | |
| .progress-value { | |
| color: #00FF7F; | |
| font-weight: 600; | |
| text-shadow: | |
| 0 0 5px rgba(0, 255, 127, 0.5), | |
| 0 0 10px rgba(0, 255, 127, 0.3); | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| /* Progress bars */ | |
| .progress-bar { | |
| height: 4px; | |
| background: rgba(0, 255, 127, 0.1); | |
| border-radius: 0; | |
| overflow: hidden; | |
| position: relative; | |
| border: 1px solid rgba(0, 255, 127, 0.2); | |
| clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #00b359, #00FF7F); | |
| border-radius: 0; | |
| position: relative; | |
| overflow: hidden; | |
| clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%); | |
| box-shadow: | |
| 0 0 10px rgba(0, 255, 127, 0.4), | |
| 0 0 20px rgba(0, 255, 127, 0.2); | |
| } | |
| .progress-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, | |
| rgba(255, 255, 255, 0.1) 0%, | |
| rgba(255, 255, 255, 0.1) 40%, | |
| rgba(255, 255, 255, 0.3) 50%, | |
| rgba(255, 255, 255, 0.1) 60%, | |
| rgba(255, 255, 255, 0.1) 100% | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 2s infinite; | |
| } | |
| /* Split progress bars */ | |
| .progress-metric.split .progress-label { | |
| justify-content: space-between; | |
| font-size: 13px; | |
| } | |
| .progress-bar.split { | |
| display: flex; | |
| background: rgba(0, 255, 127, 0.1); | |
| position: relative; | |
| justify-content: center; | |
| border: 1px solid rgba(0, 255, 127, 0.2); | |
| clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); | |
| } | |
| .progress-bar.split::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 2px; | |
| height: 100%; | |
| background: rgba(0, 255, 127, 0.3); | |
| z-index: 2; | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.4); | |
| } | |
| .progress-fill-left, | |
| .progress-fill-right { | |
| height: 100%; | |
| background: linear-gradient(90deg, #00b359, #00FF7F); | |
| position: relative; | |
| width: 50%; | |
| overflow: hidden; | |
| } | |
| .progress-fill-left { | |
| clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%); | |
| margin-right: 1px; | |
| transform-origin: right; | |
| transform: scaleX(var(--scale, 0)); | |
| box-shadow: | |
| 0 0 10px rgba(0, 255, 127, 0.4), | |
| 0 0 20px rgba(0, 255, 127, 0.2); | |
| } | |
| .progress-fill-right { | |
| clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%); | |
| margin-left: 1px; | |
| transform-origin: left; | |
| transform: scaleX(var(--scale, 0)); | |
| box-shadow: | |
| 0 0 10px rgba(0, 255, 127, 0.4), | |
| 0 0 20px rgba(0, 255, 127, 0.2); | |
| } | |
| /* Benchmark container */ | |
| .benchmark-container { | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| position: relative; | |
| overflow: hidden; | |
| clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.15); | |
| padding: 20px; | |
| } | |
| /* Benchmark notification */ | |
| .benchmark-notification { | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.15); | |
| } | |
| .notification-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .notification-icon { | |
| font-size: 20px; | |
| color: #00FF7F; | |
| text-shadow: | |
| 0 0 10px rgba(0, 255, 127, 0.5), | |
| 0 0 20px rgba(0, 255, 127, 0.3); | |
| } | |
| .notification-text { | |
| color: #E0EAE0; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.3); | |
| } | |
| .benchmark-link { | |
| color: #00FF7F; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| text-shadow: | |
| 0 0 5px rgba(0, 255, 127, 0.5), | |
| 0 0 10px rgba(0, 255, 127, 0.3); | |
| position: relative; | |
| padding: 2px 5px; | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); | |
| transition: all 0.3s ease; | |
| } | |
| .benchmark-link:hover { | |
| background: rgba(0, 255, 127, 0.1); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.3); | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* Button styles */ | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| background-color: rgba(0, 255, 127, 0.2); | |
| color: #E0EAE0; | |
| border: 1px solid #00FF7F; | |
| font-family: 'Cinzel Decorative', serif; | |
| font-weight: 600; | |
| font-size: 15px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| text-align: center; | |
| border-radius: 0; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.3); | |
| } | |
| .button:hover { | |
| background-color: rgba(0, 255, 127, 0.4); | |
| color: #E0EAE0; | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 20px rgba(218, 165, 32, 0.5); | |
| text-shadow: 0 0 10px rgba(218, 165, 32, 0.7); | |
| } | |
| .button:active { | |
| transform: translateY(1px); | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.4); | |
| } | |
| .button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(218, 165, 32, 0.3), | |
| transparent | |
| ); | |
| transition: left 0.7s ease; | |
| } | |
| .button:hover::before { | |
| left: 100%; | |
| } | |
| .button::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: linear-gradient(45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%), linear-gradient(-45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%); | |
| background-size: 10px 10px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| pointer-events: none; | |
| } | |
| .button:hover::after { | |
| opacity: 0.5; | |
| } | |
| /* Support buttons */ | |
| .support-buttons { | |
| display: flex; | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| } | |
| .support-buttons .button { | |
| min-width: 150px; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.3); | |
| } | |
| .support-buttons .button:hover { | |
| box-shadow: 0 0 20px rgba(218, 165, 32, 0.5); | |
| } | |
| /* Button animations */ | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.5); | |
| } | |
| 100% { | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.3); | |
| } | |
| } | |
| .animated-button { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Button variants */ | |
| .button.primary { | |
| background-color: rgba(0, 255, 127, 0.2); | |
| border-color: #00FF7F; | |
| } | |
| .button.primary:hover { | |
| background-color: rgba(0, 255, 127, 0.3); | |
| } | |
| .button.outline { | |
| background-color: transparent; | |
| border-color: #00FF7F; | |
| } | |
| .button.outline:hover { | |
| background-color: rgba(0, 255, 127, 0.1); | |
| } | |
| .button.small { | |
| padding: 6px 12px; | |
| font-size: 13px; | |
| } | |
| .button.large { | |
| padding: 12px 24px; | |
| font-size: 16px; | |
| } | |
| /* Button with icon */ | |
| .button-with-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .button-icon { | |
| font-size: 18px; | |
| line-height: 1; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .support-buttons { | |
| flex-direction: column; | |
| } | |
| .support-buttons .button { | |
| width: 100%; | |
| } | |
| } | |
| /* Container & Layout */ | |
| .container { | |
| width: 100%; | |
| max-width: 100%; | |
| margin: 0; | |
| padding: 20px; | |
| position: relative; | |
| background-color: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.5); | |
| border-radius: 0; | |
| } | |
| .container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 30%, rgba(0, 255, 127, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 70%, rgba(218, 165, 32, 0.1) 0%, transparent 40%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* Header */ | |
| .header { | |
| margin-bottom: 50px; | |
| position: relative; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid #00FF7F; | |
| overflow: hidden; | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 50%; | |
| height: 1px; | |
| background: linear-gradient(90deg, #00FF7F, transparent); | |
| box-shadow: 0 0 20px #00FF7F; | |
| } | |
| .header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| right: 0; | |
| width: 50%; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #00FF7F); | |
| box-shadow: 0 0 20px #00FF7F; | |
| } | |
| .header h1 { | |
| font-family: 'Cinzel Decorative', serif; | |
| font-size: 48px; | |
| color: #E0EAE0; | |
| text-align: center; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| margin: 0; | |
| position: relative; | |
| text-shadow: | |
| 0 0 5px rgba(0, 255, 127, 0.7), | |
| 0 0 10px rgba(0, 255, 127, 0.5), | |
| 0 0 20px rgba(0, 255, 127, 0.3); | |
| } | |
| .header h1::before { | |
| content: ''; | |
| position: absolute; | |
| width: 100px; | |
| height: 1px; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #00FF7F; | |
| box-shadow: 0 0 20px #00FF7F; | |
| } | |
| /* Info section */ | |
| .info { | |
| margin-bottom: 50px; | |
| overflow: visible; /* Ensure content can extend beyond container */ | |
| } | |
| .info > img { | |
| width: 100%; | |
| height: auto; | |
| border: 1px solid #00FF7F; | |
| margin-bottom: 30px; | |
| box-shadow: 0 0 30px rgba(0, 255, 127, 0.5); | |
| border-radius: 0; | |
| background-color: rgba(10, 26, 26, 0.6); | |
| display: block; | |
| } | |
| .info h2 { | |
| font-family: 'Cinzel Decorative', serif; | |
| font-size: 28px; | |
| color: #E0EAE0; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| margin: 30px 0 20px 0; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid rgba(0, 255, 127, 0.4); | |
| position: relative; | |
| text-shadow: 0 0 10px rgba(0, 255, 127, 0.5); | |
| } | |
| .info h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 100px; | |
| height: 1px; | |
| background: #00FF7F; | |
| box-shadow: 0 0 15px #00FF7F; | |
| } | |
| .info h3 { | |
| font-family: 'Cinzel Decorative', serif; | |
| font-size: 24px; | |
| color: #E0EAE0; | |
| margin: 20px 0 15px 0; | |
| letter-spacing: 1px; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.4); | |
| } | |
| .info h4 { | |
| font-family: 'Lora', serif; | |
| font-size: 18px; | |
| color: #00FF7F; | |
| margin: 15px 0 10px 0; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.5); | |
| } | |
| .info p { | |
| margin: 0 0 15px 0; | |
| line-height: 1.6; | |
| } | |
| /* Creator section */ | |
| .creator-section { | |
| margin-bottom: 30px; | |
| padding: 20px 20px 10px 20px; | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| position: relative; | |
| border-radius: 0; | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.3); | |
| } | |
| .creator-badge { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .creator-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .creator-label { | |
| color: #E0EAE0; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 5px; | |
| } | |
| .creator-link { | |
| color: #00FF7F; | |
| text-decoration: none; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| transition: all 0.3s ease; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.5); | |
| } | |
| .creator-link:hover { | |
| transform: translateX(5px); | |
| text-shadow: 0 0 10px rgba(218, 165, 32, 0.7); | |
| } | |
| .creator-name { | |
| font-size: 18px; | |
| } | |
| .creator-arrow { | |
| font-weight: 600; | |
| transition: transform 0.3s ease; | |
| } | |
| /* Supporters dropdown section */ | |
| .sponsors-section { | |
| margin-top: 15px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .sponsors-dropdown { | |
| width: 100%; | |
| background: rgba(0, 255, 127, 0.1); | |
| border: 1px solid #00FF7F; | |
| border-radius: 0; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .sponsors-summary { | |
| padding: 12px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| outline: none; | |
| position: relative; | |
| z-index: 1; | |
| transition: all 0.3s ease; | |
| } | |
| .sponsors-summary:hover { | |
| background-color: rgba(0, 255, 127, 0.2); | |
| } | |
| .sponsors-title { | |
| font-family: 'Cinzel Decorative', serif; | |
| color: #E0EAE0; | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| text-shadow: 0 0 8px rgba(0, 255, 127, 0.4); | |
| } | |
| .sponsors-list { | |
| padding: 15px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |
| gap: 15px; | |
| background: transparent; | |
| border-top: 1px solid rgba(0, 255, 127, 0.3); | |
| } | |
| .sponsor-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 10px; | |
| border: 1px solid rgba(0, 255, 127, 0.2); | |
| background: rgba(0, 255, 127, 0.1); | |
| border-radius: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .sponsor-item:hover { | |
| transform: translateY(-3px); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.3); | |
| background: rgba(0, 255, 127, 0.2); | |
| } | |
| .sponsor-rank { | |
| color: #00FF7F; | |
| font-weight: 600; | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| text-shadow: 0 0 8px rgba(0, 255, 127, 0.5); | |
| } | |
| .sponsor-img { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 0; | |
| object-fit: cover; | |
| border: 2px solid #00FF7F; | |
| box-shadow: 0 0 12px rgba(0, 255, 127, 0.3); | |
| margin-bottom: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .sponsor-item:nth-child(1) .sponsor-img { | |
| border-color: #DAA520; | |
| box-shadow: 0 0 12px rgba(218, 165, 32, 0.5); | |
| } | |
| .sponsor-item:nth-child(2) .sponsor-img { | |
| border-color: silver; | |
| box-shadow: 0 0 12px rgba(192, 192, 192, 0.5); | |
| } | |
| .sponsor-item:nth-child(3) .sponsor-img { | |
| border-color: #cd7f32; /* bronze */ | |
| box-shadow: 0 0 12px rgba(205, 127, 50, 0.5); | |
| } | |
| .sponsor-item:hover .sponsor-img { | |
| border-color: #DAA520; | |
| } | |
| .sponsor-name { | |
| color: #E0EAE0; | |
| font-size: 14px; | |
| font-weight: 500; | |
| word-break: break-word; | |
| } | |
| .creator-link:hover .creator-arrow { | |
| transform: translateX(5px); | |
| } | |
| .dropdown-icon { | |
| color: #00FF7F; | |
| transition: transform 0.3s ease; | |
| } | |
| details[open] .dropdown-icon { | |
| transform: rotate(180deg); | |
| } | |
| /* Model info */ | |
| .model-info { | |
| margin-bottom: 50px; | |
| } | |
| /* Section container */ | |
| .section-container { | |
| margin-bottom: 50px; | |
| padding: 25px; | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0; | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.3); | |
| } | |
| .section-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%), | |
| linear-gradient(-45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%); | |
| background-size: 10px 10px; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.5; | |
| } | |
| .section-container h2 { | |
| margin-top: 0; | |
| } | |
| /* Support section */ | |
| .support-section { | |
| margin-bottom: 50px; | |
| padding: 25px; | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0; | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.3); | |
| } | |
| .support-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%), | |
| linear-gradient(-45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%); | |
| background-size: 10px 10px; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.5; | |
| } | |
| .support-section h2 { | |
| margin-top: 0; | |
| } | |
| /* Special thanks */ | |
| .special-thanks { | |
| margin-top: 30px; | |
| } | |
| .thanks-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 15px 0; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 15px; | |
| } | |
| .thanks-list li { | |
| padding: 10px 15px; | |
| background: rgba(0, 255, 127, 0.1); | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .thanks-list li:hover { | |
| background: rgba(0, 255, 127, 0.2); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| .thanks-list li strong { | |
| color: #00FF7F; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.5); | |
| } | |
| .thanks-note { | |
| font-style: italic; | |
| color: rgba(224, 234, 224, 0.7); | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| /* General card styles */ | |
| .info-card, | |
| .template-card, | |
| .settings-card, | |
| .quantized-section { | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| padding: 25px; | |
| margin: 20px 0; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0; | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.3); | |
| } | |
| .info-card::before, | |
| .template-card::before, | |
| .settings-card::before, | |
| .quantized-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%), | |
| linear-gradient(-45deg, rgba(0, 255, 127, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 127, 0.1) 75%); | |
| background-size: 10px 10px; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.5; | |
| } | |
| .info-card::after, | |
| .template-card::after, | |
| .settings-card::after, | |
| .quantized-section::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(0, 255, 127, 0.15), transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Info card specific */ | |
| .info-card { | |
| box-shadow: 0 0 30px rgba(0, 255, 127, 0.4); | |
| } | |
| .info-header { | |
| margin-bottom: 25px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid rgba(0, 255, 127, 0.4); | |
| position: relative; | |
| } | |
| .info-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 100px; | |
| height: 1px; | |
| background: #00FF7F; | |
| box-shadow: 0 0 10px #00FF7F; | |
| } | |
| .model-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .model-tag { | |
| background: rgba(0, 255, 127, 0.2); | |
| border: 1px solid #00FF7F; | |
| color: #E0EAE0; | |
| font-size: 12px; | |
| padding: 5px 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 500; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0; | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.4); | |
| transition: all 0.3s ease; | |
| } | |
| .model-tag:hover { | |
| background: rgba(0, 255, 127, 0.4); | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.6); | |
| transform: translateY(-2px); | |
| } | |
| /* Model composition list */ | |
| .model-composition h4 { | |
| margin-bottom: 15px; | |
| } | |
| .composition-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0 0 20px 0; | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .composition-list li { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 15px; | |
| background: rgba(0, 255, 127, 0.1); | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .composition-list li:hover { | |
| background: rgba(0, 255, 127, 0.2); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| .composition-list li::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 8px; | |
| height: 100%; | |
| background: linear-gradient(180deg, #00FF7F, #DAA520); | |
| opacity: 0.7; | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.6); | |
| } | |
| .model-component { | |
| color: #00FF7F; | |
| font-weight: 500; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.5); | |
| } | |
| .model-component a { | |
| display: block; | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| word-break: break-word; | |
| transition: all 0.3s ease; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.5); | |
| } | |
| .model-component a:hover { | |
| transform: translateX(5px); | |
| text-shadow: 0 0 10px rgba(218, 165, 32, 0.7); | |
| } | |
| /* Base model dropdown styles */ | |
| .base-model-dropdown { | |
| width: 100%; | |
| position: relative; | |
| padding-right: 50px; /* Make space for the BASE label */ | |
| display: block; | |
| margin-bottom: 0; | |
| } | |
| .base-model-summary { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 12px 8px 20px; /* Increased left padding to prevent text overlap with blue stripe */ | |
| cursor: pointer; | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| position: relative; | |
| border-radius: 0; | |
| margin-bottom: 0; | |
| transition: all 0.3s ease; | |
| color: #00FF7F; | |
| font-weight: 500; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.5); | |
| } | |
| .base-model-summary:hover { | |
| background: rgba(0, 255, 127, 0.2); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.4); | |
| } | |
| .base-model-summary span:first-child { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: inline-block; | |
| white-space: nowrap; | |
| flex: 1; | |
| } | |
| .dropdown-icon { | |
| font-size: 0.75rem; | |
| margin-left: 8px; | |
| color: rgba(0, 255, 127, 0.7); | |
| transition: transform 0.3s ease; | |
| } | |
| .base-model-dropdown[open] .dropdown-icon { | |
| transform: rotate(180deg); | |
| } | |
| .base-model-list { | |
| position: absolute; | |
| margin-top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(10, 26, 26, 0.95); | |
| border: 1px solid rgba(0, 255, 127, 0.5); | |
| border-radius: 0; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.3); | |
| min-width: 100%; | |
| overflow: visible; | |
| } | |
| .base-model-item { | |
| padding: 8px 12px 8px 20px; /* Increased left padding for the model items */ | |
| border-bottom: 1px solid rgba(0, 255, 127, 0.2); | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .base-model-item:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| } | |
| .base-model-item:hover { | |
| background: rgba(0, 255, 127, 0.2); | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.4); | |
| transform: translateY(-1px) translateX(0); | |
| } | |
| .base-model-item a { | |
| display: block; | |
| width: 100%; | |
| overflow: hidden; | |
| padding-left: 10px; | |
| } | |
| .model-label { | |
| color: #00FF7F; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| display: inline-block; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .model-label:hover { | |
| text-shadow: 0 0 10px rgba(218, 165, 32, 0.7); | |
| } | |
| /* BASE label */ | |
| .base-model-dropdown::after { | |
| z-index: 1; | |
| content: attr(data-merge-type); | |
| position: absolute; | |
| right: 0; | |
| top: 8px; | |
| transform: translateY(0); | |
| font-size: 10px; | |
| padding: 2px 5px; | |
| background: rgba(0, 255, 127, 0.3); | |
| color: #E0EAE0; | |
| border: 1px solid #00FF7F; | |
| box-shadow: 0 0 10px rgba(0, 255, 127, 0.5); | |
| border-radius: 0; | |
| } | |
| /* Override the blue stripe for base-model-summary and items */ | |
| .base-model-dropdown { | |
| position: relative; | |
| } | |
| .base-model-summary::before, | |
| .base-model-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 8px; | |
| height: 100%; | |
| background: linear-gradient(180deg, #00FF7F, #DAA520); | |
| opacity: 0.7; | |
| } | |
| .base-model-dropdown[open] .base-model-summary, | |
| .base-model-dropdown[open] .base-model-list { | |
| border-color: rgba(0, 255, 127, 0.7); | |
| box-shadow: 0 0 25px rgba(0, 255, 127, 0.5); | |
| z-index: 20; | |
| position: relative; | |
| } | |
| /* Model description */ | |
| .model-description { | |
| margin-top: 30px; | |
| } | |
| .model-description h4 { | |
| margin-bottom: 15px; | |
| } | |
| .model-description p { | |
| margin-bottom: 20px; | |
| } | |
| .model-description ul { | |
| padding-left: 20px; | |
| margin-bottom: 20px; | |
| list-style: none; | |
| } | |
| .model-description li { | |
| margin-bottom: 8px; | |
| position: relative; | |
| padding-left: 15px; | |
| } | |
| .model-description li::before { | |
| content: '†'; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| color: #00FF7F; | |
| text-shadow: 0 0 10px rgba(0, 255, 127, 0.7); | |
| } | |
| /* Template card */ | |
| .template-card { | |
| box-shadow: 0 0 30px rgba(0, 255, 127, 0.4); | |
| } | |
| .template-item { | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| background: rgba(0, 255, 127, 0.1); | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| position: relative; | |
| border-radius: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .template-item:hover { | |
| background: rgba(0, 255, 127, 0.2); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.5); | |
| transform: translateY(-2px); | |
| } | |
| .template-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .template-link { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-weight: 600; | |
| color: #00FF7F; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.5); | |
| padding: 5px; | |
| transition: all 0.3s ease; | |
| } | |
| .template-link:hover { | |
| text-shadow: 0 0 10px rgba(218, 165, 32, 0.7); | |
| transform: translateX(5px); | |
| } | |
| .link-arrow { | |
| font-weight: 600; | |
| transition: transform 0.3s ease; | |
| } | |
| .template-link:hover .link-arrow { | |
| transform: translateX(5px); | |
| } | |
| .template-author { | |
| font-size: 14px; | |
| color: rgba(224, 234, 224, 0.8); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* Settings card */ | |
| .settings-card { | |
| box-shadow: 0 0 30px rgba(0, 255, 127, 0.4); | |
| } | |
| .settings-header { | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid rgba(0, 255, 127, 0.4); | |
| position: relative; | |
| } | |
| .settings-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 80px; | |
| height: 1px; | |
| background: #00FF7F; | |
| box-shadow: 0 0 10px #00FF7F; | |
| } | |
| .settings-content { | |
| padding: 15px; | |
| background: rgba(0, 255, 127, 0.1); | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| margin-bottom: 15px; | |
| position: relative; | |
| border-radius: 0; | |
| } | |
| .settings-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| padding: 8px 0; | |
| border-bottom: 1px solid rgba(0, 255, 127, 0.2); | |
| } | |
| .setting-item:last-child { | |
| margin-bottom: 0; | |
| border-bottom: none; | |
| } | |
| .setting-label { | |
| color: #E0EAE0; | |
| font-size: 14px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .setting-value { | |
| color: #00FF7F; | |
| font-weight: 600; | |
| font-family: 'Lora', serif; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.7); | |
| } | |
| .setting-item.highlight { | |
| padding: 15px; | |
| background: rgba(0, 255, 127, 0.2); | |
| border: 1px solid rgba(0, 255, 127, 0.4); | |
| border-radius: 0; | |
| display: flex; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .setting-item.highlight .setting-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| text-shadow: | |
| 0 0 10px rgba(0, 255, 127, 0.7), | |
| 0 0 20px rgba(0, 255, 127, 0.5); | |
| } | |
| /* Sampler Settings Section */ | |
| .sampler-settings { | |
| position: relative; | |
| overflow: visible; | |
| } | |
| .sampler-settings .settings-card { | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| box-shadow: 0 0 20px rgba(0, 255, 127, 0.4), inset 0 0 30px rgba(0, 255, 127, 0.2); | |
| padding: 20px; | |
| margin: 15px 0; | |
| position: relative; | |
| } | |
| .sampler-settings .settings-header h3 { | |
| color: #00FF7F; | |
| text-shadow: 0 0 8px rgba(0, 255, 127, 0.7); | |
| font-size: 1.2rem; | |
| letter-spacing: 1px; | |
| } | |
| .sampler-settings .settings-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 15px; | |
| } | |
| .sampler-settings .setting-item { | |
| border-bottom: 1px solid rgba(0, 255, 127, 0.3); | |
| padding: 12px 0; | |
| transition: all 0.3s ease; | |
| } | |
| .sampler-settings .setting-label { | |
| font-family: 'Lora', serif; | |
| font-weight: 600; | |
| color: #E0EAE0; | |
| } | |
| .sampler-settings .setting-value { | |
| font-family: 'Lora', serif; | |
| color: #00FF7F; | |
| } | |
| /* DRY Settings styles */ | |
| .dry-settings { | |
| margin-top: 8px; | |
| padding-left: 8px; | |
| border-left: 2px solid rgba(0, 255, 127, 0.4); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .dry-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .dry-label { | |
| font-size: 13px; | |
| color: #E0EAE0; | |
| } | |
| .dry-value { | |
| color: #00FF7F; | |
| font-family: 'Lora', serif; | |
| text-shadow: 0 0 5px rgba(0, 255, 127, 0.6); | |
| } | |
| /* Quantized sections */ | |
| .quantized-section { | |
| margin-bottom: 30px; | |
| } | |
| .quantized-items { | |
| display: grid; | |
| gap: 15px; | |
| margin-top: 15px; | |
| } | |
| .quantized-item { | |
| padding: 15px; | |
| background: rgba(0, 255, 127, 0.1); | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| display: grid; | |
| gap: 8px; | |
| position: relative; | |
| border-radius: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .quantized-item:hover { | |
| background: rgba(0, 255, 127, 0.2); | |
| border-color: #00FF7F; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.5); | |
| transform: translateY(-2px); | |
| } | |
| .author { | |
| color: #E0EAE0; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 500; | |
| } | |
| .multi-links { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| } | |
| .separator { | |
| color: rgba(224, 234, 224, 0.5); | |
| margin: 0 5px; | |
| } | |
| /* Medieval Corners */ | |
| .corner { | |
| position: absolute; | |
| background:none; | |
| width:6em; | |
| height:6em; | |
| font-size:10px; | |
| opacity: 1.0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .corner:after { | |
| position: absolute; | |
| content: ''; | |
| display: block; | |
| width:0.2em; | |
| height:0.2em; | |
| } | |
| /* New Progress Bar Design */ | |
| .new-progress-container { | |
| margin: 2rem 0; | |
| padding: 1.5rem; | |
| background: rgba(0, 255, 127, 0.05); | |
| border: 1px solid rgba(0, 255, 127, 0.2); | |
| position: relative; | |
| } | |
| .new-progress-container h3 { | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| color: #E0EAE0; | |
| font-family: 'Cinzel Decorative', serif; | |
| } | |
| .main-progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: rgba(0, 255, 127, 0.2); | |
| margin-bottom: 1.5rem; | |
| border-radius: 0; | |
| overflow: hidden; | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| } | |
| .main-progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #00FF7F, #DAA520); | |
| box-shadow: 0 0 10px #00FF7F; | |
| } | |
| .main-steps-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .main-step { | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .main-step[open] { | |
| background: rgba(0, 255, 127, 0.1); | |
| } | |
| .main-step summary { | |
| padding: 1rem; | |
| cursor: pointer; | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: center; | |
| gap: 1rem; | |
| font-weight: 600; | |
| color: #E0EAE0; | |
| position: relative; | |
| } | |
| .main-step summary .arrow { | |
| width: 0; | |
| height: 0; | |
| border-left: 6px solid transparent; | |
| border-right: 6px solid transparent; | |
| border-top: 6px solid #00FF7F; | |
| transition: transform 0.3s ease; | |
| } | |
| .main-step[open] summary .arrow { | |
| transform: rotate(180deg); | |
| } | |
| .main-step summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .step-title { | |
| font-family: 'Cinzel Decorative', serif; | |
| } | |
| .step-progress-bar { | |
| width: 150px; | |
| height: 6px; | |
| background: rgba(224, 234, 224, 0.2); | |
| border-radius: 0; | |
| overflow: hidden; | |
| } | |
| .step-progress-fill { | |
| height: 100%; | |
| background: #00FF7F; | |
| } | |
| .sub-steps-list { | |
| list-style: none; | |
| padding: 0 1rem 1rem 1rem; | |
| margin: 0; | |
| } | |
| .sub-steps-list li { | |
| padding: 0.5rem 0; | |
| border-bottom: 1px solid rgba(0, 255, 127, 0.1); | |
| color: rgba(224, 234, 224, 0.7); | |
| } | |
| .sub-steps-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .sub-steps-list li.completed { | |
| color: #00FF7F; | |
| text-decoration: line-through; | |
| } | |
| .sub-steps-list li.current { | |
| color: #E0EAE0; | |
| font-weight: bold; | |
| } | |
| .topleft { | |
| top:1em; | |
| left:1em; | |
| -webkit-transform:rotate(360deg); transform:rotate(360deg); | |
| } | |
| .topright { | |
| top:1em; right:1em; -webkit-transform:rotate(90deg); transform:rotate(90deg); | |
| } | |
| .bottomleft { | |
| bottom:1em; left:1em; -webkit-transform:rotate(270deg); transform:rotate(270deg); | |
| } | |
| .bottomright { | |
| bottom:1em; right:1em; -webkit-transform:rotate(180deg); transform:rotate(180deg); | |
| } | |
| .variant:after { | |
| width:0.1em; | |
| height:0.1em; | |
| } | |
| .corner5:after { | |
| box-shadow: | |
| /* A more intricate, sharp design */ | |
| 2.5em 2.5em 0.1em 0.1em #DAA520, /* Center point */ | |
| /* Four main blades */ | |
| 2.5em 1.5em .1em .1em #DAA520, 2.5em 1.0em .1em .1em #DAA520, 2.5em 0.5em .1em .1em #DAA520, | |
| 1.5em 2.5em .1em .1em #DAA520, 1.0em 2.5em .1em .1em #DAA520, 0.5em 2.5em .1em .1em #DAA520, | |
| 3.5em 2.5em .1em .1em #DAA520, 4.0em 2.5em .1em .1em #DAA520, 4.5em 2.5em .1em .1em #DAA520, | |
| 2.5em 3.5em .1em .1em #DAA520, 2.5em 4.0em .1em .1em #DAA520, 2.5em 4.5em .1em .1em #DAA520, | |
| /* Diagonal flourishes */ | |
| 1.8em 1.8em .05em .05em #DAA520, 1.2em 1.2em .05em .05em #DAA520, | |
| 3.2em 1.8em .05em .05em #DAA520, 3.8em 1.2em .05em .05em #DAA520, | |
| 1.8em 3.2em .05em .05em #DAA520, 1.2em 3.8em .05em .05em #DAA520, | |
| 3.2em 3.2em .05em .05em #DAA520, 3.8em 3.8em .05em .05em #DAA520; | |
| } | |
| /* Team Section */ | |
| .team-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .team-member { | |
| background: rgba(10, 26, 26, 0.8); | |
| border: 1px solid #00FF7F; | |
| padding: 20px; | |
| text-align: center; | |
| box-shadow: 0 0 15px rgba(0, 255, 127, 0.2); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .team-member:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0 25px rgba(0, 255, 127, 0.4); | |
| } | |
| .team-member-avatar img { | |
| width: 100px; | |
| height: 100px; | |
| object-fit: cover; | |
| border: 3px solid #DAA520; | |
| box-shadow: 0 0 15px rgba(218, 165, 32, 0.5); | |
| margin-bottom: 15px; | |
| } | |
| .team-member h3 { | |
| font-family: 'Cinzel Decorative', serif; | |
| color: #E0EAE0; | |
| font-size: 1.5rem; | |
| margin-bottom: 5px; | |
| text-shadow: 0 0 8px rgba(0, 255, 127, 0.5); | |
| } | |
| .team-member p { | |
| color: #DAA520; | |
| font-style: italic; | |
| font-size: 1rem; | |
| margin-bottom: 15px; | |
| } | |
| .team-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .team-link { | |
| color: #00FF7F; | |
| border: 1px solid #00FF7F; | |
| padding: 5px 10px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .team-link:hover { | |
| background-color: rgba(0, 255, 127, 0.1); | |
| color: #DAA520; | |
| border-color: #DAA520; | |
| box-shadow: 0 0 10px rgba(218, 165, 32, 0.5); | |
| } | |
| /* Wisp animation */ | |
| .wisp { | |
| position: fixed; | |
| bottom: -20px; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #00FF7F; | |
| border-radius: 0; | |
| opacity: 0; | |
| animation: rise 10s infinite ease-in; | |
| box-shadow: 0 0 10px #00FF7F, 0 0 20px #00FF7F, 0 0 30px #DAA520; | |
| pointer-events: none; | |
| } | |
| @keyframes rise { | |
| 0% { | |
| transform: translateY(0) translateX(0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) translateX(var(--x-end)); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wisp-container"></div> | |
| <div class="container"> | |
| <div class="corner corner5 variant topleft"></div> | |
| <div class="corner corner5 variant topright"></div> | |
| <div class="corner corner5 variant bottomleft"></div> | |
| <div class="corner corner5 variant bottomright"></div> | |
| <div class="header"> | |
| <h1 class="debug-overflow">M3.2-24B-Loki-V1.3</h1> | |
| </div> | |
| <div class="info"> | |
| <img src="https://cdn-uploads.huggingface.co/production/uploads/64545af5ec40bbbd01242ca6/_3062U_2MXQuISXGHZvrd.png" alt="Loki Mascot"> | |
| <h2>The Team</h2> | |
| <div class="team-grid"> | |
| <div class="team-member steel"> | |
| <div class="team-member-avatar"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64545af5ec40bbbd01242ca6/xRbPO8262bQ030329Kn7R.png" alt="Steelskull"> | |
| </div> | |
| <h3>Steelskull</h3> | |
| <p>Paramancer</p> | |
| <div class="team-links"> | |
| <a href="https://huggingface.co/Steelskull" class="team-link" target="_blank" rel="noopener">HuggingFace</a> | |
| <a href="https://ko-fi.com/steelskull" class="team-link" target="_blank" rel="noopener">Ko-fi</a> | |
| </div> | |
| </div> | |
| <div class="team-member tarek"> | |
| <div class="team-member-avatar"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64909c086073a0cd172d0411/Z4VkLtxQTg7Ex3vv84yz8.webp" alt="Tarek"> | |
| </div> | |
| <h3>Tarek07</h3> | |
| <p>Mad-Lad</p> | |
| <div class="team-links"> | |
| <a href="https://huggingface.co/Tarek07" class="team-link" target="_blank" rel="noopener">HuggingFace</a> | |
| <a href="https://ko-fi.com/tarek07" class="team-link" target="_blank" rel="noopener">Ko-fi</a> | |
| </div> | |
| </div> | |
| <div class="team-member darkhn"> | |
| <div class="team-member-avatar"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/673fa5ccbf2e9c35b2ec841a/rPHaMrqyYTfSJ89NN8KgY.jpeg" alt="Darkhn"> | |
| </div> | |
| <h3>Darkhn</h3> | |
| <p>Dataset Chronicler</p> | |
| <div class="team-links"> | |
| <a href="https://huggingface.co/Darkhn" class="team-link" target="_blank" rel="noopener">HuggingFace</a> | |
| <a href="https://ko-fi.com/som1tokmynam" class="team-link" target="_blank" rel="noopener">Ko-fi</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sponsors-section" style="margin-top: 1rem; padding: 15px;"> | |
| <h4 class="sponsors-title" style="padding-bottom: 10px; border-bottom: 1px solid rgba(0, 255, 127, 0.3); margin-bottom: 15px; color: #00FF7F;">🤝 Valued Partners</h4> | |
| <div class="sponsors-list" style="border-top: none; padding: 0;"> | |
| <div class="sponsor-item"> | |
| <a href="https://nectar.ai" target="_blank" rel="noopener" style="text-decoration: none;"> | |
| <img src="https://nectar.ai/assets/heart_logo.png" alt="Nectar.ai" class="sponsor-img" style="border-radius: 0;"> | |
| <div class="sponsor-name">Nectar.ai</div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-info"> | |
| <h2>Model Information</h2> | |
| <div class="info-card"> | |
| <div class="corner corner5 variant topleft"></div> | |
| <div class="corner corner5 variant topright"></div> | |
| <div class="corner corner5 variant bottomleft"></div> | |
| <div class="corner corner5 variant bottomright"></div> | |
| <div class="info-header"> | |
| <h3>M3.2-24B-Loki-V1.3</h3> | |
| <div class="model-tags"> | |
| <span class="model-tag">Mistral 3.2</span> | |
| <span class="model-tag">Finetune</span> | |
| <span class="model-tag">24B Parameters</span> | |
| <span class="model-tag">V1.3</span> | |
| </div> | |
| </div> | |
| <div class="model-description"> | |
| <p><strong>A special thank you to Nectar.ai for their generous support of the open-source community, which has been instrumental in helping me cover the RunPod expenses for this project. </strong></p> | |
| <p> | |
| This model has been meticulously trained on a specialized, 370 million token dataset, curated specifically for high-quality role-playing. The dataset is built upon a foundation of well-established worlds and lore, providing the model with deep knowledge across a wide array of genres. | |
| </p> | |
| <p> | |
| Please use the normal mistral template | |
| </p> | |
| <h4>Core Themes & Genres:</h4> | |
| <p> | |
| The dataset's strength lies in its thematic diversity, enabling rich and immersive storytelling experiences in the following areas: | |
| </p> | |
| <ul> | |
| <li>Fantasy (High Fantasy, Urban Fantasy)</li> | |
| <li>Anime & Manga</li> | |
| <li>Sci-Fi (Cyberpunk, Space Opera)</li> | |
| <li>ERP (Erotic Role-Play)</li> | |
| <li>Grimdark & Post-Apocalyptic</li> | |
| <li>And many more niche settings...</li> | |
| </ul> | |
| <h4>Dataset Processing Pipeline:</h4> | |
| <p> | |
| To ensure the highest quality data, our dataset was refined through a rigorous, multi-step processing pipeline. Each step systematically cleans and enhances the data, resulting in a more coherent and reliable training base. | |
| </p> | |
| <div class="new-progress-container"> | |
| <details class="main-step"> | |
| <summary> | |
| <div class="arrow"></div> | |
| <span class="step-title">Processing Pipeline Overview</span> | |
| </summary> | |
| <div class="sub-steps-list" style="padding-top: 1rem;"> | |
| <ul> | |
| <li>Step 1: Convert JSON to JSONL</li> | |
| <li>Step 2: Normalize Unicode Characters</li> | |
| <li>Step 3: Cleanup Separators (---, **)</li> | |
| <li>Step 4: Fix OOC Misattribution</li> | |
| <li>Step 5: Remove Standalone Names/Roles</li> | |
| <li>Step 6: Clean Enclosing Asterisks</li> | |
| <li>Step 7: Trim Last User Turn</li> | |
| <li>Step 8: Fix Consecutive Assistant Turns</li> | |
| <li>Step 9: Deslop Tool (Filter Content)</li> | |
| </ul> | |
| </div> | |
| </details> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add spacing here --> | |
| <div style="height: 40px;"></div> | |
| <!-- Sampler Settings Section --> | |
| <div class="section-container sampler-settings"> | |
| <div class="corner corner5 variant topleft"></div> | |
| <div class="corner corner5 variant topright"></div> | |
| <div class="corner corner5 variant bottomleft"></div> | |
| <div class="corner corner5 variant bottomright"></div> | |
| <h2>Recommended Sampler Settings</h2> | |
| <div class="settings-card"> | |
| <div class="settings-content"> | |
| <div class="settings-grid"> | |
| <div class="setting-item"> | |
| <span class="setting-label">Static Temperature:</span> | |
| <span class="setting-value">0.7 - 1.0</span> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">Min P:</span> | |
| <span class="setting-value">0.02 - 0.03</span> | |
| </div> | |
| <div class="setting-item"> | |
| <span class="setting-label">DRY:</span> | |
| <div class="dry-settings"> | |
| <div class="dry-item"> | |
| <span class="dry-label">- Multiplier:</span> | |
| <span class="dry-value">0.8</span> | |
| </div> | |
| <div class="dry-item"> | |
| <span class="dry-label">- Base:</span> | |
| <span class="dry-value">1.75</span> | |
| </div> | |
| <div class="dry-item"> | |
| <span class="dry-label">- Length:</span> | |
| <span class="dry-value">4-6</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-container"> | |
| <div class="corner corner5 variant topleft"></div> | |
| <div class="corner corner5 variant topright"></div> | |
| <div class="corner corner5 variant bottomleft"></div> | |
| <div class="corner corner5 variant bottomright"></div> | |
| <h2>Good Starting Templates & Prompts</h2> | |
| <div class="template-card"> | |
| <div class="template-item"> | |
| <div class="template-content"> | |
| <a href="https://huggingface.co/CrucibleLab-TG/L3.3-NS-Dark-Ages-70b-v0.1/resolve/main/sysprompts/Hamon-v1.json" target="_blank" rel="noopener" class="template-link"> | |
| Hamon v1 | |
| <span class="link-arrow">→</span> | |
| </a> | |
| <span class="template-author">by @Steel</span> > Big-picture storytelling guide with world-building focus, set dialogue/narration split, and general writing rules. | |
| </div> | |
| <div class="template-content"> | |
| <a href="https://huggingface.co/CrucibleLab-TG/L3.3-NS-Dark-Ages-70b-v0.1/blob/main/sysprompts/Shingane.json" target="_blank" rel="noopener" class="template-link"> | |
| Shingane v1 | |
| <span class="link-arrow">→</span> | |
| </a> | |
| <span class="template-author">by @Steel</span> > Simplified sysprompt based on Hamon. | |
| </div> | |
| <div class="template-content"> | |
| <a href="https://huggingface.co/CrucibleLab-TG/L3.3-NS-Dark-Ages-70b-v0.1/blob/main/sysprompts/Kesshin-v1.json" target="_blank" rel="noopener" class="template-link"> | |
| Kesshin v1 | |
| <span class="link-arrow">→</span> | |
| </a> | |
| <span class="template-author">by @Steel</span> > A Hamon rethink using a Character-focused sys prompt that tracks what characters know and how they learn things, with strict interaction rules. | |
| </div> | |
| <div class="template-content"> | |
| <a href="https://huggingface.co/CrucibleLab-TG/L3.3-NS-Dark-Ages-70b-v0.1/blob/main/sysprompts/Kamae-TTRPG-v1.json" target="_blank" rel="noopener" class="template-link"> | |
| Kamae TTRPG v1 | |
| <span class="link-arrow">→</span> | |
| </a> | |
| <span class="template-author">by @Steel</span> > TTRPG Game Master framework emphasizing player agency, world consistency, and adaptive session management with mechanical integration. | |
| </div> | |
| <div class="template-content"> | |
| <a href="https://huggingface.co/CrucibleLab-TG/L3.3-NS-Dark-Ages-70b-v0.1/blob/main/sysprompts/Kamae-Lite-v1.json" target="_blank" rel="noopener" class="template-link"> | |
| Kamae lite v1 | |
| <span class="link-arrow">→</span> | |
| </a> | |
| <span class="template-author">by @Steel</span> > Simplified sysprompt based on Kamae. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quantized-section"> | |
| <h2>Quants</h2> | |
| <div class="quantized-items"> | |
| <div class="quantized-item"> | |
| <div class="multi-links"> | |
| <a href="https://huggingface.co/CrucibleLab-TG/M3.2-24B-Loki-V1.3-GGUF" target="_blank" rel="noopener" class="button">GGUF</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- closes info --> | |
| <div class="support-section"> | |
| <div class="corner corner5 variant topleft"></div> | |
| <div class="corner corner5 variant topright"></div> | |
| <div class="corner corner5 variant bottomleft"></div> | |
| <div class="corner corner5 variant bottomright"></div> | |
| <h2>Support & Community:</h2> | |
| <div class="support-buttons"> | |
| <a href="https://discord.gg/4tCngSm3qZ" target="_blank" rel="noopener" class="button"> | |
| Join Discord | |
| </a> | |
| </div> | |
| </div> | |
| </div> <!-- closes container --> | |
| <script> | |
| console.log("HTML parsing complete. If layout is broken, check CSS."); | |
| </script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const wispContainer = document.getElementById('wisp-container'); | |
| if (!wispContainer) { | |
| console.error('Wisp container not found'); | |
| return; | |
| } | |
| function createWisp() { | |
| const wisp = document.createElement('div'); | |
| wisp.classList.add('wisp'); | |
| const startX = Math.random() * window.innerWidth; | |
| wisp.style.left = `${startX}px`; | |
| const animationDuration = 5 + Math.random() * 5; // 5 to 10 seconds | |
| wisp.style.animationDuration = `${animationDuration}s`; | |
| const size = 2 + Math.random() * 4; // 2px to 6px | |
| wisp.style.width = `${size}px`; | |
| wisp.style.height = `${size}px`; | |
| const xEnd = (Math.random() - 0.5) * 2 * 100; // -100px to 100px | |
| wisp.style.setProperty('--x-end', `${xEnd}px`); | |
| wispContainer.appendChild(wisp) | |
| setTimeout(() => { | |
| wisp.remove(); | |
| }, animationDuration * 1000); | |
| } | |
| setInterval(createWisp, 200); // Create a new wisp every 200ms | |
| }); | |
| </script> | |
| </body> | |
| </html> | |