-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathwizard.html
123 lines (116 loc) · 5.81 KB
/
wizard.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
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="wizard.css">
<link href="lib/ion.rangeSlider-2.0.7/css/ion.rangeSlider.css" type="text/css" rel="stylesheet" />
<link href="lib/ion.rangeSlider-2.0.7/css/ion.rangeSlider.skinHTML5.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/ion.rangeSlider-2.0.7/js/vendor/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="modules/errorsProcessing.js"></script>
<script type="text/javascript" src="lib/ion.rangeSlider-2.0.7/js/ion-rangeSlider/ion.rangeSlider.min.js"></script>
<script type="text/javascript" src="lib/h2c.js"></script>
<title>Tab Suspender Wizard</title>
</head>
<body>
<div class='overlay'></div>
<div id="" class='atcs-site-dialog'>
<header class="dialog-header">
<h1><img style="padding-right: 10px; width: 16px; height: 16px;" src="img/icon16.png" />
<span id="wizardTitle">Welcome to Tab Suspender Wizard
<span style="font-size: 10px;">( step 1 of 3 )</span>
</span>
</h1>
</header>
<div class="dialog-content-main">
<div step="1" class="dialog-content active-step" style="padding-top: 34px !important;">
<p class="header" style="margin-bottom: 10px; font-size: 15px !important;">
<span style="color: #558eab;">Tab Suspender</span>
- allows you to not worry about the huge number of opened tabs and their memory!
</p>
<ul>
<li>
<p class="" style="margin-bottom: 5px">click <span
style="font-weight: bold;font-size: 11px; text-decoration: underline;">NEXT</span> to configure basic
settings.</p>
</li>
<li>
<p class="" style="">or <span
style="font-weight: bold;font-size: 11px; text-decoration: underline;">SKIP</span> to use predefined
configuration.</p>
</li>
</ul>
</div>
<div step="2" class="dialog-content" style="display: none;">
<p class="header" style="height: 40px; margin-top: 16px !important;">After what idle amount of time you want to
move each unused tab to sleep?</p>
<div style="padding-top:48px; width: 60%; margin: auto;">
<input type="hidden" id="timeoutInput" class="js-range-slider-suspend-timeout" value="900" />
</div>
</div>
<div step="3" class="dialog-content" style="display: none;">
<p class="header" style="margin-bottom: 0px; padding-top: 16px;">Do you want to allow Tab Suspender to look for most rarely used or
forgotten tabs and smoothly close them automatically?</p>
<p
style="font-size: 11px !important; margin-top: 11px; color: #aaa; font-weight: 100 !important; padding-left: 0px;">
Helps you not to think about closing
<a class="unused-tabs tooltip" href="" style="position: relative; font-weight: bold;">
unused tabs
<span id="tooltip-span"
style="display:none; /*position: absolute; */ left: -155px; top: 15px; width: 502px; height: 99px; /*background-image: radial-gradient(#fff 0%, #fff 60%, transparent 100%);*/">
<img src="/img/tabs-count-overhead.png"
style=" -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0% , rgba(0,0,0,1) 1% , rgba(0,0,0,1) 97%,transparent); height: 66px; position: absolute; left: 93px; top: 15px;" />
</span>
</a> manually.</p>
<p class="header">
<label><input type="radio" name="closeRadio" class="closeRadio no" value="no">No</label>
<label><input type="radio" name="closeRadio" class="closeRadio yes" value="yes">Yes</label>
</p>
<div class="">
</div>
<div class="close-sliders hidden">
<span style="height: 4px; display: block;"><!--Period of time after which unused tab will be automatically closed:--></span>
<div style=" width: 60%; margin: auto;" class="irs-greeen">
<input type="hidden" class="js-range-slider-recicle-after" value="1800" />
<input type="hidden" class="js-range-slider-recicle-keep" value="25" />
</div>
<span style="height: 0px; display: block;"><!--Select how many tabs will be keeped opened:--></span>
<div style="width: 69%; margin: auto;" class="irs-yellow">
</div>
</div>
</div>
<div step="4" class="dialog-content" style="display: none;">
<div style="float: left; width: 265px; padding-top: 5px; padding-right: 17px;">
<p class="header" style="margin-bottom: 14px; !important;">Complete!</p>
<p class="header" style="margin-bottom: 18px; !important;"> Tab Suspender, now, starts automatically suspend
first unused tabs after <span id="resultTimeoutValue"
style="text-decoration: underline; color: #48d648;">${}</span> from this moment.
</p>
<p style="margin-bottom: 10px">If you want to suspend tabs earlier, you can suspend any tab by click button as
shown on the video:</p>
</div>
<div style="float:left; width: 130px;">
<video id="tutorialVideo" loop="true" src="video/pinTsTutorial2.mp4" style="height: 326px"/>
</div>
<div>
<label class="tab-button-link"
style="float: right; color: #999; font-size: 11px; padding-left: 7px; font-family: Helvetica; margin-top: -3px; height: 0px;"
title="">
<input id="debugCheckbox" type="checkbox" name="vehicle"
style="margin-right: 0px; margin-left: 3px; vertical-align: sub;">
Help Tab Suspender improve quality and send error reports
</label>
</div>
</div>
</div>
<div class="btn-group cf">
<button class="atcsbtn active btn-cancel" id="defaultsButton">Skip / Use Defaults</button>
<button class="atcsbtn btn-cancel" id="previousButton">< Back</button>
<button class="atcsbtn active btn-danger" id="nextButton">Next ></button>
<button class="atcsbtn btn-danger" id="finishButton">Finish</button>
<button class="atcsbtn btn-danger" id="closeButton">Close</button>
</div>
</div>
<script src='wizard.js'></script>
<script type="text/javascript" src="inject.js"></script>
</body>
</html>