Skip to content

Commit 4e5bfff

Browse files
SooY2SooY2
committed
feat: video test html
1 parent 400ebf7 commit 4e5bfff

1 file changed

Lines changed: 302 additions & 0 deletions

File tree

‎default-template/videoTest.html‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>H-LAB - HTTP Performance Lab</title>
7+
8+
<!-- CSS Files -->
9+
<link rel="stylesheet" href="./css/style1.css">
10+
<link rel="stylesheet" href="./css/style2.css">
11+
<link rel="stylesheet" href="./css/style3.css">
12+
<link rel="stylesheet" href="./css/style4.css">
13+
<link rel="stylesheet" href="./css/style5.css">
14+
15+
<style>
16+
/* @font-face {
17+
font-family: 'pretendard';
18+
font-style: normal;
19+
font-weight: 400;
20+
src: url('../assets/fonts/pretendard/Pretendard-Black.woff2') format('woff2');
21+
}
22+
@font-face {
23+
font-family: 'pretendard';
24+
font-style: normal;
25+
font-weight: 700;
26+
src: url('../assets/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
27+
} */
28+
</style>
29+
</head>
30+
<body>
31+
<!-- Header Section -->
32+
<header class="header">
33+
<nav class="navbar">
34+
<div class="nav-brand">
35+
H-LAB
36+
</div>
37+
<ul class="nav-menu">
38+
<li><a href="#intro"><img src="../assets/icons/icon1.png" alt="Home Icon" class="nav-icon">소개</a></li>
39+
<li><a href="#features"><img src="../assets/icons/icon2.png" alt="Features Icon" class="nav-icon">기능</a></li>
40+
<li><a href="#performance"><img src="../assets/icons/icon3.png" alt="Performance Icon" class="nav-icon">성능</a></li>
41+
<li><a href="#contact"><img src="../assets/icons/icon4.png" alt="Contact Icon" class="nav-icon">문의</a></li>
42+
</ul>
43+
</nav>
44+
</header>
45+
46+
<!-- emoji section -->
47+
<section id="emoji-section">
48+
<div class="container">
49+
<div class="section-header">
50+
<!-- <h2 class="section-title">이모지</h2> -->
51+
</div>
52+
<div id="emoji-container">
53+
54+
</div>
55+
</div>
56+
</section>
57+
58+
<!-- Section 1: Introduction -->
59+
<section id="intro" class="section intro-section">
60+
<div class="container">
61+
<div class="content-wrapper">
62+
<div class="text-content">
63+
<h1 class="section-title">HTTP Performance Lab에 오신 것을 환영합니다</h1>
64+
<p class="section-description">
65+
HTTP/1.1, HTTP/2, HTTP/3의 성능 차이를 실제로 측정하고 비교할 수 있는
66+
전문적인 테스트 환경입니다. 다양한 리소스를 통해 실제 웹 사이트 환경을 시뮬레이션합니다.
67+
</p>
68+
<div class="feature-highlights">
69+
<div class="highlight-item">
70+
<img src="../assets/icons/icon5.png" alt="Real-time Icon" class="highlight-icon">
71+
<span>실시간 모니터링</span>
72+
</div>
73+
<div class="highlight-item">
74+
<img src="../assets/icons/icon6.png" alt="Multi-protocol Icon" class="highlight-icon">
75+
<span>다중 프로토콜</span>
76+
</div>
77+
<div class="highlight-item">
78+
<img src="../assets/icons/icon7.png" alt="Optimization Icon" class="highlight-icon">
79+
<span>최적화 전략</span>
80+
</div>
81+
</div>
82+
<button class="cta-button">
83+
<img src="../assets/icons/icon8.png" alt="Start Icon" class="button-icon">
84+
테스트 시작하기
85+
</button>
86+
</div>
87+
<div class="image-grid">
88+
<img src="../assets/imgs/Hlab_img1.jpg" alt="HTTP Lab Image 1" class="grid-image">
89+
<img src="../assets/imgs/Hlab_img2.png" alt="HTTP Lab Image 2" class="grid-image">
90+
<img src="../assets/imgs/Hlab_img3.jpg" alt="HTTP Lab Image 3" class="grid-image">
91+
<img src="../assets/imgs/Hlab_img4.png" alt="HTTP Lab Image 4" class="grid-image">
92+
<img src="../assets/imgs/Hlab_img5.jpg" alt="HTTP Lab Image 5" class="grid-image">
93+
<img src="../assets/imgs/Hlab_img6.png" alt="HTTP Lab Image 6" class="grid-image">
94+
</div>
95+
</div>
96+
</div>
97+
</section>
98+
99+
<!-- Section 2: Features -->
100+
<section id="features" class="section features-section">
101+
<div class="container">
102+
<div class="section-header">
103+
<h2 class="section-title">주요 기능</h2>
104+
</div>
105+
<div class="features-grid">
106+
<div class="feature-card">
107+
<div class="feature-header">
108+
<img src="../assets/icons/icon9.png" alt="Monitor Icon" class="feature-icon">
109+
<img src="../assets/imgs/Hlab_img7.jpg" alt="Performance Monitoring" class="feature-image">
110+
</div>
111+
<h3>실시간 성능 모니터링</h3>
112+
<p>Lighthouse와 DevTools를 활용한 정확한 성능 측정</p>
113+
<div class="feature-tags">
114+
<span class="tag">
115+
<img src="../assets/icons/icon10.png" alt="Tag Icon" class="tag-icon">
116+
실시간
117+
</span>
118+
</div>
119+
</div>
120+
<div class="feature-card">
121+
<div class="feature-header">
122+
<img src="../assets/icons/icon11.png" alt="Protocol Icon" class="feature-icon">
123+
<img src="../assets/imgs/Hlab_img8.png" alt="Multi Protocol" class="feature-image">
124+
</div>
125+
<h3>다중 프로토콜 지원</h3>
126+
<p>HTTP/1.1, HTTP/2, HTTP/3 프로토콜별 성능 비교</p>
127+
<div class="feature-tags">
128+
<span class="tag">
129+
<img src="../assets/icons/icon12.png" alt="Multi Icon" class="tag-icon">
130+
멀티
131+
</span>
132+
</div>
133+
</div>
134+
<div class="feature-card">
135+
<div class="feature-header">
136+
<img src="../assets/icons/icon13.png" alt="Analysis Icon" class="feature-icon">
137+
<img src="../assets/imgs/Hlab_img9.jpg" alt="Resource Analysis" class="feature-image">
138+
</div>
139+
<h3>리소스 분석</h3>
140+
<p>CSS, JS, 이미지, 폰트 등 다양한 리소스 로딩 분석</p>
141+
<div class="feature-tags">
142+
<span class="tag">
143+
<img src="../assets/icons/icon14.png" alt="Analysis Icon" class="tag-icon">
144+
분석
145+
</span>
146+
</div>
147+
</div>
148+
<div class="feature-card">
149+
<div class="feature-header">
150+
<img src="../assets/icons/icon15.png" alt="Optimization Icon" class="feature-icon">
151+
<img src="../assets/imgs/Hlab_img10.png" alt="Network Optimization" class="feature-image">
152+
</div>
153+
<h3>네트워크 최적화</h3>
154+
<p>병렬 연결, 압축, 캐싱 전략 테스트</p>
155+
<div class="feature-tags">
156+
<span class="tag">
157+
<img src="../assets/icons/icon16.png" alt="Speed Icon" class="tag-icon">
158+
최적화
159+
</span>
160+
</div>
161+
</div>
162+
</div>
163+
<div class="tools-section">
164+
<h3 class="tools-title">
165+
지원 도구
166+
</h3>
167+
<div class="tools-grid">
168+
<div class="tool-item">
169+
<img src="../assets/icons/icon17.png" alt="Lighthouse Icon" class="tool-icon">
170+
<span>Lighthouse</span>
171+
</div>
172+
<div class="tool-item">
173+
<img src="../assets/icons/icon18.png" alt="DevTools Icon" class="tool-icon">
174+
<span>DevTools</span>
175+
</div>
176+
<div class="tool-item">
177+
<img src="../assets/icons/icon19.png" alt="WebPageTest Icon" class="tool-icon">
178+
<span>WebPageTest</span>
179+
</div>
180+
</div>
181+
</div>
182+
<div class="additional-images">
183+
<img src="../assets/imgs/Hlab_img11.jpg" alt="Additional Image 1" class="additional-image">
184+
<img src="../assets/imgs/Hlab_img12.png" alt="Additional Image 2" class="additional-image">
185+
<img src="../assets/imgs/Hlab_img13.jpg" alt="Additional Image 3" class="additional-image">
186+
</div>
187+
</div>
188+
</section>
189+
190+
<!-- Section 3: Performance -->
191+
<section id="performance" class="section performance-section">
192+
<div class="container">
193+
<div class="performance-content">
194+
<div class="performance-text">
195+
<h2 class="section-title">성능 측정 결과</h2>
196+
<p class="section-description">
197+
실제 테스트 환경에서 측정된 HTTP 프로토콜별 성능 데이터를 확인하세요.
198+
각 프로토콜의 장단점과 최적화 전략을 비교 분석할 수 있습니다.
199+
</p>
200+
<div class="performance-stats">
201+
<div class="stat-item">
202+
<span class="stat-number">HTTP/1.1</span>
203+
<span class="stat-label">기준 프로토콜</span>
204+
</div>
205+
<div class="stat-item">
206+
<span class="stat-number">HTTP/2</span>
207+
<span class="stat-label">멀티플렉싱</span>
208+
</div>
209+
<div class="stat-item">
210+
<span class="stat-number">HTTP/3</span>
211+
<span class="stat-label">최신 표준</span>
212+
</div>
213+
</div>
214+
</div>
215+
<div class="performance-images">
216+
<img src="../assets/imgs/Hlab_img14.png" alt="Performance Chart 1" class="perf-image">
217+
<img src="../assets/imgs/Hlab_img15.jpg" alt="Performance Chart 2" class="perf-image">
218+
<img src="../assets/imgs/Hlab_img16.png" alt="Performance Chart 3" class="perf-image">
219+
<img src="../assets/imgs/Hlab_img17.jpg" alt="Performance Chart 4" class="perf-image">
220+
<img src="../assets/imgs/Hlab_img18.png" alt="Performance Chart 5" class="perf-image">
221+
</div>
222+
</div>
223+
</div>
224+
</section>
225+
226+
<!-- Section 4: Contact -->
227+
<section id="contact" class="section contact-section">
228+
<div class="container">
229+
<div class="section-header">
230+
<h2 class="section-title">테스트 환경 구성</h2>
231+
</div>
232+
<div class="contact-content">
233+
<div class="contact-info">
234+
<p class="section-description">
235+
이 테스트 페이지는 다양한 리소스를 포함하여 실제 웹사이트와
236+
유사한 환경을 제공합니다. Network 탭에서 로딩 패턴을 확인해보세요.
237+
</p>
238+
<div class="resource-categories">
239+
<div class="resource-category">
240+
<h4>
241+
스타일시트
242+
</h4>
243+
<ul class="resource-list">
244+
<li>CSS 파일 5개 (스타일링)</li>
245+
<li>반응형 디자인 지원</li>
246+
<li>애니메이션 효과</li>
247+
</ul>
248+
</div>
249+
<div class="resource-category">
250+
<h4>
251+
스크립트
252+
</h4>
253+
<ul class="resource-list">
254+
<li>JavaScript 파일 5개 (인터랙션)</li>
255+
<li>성능 모니터링</li>
256+
<li>사용자 경험 개선</li>
257+
</ul>
258+
</div>
259+
<div class="resource-category">
260+
<h4>
261+
미디어
262+
</h4>
263+
<ul class="resource-list">
264+
<li>이미지 파일 20개 (JPG/PNG 혼합)</li>
265+
<li>아이콘 파일 20개 (PNG)</li>
266+
<li>웹폰트 2개 (Regular/Bold)</li>
267+
</ul>
268+
</div>
269+
</div>
270+
</div>
271+
<div class="contact-images">
272+
<img src="../assets/imgs/Hlab_img19.png" alt="Contact Image 1" class="contact-image">
273+
<img src="../assets/imgs/Hlab_img20.png" alt="Contact Image 2" class="contact-image">
274+
</div>
275+
</div>
276+
</div>
277+
</section>
278+
279+
<video controls width="100%">
280+
<source src="../video/videoplayback.mp4" type="video/webm" />
281+
</video>
282+
283+
284+
285+
<!-- Footer -->
286+
<footer class="footer">
287+
<div class="container">
288+
<div class="footer-content">
289+
<p>&copy; 2025 H-LAB (HTTP Performance Lab) - Created by Assistant</p>
290+
<p>HTTP 프로토콜 성능 측정 및 최적화 전략 연구소</p>
291+
</div>
292+
</div>
293+
</footer>
294+
295+
<!-- JavaScript Files -->
296+
<script defer src="./js/app1.js"></script>
297+
<script defer src="./js/app2.js"></script>
298+
<script defer src="./js/app3.js"></script>
299+
<script defer src="./js/app4.js"></script>
300+
<script defer src="./js/app5.js"></script>
301+
</body>
302+
</html>

0 commit comments

Comments
 (0)