Skip to content

Commit f3b429a

Browse files
TomiHiltunenTomiHiltunen
committed
Added Galaxy Tab4.
1 parent 6af4845 commit f3b429a

File tree

7 files changed

+184
-9
lines changed

7 files changed

+184
-9
lines changed

‎Device Examples/galaxy_tab4_landscape_black.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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>Mockups - Galaxy S3 (landscape/black)</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+
width: 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+
body {
31+
margin: 0 auto;
32+
max-width: 600px;
33+
}
34+
35+
h1 {
36+
line-height: 200%;
37+
margin: 30px auto;
38+
text-align: center;
39+
font-family: sans-serif;
40+
font-weight: 100;
41+
}
42+
</style>
43+
44+
<link rel="stylesheet" type="text/css" href="./../device-mockups/device-mockups.css" />
45+
</head>
46+
47+
<body>
48+
49+
<h1>Scalable landscaped Galaxy Tab4 <br>HTML5 mockup.</h1>
50+
51+
<div class="device-mockup galaxy_tab4 landscape black">
52+
<div class="device">
53+
<div class="screen">
54+
<!-- PUT CONTENTS HERE -->
55+
</div>
56+
<div class="button">
57+
<!-- You can hook the "home button" to some JavaScript events or just remove it -->
58+
</div>
59+
</div>
60+
</div>
61+
62+
63+
</body>
64+
</html>

‎Device Examples/galaxy_tab4_landscape_white.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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>Mockups - Galaxy S3 (landscape/black)</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+
width: 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+
body {
31+
margin: 0 auto;
32+
max-width: 600px;
33+
}
34+
35+
h1 {
36+
line-height: 200%;
37+
margin: 30px auto;
38+
text-align: center;
39+
font-family: sans-serif;
40+
font-weight: 100;
41+
}
42+
</style>
43+
44+
<link rel="stylesheet" type="text/css" href="./../device-mockups/device-mockups.css" />
45+
</head>
46+
47+
<body>
48+
49+
<h1>Scalable landscaped Galaxy Tab4 <br>HTML5 mockup.</h1>
50+
51+
<div class="device-mockup galaxy_tab4 landscape white">
52+
<div class="device">
53+
<div class="screen">
54+
<!-- PUT CONTENTS HERE -->
55+
</div>
56+
<div class="button">
57+
<!-- You can hook the "home button" to some JavaScript events or just remove it -->
58+
</div>
59+
</div>
60+
</div>
61+
62+
63+
</body>
64+
</html>

‎device-mockups/device-mockups.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,29 @@
281281
}
282282

283283

284+
/* Galaxy Tab4 */
285+
.device-mockup.galaxy_tab4,
286+
.device-mockup.galaxy_tab4.landscape {
287+
padding-bottom: 72.689464%;
288+
}
289+
290+
.device-mockup.galaxy_tab4 > .device,
291+
.device-mockup.galaxy_tab4.landscape > .device,
292+
.device-mockup.galaxy_tab4.landscape.black > .device {
293+
background-image: url("galaxy_tab4/galaxy_tab4_land_black.png");
294+
}
295+
296+
.device-mockup.galaxy_tab4.white > .device,
297+
.device-mockup.galaxy_tab4.landscape.white > .device {
298+
background-image: url("galaxy_tab4/galaxy_tab4_land_white.png");
299+
}
300+
301+
.device-mockup.galaxy_tab4 > .device > .screen,
302+
.device-mockup.galaxy_tab4.landscape > .device > .screen {
303+
top: 11.5%; bottom: 11.5%; left: 5.4%; right: 5.2%;
304+
}
305+
306+
284307
/* Lumia 920 */
285308
.device-mockup.lumia920,
286309
.device-mockup.lumia920.portrait {

‎device-mockups/device-mockups2.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,29 @@
271271
}
272272

273273

