PPT Presentation Deck (HTML)

Description

This prompt will turn any of your contents into nicely organized deck written in HTML in any language. After run your inputs, download the html file from the code block and open it with the browser.

Workflow

Input

USER_CONTENT-Please write down the contents.

언어-Destination language (eg. English)

1. PPT Presentation Deck (HTML)

Model: Gemini-2.5 Pro

Prompt:

사용자가 입력한 내용을 HTML 기반 PPT 슬라이드로 변환해야 합니다.

다음은 변환할 사용자 입력 내용입니다:
<user_content>
USER_CONTENT
</user_content>

## 작업 지침

사용자가 제공한 내용을 분석하여 논리적이고 시각적으로 매력적인 HTML 프레젠테이션 슬라이드로 변환하세요.

## HTML 구조 요구사항

1. 다음 Head 를 활용하여 스타일을 구성하세요.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MAIDEPOT: Espacio de Trabajo de IA para Empresas</title>


<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap"
rel="stylesheet">

<style>
:root
--bg: #020617;
--panel: rgba(15, 23, 42, 0.65);
--border: rgba(255, 255, 255, 0.12);
--ring: 0 0 0 1px rgba(148, 163, 184, 0.3);
--slide-duration: 500ms;

html,
body
height: 100%;

body
background: radial-gradient(1000px 600px at 10% -20%, rgba(56, 189, 248, .15), transparent 60%),
radial-gradient(1200px 700px at 110% 20%, rgba(167, 139, 250, .12), transparent 60%),
radial-gradient(800px 600px at 30% 120%, rgba(34, 211, 238, .10), transparent 60%),
var(--bg);
color: #e2e8f0;
font-family: 'Noto Sans KR', system-ui, sans-serif;
overflow: hidden;

/* ===== Aurora Background (multi-blob) ===== */
.aurora
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background: radial-gradient(1200px 600px at 10% 20%, rgba(56,189,248,.15), transparent 65%),
radial-gradient(1000px 700px at 85% 30%, rgba(167,139,250,.15), transparent 65%),
radial-gradient(900px 600px at 50% 85%, rgba(244,114,182,.15), transparent 65%),
radial-gradient(1400px 900px at 20% 90%, rgba(34,197,94,.12), transparent 70%);
animation: auroraShift 18s ease-in-out infinite alternate;
background-size: 200% 200%;

.aurora::after
/* grain */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .08;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.35"/></svg>');
mix-blend-mode: overlay;

/* ===== Slider Shell ===== */
.deck
width: 100vw;
height: 100vh;
display: grid;
place-items: center;

.stage
width: min(92vw, 1000px);
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
background: var(--panel);
backdrop-filter: blur(16px) saturate(160%);
border: 1px solid var(--border);
border-radius: 1.5rem;
box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);

.stage::after
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
border-radius: 20px;
background: conic-gradient(from 0deg, transparent, rgba(56, 189, 248, .25), transparent 30%, rgba(167, 139, 250, .22), transparent 60%, rgba(34, 211, 238, .25), transparent 90%);
filter: blur(12px);
opacity: .55;
animation: spin 12s linear infinite;

.slides
position: relative;
width: 100%;
height: 100%;

.slide
position: absolute;
inset: 0;
padding: 3.5rem;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translate3d(0, 20px, 0) scale(.97);
transition: opacity var(--slide-duration) ease,
transform var(--slide-duration) ease,
visibility var(--slide-duration) ease;

.slide.active
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
z-index: 10;

.title-xl
font-size: clamp(1.6rem, 1.6rem + 1vw, 2.8rem);
font-weight: 900;
background: linear-gradient(120deg, #a5b4fc, #f0abfc, #67e8f9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 12px rgba(99,102,241,.4),
0 0 28px rgba(236,72,153,.25);
letter-spacing: -0.02em;
margin-bottom: .75rem;

.subtitle
font-size: 1.15rem;
color: #9ca3af;

/* ===== HUD (counter + progress + dots) ===== */
.hud
pointer-events: none;
position: absolute;
inset: 0;

.counter
font-size: 0.8rem;
position: absolute;
top: 14px;
right: 16px;
padding: .2rem .4rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
background: rgba(2, 6, 23, .55);
border: 1px solid var(--border);
border-radius: .65rem;
box-shadow: var(--ring);

.progress
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: rgba(255, 255, 255, .06);

.progress>span
display: block;
height: 100%;
width: 0%;
transition: width 320ms ease;
background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);

