Skip to content

Commit

Permalink
Merge pull request #29 from icechocola05/feature#28
Browse files Browse the repository at this point in the history 
[ADD]#28 도움말 동화수정삭제 사진 추가
  • Loading branch information
@jioniy
jioniy authored Apr 4, 2022
2 parents 993872a + b0bd767 commit fc561ae
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 28 deletions.
Binary file added WebContent/IMG/16_1_remove_story.JPG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109 changes: 81 additions & 28 deletions WebContent/help.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="CSS/base.css" type='text/css' >
<style>
.menu-active{
background-color:#C4C4C4;
}
</style>
</head>

<body>
Expand All @@ -17,44 +22,46 @@
</div>

<!-- Side bar -->
<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:20%">
<div class="menu w3-sidebar w3-light-grey w3-bar-block" style="width:20%">
<h4 class="w3-bar-item">Menu</h4>
<a href="#intro" class="m w3-bar-item w3-button">서비스 소개</a>
<a href="#usage" class="m w3-bar-item w3-button">사용 방법</a>
<a href="#" class="w3-bar-item w3-button">&nbsp;&nbsp;동화 만들기</a>
<a href="#" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;동화 제목 입력</a>
<a href="#" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;페이지 등록</a>
<a href="#" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;페이지 수정</a>
<a href="#" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;페이지 삭제</a>
<a href="#" class="w3-bar-item w3-button">&nbsp;&nbsp;동화 읽기</a>
<a href="#" class="w3-bar-item w3-button">&nbsp;&nbsp;동화 수정 삭제</a>
<a href="#intro" class="w3-bar-item w3-button">서비스 소개</a>
<a href="#usage" class="w3-bar-item w3-button">사용 방법</a>
<a href="#makeStory" class="w3-bar-item w3-button">&nbsp;&nbsp;동화 만들기</a>
<a href="#inputTitle" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;동화 제목 입력</a>
<a href="#uploadPage" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;페이지 등록</a>
<a href="#modifyPage" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;페이지 수정</a>
<a href="#removePage" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;페이지 삭제</a>
<a href="#myStory" class="w3-bar-item w3-button">&nbsp;&nbsp;&nbsp;&nbsp;만든 동화 확인</a>
<a href="#readStory" class="w3-bar-item w3-button">&nbsp;&nbsp;동화 읽기</a>
<a href="#modifyStory" class="w3-bar-item w3-button">&nbsp;&nbsp;동화 수정</a>
<a href="#removeStory" class="w3-bar-item w3-button">&nbsp;&nbsp;동화 삭제</a>
</div>

<!-- Content -->
<div style="margin-left:25%; margin-right:5%;">
<div class="w3-container" style="background-color:#E0E0E0;">
<h3> 서비스 소개 </h3>
<div id="intro" class="w3-container" style="background-color:#E0E0E0;">
<h3> <b>서비스 소개</b> </h3>
</div>
<div class="w3-container intro scroll">
<div class="w3-container scroll">
<p>이미지로부터 텍스트를 추출하고, 감정과 음색을 다양하게 설정하여 동화책을 읽어주는 웹 서비스입니다.
원하는 동화책의 사진을 찍고, 화자와 감정을 설정하여 동화를 읽어보세요.</p>
<img src = "IMG/0_main.JPG" style="width:50vw;" class="w3-container w3-center">
</div>

