This repository has been archived by the owner on Jun 16, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 11
/
edl.html
149 lines (143 loc) · 5.99 KB
/
edl.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
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Emulated Device Lab</title>
<link rel="stylesheet" type="text/css" href="css/raleway.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/skeleton.css"/>
<link rel="stylesheet" type="text/css" href="css/edl.css"/>
</head>
<body>
<main>
<h2>Emulated Device Lab</h2>
<nav>
<div id="navigation">
<input class="url" type="text" value="http://www.smashingmagazine.com/" spellcheck="false"/>
<button class="reload" title="Reload all devices"><i class="fa fa-refresh"></i></button>
</div>
<div id="new-device">
<select class="device-selector"></select>
<button class="spawn" title="Spawn new device"><i class="fa fa-plus"></i></button>
</div>
<div id="zoom">
<button class="zoom-out" title="Zoom out"><i class="fa fa-search-minus"></i></button>
<span class="zoom-value"></span>
<input type="range" min="0.1" max="1" value="0.3" step="0.1" class="zoom" title="Zoom level"/>
<button class="zoom-in" title="Zoom in"><i class="fa fa-search-plus"></i></button>
</div>
<div id="config">
<button title="Settings"><i class="fa fa-cogs"></i></button>
<div class="dropdown-menu"></div>
</div>
</nav>
<article>
<div class="device-list"></div>
</article>
</main>
<template id="device-list-item-tpl">
<div class="device-list-item">
<header>
<h2></h2>
<i class="fa fa-cog fa-spin" title="Website loading"></i>
<div class="device-menu">
<i class="fa fa-bars" title="Device menu"></i>
<nav>
<button class="device-show-window">Show window</button>
<button class="device-close">Close</button>
</nav>
</div>
</header>
<div class="video-placeholder">
<div class="video-placeholder-help">
<i class="fa fa-question-circle"></i>
<div class="popup">
To enable streaming, right-click within the device's popup and choose "Stream to EDL".
</div>
</div>
</div>
</div>
</template>
<template id="modal-tpl">
<div class="modal">
<div class="fog-of-war"></div>
<div class="content-wrapper">
<article></article>
</div>
</div>
</template>
<template id="welcome-modal-tpl">
<div class="step step0">
<h3>Welcome to the<br/>Emulated Device Lab</h3>
<p><small>This is an experiment from Chrome DevTools exploring simultaneously emulating multiple mobile devices using Chrome's emulation functionality. We'd love to <a href="https://github.com/ChromeDevTools/EmulatedDeviceLab/issues/21" target="_blank">hear your feedback</a> as we want to improve responsive design inside of DevTools.</small></p>
<p>First, a quick tour…</p>
</div>
<div class="step step1" data-height="400" data-width="540">
<div class="video-container">
<video src="welcome-videos/step_1.mp4"></video>
<button class="play visible"><i class="fa fa-play"></i></button>
</div>
<p>Add new devices</p>
</div>
<div class="step step2" data-height="400" data-width="540">
<div class="video-container">
<video src="welcome-videos/step_2.mp4"></video>
<button class="play visible"><i class="fa fa-play"></i></button>
</div>
<p>Enjoy synchronized scroll, click and form input</p>
</div>
<div class="step step3" data-height="400" data-width="540">
<div class="video-container">
<video src="welcome-videos/step_3.mp4"></video>
<button class="play visible"><i class="fa fa-play"></i></button>
</div>
<p>See styles synchronized</p>
</div>
<span class="count">x/y</span>
<button class="button-primary next-step"><i class="fa fa-arrow-right"></i></button>
</template>
<template id="device-manager-modal-tpl">
<form>
<div>
<label for="device-name">Device name</label>
<input type="text" id="device-name" required>
</div>
<div>
<label for="screen-width">Screen size (px)</label>
<input type="number" min="100" max="10000" value="320" id="screen-width" /> x
<input type="number" min="100" max="10000" value="480" id="screen-height" />
</div>
<div>
<label for="is-mobile">
<input type="checkbox" id="is-mobile" checked />
<span class="label-body">Mobile <i class='fa fa-info-circle info' title="Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more."></i></span>
</label>
</div>
<div>
<label for="is-touch">
<input type="checkbox" id="is-touch" checked />
<span class="label-body">Touchscreen</span>
</label>
</div>
<div>
<label for="device-scale-factor">Device scale factor</label>
<input type="number" min="1" max="10" value="2" id="device-scale-factor" />
</div>
<div>
<label for="user-agent">User agent</label>
<input type="text" id="user-agent" required />
</div>
<button type='submit' class="button-primary create">Create</button>
</form>
<ul class="custom-devices"></ul>
</template>
<template id="device-manager-modal-device-tpl">
<span></span><button class="delete" title="Delete device"><i class="fa fa-trash-o"></i></button>
</template>
<script src="jspm_packages/traceur.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="lib/loaders/load-edl.js"></script>
</body>
</html>