mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-11-05 07:03:24 +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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50px;
|
||||
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/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/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>
|
||||
<body>
|
||||
<p id="intro"></p>
|
||||
<ul id="list"></ul>
|
||||
<div id="preloader"></div>
|
||||
|
||||
<div id="landscape">
|
||||
<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>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user