274+
/* Galaxy Tab4 */
275+
.device-mockup[data-device="galaxy_tab4"],
276+
.device-mockup[data-device="galaxy_tab4"][data-orientation="landscape"] {
277+
padding-bottom: 72.689464%;
278+
}
279+
280+
.device-mockup[data-device="galaxy_tab4"] > .device,
281+
.device-mockup[data-device="galaxy_tab4"][data-color="black"] > .device,
282+
.device-mockup[data-device="galaxy_tab4"][data-orientation="landscape"][data-color="black"] > .device {
283+
background-image: url("galaxy_tab4/galaxy_tab4_land_black.png");
284+
}
285+
286+
.device-mockup[data-device="galaxy_tab4"][data-color="white"] > .device,
287+
.device-mockup[data-device="galaxy_tab4"][data-orientation="landscape"][data-color="white"] > .device {
288+
background-image: url("galaxy_tab4/galaxy_tab4_land_white.png");
289+
}
290+
291+
.device-mockup[data-device="galaxy_tab4"] > .device > .screen,
292+
.device-mockup[data-device="galaxy_tab4"][data-orientation="landscape"] > .device > .screen {
293+
top: 11.5%; bottom: 11.5%; left: 5.4%; right: 5.2%;
294+
}
295+
296+
274297
/* Lumia 920 */
275298
.device-mockup[data-device="lumia920"],
276299
.device-mockup[data-device="lumia920"][data-orientation="portrait"] {

‎device-mockups/galaxy_tab4/galaxy_tab4_black.png‎ renamed to ‎device-mockups/galaxy_tab4/galaxy_tab4_land_black.png‎

File renamed without changes.

‎device-mockups/galaxy_tab4/galaxy_tab4_white.png‎ renamed to ‎device-mockups/galaxy_tab4/galaxy_tab4_land_white.png‎

File renamed without changes.

‎index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -97,16 +97,17 @@ <h1>HTML5 device mockups.</h1>
9797
<table>
9898
<tr>
9999
<td id="device-tabs">
100-
<a data-value="iphone5" data-size-port="300px" data-size-land="600px" class="active" >iPhone5</a>
101-
<a data-value="ipad" data-size-port="600px" data-size-land="800px" >iPad</a>
102-
<a data-value="imac" data-size-port="800px" data-size-land="800px" >iMac</a>
103-
<a data-value="macbook" data-size-port="800px" data-size-land="800px" >MacBook Pro</a>
104-
<a data-value="galaxy_s3" data-size-port="300px" data-size-land="500px" >Galaxy S3</a>
105-
<a data-value="galaxy_s5" data-size-port="300px" data-size-land="500px" >Galaxy S5</a>
100+
<a data-value="iphone5" data-size-port="300px" data-size-land="600px" class="active" >iPhone5</a>
101+
<a data-value="ipad" data-size-port="600px" data-size-land="800px" >iPad</a>
102+
<a data-value="imac" data-size-port="800px" data-size-land="800px" >iMac</a>
103+
<a data-value="macbook" data-size-port="800px" data-size-land="800px" >MacBook Pro</a>
104+
<a data-value="galaxy_s3" data-size-port="300px" data-size-land="500px" >Galaxy S3</a>
105+
<a data-value="galaxy_s5" data-size-port="300px" data-size-land="500px" >Galaxy S5</a>
106106
<br>
107-
<a data-value="nexus7" data-size-port="300px" data-size-land="500px" >Nexus 7</a>
108-
<a data-value="surface" data-size-port="600px" data-size-land="600px" >Surface</a>
109-
<a data-value="lumia920" data-size-port="300px" data-size-land="600px" >Lumia920</a>
107+
<a data-value="galaxy_tab4" data-size-port="500px" data-size-land="500px" >Galaxy Tab4</a>
108+
<a data-value="nexus7" data-size-port="300px" data-size-land="500px" >Nexus 7</a>
109+
<a data-value="surface" data-size-port="600px" data-size-land="600px" >Surface</a>
110+
<a data-value="lumia920" data-size-port="300px" data-size-land="600px" >Lumia920</a>
110111
</td>
111112
<td id="orientation-tabs">
112113
<a data-value="portrait" class="active">Portrait</a>

0 commit comments

Comments
 (0)