mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-12-25 18:13:48 +01:00
Improved look & feel
This commit is contained in:
peteruithoven
parent
5376ff3178
commit
f4abaa99e7
95
css/bg.css
Normal file
95
css/bg.css
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
/* Portrait */
|
||||||
|
@media screen and (orientation:portrait) {
|
||||||
|
#landscape {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#portrait {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Landscape */
|
||||||
|
@media screen and (orientation:landscape) {
|
||||||
|
#landscape {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#portrait {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uiButtonsContainer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 1024px;
|
||||||
|
min-height: 500px;
|
||||||
|
max-height: 768px;
|
||||||
|
height: 100%;
|
||||||
|
/* height: 768px;*/
|
||||||
|
}
|
||||||
|
.uiButtonsContainer:before {
|
||||||
|
content:' ';
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
right:0;
|
||||||
|
bottom:0;
|
||||||
|
border: 2px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
#d3dlogo {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 31%;
|
||||||
|
width: 399px;
|
||||||
|
height: 139px;
|
||||||
|
background-image: url('../img/logo_full.png');
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgTop {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: -5;
|
||||||
|
}
|
||||||
|
.bgMiddle {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: 0px;
|
||||||
|
z-index: -5;
|
||||||
|
}
|
||||||
|
.bgBottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: -5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
||||||
|
|
||||||
|
@media screen and (max-height: 675px) {
|
||||||
|
.bgMiddle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#d3dlogo {
|
||||||
|
width: 399px;
|
||||||
|
height: 74px;
|
||||||
|
background-image: url('../img/logo_small.png');
|
||||||
|
margin-top: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 560px) {
|
||||||
|
#d3dlogo {
|
||||||
|
width: 399px;
|
||||||
|
height: 57px;
|
||||||
|
background-image: url('../img/logo_smaller_wide.png');
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
45
css/main.css
45
css/main.css
@ -1,7 +1,44 @@
|
|||||||
|
a {
|
||||||
|
color: #5491D2;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
#preloader {
|
#preloader {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 50%;
|
||||||
left: 0;
|
left: 50%;
|
||||||
width: 100%;
|
width: 50px;
|
||||||
height: 100%;
|
height: 50px;
|
||||||
|
margin: -25px 0 0 -25px;
|
||||||
|
}
|
||||||
|
#list {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#list li {
|
||||||
|
list-style-type: none;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
#list a {
|
||||||
|
margin: 0 15px 15px 0;
|
||||||
|
padding: 25px 0 0 0;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 200px;
|
||||||
|
height: 175px;
|
||||||
|
|
||||||
|
border: 2px solid #333;
|
||||||
|
border-radius: 25px;
|
||||||
|
|
||||||
|
-moz-box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60);
|
||||||
|
-webkit-box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60);
|
||||||
|
box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition:background-color 0.1s, color 0.1s;
|
||||||
|
}
|
||||||
|
#list a:hover {
|
||||||
|
background-color: #5491D2;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
34
css/popups.css
Normal file
34
css/popups.css
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
#contentOverlay {
|
||||||
|
background-color: rgba(255, 255, 255, 0.65);
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 1024px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 15;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 835px;
|
||||||
|
height: 500px;
|
||||||
|
margin: -250px 0 0 -417.5px;
|
||||||
|
|
||||||
|
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
||||||
|
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
||||||
|
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
||||||
|
border: 2px solid #222;
|
||||||
|
border-radius: 15px;
|
||||||
|
-moz-border-radius: 15px;
|
||||||
|
-webkit-border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup .content {
|
||||||
|
margin: 0 1em;
|
||||||
|
}
|
||||||
BIN
img/bg_bottom.png
Normal file
BIN
img/bg_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
img/bg_middle.png
Normal file
BIN
img/bg_middle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img/bg_top.png
Normal file
BIN
img/bg_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
img/bg_vertical2.png
Normal file
BIN
img/bg_vertical2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
img/logo_full.png
Executable file
BIN
img/logo_full.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
img/logo_small.png
Normal file
BIN
img/logo_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
img/logo_smaller_wide.png
Normal file
BIN
img/logo_smaller_wide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
35
index.html
35
index.html
@ -12,15 +12,42 @@
|
|||||||
|
|
||||||
<link href="css/normalize.css" rel="stylesheet" media="screen">
|
<link href="css/normalize.css" rel="stylesheet" media="screen">
|
||||||
<link href="css/main.css" rel="stylesheet" media="screen">
|
<link href="css/main.css" rel="stylesheet" media="screen">
|
||||||
|
<link href="css/bg.css" rel="stylesheet" media="screen">
|
||||||
|
<link href="css/popups.css" rel="stylesheet" media="screen">
|
||||||
|
|
||||||
<script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script>
|
<script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script>
|
||||||
<script src="js/libs/spin.min.js" type="text/javascript"></script>
|
<script src="js/libs/spin.min.js" type="text/javascript"></script>
|
||||||
<script src="js/main.js" type="text/javascript"></script>
|
<script src="js/maixxn.js" type="text/javascript"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p id="intro"></p>
|
|
||||||
<ul id="list"></ul>
|
<div id="landscape">
|
||||||
<div id="preloader"></div>
|
<div class="uiButtonsContainer">
|
||||||
|
<img class="bgTop" src="img/bg_top.png" />
|
||||||
|
<img class="bgMiddle" src="img/bg_middle.png" />
|
||||||
|
<img class="bgBottom" src="img/bg_bottom.png" />
|
||||||
|
<div id="d3dlogo" onclick="location.reload()"></div>
|
||||||
|
<div id="contentOverlay">
|
||||||
|
<div id="settings" class="popup">
|
||||||
|
<div class="content">
|
||||||
|
<p id="intro"></p>
|
||||||
|
<ul id="list">
|
||||||
|
<li><a href="http://192.168.0.102">Doodle3D-31C2E8</a></li>
|
||||||
|
<li><a href="http://192.168.0.102">Doodle3D-31C2E8</a></li>
|
||||||
|
<li><a href="http://192.168.0.102">Doodle3D-31C2E8</a></li>
|
||||||
|
<li><a href="http://192.168.0.102">Doodle3D-31C2E8</a></li>
|
||||||
|
<li><a href="http://192.168.0.102">Doodle3D-31C2E8</a></li>
|
||||||
|
<li><a href="http://192.168.0.102">Doodle3D-31C2E8</a></li>
|
||||||
|
</ul>
|
||||||
|
<div id="preloader"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="portrait">
|
||||||
|
<img class="vertImage" src="img/bg_vertical2.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user