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
1 +
2 +
1 #div_root{ 3 #div_root{
2 margin:auto; 4 margin:auto;
3 width:100%; 5 width:100%;
...@@ -5,11 +7,10 @@ ...@@ -5,11 +7,10 @@
5 #div_top{ 7 #div_top{
6 width:100%; 8 width:100%;
7 height:80px; 9 height:80px;
8 - text-align: center; 10 + vertical-align: baseline;
9 - vertical-align: middle;
10 } 11 }
11 #div_con1{ 12 #div_con1{
12 - width:70%; 13 + width:100%;
13 height:600px; 14 height:600px;
14 float:left; 15 float:left;
15 } 16 }
...@@ -22,44 +23,71 @@ ...@@ -22,44 +23,71 @@
22 } 23 }
23 #menu{ 24 #menu{
24 width:30%; 25 width:30%;
25 - height:300px; 26 + height:200px;
26 margin-left: 2%; 27 margin-left: 2%;
27 margin-top:25px; 28 margin-top:25px;
29 + margin-bottom:0px;
28 float:left; 30 float:left;
29 } 31 }
30 - 32 +.menu_up{
31 - 33 + margin-top:0px !important;
34 +}
35 +.menu_70{
36 + width:50% !important;
37 + height:140px !important;
38 +}
39 +.menu_30{
40 + height:140px !important;
41 +}
32 #div_bottom{ 42 #div_bottom{
33 width:100%; 43 width:100%;
34 height :20px; 44 height :20px;
35 clear:both; 45 clear:both;
36 } 46 }
37 h1 { 47 h1 {
38 - font-size: 2em; 48 + font-size: 80px;
39 font-weight: normal; 49 font-weight: normal;
40 - 50 + font-family:"Born Ready Slanted";
51 + display:inline;
41 } 52 }
42 h2 { 53 h2 {
43 - font-size: 1em; 54 + font-size: 40px;
44 font-weight: normal; 55 font-weight: normal;
45 - 56 + font-family:"Born Ready Slanted", "제주고딕";
57 + display:inline;
58 + margin-left:25px;
59 + color:#858796;
60 +}
61 +h4{
62 + font-size: 13px;
63 + color:#5a5c69 !important;
64 + font-weight:normal;
65 + text-align:center;
66 + margin:0px;
67 + margin-top:10px !important;
68 +}
69 +#btn h2{
70 + font-size:20px !important;
71 + font-family:"Born Ready Slanted", "제주고딕";
72 + margin-left:0px;
46 } 73 }
47 -
48 #btn{ 74 #btn{
49 border-radius: 5px; 75 border-radius: 5px;
50 - font-size: 30px; 76 + font-size: 46px;
51 margin-left: auto; 77 margin-left: auto;
52 margin-right : auto; 78 margin-right : auto;
79 + font-family:"Born Ready Slanted";
80 + display:block;
53 } 81 }
54 #btn_group button{ 82 #btn_group button{
55 border: 1px hidden black; 83 border: 1px hidden black;
56 background-color: rgba(0,0,0,0); 84 background-color: rgba(0,0,0,0);
57 - color: black; 85 + color:#5a5c69;
58 padding: 50px; 86 padding: 50px;
59 display: table; 87 display: table;
60 margin-left: auto; 88 margin-left: auto;
61 margin-right: auto; 89 margin-right: auto;
62 - margin-top: 10%; 90 + margin-top: 0px;
63 } 91 }
64 #btn_group button:hover{ 92 #btn_group button:hover{
65 color:white; 93 color:white;
......
...@@ -8,46 +8,139 @@ ...@@ -8,46 +8,139 @@
8 </head> 8 </head>
9 <body> 9 <body>
10 <div id="div_root"> 10 <div id="div_root">
11 - <div id="div_top"><h1>Smartphone Forensic Tool</h1></div> 11 + <div id="div_top">
12 - <div id="div_con1"> 12 + <h1>F-out</h1>
13 - <div id ="menu"> 13 + <h2 style="color:#4e73df; font-size:40px;">menu</h2>
14 + </div>
15 + <div id="div_con0">
16 + <div id ="menu" class="menu_30">
14 <div id="btn_group"> 17 <div id="btn_group">
15 - <button id="btn" onclick="location.href='menu1.html'">menu1</button> 18 + <button id="btn" class="menu_alldata_nwide" onclick="menu_all();">All Data
19 + <div id="menu_alldata_wide" style="display:none">
20 + <br>
21 + <h2 onclick="location.href='menu0.html'">전체 데이터 보기</h2>
22 + <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'">
23 + <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"/>
24 + <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"/>
25 + <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"/>
26 + </svg>
27 + </div>
28 + </button>
16 </div> 29 </div>
17 </div> 30 </div>
18 - <div id ="menu"> 31 + <div id ="menu" class="menu_70">
19 <div id="btn_group"> 32 <div id="btn_group">
20 - <button id="btn" onclick="location.href='menu2.html'">menu2</button> 33 + <button id="btn" class="menu_analysis_nwide" onclick="menu_analysis();">Data Analysis</button>
21 </div> 34 </div>
22 </div> 35 </div>
23 - <div id ="menu"> 36 + </div>
37 + <div id="div_con1" style="display:none">
38 + <div id ="menu" class="menu_up">
39 + <div id="btn_group">
40 + <button id="btn" class="menu_analysis_menu1_nwide" onclick="menu_analysis_menu1();">CallLog
41 + <div id="menu_analysis_menu1_wide" style="display:none" onclick="location.href='menu1.html'">
42 + <h4>연락처, 통화, 문자 기록을 분석하여<br>사용자의 연락 패턴 분석</h4>
43 + <div id="wide_location">
44 + <h2>연락처 분석</h2>
45 + <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">
46 + <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"/>
47 + <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"/>
48 + <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"/>
49 + </svg>
50 + </div>
51 + </div>
52 + </button>
53 + </div>
54 + </div>
55 + <div id ="menu" class="menu_up">
56 + <div id="btn_group">
57 + <button id="btn" class="menu_analysis_menu2_nwide" onclick="menu_analysis_menu2();">SMS
58 + <div id="menu_analysis_menu2_wide" style="display:none" onclick="location.href='menu2.html'">
59 + <h4>문자 키워드 분석<br>결제문자 분석</h4>
60 + <div id="wide_location">
61 + <h2>문자 키워드 분석</h2>
62 + <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">
63 + <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"/>
64 + <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"/>
65 + <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"/>
66 + </svg>
67 + </div>
68 + </div>
69 + </button>
70 + </div>
71 + </div>
72 + <div id ="menu" class="menu_up">
24 <div id="btn_group"> 73 <div id="btn_group">
25 - <button id="btn" onclick="location.href='menu3.html'">menu3</button> 74 + <button id="btn" class="menu_analysis_menu3_nwide" onclick="menu_analysis_menu3();">Apps
75 + <div id="menu_analysis_menu3_wide" style="display:none" onclick="location.href='menu3.html'">
76 + <h4>어플리케이션 사용 분석</h4>
77 + <div id="wide_location">
78 + <h2>어플 사용 분석</h2>
79 + <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">
80 + <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"/>
81 + <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"/>
82 + <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"/>
83 + </svg>
84 + </div>
85 + </div>
86 + </button>
26 </div> 87 </div>
27 </div> 88 </div>
28 <div id ="menu"> 89 <div id ="menu">
29 <div id="btn_group"> 90 <div id="btn_group">
30 - <button id="btn" onclick="location.href='menu4.html'">menu4</button> 91 + <button id="btn" class="menu_analysis_menu4_nwide" onclick="menu_analysis_menu4();">Media
92 + <div id="menu_analysis_menu4_wide" style="display:none" onclick="location.href='menu4.html'">
93 + <h4>미디어 파일 저장공간 분석<br>비디오 분석</h4>
94 + <div id="wide_location">
95 + <h2>미디어 분석</h2>
96 + <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">
97 + <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"/>
98 + <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"/>
99 + <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"/>
100 + </svg>
101 + </div>
102 + </div>
103 + </button>
31 </div> 104 </div>
32 </div> 105 </div>
33 <div id ="menu"> 106 <div id ="menu">
34 <div id="btn_group"> 107 <div id="btn_group">
35 - <button id="btn" onclick="location.href='photo_classification/photo_main.html'">menu5</button> 108 + <button id="btn" class="menu_analysis_menu5_nwide" onclick="menu_analysis_menu5();">Photo
109 + <div id="menu_analysis_menu5_wide" style="display:none" onclick="location.href='photo_classification/photo_main.html'">
110 + <h4>사진 분류 및 분석</h4>
111 + <div id="wide_location">
112 + <h2>사진 분석</h2>
113 + <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">
114 + <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"/>
115 + <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"/>
116 + <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"/>
117 + </svg>
118 + </div>
119 + </div>
120 + </button>
36 </div> 121 </div>
37 </div> 122 </div>
38 <div id ="menu"> 123 <div id ="menu">
39 <div id="btn_group"> 124 <div id="btn_group">
40 - <button id="btn" onclick="location.href='timeline.html'">menu6</button> 125 + <button id="btn" class="menu_analysis_menu6_nwide" onclick="menu_analysis_menu6();">Timeline
126 + <div id="menu_analysis_menu6_wide" style="display:none" onclick="location.href='timeline.html'">
127 + <h4>시간 데이터를 이용한 timeline 생성</h4>
128 + <div id="wide_location">
129 + <h2>타임라인 분석</h2>
130 + <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">
131 + <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"/>
132 + <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"/>
133 + <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"/>
134 + </svg>
135 + </div>
136 + </div>
137 + </button>
41 </div> 138 </div>
42 </div> 139 </div>
43 </div> 140 </div>
44 141
45 </div> 142 </div>
46 - <div id="div_con2">
47 - <h2>연결된 휴대폰 정보 출력</h2>
48 - </div>
49 </div> 143 </div>
50 -
51 <script src="menu.js"></script> 144 <script src="menu.js"></script>
52 </body> 145 </body>
53 </html> 146 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -//휴대폰 정보 출력 코드
...\ No newline at end of file ...\ No newline at end of file
1 +const menu_all_wide = document.getElementById('menu_alldata_wide');
2 +const menu_analysis_wide = document.getElementById('div_con1');
3 +const menu_all_nwide = document.getElementsByClassName('menu_alldata_nwide')[0];
4 +const menu_analysis_nwide = document.getElementsByClassName('menu_analysis_nwide')[0];
5 +
6 +const menu_analysis_menu1_wide = document.getElementById('menu_analysis_menu1_wide');
7 +const menu_analysis_menu1_nwide = document.getElementsByClassName('menu_analysis_menu1_nwide')[0];
8 +const menu_analysis_menu2_wide = document.getElementById('menu_analysis_menu2_wide');
9 +const menu_analysis_menu2_nwide = document.getElementsByClassName('menu_analysis_menu2_nwide')[0];
10 +const menu_analysis_menu3_wide = document.getElementById('menu_analysis_menu3_wide');
11 +const menu_analysis_menu3_nwide = document.getElementsByClassName('menu_analysis_menu3_nwide')[0];
12 +const menu_analysis_menu4_wide = document.getElementById('menu_analysis_menu4_wide');
13 +const menu_analysis_menu4_nwide = document.getElementsByClassName('menu_analysis_menu4_nwide')[0];
14 +const menu_analysis_menu5_wide = document.getElementById('menu_analysis_menu5_wide');
15 +const menu_analysis_menu5_nwide = document.getElementsByClassName('menu_analysis_menu5_nwide')[0];
16 +const menu_analysis_menu6_wide = document.getElementById('menu_analysis_menu6_wide');
17 +const menu_analysis_menu6_nwide = document.getElementsByClassName('menu_analysis_menu6_nwide')[0];
18 +
19 +function menu_all(){
20 + menu_all_wide.style="display:inline";
21 + menu_analysis_wide.style="display:none";
22 + menu_all_nwide.style="color:#4e73df";
23 + menu_analysis_nwide.style="color:#5a5c69";
24 +}
25 +
26 +function menu_analysis(){
27 + menu_all_wide.style="display:none";
28 + menu_analysis_wide.style="display:inline";
29 + menu_all_nwide.style="color:#5a5c69";
30 + menu_analysis_nwide.style="color:#4e73df";
31 +}
32 +
33 +function menu_analysis_menu1(){
34 + menu_analysis_menu1_wide.style="display:inline";
35 + menu_analysis_menu1_nwide.style="color:#4e73df";
36 + menu_analysis_menu2_wide.style="display:none";
37 + menu_analysis_menu2_nwide.style="color:#5a5c69";
38 + menu_analysis_menu3_wide.style="display:none";
39 + menu_analysis_menu3_nwide.style="color:#5a5c69";
40 + menu_analysis_menu4_wide.style="display:none";
41 + menu_analysis_menu4_nwide.style="color:#5a5c69";
42 + menu_analysis_menu5_wide.style="display:none";
43 + menu_analysis_menu5_nwide.style="color:#5a5c69";
44 + menu_analysis_menu6_wide.style="display:none";
45 + menu_analysis_menu6_nwide.style="color:#5a5c69";
46 +}
47 +
48 +function menu_analysis_menu2(){
49 + menu_analysis_menu1_wide.style="display:none";
50 + menu_analysis_menu1_nwide.style="color:#5a5c69";
51 + menu_analysis_menu2_wide.style="display:inline";
52 + menu_analysis_menu2_nwide.style="color:#4e73df";
53 + menu_analysis_menu3_wide.style="display:none";
54 + menu_analysis_menu3_nwide.style="color:#5a5c69";
55 + menu_analysis_menu4_wide.style="display:none";
56 + menu_analysis_menu4_nwide.style="color:#5a5c69";
57 + menu_analysis_menu5_wide.style="display:none";
58 + menu_analysis_menu5_nwide.style="color:#5a5c69";
59 + menu_analysis_menu6_wide.style="display:none";
60 + menu_analysis_menu6_nwide.style="color:#5a5c69";
61 +}
62 +
63 +function menu_analysis_menu3(){
64 + menu_analysis_menu1_wide.style="display:none";
65 + menu_analysis_menu1_nwide.style="color:#5a5c69";
66 + menu_analysis_menu2_wide.style="display:none";
67 + menu_analysis_menu2_nwide.style="color:#5a5c69";
68 + menu_analysis_menu3_wide.style="display:inline";
69 + menu_analysis_menu3_nwide.style="color:#4e73df";
70 + menu_analysis_menu4_wide.style="display:none";
71 + menu_analysis_menu4_nwide.style="color:#5a5c69";
72 + menu_analysis_menu5_wide.style="display:none";
73 + menu_analysis_menu5_nwide.style="color:#5a5c69";
74 + menu_analysis_menu6_wide.style="display:none";
75 + menu_analysis_menu6_nwide.style="color:#5a5c69";
76 +}
77 +
78 +function menu_analysis_menu4(){
79 + menu_analysis_menu1_wide.style="display:none";
80 + menu_analysis_menu1_nwide.style="color:#5a5c69";
81 + menu_analysis_menu2_wide.style="display:none";
82 + menu_analysis_menu2_nwide.style="color:#5a5c69";
83 + menu_analysis_menu3_wide.style="display:none";
84 + menu_analysis_menu3_nwide.style="color:#5a5c69";
85 + menu_analysis_menu4_wide.style="display:inline";
86 + menu_analysis_menu4_nwide.style="color:#4e73df";
87 + menu_analysis_menu5_wide.style="display:none";
88 + menu_analysis_menu5_nwide.style="color:#5a5c69";
89 + menu_analysis_menu6_wide.style="display:none";
90 + menu_analysis_menu6_nwide.style="color:#5a5c69";
91 +}
92 +
93 +function menu_analysis_menu5(){
94 + menu_analysis_menu1_wide.style="display:none";
95 + menu_analysis_menu1_nwide.style="color:#5a5c69";
96 + menu_analysis_menu2_wide.style="display:none";
97 + menu_analysis_menu2_nwide.style="color:#5a5c69";
98 + menu_analysis_menu3_wide.style="display:none";
99 + menu_analysis_menu3_nwide.style="color:#5a5c69";
100 + menu_analysis_menu4_wide.style="display:none";
101 + menu_analysis_menu4_nwide.style="color:#5a5c69";
102 + menu_analysis_menu5_wide.style="display:inline";
103 + menu_analysis_menu5_nwide.style="color:#4e73df";
104 + menu_analysis_menu6_wide.style="display:none";
105 + menu_analysis_menu6_nwide.style="color:#5a5c69";
106 +}
107 +
108 +function menu_analysis_menu6(){
109 + menu_analysis_menu1_wide.style="display:none";
110 + menu_analysis_menu1_nwide.style="color:#5a5c69";
111 + menu_analysis_menu2_wide.style="display:none";
112 + menu_analysis_menu2_nwide.style="color:#5a5c69";
113 + menu_analysis_menu3_wide.style="display:none";
114 + menu_analysis_menu3_nwide.style="color:#5a5c69";
115 + menu_analysis_menu4_wide.style="display:none";
116 + menu_analysis_menu4_nwide.style="color:#5a5c69";
117 + menu_analysis_menu5_wide.style="display:none";
118 + menu_analysis_menu5_nwide.style="color:#5a5c69";
119 + menu_analysis_menu6_wide.style="display:inline";
120 + menu_analysis_menu6_nwide.style="color:#4e73df";
121 +}
...\ No newline at end of file ...\ No newline at end of file
......