2020-1-capstone-design2 / 2016104137

Go to a project
Toggle navigation Toggle navigation pinning
김예미
387cbfc8 1 parent 6ef6f8a1

update menu page

Inline Side-by-side
Showing 3 changed files with 271 additions and 30 deletions
#div_root{
margin:auto;
width:100%;
......@@ -5,11 +7,10 @@
#div_top{
width:100%;
height:80px;
text-align: center;
vertical-align: middle;
vertical-align: baseline;
}
#div_con1{
width:70%;
width:100%;
height:600px;
float:left;
}
......@@ -22,44 +23,71 @@
}
#menu{
width:30%;
height:300px;
height:200px;
margin-left: 2%;
margin-top:25px;
margin-bottom:0px;
float:left;
}
.menu_up{
margin-top:0px !important;
}
.menu_70{
width:50% !important;
height:140px !important;
}
.menu_30{
height:140px !important;
}
#div_bottom{
width:100%;
height :20px;
clear:both;
}
h1 {
font-size: 2em;
font-size: 80px;
font-weight: normal;
font-family:"Born Ready Slanted";
display:inline;
}
h2 {
font-size: 1em;
font-size: 40px;
font-weight: normal;
font-family:"Born Ready Slanted", "제주고딕";
display:inline;
margin-left:25px;
color:#858796;
}
h4{
font-size: 13px;
color:#5a5c69 !important;
font-weight:normal;
text-align:center;
margin:0px;
margin-top:10px !important;
}
#btn h2{
font-size:20px !important;
font-family:"Born Ready Slanted", "제주고딕";
margin-left:0px;
}
#btn{
border-radius: 5px;
font-size: 30px;
font-size: 46px;
margin-left: auto;
margin-right : auto;
font-family:"Born Ready Slanted";
display:block;
}
#btn_group button{
border: 1px hidden black;
background-color: rgba(0,0,0,0);
color: black;
color:#5a5c69;
padding: 50px;
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
margin-top: 0px;
}
#btn_group button:hover{
color:white;
......
......@@ -8,46 +8,139 @@
</head>
<body>
<div id="div_root">
<div id="div_top"><h1>Smartphone Forensic Tool</h1></div>
<div id="div_con1">
<div id ="menu">
<div id="div_top">
<h1>F-out</h1>
<h2 style="color:#4e73df; font-size:40px;">menu</h2>
</div>
<div id="div_con0">
<div id ="menu" class="menu_30">
<div id="btn_group">
<button id="btn" onclick="location.href='menu1.html'">menu1</button>
<button id="btn" class="menu_alldata_nwide" onclick="menu_all();">All Data
<div id="menu_alldata_wide" style="display:none">
<br>
<h2 onclick="location.href='menu0.html'">전체 데이터 보기</h2>
<svg class="bi bi-arrow-right-circle" width="0.3em" height="0.3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:#4e73df" onclick="location.href='menu0.html'">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</button>
</div>
</div>
<div id ="menu">
<div id ="menu" class="menu_70">
<div id="btn_group">
<button id="btn" onclick="location.href='menu2.html'">menu2</button>
<button id="btn" class="menu_analysis_nwide" onclick="menu_analysis();">Data Analysis</button>
</div>
</div>
<div id ="menu">
</div>
<div id="div_con1" style="display:none">
<div id ="menu" class="menu_up">
<div id="btn_group">
<button id="btn" class="menu_analysis_menu1_nwide" onclick="menu_analysis_menu1();">CallLog
<div id="menu_analysis_menu1_wide" style="display:none" onclick="location.href='menu1.html'">
<h4>연락처, 통화, 문자 기록을 분석하여<br>사용자의 연락 패턴 분석</h4>
<div id="wide_location">
<h2>연락처 분석</h2>
<svg class="bi bi-arrow-right-circle" width="0.3em" height="0.3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:#4e73df">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
</button>
</div>
</div>
<div id ="menu" class="menu_up">
<div id="btn_group">
<button id="btn" class="menu_analysis_menu2_nwide" onclick="menu_analysis_menu2();">SMS
<div id="menu_analysis_menu2_wide" style="display:none" onclick="location.href='menu2.html'">
<h4>문자 키워드 분석<br>결제문자 분석</h4>
<div id="wide_location">
<h2>문자 키워드 분석</h2>
<svg class="bi bi-arrow-right-circle" width="0.3em" height="0.3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:#4e73df">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
</button>
</div>
</div>
<div id ="menu" class="menu_up">
<div id="btn_group">
<button id="btn" onclick="location.href='menu3.html'">menu3</button>
<button id="btn" class="menu_analysis_menu3_nwide" onclick="menu_analysis_menu3();">Apps
<div id="menu_analysis_menu3_wide" style="display:none" onclick="location.href='menu3.html'">
<h4>어플리케이션 사용 분석</h4>
<div id="wide_location">
<h2>어플 사용 분석</h2>
<svg class="bi bi-arrow-right-circle" width="0.3em" height="0.3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:#4e73df">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
</button>
</div>
</div>
<div id ="menu">
<div id="btn_group">
<button id="btn" onclick="location.href='menu4.html'">menu4</button>
<button id="btn" class="menu_analysis_menu4_nwide" onclick="menu_analysis_menu4();">Media
<div id="menu_analysis_menu4_wide" style="display:none" onclick="location.href='menu4.html'">
<h4>미디어 파일 저장공간 분석<br>비디오 분석</h4>
<div id="wide_location">
<h2>미디어 분석</h2>
<svg class="bi bi-arrow-right-circle" width="0.3em" height="0.3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:#4e73df">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
</button>
</div>
</div>
<div id ="menu">
<div id="btn_group">
<button id="btn" onclick="location.href='photo_classification/photo_main.html'">menu5</button>
<button id="btn" class="menu_analysis_menu5_nwide" onclick="menu_analysis_menu5();">Photo
<div id="menu_analysis_menu5_wide" style="display:none" onclick="location.href='photo_classification/photo_main.html'">
<h4>사진 분류 및 분석</h4>
<div id="wide_location">
<h2>사진 분석</h2>
<svg class="bi bi-arrow-right-circle" width="0.3em" height="0.3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:#4e73df">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
</button>
</div>
</div>
<div id ="menu">
<div id="btn_group">
<button id="btn" onclick="location.href='timeline.html'">menu6</button>
<button id="btn" class="menu_analysis_menu6_nwide" onclick="menu_analysis_menu6();">Timeline
<div id="menu_analysis_menu6_wide" style="display:none" onclick="location.href='timeline.html'">
<h4>시간 데이터를 이용한 timeline 생성</h4>
<div id="wide_location">
<h2>타임라인 분석</h2>
<svg class="bi bi-arrow-right-circle" width="0.3em" height="0.3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:#4e73df">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
</button>
</div>
</div>
</div>
</div>
<div id="div_con2">
<h2>연결된 휴대폰 정보 출력</h2>
</div>
</div>
<script src="menu.js"></script>
</body>
</html>
\ No newline at end of file
......
//휴대폰 정보 출력 코드
\ No newline at end of file
const menu_all_wide = document.getElementById('menu_alldata_wide');
const menu_analysis_wide = document.getElementById('div_con1');
const menu_all_nwide = document.getElementsByClassName('menu_alldata_nwide')[0];
const menu_analysis_nwide = document.getElementsByClassName('menu_analysis_nwide')[0];
const menu_analysis_menu1_wide = document.getElementById('menu_analysis_menu1_wide');
const menu_analysis_menu1_nwide = document.getElementsByClassName('menu_analysis_menu1_nwide')[0];
const menu_analysis_menu2_wide = document.getElementById('menu_analysis_menu2_wide');
const menu_analysis_menu2_nwide = document.getElementsByClassName('menu_analysis_menu2_nwide')[0];
const menu_analysis_menu3_wide = document.getElementById('menu_analysis_menu3_wide');
const menu_analysis_menu3_nwide = document.getElementsByClassName('menu_analysis_menu3_nwide')[0];
const menu_analysis_menu4_wide = document.getElementById('menu_analysis_menu4_wide');
const menu_analysis_menu4_nwide = document.getElementsByClassName('menu_analysis_menu4_nwide')[0];
const menu_analysis_menu5_wide = document.getElementById('menu_analysis_menu5_wide');
const menu_analysis_menu5_nwide = document.getElementsByClassName('menu_analysis_menu5_nwide')[0];
const menu_analysis_menu6_wide = document.getElementById('menu_analysis_menu6_wide');
const menu_analysis_menu6_nwide = document.getElementsByClassName('menu_analysis_menu6_nwide')[0];
function menu_all(){
menu_all_wide.style="display:inline";
menu_analysis_wide.style="display:none";
menu_all_nwide.style="color:#4e73df";
menu_analysis_nwide.style="color:#5a5c69";
}
function menu_analysis(){
menu_all_wide.style="display:none";
menu_analysis_wide.style="display:inline";
menu_all_nwide.style="color:#5a5c69";
menu_analysis_nwide.style="color:#4e73df";
}
function menu_analysis_menu1(){
menu_analysis_menu1_wide.style="display:inline";
menu_analysis_menu1_nwide.style="color:#4e73df";
menu_analysis_menu2_wide.style="display:none";
menu_analysis_menu2_nwide.style="color:#5a5c69";
menu_analysis_menu3_wide.style="display:none";
menu_analysis_menu3_nwide.style="color:#5a5c69";
menu_analysis_menu4_wide.style="display:none";
menu_analysis_menu4_nwide.style="color:#5a5c69";
menu_analysis_menu5_wide.style="display:none";
menu_analysis_menu5_nwide.style="color:#5a5c69";
menu_analysis_menu6_wide.style="display:none";
menu_analysis_menu6_nwide.style="color:#5a5c69";
}
function menu_analysis_menu2(){
menu_analysis_menu1_wide.style="display:none";
menu_analysis_menu1_nwide.style="color:#5a5c69";
menu_analysis_menu2_wide.style="display:inline";
menu_analysis_menu2_nwide.style="color:#4e73df";
menu_analysis_menu3_wide.style="display:none";
menu_analysis_menu3_nwide.style="color:#5a5c69";
menu_analysis_menu4_wide.style="display:none";
menu_analysis_menu4_nwide.style="color:#5a5c69";
menu_analysis_menu5_wide.style="display:none";
menu_analysis_menu5_nwide.style="color:#5a5c69";
menu_analysis_menu6_wide.style="display:none";
menu_analysis_menu6_nwide.style="color:#5a5c69";
}
function menu_analysis_menu3(){
menu_analysis_menu1_wide.style="display:none";
menu_analysis_menu1_nwide.style="color:#5a5c69";
menu_analysis_menu2_wide.style="display:none";
menu_analysis_menu2_nwide.style="color:#5a5c69";
menu_analysis_menu3_wide.style="display:inline";
menu_analysis_menu3_nwide.style="color:#4e73df";
menu_analysis_menu4_wide.style="display:none";
menu_analysis_menu4_nwide.style="color:#5a5c69";
menu_analysis_menu5_wide.style="display:none";
menu_analysis_menu5_nwide.style="color:#5a5c69";
menu_analysis_menu6_wide.style="display:none";
menu_analysis_menu6_nwide.style="color:#5a5c69";
}
function menu_analysis_menu4(){
menu_analysis_menu1_wide.style="display:none";
menu_analysis_menu1_nwide.style="color:#5a5c69";
menu_analysis_menu2_wide.style="display:none";
menu_analysis_menu2_nwide.style="color:#5a5c69";
menu_analysis_menu3_wide.style="display:none";
menu_analysis_menu3_nwide.style="color:#5a5c69";
menu_analysis_menu4_wide.style="display:inline";
menu_analysis_menu4_nwide.style="color:#4e73df";
menu_analysis_menu5_wide.style="display:none";
menu_analysis_menu5_nwide.style="color:#5a5c69";
menu_analysis_menu6_wide.style="display:none";
menu_analysis_menu6_nwide.style="color:#5a5c69";
}
function menu_analysis_menu5(){
menu_analysis_menu1_wide.style="display:none";
menu_analysis_menu1_nwide.style="color:#5a5c69";
menu_analysis_menu2_wide.style="display:none";
menu_analysis_menu2_nwide.style="color:#5a5c69";
menu_analysis_menu3_wide.style="display:none";
menu_analysis_menu3_nwide.style="color:#5a5c69";
menu_analysis_menu4_wide.style="display:none";
menu_analysis_menu4_nwide.style="color:#5a5c69";
menu_analysis_menu5_wide.style="display:inline";
menu_analysis_menu5_nwide.style="color:#4e73df";
menu_analysis_menu6_wide.style="display:none";
menu_analysis_menu6_nwide.style="color:#5a5c69";
}
function menu_analysis_menu6(){
menu_analysis_menu1_wide.style="display:none";
menu_analysis_menu1_nwide.style="color:#5a5c69";
menu_analysis_menu2_wide.style="display:none";
menu_analysis_menu2_nwide.style="color:#5a5c69";
menu_analysis_menu3_wide.style="display:none";
menu_analysis_menu3_nwide.style="color:#5a5c69";
menu_analysis_menu4_wide.style="display:none";
menu_analysis_menu4_nwide.style="color:#5a5c69";
menu_analysis_menu5_wide.style="display:none";
menu_analysis_menu5_nwide.style="color:#5a5c69";
menu_analysis_menu6_wide.style="display:inline";
menu_analysis_menu6_nwide.style="color:#4e73df";
}
\ No newline at end of file
......