2020-1-capstone-design2 / 2016104137

Go to a project
Toggle navigation Toggle navigation pinning
유희정
14e9910b 1 parent 387cbfc8

update start page and connect page

Inline Side-by-side
Showing 8 changed files with 170 additions and 94 deletions
1 #connect_btn{ 1 #connect_btn{
2 - border-radius: 5px;
3 font-size: 30px; 2 font-size: 30px;
4 margin-left: 20px; 3 margin-left: 20px;
5 margin-right : 20px; 4 margin-right : 20px;
6 } 5 }
7 #closeBtn { 6 #closeBtn {
8 - border-radius: 5px;
9 font-size: 20px; 7 font-size: 20px;
10 margin-left: 20px; 8 margin-left: 20px;
11 margin-right : 20px; 9 margin-right : 20px;
12 } 10 }
13 -#btn_group button{
14 - border: 1px solid black;
15 - background-color: rgba(0,0,0,0);
16 - color: black;
17 - padding: 5px;
18 - display: table;
19 - margin-left: auto;
20 - margin-right: auto;
21 - margin-top: 10%;
22 -}
23 -#btn_group button:hover{
24 - color:white;
25 - background-color: black;
26 -}
27 .container{ 11 .container{
28 border-radius: 2px; 12 border-radius: 2px;
29 background-color: rgba(0,0,0,0); 13 background-color: rgba(0,0,0,0);
...@@ -37,44 +21,8 @@ ...@@ -37,44 +21,8 @@
37 margin-top :10px; 21 margin-top :10px;
38 display: table; 22 display: table;
39 } 23 }
40 -#connectDevice1{ 24 +.container button{
41 - border: 2px solid skyblue; 25 + border: 2px solid #4e73df;
42 - border-radius: 2px;
43 - background-color: rgba(0,0,0,0);
44 - width : 450px;
45 - height : 50px;
46 - line-height: 50px;
47 - visibility: hidden;
48 - vertical-align: middle;
49 - font-size: 15px;
50 - margin-left: auto;
51 - margin-right: auto;
52 - margin-top: 10px;
53 -}
54 -#connectDevice1:hover{
55 - color:white;
56 - background-color: skyblue;
57 -}
58 -#connectDevice2{
59 - border: 2px solid skyblue;
60 - border-radius: 2px;
61 - background-color: rgba(0,0,0,0);
62 - width : 450px;
63 - height : 50px;
64 - line-height: 50px;
65 - visibility: hidden;
66 - vertical-align: middle;
67 - font-size: 15px;
68 - margin-left: auto;
69 - margin-right: auto;
70 - margin-top: 10px;
71 -}
72 -#connectDevice2:hover{
73 - color:white;
74 - background-color: skyblue;
75 -}
76 -#connectDevice3{
77 - border: 2px solid skyblue;
78 border-radius: 2px; 26 border-radius: 2px;
79 background-color: rgba(0,0,0,0); 27 background-color: rgba(0,0,0,0);
80 width : 450px; 28 width : 450px;
...@@ -87,10 +35,11 @@ ...@@ -87,10 +35,11 @@
87 margin-right: auto; 35 margin-right: auto;
88 margin-top: 10px; 36 margin-top: 10px;
89 } 37 }
90 -#connectDevice3:hover{ 38 +.container button:hover{
91 color:white; 39 color:white;
92 - background-color: skyblue; 40 + background-color: #4e73df;
93 } 41 }
42 +
94 #status{ 43 #status{
95 visibility: hidden; 44 visibility: hidden;
96 height: 10px; 45 height: 10px;
......
1 +h1 {
2 + font-size:4.5em;
3 + text-align: center;
4 + font-family : "Born Ready Slanted";
5 +}
6 +#connect_btn{
7 + font-size: 30px;
8 + height:50px;
9 + margin-top: 80px;
10 +}
11 +#next_btn{
12 + font-size: 30px;
13 + height:50px;
14 + margin-top: 80px;
15 +}
16 +#btn_group button{
17 + border: 1px solid #4e73df;
18 + background-color: rgba(0,0,0,0);
19 + color: white;
20 + background-color: #4e73df;
21 + padding: 5px;
22 + display: table;
23 + margin-left: auto;
24 + margin-right: auto;
25 + padding-left: 100px;
26 + padding-right: 100px;
27 +}
28 +#btn_group button:hover{
29 + color:#4e73df;
30 + background-color: white;
31 +}
32 +.all{
33 + display:flex;
34 + height : 95vh;
35 + flex-direction:column;
36 +}
37 +.content{
38 + flex:2;
39 +}
40 +.ui-content{
41 + flex:2;
42 + display:flex;
43 +}
44 +.center{
45 + float:left;
46 + width:40%;
47 + text-align: center;
48 +}
49 +.side{
50 + float:left;
51 + width:30%;
52 +}
53 +.center button{
54 + border: 1px solid #4e73df;
55 + background-color: rgba(0,0,0,0);
56 + color: white;
57 + background-color: #4e73df;
58 + padding: 5px;
59 + display: table;
60 + margin-left: auto;
61 + margin-right: auto;
62 + padding-left: 100px;
63 + padding-right: 100px;
64 +}
65 +.center button:hover{
66 + color:#4e73df;
67 + background-color: white;
68 +}
...\ No newline at end of file ...\ No newline at end of file
1 +.all{
2 + display:flex;
3 + height : 97vh;
4 + flex-direction: column;
5 +}
1 .top{ 6 .top{
2 - width:100%; 7 + flex:2
3 - height:100px;
4 } 8 }
5 .middle{ 9 .middle{
6 - width:100%; 10 + flex:4;
7 - height:500px;
8 } 11 }
9 .bottom{ 12 .bottom{
10 - width:100%;
11 - height:100px;
12 -}
...\ No newline at end of file ...\ No newline at end of file
13 + flex:2;
14 +}
15 +h1 {
16 + font-size:6em;
17 + text-align: center;
18 + font-family : "Born Ready Slanted"
19 +}
20 +#content1{
21 + text-align: center;
22 + font-size:0.8em;
23 +}
24 +#content2{
25 + text-align: center;
26 + font-size:2em;
27 +}
28 +#start_btn{
29 + font-size: 30px;
30 + margin-left: 20px;
31 + margin-right : 20px;
32 + height : 60px;
33 +}
34 +#btn_group button{
35 + border: 1px solid #4e73df;
36 + background-color: rgba(0,0,0,0);
37 + color: white;
38 + background-color: #4e73df;
39 + padding: 5px;
40 + display: table;
41 + margin-left: auto;
42 + margin-right: auto;
43 + margin-top: 60px;
44 + padding-left: 50px;
45 + padding-right: 50px;
46 +}
47 +#btn_group button:hover{
48 + color:#4e73df;
49 + background-color: white;
50 +}
51 +.centered {
52 + display: table; margin-left: auto;
53 + margin-right: auto;
54 +}
......
1 h1 { 1 h1 {
2 font-size:6em; 2 font-size:6em;
3 - margin-top:1em;
4 - margin-bottom:-0.2em;
5 text-align: center; 3 text-align: center;
6 -} 4 + font-family : "Born Ready Slanted"
7 - 5 +}
8 #content1{ 6 #content1{
9 text-align: center; 7 text-align: center;
10 font-size:0.8em; 8 font-size:0.8em;
...@@ -20,22 +18,22 @@ h1 { ...@@ -20,22 +18,22 @@ h1 {
20 margin-right : 20px; 18 margin-right : 20px;
21 } 19 }
22 #btn_group button{ 20 #btn_group button{
23 - border: 1px solid skyblue; 21 + border: 1px solid #4e73df;
24 background-color: rgba(0,0,0,0); 22 background-color: rgba(0,0,0,0);
25 - color: skyblue; 23 + color: white;
24 + background-color: #4e73df;
26 padding: 5px; 25 padding: 5px;
27 display: table; 26 display: table;
28 margin-left: auto; 27 margin-left: auto;
29 margin-right: auto; 28 margin-right: auto;
30 - margin-top: 10%; 29 + margin-top: 60px;
31 - padding-left: 100px; 30 + padding-left: 50px;
32 - padding-right: 100px; 31 + padding-right: 50px;
33 } 32 }
34 -#btn_group button:hover{ 33 +#btn_group button:hover{
35 - color:white; 34 + color:#4e73df;
36 - background-color: skyblue; 35 + background-color: white;
37 } 36 }
38 -
39 .centered { 37 .centered {
40 display: table; margin-left: auto; 38 display: table; margin-left: auto;
41 margin-right: auto; 39 margin-right: auto;
......

59 KB | W: | H:

41.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
5 <title>Hello World!</title> 5 <title>Hello World!</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <link rel="Stylesheet" media="all" type="text/css" href="bower_components/jquery-mobile-bower/css/jquery.mobile-1.4.5.css" /> 7 <link rel="Stylesheet" media="all" type="text/css" href="bower_components/jquery-mobile-bower/css/jquery.mobile-1.4.5.css" />
8 - <link rel="Stylesheet" href="../assets/css/main.css"> 8 + <link rel="Stylesheet" href="../assets/css/data.css">
9 - <link rel="Stylesheet" href="../assets/css/connect.css">
10 <style type="text/css" media="all"> 9 <style type="text/css" media="all">
11 .content{ 10 .content{
12 height:280px; 11 height:280px;
...@@ -15,15 +14,22 @@ ...@@ -15,15 +14,22 @@
15 </style> 14 </style>
16 </head> 15 </head>
17 <body> 16 <body>
18 - <div data-role="page" id="start"> 17 + <div data-role="page" class="all">
19 <div data-role="main" class="ui-content" id="btn_group"> 18 <div data-role="main" class="ui-content" id="btn_group">
20 <button id="connect_btn">Connect device</button> 19 <button id="connect_btn">Connect device</button>
21 </div> 20 </div>
22 <div class="content"> 21 <div class="content">
23 - <h1 id="cc">Contents</h1> 22 + <h1 id="cc">Connect your Device</h1>
24 </div> 23 </div>
25 - <div data-role="main" class="ui-content" id="btn_group"> 24 + <div data-role="main" class="ui-content">
26 - <button id="connect_btn" onclick="location.href='menu.html'">Next</button> 25 + <div class="side">
26 + </div>
27 + <div class='center'>
28 + <button id="next_btn" onclick="location.href='menu.html'">Next</button>
29 + </div>
30 + <div class="side">
31 + <img src="../assets/img/data.png">
32 + </div>
27 </div> 33 </div>
28 </div> 34 </div>
29 <script src="data.js"></script> 35 <script src="data.js"></script>
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
5 <title>Hello World!</title> 5 <title>Hello World!</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, script-src 'self' 'unsafe-inline'" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, script-src 'self' 'unsafe-inline'" />
7 <link rel="Stylesheet" media="all" type="text/css" href="bower_components/jquery-mobile-bower/css/jquery.mobile-1.4.5.css" /> 7 <link rel="Stylesheet" media="all" type="text/css" href="bower_components/jquery-mobile-bower/css/jquery.mobile-1.4.5.css" />
8 - <link rel="Stylesheet" href="../assets/css/main.css">
9 <link rel="Stylesheet" href="../assets/css/index.css"> 8 <link rel="Stylesheet" href="../assets/css/index.css">
10 <style type="text/css" media="all"> 9 <style type="text/css" media="all">
11 10
...@@ -14,20 +13,34 @@ ...@@ -14,20 +13,34 @@
14 13
15 </head> 14 </head>
16 <body> 15 <body>
17 - <div class="top"></div> 16 + <!DOCTYPE html>
18 - <div data-role="page" id="start" class="middle"> 17 +<html>
19 - <div data-role="header" class="centered"> 18 +<head>
20 - <h1>F</strong>-out</h1> 19 + <meta charset="UTF-8">
21 - <p id="content1"> 20 + <title>Hello World!</title>
22 - <strong>F</strong>(orensic)<strong>out</strong> & <strong>F</strong>(ind)<strong>out</strong> 21 + <meta name="viewport" content="width=device-width, initial-scale=1, script-src 'self' 'unsafe-inline'" />
23 - </p> 22 + <link rel="Stylesheet" media="all" type="text/css" href="bower_components/jquery-mobile-bower/css/jquery.mobile-1.4.5.css" />
24 - <p id="content2">Android Smartphone Forensic Tool</p> 23 + <link rel="Stylesheet" href="../assets/css/index.css">
24 + <style type="text/css" media="all">
25 +
26 + body { cursor: default; }
27 + </style>
28 +
29 +</head>
30 +<body>
31 + <div class="all">
32 + <div class="top">
25 </div> 33 </div>
26 - <div data-role="main" class="ui-content" id="btn_group"> 34 + <div data-role="page" id="start" class="middle">
27 - <button id = "start_btn" onclick="location.href='data.html'">Start</button> 35 + <div data-role="header" class="centered">
36 + <img src="../assets/img/start_page.png" height=400px>
37 + </div>
38 + <div data-role="main" class="ui-content" id="btn_group">
39 + <button id = "start_btn" onclick="location.href='data.html'">START</button>
40 + </div>
28 </div> 41 </div>
42 + <div class="bottom"></div>
29 </div> 43 </div>
30 - <div class="bottom"></div>
31 <script src='index.js'></script> 44 <script src='index.js'></script>
32 </body> 45 </body>
33 </html> 46 </html>
...\ No newline at end of file ...\ No newline at end of file
......