This repository has been archived by the owner on May 27, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 200
/
index.html
140 lines (128 loc) · 6.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html ng-app="ResponsiveTest">
<head>
<!--
/**
* ResponsiveTest
*
* @link https://github.com/nghuuphuoc/responsivetest
* @author Nguyen Huu Phuoc <huuphuoc.me>
* @copyright (c) 2013 Nguyen Huu Phuoc
*/
-->
<meta charset="utf-8">
<title>Testing responsive web design in various resolutions | ResponsiveTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing responsive web design in various resolutions">
<meta name="keywords" content="test responsive web design, responsive web design, responsive design testing, responsive web design testing, Responsive Web Design Tools">
<meta name="author" content="Nguyen Huu Phuoc (@nghuuphuoc)">
<meta name="copyright" content="APL Solutions">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="vendor/jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" media="screen">
<link href="dist/css/style.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="vendor/respond/respond.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!--><script src="vendor/jquery/jquery-2.0.3.min.js"></script><!--<![endif]-->
<script type="text/javascript" src="vendor/jquery-ui/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="dist/js/responsivetest.min.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript">
document.createElement('rt-device');
</script>
<![endif]-->
</head>
<body ng-controller="IndexController" ng-init="init()">
<!-- nav: -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".rt-navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="dist/img/logo.png" alt="Responsive Test" /></a>
</div>
<div class="nav-collapse rt-navbar-collapse rt-navbar">
<form class="navbar-form navbar-left">
<input type="text" class="form-control" ng-model="url" name="url" style="width: 250px; margin-right: 20px;" placeholder="Enter the URL" rt-keyup="onKeyup" />
<input type="text" class="form-control" ng-model="w" name="w" style="width: 60px;" placeholder="w" />
<span style="color: #777;">x</span>
<input type="text" class="form-control" ng-model="h" name="h" style="width: 60px;" placeholder="h" />
<button type="button" class="btn btn-success" ng-click="rotate()"><i class="fa fa-retweet"></i> Rotate</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" ng-repeat="device in SUPPORTED_DEVICES" id="{{ device.type }}">
<a href="#{{ device.type }}" class="dropdown-toggle" data-toggle="dropdown" title="{{ device.title }}"><i class="fa {{ device.icon }} fa-2x"></i></a>
<rt-device brands="device.brands"></rt-device>
</li>
<li><a data-toggle="modal" href="#about"><i class="fa fa-info-circle fa-2x"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- :nav -->
<!-- ruler: -->
<div class="rt-ruler"></div>
<!-- :ruler -->
<!-- dest-iframe: -->
<div class="rt-iframe" ng-style="{ width: w / pxd + 15 + 'px', height: h / pxd + 'px' }" rt-resizable ng-show="!loading" id="iframe">
<iframe ng-src="{{ frameSrc }}" rt-frame-loading></iframe>
</div>
<!-- :dest-iframe -->
<!-- about: -->
<div class="modal fade" id="about">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">About Responsive Test</h4>
</div>
<div class="modal-body text-center">
<p>
v1.2.2<br />
Created by <a href="http://twitter.com/nghuuphuoc">Nguyen Huu Phuoc</a><br />
© 2013 <a href="http://apl.vn">APL Solutions</a>
</p>
<p>
<small>
Powered by <a href="http://getbootstrap.com">Bootstrap 3</a>, <a href="http://angularjs.org">AngularJs</a>, <a href="http://jquery.com">jQuery</a> and <a href="http://jqueryui.com">jQuery UI</a><br />
Icons are provided by <a href="http://fontawesome.io">Font Awesome</a>
</small>
</p>
<iframe src="http://ghbtns.com/github-btn.html?user=nghuuphuoc&repo=responsivetest&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=nghuuphuoc&type=follow" allowtransparency="true" frameborder="0" scrolling="0" width="152" height="20"></iframe>
</div>
</div>
</div>
</div>
<!-- :about -->
<!-- fork-me -->
<a href="https://github.com/nghuuphuoc/responsivetest"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 9999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork ResponsiveTest on GitHub"></a>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4752571-14']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
$(document).ready(function() {
var rulerIndex = $('.rt-ruler').css('z-index');
$('#iframe').on('mouseover', function() {
$(this).css('z-index', rulerIndex + 10);
}).on('mouseout', function() {
$(this).css('z-index', rulerIndex - 10);
});
});
</script>
</body>
</html>