Merge pull request #4 from ProjectInTheClass/feature/docs-fix

완성도, demo-video 추가 및 변경
ProjectInTheClass · Dec 16, 2024 · 005a18d · 005a18d
2 parents f912486 + 3b4758f
commit 005a18d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/docs/images/loginView.png b/docs/images/loginView.png
diff --git a/docs/index.html b/docs/index.html
@@ -22,7 +22,7 @@
 					<section class="intro">
 						<header>
 							<h1>MusicWith</h1>
-							<p>Listen music and chat</p>
+							<p>Listen, Feel, Share.</p>
 							<ul class="actions">
 								<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
 							</ul>
@@ -126,6 +126,22 @@ <h3>Additional information</h3>
 
 						</div>
 					</section>
+					<section>
+						<header>
+							<h2>Completeness</h2>
+						</header>
+						<div class="content">
+							<p><strong>MusicWith</strong> 어플은 현재 다음과 같은 완성도를 보입니다. </p>
+							<ul class="feature-icons">
+								<li class="icon solid fa-user">tidal 계정을 통한 로그인</li>
+								<li class="icon solid fa-music">음악 재생, 가사 제공</li>
+								<li class="icon solid fa-list">tidal 계정 플레이리스트</li>
+								<li class="icon solid fa-star">현재 인기 있는 노래들</li>
+								<li class="icon solid fa-search">원하는 음악 검색</li>
+								<li class="icon solid fa-comment">음악 별 댓글</li>
+							</ul>
+						</div>
+					</section>
 
 				<!-- Section -->
 				<section>
@@ -148,10 +164,25 @@ <h2>FUTURE TASK</h2>
 							<h2>Learn More</h2>
 						</header>
 						<div class="content">
-							<p><strong>MusicWith</strong> 어플의 github 주소는 다음과 같습니다.</p>
+							<p><strong>MusicWith</strong> 어플에 대해 더 알아볼 수 있습니다.</p>
 							<ul class="actions">
-								<li><a href="https://github.com/ProjectInTheClass/MusicWith" class="button large">Learn More</a></li>
-							</ul>
+								<li><a href="https://github.com/ProjectInTheClass/MusicWith" class="button large">Github</a></li>
+								<li><a href="https://www.youtube.com/shorts/p4K2MMHuLrU" class="button large">Youtube</a></li>
+							</ul>		
+						</div>
+					</section>
+					<section>
+						<header>
+							<h2>Demo Video</h2>
+						</header>
+						<div class="content">
+							<iframe width="560" height="315" 
+            						src="https://www.youtube.com/embed/p4K2MMHuLrU" 
+            						title="YouTube video player" 
+            						frameborder="0" 
+            						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            						allowfullscreen>
+    						</iframe>
 						</div>
 					</section>