<br><br>
<div class="w3-container usage scroll" style="background-color:#E0E0E0;">
<h3>사용 방법</h3>
<div id ="usage" class="w3-container usage scroll" style="background-color:#E0E0E0;">
<h3><b>사용 방법</b></h3>
</div><br>
<div class="w3-container" style="background-color:#F0F0F0;">
<div id="makeStory" class="w3-container" style="background-color:#F0F0F0;">
<h3><b>동화 만들기</b></h3>
</div>
<div class="w3-container">
<div id="inputTitle" class="w3-container">
<h4>1. 동화 제목 입력</h4>
<p>원하는 동화 제목을 입력하세요. </p>
<img src = "IMG/2_input_story_title.JPG" style="width:50vw;" class="w3-container w3-center">
</div>
<br><br><br><br>
<div class="w3-container">
<div id="uploadPage" class="w3-container">
<h4>2. 페이지 등록</h4>
<p>1) '➕'버튼을 눌러 동화의 페이지를 등록하세요. </p>
<img src = "IMG/3_make_page.JPG" style="width:50vw;" class="w3-container w3-center">
Expand Down Expand Up @@ -82,7 +89,7 @@
<br><br><br>
</div>
<br>
<div class="w3-container">
<div id="modifyPage" class="w3-container">
<h4>3. 페이지 수정</h4>
<p>1) 페이지 순서를 변경하고 싶을 때<br>
순서를 변경하고 싶은 페이지를 드래그 하여 원하는 위치에 놓습니다.</p>
Expand All @@ -99,20 +106,20 @@
<br><br><br>
</div>
<br><br>
<div class="w3-container">
<div id = "removePage" class="w3-container">
<h4>4. 페이지 삭제</h4>
<p>'x' 버튼을 클릭하여 페이지를 삭제할 수 있습니다. </p>
<img src = "IMG/11_remove_page.JPG" style="width:50vw;" class="w3-container w3-center">
<br><br><br>
</div>
<div class="w3-container">
<div id = "myStory"class="w3-container">
<h4>5. 만든 동화 확인</h4>
<p>동화가 완성되면, [만든 동화 보기]를 클릭하여 내가 만든 동화를 확인할 수 있습니다. </p>
<img src = "IMG/12_my_story_list.JPG" style="width:50vw;" class="w3-container w3-center">
<br><br><br>
</div>
<br><br>
<div class="w3-container"style="background-color:#F0F0F0;">
<div id="readStory" class="w3-container"style="background-color:#F0F0F0;">
<h3><b>동화 읽기</b></h3>
</div>
<div class="w3-container">
Expand All @@ -121,19 +128,65 @@
<br>
</div>
<br><br>
<div class="w3-container"style="background-color:#F0F0F0;">
<h3><b>동화 수정 삭제</b></h3>
<div id = "modifyStory" class="w3-container"style="background-color:#F0F0F0;">
<h3><b>동화 수정</b></h3>
</div>
<div class="w3-container">
<p>[수정], [삭제] 버튼을 눌러 동화를 수정, 삭제할 수 있습니다.</p>
<div class="" style="display:inline-block;width:80%;"><img src = "IMG/14_modify_story.JPG" style="width:47%;" class="w3-container w3-center">
<img src = "IMG/16_remove_story.JPG" style="width:47%;" class="w3-container w3-center"></div>
<p>[수정]버튼을 눌러 동화의 페이지를 확인하고 수정할 수 있습니다.</p>
<div class="" style="display:inline-block;width:80%;">
<img src = "IMG/14_modify_story.JPG" style="width:47%;" class="w3-container w3-center">
<img src = "IMG/15_modify_story.JPG" style="width:47%;" class="w3-container w3-center"></div>
<br>
<br><br>
</div>
<div id = "removeStory" class="w3-container"style="background-color:#F0F0F0;">
<h3><b>동화 삭제</b></h3>
</div>
<script>
<div class="w3-container">
<p>[삭제]버튼을 눌러 동화를 삭제하세요.</p>
<div class="" style="display:inline-block;width:80%;">
<img src = "IMG/16_remove_story.JPG" style="width:47%;" class="w3-container w3-center">
<img src = "IMG/16_1_remove_story.JPG" style="width:47%;" class="w3-container w3-center"></div>
<br>
<br><br>
</div>
</div>
<script type="text/javascript">
intro= $('#intro').position().top;
usage= $('#usage').position().top;
makeStory= $('#makeStory').position().top;
inputTitle= $('#inputTitle').position().top;
uploadPage= $('#uploadPage').position().top;
modifyPage= $('#modifyPage').position().top;
removePage= $('#removePage').position().top;
readStory= $('#readStory').position().top;
modifyStory= $('#modifyStory').position().top;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll < intro)
{
$("#m1").addClass("menu-active");
$("#m2").removeClass("menu-active");
}
else if (intro <= scroll && scroll< usage)
{
$("#m1").removeClass("menu-active");
$("#m2").addClass("menu-active");
$("#m3").removeClass("menu-active");
}
else if (usage <= scroll && scroll < makeStory)
{
$("#m2").removeClass("menu-active");
$("#m3").addClass("menu-active");
$("#m4").removeClass("menu-active");
}
else if (contact <= scroll)
{
$("#header-menu-history").removeClass("menu-active");
$("#header-menu-contact").addClass("menu-active");
}
</script>
</body>
</html>

0 comments on commit fc561ae

Please sign in to comment.