.pagination
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 16px;
display: flex;
gap: 10px;
pointer-events: auto;

i[data-lucide]
transition: transform .3s ease, filter .3s ease;

i[data-lucide]:hover
transform: scale(1.15);
filter: drop-shadow(0 0 6px rgba(255,255,255,.6));

/* Click zones for mouse/touch navigation */
.zone
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;

.zone>div
cursor: pointer;

/* ===== Print Styles ===== */
@media print {
@page
size: 15in 8.5in;
margin: 0;

body
overflow: visible !important;
background: #0b1220 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;

.aurora,
.hud,
.zone
display: none !important;

.deck
display: block;
width: 100%;
height: auto;

.stage
width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;

.slides
position: static;

.slide
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
width: 15in;
height: 8.5in;
box-sizing: border-box;
/* padding: 1.8cm; */
page-break-after: always;

.slide:last-child
page-break-after: auto;

canvas.print-static
max-width: 100% !important;
height: auto !important;

}

@media (prefers-reduced-motion: reduce) {
.slide
transition: none;

.progress>span
transition: none;

}
@keyframes auroraShift {
0%
background-position: 0% 50%;
filter: hue-rotate(0deg) brightness(1);

50%
background-position: 100% 50%;
filter: hue-rotate(20deg) brightness(1.1);

100%
background-position: 0% 50%;
filter: hue-rotate(-20deg) brightness(0.95);

}
@keyframes spin {
to
transform: rotate(360deg);

}
</style>
</head>

1. **기본 구조**: 다음 HTML 구조를 사용하세요:
```html
<div class="aurora"></div>
<div class="deck">
<div class="stage">
<div class="slides">

</div>
<div class="hud">
<div class="counter">
<span id="current">1</span> / <span id="total">N</span>
</div>
<div class="progress">
<span id="bar"></span>
</div>
<div class="pagination" id="dots"></div>
</div>
<div class="zone">
<div onclick="prevSlide()"></div>
<div onclick="nextSlide()"></div>
</div>
</div>
</div>
```

2. **슬라이드 구조**: 각 슬라이드는 다음과 같이 구성하세요:
```html
<div class="slide active"> 

</div>
```
## 내용 구성 원칙

1. **슬라이드 분할**: 내용을 논리적 단위로 나누어 여러 슬라이드로 구성. 한 슬라이드에는 하나 이상의 주제를 넣는 것은 금지임.
2. **제목 슬라이드**: 첫 번째 슬라이드는 전체 주제의 제목과 개요
3. **내용 슬라이드**: 각 슬라이드는 하나의 주요 아이디어나 섹션에 집중
4. **시각적 요소**: 적절한 아이콘, 리스트, 강조 텍스트 *많이* 활용
5. **차트**: 정확한 숫자가 주어진 경우 차트, 표, 그래프를 최대한 활용. 특히 비교하는 내용에서는 반드시 표나 그래프 활용.
6. **가독성**: 한 슬라이드 텍스트 양을 적절히 조절하여 가독성 확보
7. **공간 활용**: 슬라이드를 콘텐츠로 꽉 채울 것

## 주의

1. 차트나 그래프를 너무 크게 그려서 바깥으로 overflow 하지 않게 잘 조절할 것. 슬라이드 안에만 머물도록!
2. 슬라이드 내에 한쪽 부분에 콘텐츠가 몰려있지 않도록 적절하게 배치, 크기 조정.

## 출력 형식

Head와 javascript를 포함한 완전한 HTML 문서를 제공하세요. code block 에 출력하세요.

출력언어: 언어

Output:

1: PPT Presentation Deck (HTML)

PPT Presentation Deck (HTML)

Information

Creator: David Ryu

Runs

Bookmarks

133.1s

Avg. Time

$0.29

Avg. Cost

Examples (0)

‌

‌
‌
‌

‌

‌
‌
‌

‌

‌
‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