Skip to content

Commit 53f8ceb

Browse files
pixelsignpixelsign
committed
Merge pull request #16 from pixelsign/gh-pages
merge
2 parents 5e20ea9 + 80cf48c commit 53f8ceb

File tree

1 file changed

+174
-0
lines changed

1 file changed

+174
-0
lines changed

‎index.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<!-- METATAGS -->
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta http-equiv="Content-Language" content="en-US" />
7+
<title>HTML5 device mockups</title>
8+
9+
<style>
10+
* {
11+
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box;
12+
padding: 0;
13+
margin: 0;
14+
}
15+
16+
html, body {
17+
width: 100%;
18+
height: 100%;
19+
position: relative;
20+
}
21+
22+
html {
23+
background-image: -webkit-radial-gradient(center center, circle cover, #ffffff, #cfcfcf 100%);
24+
background-image: -moz-radial-gradient(center center, circle cover, #ffffff, #cfcfcf 100%);
25+
background-image: -ms-radial-gradient(center center, circle cover, #ffffff, #cfcfcf 100%);
26+
background-image: -o-radial-gradient(center center, circle cover, #ffffff, #cfcfcf 100%);
27+
background-image: radial-gradient(center center, circle cover, #ffffff, #cfcfcf 100%);
28+
}
29+
30+
h1 {
31+
line-height: 200%;
32+
margin: 30px auto;
33+
text-align: center;
34+
font-family: sans-serif;
35+
font-weight: 100;
36+
}
37+
38+
nav {
39+
margin: 0 auto;
40+
text-align: center;
41+
margin-bottom: 30px;
42+
}
43+
44+
nav a {
45+
padding: 0 10px;
46+
height: 24px;
47+
line-height: 24px;
48+
border-radius: 24px;
49+
-webkit-border-radius: 24px;
50+
-moz-border-radius: 24px;
51+
display: inline-block;
52+
font-family: sans-serif;
53+
background-color: #ccc;
54+
}
55+
56+
nav a.active, nav a:hover {
57+
color: #e2e2e2;
58+
background-color: #333;
59+
cursor: pointer;
60+
}
61+
62+
.device-container {
63+
margin: 0 auto;
64+
width: 100%;
65+
}
66+
67+
code, pre {
68+
background-color: #e2e2e2;
69+
border-radius: 24px;
70+
-webkit-border-radius: 24px;
71+
-moz-border-radius: 24px;
72+
border: 1px #ccc solid;
73+
display: block;
74+
width: 800px;
75+
padding: 10px;
76+
margin: 0 auto;
77+
margin-bottom: 30px;
78+
}
79+
</style>
80+
81+
<!-- THE STYLESHEET FOR DEVICE MOCKUPS -->
82+
<link rel="stylesheet" type="text/css" href="./device-mockups/device-mockups2.css" />
83+
84+
</head>
85+
86+
<body>
87+
88+
<h1>HTML5 device mockups.</h1>
89+
<nav>
90+
<span id="device-tabs">
91+
<a data-value="iphone5" data-size-port="300px" data-size-land="600px" class="active" >iPhone5</a>
92+
<a data-value="ipad" data-size-port="600px" data-size-land="800px" >iPad</a>
93+
<a data-value="imac" data-size-port="800px" data-size-land="800px" >iMac</a>
94+
<a data-value="macbook" data-size-port="800px" data-size-land="800px" >MacBook Pro</a>
95+
<a data-value="s3" data-size-port="300px" data-size-land="500px" >Galaxy S3</a>
96+
<a data-value="nexus7" data-size-port="300px" data-size-land="500px" >Nexus 7</a>
97+
<a data-value="surface" data-size-port="600px" data-size-land="600px" >Surface</a>
98+
<a data-value="lumia920" data-size-port="300px" data-size-land="600px" >Lumia920</a>
99+
</span>
100+
&nbsp;&nbsp;|&nbsp;&nbsp;
101+
<span id="orientation-tabs">
102+
<a data-value="portrait" class="active">Portrait</a>
103+
<a data-value="landscape">Landscape</a>
104+
</span>
105+
&nbsp;&nbsp;|&nbsp;&nbsp;
106+
<span id="color-tabs">
107+
<a data-value="black" class="active">Color1</a>
108+
<a data-value="white">Color2</a>
109+
</span>
110+
</nav>
111+
<pre id="generated-code"></pre>
112+
<div>
113+
114+
<div class="device-container" style="max-width:300px;" data-size-port="300px" data-size-land="600px"><div class="device-mockup" data-device="iphone5" data-orientation="portrait" data-color="black">
115+
<div class="device">
116+
<div class="screen">
117+
<!-- PUT CONTENTS HERE -->
118+
</div>
119+
<div class="button">
120+
<!-- You can hook the "home button" to some JavaScript events or just remove it -->
121+
</div>
122+
</div>
123+
</div></div>
124+
125+
</div>
126+
127+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
128+
<script type="text/javascript">
129+
$(document).ready(function(){
130+
131+
var cachedEl = $(".device-container").first();
132+
133+
function setSize() {
134+
if( $(cachedEl).find(".device-mockup").attr("data-orientation") == "portrait" ) {
135+
$(cachedEl).css("maxWidth", $(cachedEl).attr("data-size-port"));
136+
} else {
137+
$(cachedEl).css("maxWidth", $(cachedEl).attr("data-size-land"));
138+
}
139+
}
140+
141+
$("#device-tabs > a").click(function(e){
142+
e.preventDefault();
143+
$(this).addClass("active").siblings().removeClass("active");
144+
$(cachedEl).attr("data-size-port", $(this).attr("data-size-port")).attr("data-size-land", $(this).attr("data-size-land")).find(".device-mockup").attr("data-device", $(this).attr("data-value"));
145+
setSize()
146+
$("#generated-code").text($(cachedEl).html());
147+
return false;
148+
});
149+
150+
$("#orientation-tabs > a").click(function(e){
151+
e.preventDefault();
152+
$(this).addClass("active").siblings().removeClass("active");
153+
$(cachedEl).find(".device-mockup").attr("data-orientation", $(this).attr("data-value"));
154+
setSize()
155+
$("#generated-code").text($(cachedEl).html());
156+
return false;
157+
});
158+
159+
$("#color-tabs > a").click(function(e){
160+
e.preventDefault();
161+
$(this).addClass("active").siblings().removeClass("active");
162+
$(cachedEl).find(".device-mockup").attr("data-color", $(this).attr("data-value"));
163+
$("#generated-code").text($(cachedEl).html());
164+
return false;
165+
});
166+
167+
$("#generated-code").text($(cachedEl).html());
168+
169+
});
170+
</script>
171+
172+
173+
</body>
174+
</html>

0 commit comments

Comments
 (0)