| <!DOCTYPE html> |
| <html lang="uk"> |
| <head> |
| <meta charset="UTF-8"> |
| <style> |
| |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;700&display=swap'); |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| width: 1080px; |
| height: {HEIGHT}px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| background: #0d0d13; |
| overflow: hidden; |
| } |
| |
| .card-container { |
| position: relative; |
| width: 1080px; |
| height: {HEIGHT}px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| padding: 40px; |
| overflow: hidden; |
| } |
| |
| |
| .background-layer { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 1080px; |
| height: {HEIGHT}px; |
| background-size: cover; |
| background-position: center; |
| z-index: 1; |
| } |
| |
| |
| .pagination { |
| position: absolute; |
| top: 60px; |
| right: 90px; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 22px; |
| font-weight: 400; |
| color: #ffffff; |
| opacity: 0.4; |
| z-index: 10; |
| } |
| |
| .minimalism .pagination { |
| color: #1a1a24; |
| } |
| |
| |
| .card-container.cyberpunk { |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .cyberpunk .panel { |
| width: 880px; |
| height: {PANEL_HEIGHT}; |
| min-height: 400px; |
| background: rgba(10, 10, 22, 0.88); |
| border: 3px solid #00f0ff; |
| padding: 50px 70px; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| box-shadow: 0 0 35px rgba(0, 240, 255, 0.25); |
| position: relative; |
| z-index: 5; |
| } |
| |
| .cyberpunk h1 { |
| font-size: 46px; |
| color: #00f0ff; |
| text-transform: uppercase; |
| margin-bottom: 30px; |
| line-height: 1.25; |
| text-shadow: 0 0 8px rgba(255, 0, 127, 0.9), 0 0 20px rgba(255, 0, 127, 0.5); |
| font-weight: 700; |
| } |
| |
| .cyberpunk ul { |
| list-style-type: none; |
| } |
| |
| .cyberpunk li { |
| font-size: 28px; |
| color: #ffffff; |
| margin-bottom: 24px; |
| line-height: 1.35; |
| text-shadow: 0 0 6px rgba(0, 240, 255, 0.4); |
| position: relative; |
| padding-left: 45px; |
| font-weight: 500; |
| } |
| |
| .cyberpunk li::before { |
| content: '>'; |
| position: absolute; |
| left: 0; |
| color: #00f0ff; |
| font-weight: bold; |
| } |
| |
| .cyberpunk .highlight { |
| color: #ff007f; |
| font-weight: 700; |
| } |
| |
| |
| .card-container.minimalism { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .minimalism .panel { |
| width: 880px; |
| height: {PANEL_HEIGHT}; |
| min-height: 400px; |
| background: rgba(255, 255, 255, 0.96); |
| border-radius: 28px; |
| padding: 50px 70px; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| position: relative; |
| z-index: 5; |
| } |
| |
| .minimalism h1 { |
| font-size: 46px; |
| color: #1a1a24; |
| margin-bottom: 30px; |
| line-height: 1.2; |
| font-weight: 700; |
| letter-spacing: -1px; |
| } |
| |
| .minimalism ul { |
| list-style-type: none; |
| } |
| |
| .minimalism li { |
| font-size: 28px; |
| color: #333340; |
| margin-bottom: 24px; |
| line-height: 1.35; |
| position: relative; |
| padding-left: 45px; |
| font-weight: 500; |
| } |
| |
| .minimalism li::before { |
| content: '•'; |
| position: absolute; |
| left: 10px; |
| color: #333340; |
| font-weight: bold; |
| } |
| |
| .minimalism .highlight { |
| color: #0055ff; |
| font-weight: 700; |
| } |
| |
| |
| .card-container.glassmorphism { |
| font-family: 'Plus Jakarta Sans', sans-serif; |
| } |
| |
| .glassmorphism .panel { |
| width: 880px; |
| height: {PANEL_HEIGHT}; |
| min-height: 400px; |
| background: rgba(10, 10, 16, 0.72); |
| backdrop-filter: blur(28px); |
| -webkit-backdrop-filter: blur(28px); |
| border-radius: 24px; |
| border: 2px solid rgba(255, 255, 255, 0.1); |
| padding: 50px 70px; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 0 25px rgba(255, 255, 255, 0.05); |
| position: relative; |
| z-index: 5; |
| } |
| |
| .glassmorphism h1 { |
| font-size: 46px; |
| color: #ffffff; |
| margin-bottom: 30px; |
| line-height: 1.25; |
| font-weight: 700; |
| text-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); |
| } |
| |
| .glassmorphism ul { |
| list-style-type: none; |
| } |
| |
| .glassmorphism li { |
| font-size: 28px; |
| color: #f8f8f8; |
| margin-bottom: 24px; |
| line-height: 1.35; |
| position: relative; |
| padding-left: 45px; |
| text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); |
| font-weight: 500; |
| } |
| |
| .glassmorphism li::before { |
| content: '✦'; |
| position: absolute; |
| left: 0; |
| color: #ffffff; |
| } |
| |
| .glassmorphism .highlight { |
| color: #00f0ff; |
| font-weight: 700; |
| text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); |
| } |
| </style> |
| <script> |
| window.addEventListener('DOMContentLoaded', () => { |
| const panel = document.querySelector('.panel'); |
| const title = panel.querySelector('h1'); |
| const list = panel.querySelector('ul'); |
| |
| if (panel && title) { |
| const contentHeight = title.offsetHeight + (list ? list.offsetHeight : 0); |
| const panelHeight = panel.clientHeight; |
| const ratio = contentHeight / panelHeight; |
| |
| |
| if (ratio < 0.4) { |
| panel.style.justifyContent = 'center'; |
| } else { |
| panel.style.justifyContent = 'flex-start'; |
| } |
| } |
| }); |
| </script> |
| </head> |
| <body> |
| <div class="card-container {CATEGORY_CLASS}"> |
| <div class="background-layer" style="background-image: url('{BG_IMAGE_URL}'); {BG_STYLE}"></div> |
| {PAGINATION_HTML} |
| <div class="panel" style="{PANEL_STYLE}"> |
| <h1>{TITLE}</h1> |
| <ul> |
| {BULLETS} |
| </ul> |
| </div> |
| </div> |
| </body> |
| </html> |
|
|
