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
#connect_btn{
border-radius: 5px;
font-size: 30px;
margin-left: 20px;
margin-right : 20px;
}
#closeBtn {
border-radius: 5px;
font-size: 20px;
margin-left: 20px;
margin-right : 20px;
}
#btn_group button{
border: 1px solid black;
background-color: rgba(0,0,0,0);
color: black;
padding: 5px;
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
#btn_group button:hover{
color:white;
background-color: black;
}
.container{
border-radius: 2px;
background-color: rgba(0,0,0,0);
......@@ -37,44 +21,8 @@
margin-top :10px;
display: table;
}
#connectDevice1{
border: 2px solid skyblue;
border-radius: 2px;
background-color: rgba(0,0,0,0);
width : 450px;
height : 50px;
line-height: 50px;
visibility: hidden;
vertical-align: middle;
font-size: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#connectDevice1:hover{
color:white;
background-color: skyblue;
}
#connectDevice2{
border: 2px solid skyblue;
border-radius: 2px;
background-color: rgba(0,0,0,0);
width : 450px;
height : 50px;
line-height: 50px;
visibility: hidden;
vertical-align: middle;
font-size: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#connectDevice2:hover{
color:white;
background-color: skyblue;
}
#connectDevice3{
border: 2px solid skyblue;
.container button{
border: 2px solid #4e73df;
border-radius: 2px;
background-color: rgba(0,0,0,0);
width : 450px;
......@@ -87,10 +35,11 @@
margin-right: auto;
margin-top: 10px;
}
#connectDevice3:hover{
.container button:hover{
color:white;
background-color: skyblue;
background-color: #4e73df;
}
#status{
visibility: hidden;
height: 10px;
......
h1 {
font-size:4.5em;
text-align: center;
font-family : "Born Ready Slanted";
}
#connect_btn{
font-size: 30px;
height:50px;
margin-top: 80px;
}
#next_btn{
font-size: 30px;
height:50px;
margin-top: 80px;
}
#btn_group button{
border: 1px solid #4e73df;
background-color: rgba(0,0,0,0);
color: white;
background-color: #4e73df;
padding: 5px;
display: table;
margin-left: auto;
margin-right: auto;
padding-left: 100px;
padding-right: 100px;
}
#btn_group button:hover{
color:#4e73df;
background-color: white;
}
.all{
display:flex;
height : 95vh;
flex-direction:column;
}
.content{
flex:2;
}
.ui-content{
flex:2;
display:flex;
}
.center{
float:left;
width:40%;
text-align: center;
}
.side{
float:left;
width:30%;
}
.center button{
border: 1px solid #4e73df;
background-color: rgba(0,0,0,0);
color: white;
background-color: #4e73df;
padding: 5px;
display: table;
margin-left: auto;
margin-right: auto;
padding-left: 100px;
padding-right: 100px;
}
.center button:hover{
color:#4e73df;
background-color: white;
}
\ No newline at end of file
.all{
display:flex;
height : 97vh;
flex-direction: column;
}
.top{
width:100%;
height:100px;
flex:2
}
.middle{
width:100%;
height:500px;
flex:4;
}
.bottom{
width:100%;
height:100px;
}
\ No newline at end of file
flex:2;
}
h1 {
font-size:6em;
text-align: center;
font-family : "Born Ready Slanted"
}
#content1{
text-align: center;
font-size:0.8em;
}
#content2{
text-align: center;
font-size:2em;
}
#start_btn{
font-size: 30px;
margin-left: 20px;
margin-right : 20px;
height : 60px;
}
#btn_group button{
border: 1px solid #4e73df;
background-color: rgba(0,0,0,0);
color: white;
background-color: #4e73df;
padding: 5px;
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
padding-left: 50px;
padding-right: 50px;
}
#btn_group button:hover{
color:#4e73df;
background-color: white;
}
.centered {
display: table; margin-left: auto;
margin-right: auto;
}
......
h1 {
font-size:6em;
margin-top:1em;
margin-bottom:-0.2em;
text-align: center;
}
font-family : "Born Ready Slanted"
}
#content1{
text-align: center;
font-size:0.8em;
......@@ -20,22 +18,22 @@ h1 {
margin-right : 20px;
}
#btn_group button{
border: 1px solid skyblue;
border: 1px solid #4e73df;
background-color: rgba(0,0,0,0);
color: skyblue;
color: white;
background-color: #4e73df;
padding: 5px;
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
padding-left: 100px;
padding-right: 100px;
margin-top: 60px;
padding-left: 50px;
padding-right: 50px;
}
#btn_group button:hover{
color:white;
background-color: skyblue;
#btn_group button:hover{
color:#4e73df;
background-color: white;
}
.centered {
display: table; margin-left: auto;
margin-right: auto;
......

59 KB | W: | H:

41.2 KB | W: | H:

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