Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{{ slide_title }}</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Arial, sans-serif; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: #f5f5f5; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .slide { | |
| width: 1920px; | |
| height: 1080px; | |
| position: relative; | |
| overflow: hidden; | |
| background: white; | |
| } | |
| /* Animated background particles */ | |
| .bg-svg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| opacity: 0; | |
| transition: opacity 1s ease-in 0.5s; | |
| } | |
| .slide.animate .bg-svg { | |
| opacity: 1; | |
| } | |
| /* Semicircle layers */ | |
| .circle-large { | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| width: 950px; | |
| height: 1240px; | |
| background: {{ circle_large_color }}; | |
| border-radius: 50%; | |
| transform: translate(-135%, -50%); | |
| z-index: 1; | |
| transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| .circle-small { | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| width: 830px; | |
| height: 1130px; | |
| background: {{ circle_small_color }}; | |
| border-radius: 50%; | |
| transform: translate(-140%, -50%); | |
| z-index: 2; | |
| transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; | |
| } | |
| .slide.animate .circle-large { | |
| transform: translate(-35%, -50%); | |
| } | |
| .slide.animate .circle-small { | |
| transform: translate(-40%, -50%); | |
| } | |
| /* Title container */ | |
| .title-container { | |
| position: absolute; | |
| top: 50%; | |
| left: 250px; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| z-index: 3; | |
| width: 540px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 0.8s ease-in 1.2s; | |
| } | |
| .slide.animate .title-container { | |
| opacity: 1; | |
| } | |
| .title { | |
| font-size: clamp(1.2rem, 4vh, 5rem); | |
| font-weight: 700; | |
| color: #030303; | |
| line-height: 1.2; | |
| word-break: break-word; | |
| text-align: center; | |
| max-width: 90%; | |
| } | |
| /* Content Section with Code */ | |
| .content { | |
| position: absolute; | |
| top: 50%; | |
| left: 672px; | |
| transform: translateY(-50%); | |
| z-index: 3; | |
| width: 1112px; | |
| color: #222; | |
| } | |
| .subtitle { | |
| font-size: 34px; | |
| color: #000000; | |
| margin-bottom: 1.5rem; | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| transition: all 0.6s ease-out 2s; | |
| } | |
| .slide.animate .subtitle { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .code-container { | |
| background: #f8f9fa; | |
| border: 2px solid #e3e8ef; | |
| border-radius: 10px; | |
| padding: 25px; | |
| box-shadow: 0 2px 8px rgba(47, 111, 236, 0.1); | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.8s ease-out 2.5s; | |
| } | |
| .slide.animate .code-container { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .code-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 2px solid #e3e8ef; | |
| } | |
| .code-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: {{ code_title_color }}; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .code-icon { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .code-block { | |
| font-family: 'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'Consolas', 'Monaco', 'Courier New', monospace; | |
| font-size: 19px; | |
| line-height: 1.8; | |
| color: #2d3748; | |
| letter-spacing: 0.5px; | |
| } | |
| .code-line { | |
| display: block; | |
| padding: 2px 0; | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| transition: all 0.4s ease-out; | |
| } | |
| .slide.animate .code-line:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_1_delay }}; } | |
| .slide.animate .code-line:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_2_delay }}; } | |
| .slide.animate .code-line:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_3_delay }}; } | |
| .slide.animate .code-line:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_4_delay }}; } | |
| .slide.animate .code-line:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_5_delay }}; } | |
| .slide.animate .code-line:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_6_delay }}; } | |
| .slide.animate .code-line:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_7_delay }}; } | |
| .slide.animate .code-line:nth-child(8) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_8_delay }}; } | |
| .slide.animate .code-line:nth-child(9) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_9_delay }}; } | |
| .slide.animate .code-line:nth-child(10) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_10_delay }}; } | |
| .slide.animate .code-line:nth-child(11) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_11_delay }}; } | |
| .slide.animate .code-line:nth-child(12) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_12_delay }}; } | |
| .slide.animate .code-line:nth-child(13) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_13_delay }}; } | |
| .slide.animate .code-line:nth-child(14) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_14_delay }}; } | |
| .slide.animate .code-line:nth-child(15) { opacity: 1; transform: translateX(0); transition-delay: {{ code_line_15_delay }}; } | |
| {{ pygments_css }} | |
| .corner-logo { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 50px; | |
| height: auto; | |
| z-index: 4; | |
| opacity: 0; | |
| transition: opacity 0.5s ease-in {{ logo_delay }}; | |
| } | |
| .slide.animate .corner-logo { | |
| opacity: 1; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 0.6; } | |
| } | |
| .particle { | |
| animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide" id="slide"> | |
| <!-- Animated background particles --> | |
| <svg class="bg-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"> | |
| </svg> | |
| <!-- Semicircle shapes --> | |
| <div class="circle-large"></div> | |
| <div class="circle-small"></div> | |
| <!-- Title inside semicircle --> | |
| <div class="title-container"> | |
| <h1 class="title">{{ main_title }}</h1> | |
| </div> | |
| <!-- Right side content with code --> | |
| <div class="content"> | |
| <p class="subtitle">{{ subtitle_text }}</p> | |
| <div class="code-container"> | |
| <div class="code-header"> | |
| <div class="code-title"> | |
| <svg class="code-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M8 6L4 10L8 14" stroke="{{ code_title_color }}" stroke-width="2" stroke-linecap="round"/> | |
| <path d="M16 6L20 10L16 14" stroke="{{ code_title_color }}" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| {{ code_header_title }} | |
| </div> | |
| </div> | |
| <div class="code-block"> | |
| {{ code_content }} | |
| </div> | |
| </div> | |
| </div> | |
| <img src="{{ logo_path }}" alt="Corner Logo" class="corner-logo"> | |
| </div> | |
| <script> | |
| window.addEventListener('load', () => { | |
| const slide = document.getElementById('slide'); | |
| // Start animation immediately | |
| setTimeout(() => { | |
| slide.classList.add('animate'); | |
| }, 100); | |
| }); | |
| </script> | |
| </body> | |
| </html> |