| <!DOCTYPE html> |
| <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; |
| } |
| |
| |
| .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; |
| } |
| |
| |
| .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 { |
| 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 { |
| 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"> |
| |
| <svg class="bg-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"> |
| </svg> |
|
|
| |
| <div class="circle-large"></div> |
| <div class="circle-small"></div> |
|
|
| |
| <div class="title-container"> |
| <h1 class="title">{{ main_title }}</h1> |
| </div> |
|
|
| |
| <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'); |
| |
| |
| setTimeout(() => { |
| slide.classList.add('animate'); |
| }, 100); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
