-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtutorial.html
126 lines (120 loc) · 7.03 KB
/
tutorial.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
<!-- Copyright (C) 2014 Joseph DeBono
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
<meta name="twitter:widgets:csp" content="on">
<title>Welcome to Music Bubbles!</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:300,300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Flamenco' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="assets/tutorial.css">
</head>
<body>
<div id="tut-container">
<div id="background-container">
<span class="step-background step1"></span>
<span class="step-background step2"></span>
<span class="step-background step3"></span>
<span class="step-background step4"></span>
<span class="step-background step5"></span>
</div>
<div id="bubble-highlight"></div>
<div id="tut-step-1" class="text-content">
<h1>This is your Music Bubble</h1>
<p>This bubble will reside on every page you visit, providing handy access to common controls for Google Music.</p>
<p>When it's grey it's not connected to Google Music. In another tab, open Google Music, or refresh the page if it's already running. Start playing some music then come back here for the rest of the tutorial.</p>
<p class="action orange">Open a new tab with Google Music by double clicking on the Bubble when it's grey! Try it!</p>
</div>
<div id="tut-step-2" class="text-content">
<h1>Connected</h1>
<p>When the bubble is orange you are connected to Google Music and in control of the player.</p>
<p class="action orange">Move your mouse over the bubble to expand the controls.</p>
</div>
<div id="tut-step-3" class="text-content">
<h1>Control</h1>
<p>Press the buttons to control Google Music. Click around. Make sure you see what everything does.</p>
<ul>
<li>
<span class="list-icon">
<svg height="20px" viewBox="0 0 24 24">
<path fill="#757575" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M9,16A2,2 0 0,0 7,18A2,2 0 0,0 9,20A2,2 0 0,0 11,18V13H14V11H10V16.27C9.71,16.1 9.36,16 9,16Z" />
</svg>
</span>
Hovering over the bubbles will show the song title.</li>
<li>
<span class="list-icon">
<svg height="20px" viewBox="0 0 24 24">
<path fill="#757575" d="M22.5,10.5H15.75C15.13,10.5 14.6,10.88 14.37,11.41L12.11,16.7C12.04,16.87 12,17.06 12,17.25V18.5A1,1 0 0,0 13,19.5H18.18L17.5,22.68V22.92C17.5,23.23 17.63,23.5 17.83,23.72L18.62,24.5L23.56,19.56C23.83,19.29 24,18.91 24,18.5V12A1.5,1.5 0 0,0 22.5,10.5M12,6.5A1,1 0 0,0 11,5.5H5.82L6.5,2.32V2.09C6.5,1.78 6.37,1.5 6.17,1.29L5.38,0.5L0.44,5.44C0.17,5.71 0,6.09 0,6.5V13A1.5,1.5 0 0,0 1.5,14.5H8.25C8.87,14.5 9.4,14.12 9.63,13.59L11.89,8.3C11.96,8.13 12,7.94 12,7.75V6.5Z" />
</svg>
</span>
You can even rate the song with the click of a button. Handy!</li>
<li>
<span class="list-icon">
<svg height="20px" viewBox="0 0 24 24">
<path fill="#757575" d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z" />
</svg>
</span>
Double clicking the main button will activate the Google Music tab for full control.</li>
<li>
<span class="list-icon">
<svg height="20px" viewBox="0 0 24 24">
<path fill="#757575" d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
</svg>
</span>
Use your mouse wheel to scroll up and down and adjust the volume.
</li>
</ul>
<p></p>
<p class="action blue">Try doing a long click over the main bubble. About half a second should do it.</p>
<p class="tip">Tip: You can use the browser back button to bo back in the tutorial if you need to.</p>
</div>
<div id="tut-step-4" class="text-content">
<h1>Customize</h1>
<span class="w50">
<div class="gm-bubble-button gm-bubble hide">
<svg viewBox="0 0 24 24" height="16">
<path fill="#ffffff" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
</svg>
</div>
Is the bubble in the way of what you're trying to do? Click this button to temporarily hide the bubble. It will show up next time you refresh the page.
</span>
<span class="w50">
<div class="gm-bubble-button gm-bubble blacklist">
<svg height="16" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" stroke-width="3" stroke="#ffffff"></path>
</g></svg>
</div>
If you want to stop the bubble from showing up on certain sites press the blacklist button in the bottom right of the main bubble. <br/> <br/> You can remove them later from the options page.
</span>
<div class="move-hint">
<span class="move-icon">
<svg height="20px" viewBox="0 0 24 24">
<path fill="#757575" d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" />
</svg>
</span>
<p class="move-text">
You can put the bubble wherever you want! Click on the main bubble and drag it it around to wherever you want it.
</p>
<p class="action red">Try moving it to the bottom right corner.</p>
</div>
</div>
<div id="tut-step-5" class="text-content">
<h1>Done!</h1>
<p>The bubble will now be there while you're browsing. Of course, you can move the bubble around any time.</p>
<p class="action green">Thats it! Enjoy Music Bubbles.</p>
<p class="tip">Opened tabs will need to be refreshed before the bubble shows up.</p>
</div>
</div>
<script type="text/javascript" src="assets/content_script.js"></script>
<script type="text/javascript" src="assets/tutorial.js"></script>
</body>
</html>