-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
221 lines (199 loc) · 10.5 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>LiveStyle quick tour</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="./css/quick-tour.css" />
<link rel="stylesheet" href="./css/debug.css" />
<style>
.qt {
padding: 0;
margin-top: 50px;
}
.qt-screen {
border: none;
}
</style>
</head>
<body>
<section class="qt">
<div class="qt-screen qt-invisible">
<div class="qt-ball"></div>
<div class="qt-browser-line1">
<svg width="200" height="175" viewBox="0 0 200 175" xmlns="http://www.w3.org/2000/svg">
<path d="M40.43 5c-76.43 35.957-51.391 172.957 159.57 169.5" stroke="#E67E22" fill="none"/>
</svg>
</div>
<div class="qt-browser-line2">
<svg width="134" height="179" viewBox="0 0 134 179" xmlns="http://www.w3.org/2000/svg">
<path d="M.121 1.5c96.605 0 132.879 93.762 132.5 178.094" stroke="#E57C2C" fill="none"/>
</svg>
</div>
<span id="qt-browser-fr1" class="qt-focus-ring"></span>
<span id="qt-browser-fr2" class="qt-focus-ring"></span>
<span id="qt-browser-fr3" class="qt-focus-ring"></span>
<div class="qt-browser">
<div class="qt-app-icon__group"><i class="qt-app-icon"></i><i class="qt-app-icon"></i><i class="qt-app-icon"></i>
</div>
<div class="qt-browser__title-bar">
<div class="qt-browser__tab">Google Chrome</div>
</div>
<div class="qt-browser__toolbar">
<i class="qt-browser__arrow-icon"></i>
<i class="qt-browser__arrow-icon qt-browser__arrow-icon_forward"></i>
<i class="qt-browser__ls-icon"></i>
<i class="qt-browser__options-icon"></i>
<div class="qt-browser__address-bar"><span id="qt-browser-address-bar-tx1">localhost:8080</span><span id="qt-browser-address-bar-tx2" class="qt-hidden">localhost:8080</span></div>
</div>
<div class="qt-livestyle">
<section class="qt-livestyle__main">
<h4 class="qt-livestyle__title">Enable LiveStyle</h4>
<span class="qt-livestyle__toggler"></span>
<div class="qt-livestyle__browser-file">style.min.css</div>
<div class="qt-livestyle__editor-file">layout.css</div>
</section>
<section class="qt-livestyle__rv qt-hidden">
<h4 class="qt-livestyle__title">Remote View<br /><span style="font-size:0.9em">some-name.livestyle.io</span></h4>
<span class="qt-livestyle__toggler qt-livestyle__toggler_disabled"></span>
</section>
</div>
<div class="qt-browser__content">
<div class="qt-browser__content-el1">Hello world!</div>
<div class="qt-browser__content-el2">A web-page example</div>
</div>
<div class="qt-browser__devtools">
<div class="qt-browser__devtools-style-pane">
<span class="qt-browser__devtools-style-pane-file">style.min.css</span>
<section class="qt-tx" data-theme="light">
<div class="qt-tx-line"><span class="qt-tx-token qt-tx-token_1">body</span> {</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">font-family:</span> <span class="qt-tx-token qt-tx-token_3">arial</span>;</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">color:</span> <span class="qt-tx-token qt-tx-token_4" id="qt-browser-token1-1">#000</span><span class="qt-tx-token qt-tx-token_4 qt-hidden" id="qt-browser-token1-2"><span id="qt-browser-token1-2code">red</span></span>;</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">background:</span> <span class="qt-tx-token qt-tx-token_4" id="qt-browser-token2">#fff</span>;</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">padding:</span> <span class="qt-tx-token qt-tx-token_3">10px</span>;</div>
<div class="qt-tx-line qt-hidden" id="qt-browser-line1"> <span id="qt-browser-prop1"><span class="qt-tx-token qt-tx-token_2">font-size:</span> <span class="qt-tx-token qt-tx-token_3">20px</span>;</span></div>
<div class="qt-tx-line">}</div>
</section>
</div>
</div>
</div>
<div class="qt-editor">
<div class="qt-app-icon__group"><i class="qt-app-icon"></i><i class="qt-app-icon"></i><i class="qt-app-icon"></i>
</div>
<div class="qt-editor__title-bar"></div>
<section class="qt-editor__tab-bar">
<span class="qt-editor__tab" data-source="local">layout.css</span>
<span class="qt-editor__tab" data-source="usb">usb/page.css</span>
<span class="qt-editor__tab" data-source="ftp">ftp://css/forms.css</span>
<span class="qt-editor__tab" data-source="smb">smb://work/cv.css</span>
<span class="qt-editor__tab" data-source="untitled">untitled</span>
</section>
<section class="qt-tx" data-theme="dark">
<div class="qt-tx-line"><span class="qt-tx-token qt-tx-token_1">body</span> {</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">padding:</span> <span class="qt-tx-token qt-tx-token_3">10px</span>;</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">color:</span> <span class="qt-tx-token qt-tx-token_4" id="qt-editor-token1-1"><span id="qt-editor-token1-1code">#000</span></span><span class="qt-tx-token qt-tx-token_4 qt-hidden" id="qt-editor-token1-2">blue</span>;</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">font-size:</span> <span class="qt-tx-token qt-tx-token_3" id="qt-editor-token2"><span id="qt-editor-token2code">15px</span></span>;</div>
<div class="qt-tx-line" id="qt-editor-line1"> <span id="qt-editor-prop1"><span class="qt-tx-token qt-tx-token_2">background:</span> <span class="qt-tx-token qt-tx-token_4">darkblue</span>;</span></div>
<div class="qt-tx-line qt-hidden" id="qt-editor-line2"> <span class="qt-tx-token qt-tx-token_2">background:</span> <span class="qt-tx-token qt-tx-token_4" id="qt-editor-token3"><span id="qt-editor-token3code">#fff</span></span>;</div>
<div class="qt-tx-line">}</div>
<div class="qt-tx-line"></div>
<div class="qt-tx-line"><span class="qt-tx-token qt-tx-token_1">h1</span> {</div>
<div class="qt-tx-line"> <span class="qt-tx-token qt-tx-token_2">font-size:</span> <span class="qt-tx-token qt-tx-token_3">3em</span>;</div>
<div class="qt-tx-line">}</div>
</section>
</div>
<div class="qt-slide qt-slide_hidden qt-slide1">
<h3 class="qt-text-header">LiveStyle</h3>
<p><span class="qt-text">is a unique tool for live <em>bi-directional</em> stylesheet editing</span></p>
</div>
<div class="qt-slide qt-slide_hidden qt-slide2">
<span class="qt-text">LiveStyle integrates directly into web browser and code editor to bring you the best live edit experience.</span>
</div>
<div class="qt-slide qt-slide_hidden qt-slide3">
<span class="qt-text" id="qt-slide3-tx1">To start using LiveStyle, simply connect any CSS file from your web-page</span> <span class="qt-text" id="qt-slide3-tx2">with one of the opened stylesheet files in editor.</span>
</div>
<div class="qt-slide qt-slide_hidden qt-slide4">
<p><span class="qt-text" id="qt-slide4-tx1">Now all your editor changes are instantly pushed to browser.</span></p>
<p><span class="qt-text" id="qt-slide4-tx2">Without file saving or page reloading.</span></p>
<p style="margin-top: 1.5em;"><span class="qt-text" id="qt-slide4-tx3">And vice versa.</span></p>
</div>
<div class="qt-slide qt-slide_hidden qt-slide5">
<span class="qt-text" id="qt-slide5-tx1">You can connect two <em>completely different</em> stylesheets: LiveStyle transmits <em>updated properties only</em> and doesn’t overwrite entire file.</span>
</div>
<div class="qt-slide qt-slide_hidden qt-slide6">
<p><span class="qt-text" id="qt-slide6-tx1">Connecting browser and editor files gives you unmatched flexibility.</span></p>
<p><span class="qt-text" id="qt-slide6-tx2">You can use files from your hard drive, USB, FTP, network mount or even new, unsaved file.</span></p>
</div>
<div class="qt-slide qt-slide_hidden qt-slide7">
<p style="margin-bottom: 1.5em;"><span class="qt-text" id="qt-slide7-tx1">And you can even edit your <em>live web-site</em>.</span></p>
<p><span class="qt-text" id="qt-slide7-tx2">No special server setup required.</span></p>
</div>
<div class="qt-slide qt-slide_hidden qt-slide8">
<h3 class="qt-text-header">Remote View</h3>
</div>
<div class="qt-slide qt-slide_hidden qt-slide9">
<p><span class="qt-text" id="qt-slide9-tx1">Remote View creates a publicly available URL that points to your local web-site.</span></p>
<p><span class="qt-text" id="qt-slide9-tx2">Use this URL to preview local web-site on any internet-connected device or browser.</span></p>
</div>
<div class="qt-slide qt-slide_hidden qt-slide10">
<p><span class="qt-text" id="qt-slide10-tx1">With instant live updates from editor and DevTools.</span></p>
</div>
<div class="qt-slide qt-slide_hidden qt-slide11">
<p class="qt-download"><span class="qt-download__btn">Download now</span><br /><span class="qt-download__comment">It’s free!</span></p>
<span class="qt-play-again">Play again</span>
</div>
<div class="qt-devices">
<div class="qt-dev qt-dev-phone">
<div class="qt-dev-phone__screen">
<div class="qt-dev-sample">
<h5>Hello world!</h5>
<p>A web-page example</p>
</div>
</div>
<span class="qt-dev-label">Mobile phone</span>
</div>
<div class="qt-dev qt-dev-tablet">
<div class="qt-dev-tablet__screen">
<div class="qt-dev-sample">
<h5>Hello world!</h5>
<p>A web-page example</p>
</div>
</div>
<span class="qt-dev-label">Tablet</span>
</div>
<div class="qt-dev qt-dev-browser">
<div class="qt-dev-browser__tab"></div>
<div class="qt-dev-browser__address"></div>
<div class="qt-dev-browser__search"></div>
<div class="qt-dev-sample">
<h5>Hello world!</h5>
<p>A web-page example</p>
</div>
<span class="qt-dev-label">Another browser</span>
</div>
<div class="qt-dev qt-dev-vm">
<div class="qt-dev-vm__nav"></div>
<div class="qt-dev-vm__content">
<div class="qt-dev-sample">
<h5>Hello world!</h5>
<p>A web-page example</p>
</div>
</div>
<span class="qt-dev-label">Virtual machine</span>
</div>
</div>
</div>
</section>
<section class="debug-controls">
<button name="playback"></button>
<input type="range" name="progress" min="0" value="0" />
<input type="text" name="timecode" value="0" />
</section>
<script src="./js/quick-tour.js"></script>
<script src="./js/debug-controls.js"></script>
<script>
'use strict';
debugControls('.debug-controls', quickTour('.qt-screen'));
</script>
</body>
</html>