[chrome-ext/tabs-backup.git] / advanced.html

<!doctype html>
<html>
  <head>
    <title>Tabs Backup & Restore</title>
    <style>
		::-webkit-scrollbar {
		width: 10px;
	}

	::-webkit-scrollbar-track {
		background-color: #f4f4f4;
	}

	::-webkit-scrollbar-thumb {
		background-color: #b9b9b9;
	}

      body {
		font-family: Arial;

		overflow-x: hidden;
      }

	  #content {
		min-width:680px;
		max-width: 680px;
		margin: 0 auto;
		position: relative;
	  }

	  #contentWrapper {
		margin-left: -50px;
		margin-right: 50px;
	  }

	  a {
		cursor: hand;
		cursor: pointer;
	  }

      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }

	  .menuItem {
		position: relative;
		background: #edf6fd;
		padding: 20px;
		margin-top: 0px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 10px;
		color: black;
		display: block;
		cursor: hand;
		cursor: pointer;
	  }

	  .menuItem:hover {
		background: #d8edfc;
	  }

	  .backupItem {


	  }

	  .backupItemWrapper {
		padding: 4px 8px;
	  }

	  .backupItemContent {
		position: relative;
		padding: 8px;
		background: #f4f4f4;
		cursor: pointer;
	  }

	  .backupItemContent:hover {
		background: #e4e4e4;
	  }

	  .backupItemTitle {
		font-size: 14px;
		font-weight: bold;
	  }

	  .backupItemDetails {
		font-size: 12px;
		padding: 5px;
	  }

	  .backupItemDetailsNr {
		position: absolute;
		left: 100px;
	  }

	  .backupItemToolbar {
		position: absolute;
		display: block;
		right: 10px;
		top: 10px;
	  }

		.backupItemToolbar a {
			cursor: hand;
			cursor: pointer;
		}

	  .backupItemFooter {
		position: absolute;
		display: block;
		right: 10px;
		bottom: 10px;

		font-size: 10px;
	  }

	  .backupItemFooterAutoBackup {
		color: #23b827;
	  }

	  .backupItemFooterManualBackup {
		color: #d95843;
	  }

	  #backupsListTitle {
		position: relative;
		font-size: 15px;
		margin: 4px 10px;
		padding: 10px;
		padding-bottom: 0px;
		text-decoration:underline;
	  }

	  #storageDiv {
		margin-top: 4px;
		text-align: center;
		font-size: 10px;
		color: grey;
	  }

	  #showOlderBackupsDiv {
		text-align: center;
		margin-bottom: 10px;
	  }

	  .restoreDiv {
		position: relative;
		padding: 20px;
	  }

	  .restoreDivCollapseExpand {
		position: absolute;
		right: 26px;
		margin-top: -16px;
	  }

	  .restoreTabSpan {
		display: block;
		margin-left: 8px;
		overflow: hidden;
		max-height: 20px;
		position: absolute;
		top: 0px;
		left: 20px;
	  }

	  #floatingRightDiv {
		display: none;
		width: 150px;
		position: fixed;
		top: 50%;

		margin-top: -100px;
		margin-left: 700px;

		padding: 6px;
		border: 1px solid black;
		background-color: #F3F3F3;
	  }

	  #restoreSelectedDiv {
		float: right;
		padding: 10px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		background-color: #d8e8f0;
		cursor: pointer;
		margin-top: 10px;
	  }

	  #restoreSelectedDiv:hover {
		background-color: #b0d7eb;
	  }

	  #restoreSelectedInfoDiv {
		float: right;
	  }

	  #restoreSelectedRadio {
		float: right;
		font-size: 10px;
		margin-top: 10px;
	  }

	  .windowTitleDiv {
		padding: 10px;
		margin: 4px;
		background-color: #e0ebdb;
		cursor: pointer;
	  }

	  .windowTitleDiv:hover {
		background-color: #cce2c2;
	  }

	  .tabsDiv {
		margin-left: 20px;
	  }

	  #smallDescription {
		padding: 10px;
		font-size: 12px;
		color: grey;
	  }

	  .radioSpanLabel {
		cursor: default;
	  }
    </style>

	<style>
	label {
		display: inline;
	}

	.regular-checkbox {
		display: none;
	}

	.regular-checkbox + label {
		background-color: #fafafa;
		border: 1px solid #cacece;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
		padding: 9px;
		border-radius: 3px;
		display: inline-block;
		position: relative;
	}

	.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
	}

	.regular-checkbox:checked + label {
		background-color: #e9ecee;
		border: 1px solid #adb8c0;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
		color: #99a1a7;
	}

	.regular-checkbox:checked + label:after {
		content: '\2714';
		font-size: 14px;
		position: absolute;
		top: 0px;
		left: 3px;
		color: #99a1a7;
	}
	.labelCheckbox {
		margin: 0px;
		cursor: pointer;
	}
	</style>
	<style>
	.regular-radio {
	 display: none;
	}

	.regular-radio + label {
		-webkit-appearance: none;
		background-color: #fafafa;
		border: 1px solid #cacece;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
		padding: 7px;
		border-radius: 50px;
		display: inline-block;
		position: relative;
		margin-bottom: -3px;
	}

	.regular-radio:checked + label:after {
		content: ' ';
		width: 8px;
		height: 8px;
		border-radius: 50px;
		position: absolute;
		top: 3px;
		background: #99a1a7;
		box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
		text-shadow: 0px;
		left: 3px;
		font-size: 32px;
	}

	.regular-radio:checked + label {
		background-color: #e9ecee;
		color: #99a1a7;
		border: 1px solid #adb8c0;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
	}

	.regular-radio + label:active, .regular-radio:checked + label:active {
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
	}
	</style>

	<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script src="jquery-1.8.2.min.js"></script>
	<script src="bootstrap.min.js"></script>
	<script src="bootbox.min.js"></script>

	<style>
	.modal {
		width:300px;
		margin:-150px 0 0 -150px;
	}
	</style>
    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="advanced.js?v=201211062258"></script>

  </head>
  <body>
  <div id="content">
  <div id="contentWrapper">

  <!-- <button id="btnDoSomething">Do SOmething</button> -->
  <img src="icon.png" style="border: 0; padding: 10px;" /><b>Tabs Backup & Restore - Advanced</b>

  <a href="https://chrome.google.com/webstore/detail/tabs-backup-restore/dehocbglhkaogiljpihicakmlockmlgd/reviews" target="_blank" style="position: absolute; right: 54px; top: 12px;">Rate on the Chrome Store<img src="img/chrome-web-store.png" style="width: 24px;" /></a>

  <div id="smallDescription">
		With <i>Advanced Restore</i> you can restore a custom selection of your backups!<br />
		<ul style="margin-top: 5px">
		<li>Click on a Backup entry to expand it, and view all the windows that were backed up.</li>
		<li>Click on a Window entry to view all the tabs it contained.</li>
		<li>Select the checkboxes to make your selection.</li>
		<li>Press the "Restore Selected" button when you are ready to restore.</li>
		</ul>

	</div>

  <div id="backupsListTitle">
	Your Backups
  </div>
	<div id="backupsDiv"></div>

	<div id="showOlderBackupsDiv">
		<a id="menuItem_showOlderBackups">Show all backups..</a>
	</div>


	<div id="floatingRightDiv">
		<div>
			<a id="restoreSelectedClearSelectionLink" style="float: right; padding-bottom: 4px;">Clear selection</a>
		</div>

		<div id="restoreSelectedInfoDiv">
				Selected tabs: <span id="restoreSelectedInfoNumTabs" style="font-weight: bold;"></span>
			</div>

		<div id="restoreSelectedDiv">
			Restore selected <img src="icon_48.png" style="width: 26px;" />
		</div>
		<div id="restoreSelectedRadio">
			<input type="radio" id="restoreSelectedRadioSingleWindow" name="radio-1-set" class="regular-radio" checked />
			<label for="restoreSelectedRadioSingleWindow" title="Restore all selected tabs into a single window"></label>
			<span id="restoreSelectedRadioSingleWindowSpanLabel" class="radioSpanLabel" title="Restore all selected tabs into a single window"> Restore to a single window</span><br />

			<input type="radio" id="restoreSelectedRadioMultipleWindows" name="radio-1-set" class="regular-radio" />
			<label for="restoreSelectedRadioMultipleWindows" title="Restore selected tabs into their respective window"></label>
			<span id="restoreSelectedRadioMultipleWindowsSpanLabel" class="radioSpanLabel" title="Restore selected tabs into their respective window"> Restore to multiple windows</span>
		</div>
	</div>
	</div>
	</div>
  </body>
</html>
Commit	Line	Data
70c1267e MF	1	<!doctype html>
	2	<html>
	3	<head>
	4	<title>Tabs Backup & Restore</title>
	5	<style>
	6	::-webkit-scrollbar {
	7	width: 10px;
	8	}
	9
	10	::-webkit-scrollbar-track {
	11	background-color: #f4f4f4;
	12	}
	13
	14	::-webkit-scrollbar-thumb {
	15	background-color: #b9b9b9;
	16	}
	17
	18	body {
	19	font-family: Arial;
	20
	21	overflow-x: hidden;
	22	}
	23
	24	#content {
	25	min-width:680px;
	26	max-width: 680px;
	27	margin: 0 auto;
	28	position: relative;
	29	}
	30
	31	#contentWrapper {
	32	margin-left: -50px;
	33	margin-right: 50px;
	34	}
	35
	36	a {
	37	cursor: hand;
	38	cursor: pointer;
	39	}
	40
	41	img {
	42	margin:5px;
	43	border:2px solid black;
	44	vertical-align:middle;
	45	width:75px;
	46	height:75px;
	47	}
	48
	49	.menuItem {
	50	position: relative;
	51	background: #edf6fd;
	52	padding: 20px;
	53	margin-top: 0px;
	54	margin-left: 20px;
	55	margin-right: 20px;
	56	margin-bottom: 10px;
	57	color: black;
	58	display: block;
	59	cursor: hand;
	60	cursor: pointer;
	61	}
	62
	63	.menuItem:hover {
	64	background: #d8edfc;
65	}
66
67	.backupItem {
68
69
70	}
71
72	.backupItemWrapper {
73	padding: 4px 8px;
74	}
75
76	.backupItemContent {
77	position: relative;
78	padding: 8px;
79	background: #f4f4f4;
80	cursor: pointer;
81	}
82
83	.backupItemContent:hover {
84	background: #e4e4e4;
85	}
86
87	.backupItemTitle {
88	font-size: 14px;
89	font-weight: bold;
90	}
91
92	.backupItemDetails {
93	font-size: 12px;
94	padding: 5px;
95	}
96
97	.backupItemDetailsNr {
98	position: absolute;
99	left: 100px;
100	}
101
102	.backupItemToolbar {
103	position: absolute;
104	display: block;
105	right: 10px;
106	top: 10px;
107	}
108
109	.backupItemToolbar a {
110	cursor: hand;
111	cursor: pointer;
112	}
113
114	.backupItemFooter {
115	position: absolute;
116	display: block;
117	right: 10px;
118	bottom: 10px;
119
120	font-size: 10px;
121	}
122
123	.backupItemFooterAutoBackup {
124	color: #23b827;
125	}
126
127	.backupItemFooterManualBackup {
128	color: #d95843;
129	}
130
131	#backupsListTitle {
132	position: relative;
133	font-size: 15px;
134	margin: 4px 10px;
135	padding: 10px;
136	padding-bottom: 0px;
137	text-decoration:underline;
138	}
139
140	#storageDiv {
141	margin-top: 4px;
142	text-align: center;
143	font-size: 10px;
144	color: grey;
145	}
146
147	#showOlderBackupsDiv {
148	text-align: center;
149	margin-bottom: 10px;
150	}
151
152	.restoreDiv {
153	position: relative;
154	padding: 20px;
155	}
156
157	.restoreDivCollapseExpand {
158	position: absolute;
159	right: 26px;
160	margin-top: -16px;
161	}
162
163	.restoreTabSpan {
164	display: block;
165	margin-left: 8px;
166	overflow: hidden;
167	max-height: 20px;
168	position: absolute;
169	top: 0px;
170	left: 20px;
171	}
172
173	#floatingRightDiv {
174	display: none;
175	width: 150px;
176	position: fixed;
177	top: 50%;
178
179	margin-top: -100px;
180	margin-left: 700px;
181
182	padding: 6px;
183	border: 1px solid black;
184	background-color: #F3F3F3;
185	}
186
187	#restoreSelectedDiv {
188	float: right;
189	padding: 10px;
190	text-align: center;
191	font-size: 14px;
192	font-weight: bold;
193	background-color: #d8e8f0;
194	cursor: pointer;
195	margin-top: 10px;
196	}
197
198	#restoreSelectedDiv:hover {
199	background-color: #b0d7eb;
200	}
201
202	#restoreSelectedInfoDiv {
203	float: right;
204	}
205
206	#restoreSelectedRadio {
207	float: right;
208	font-size: 10px;
209	margin-top: 10px;
210	}
211
212	.windowTitleDiv {
213	padding: 10px;
214	margin: 4px;
215	background-color: #e0ebdb;
216	cursor: pointer;
217	}
218
219	.windowTitleDiv:hover {
220	background-color: #cce2c2;
221	}
222
223	.tabsDiv {
224	margin-left: 20px;
225	}
226
227	#smallDescription {
228	padding: 10px;
229	font-size: 12px;
230	color: grey;
231	}
232
233	.radioSpanLabel {
234	cursor: default;
235	}
236	</style>
237
238	<style>
239	label {
240	display: inline;
241	}
242
243	.regular-checkbox {
244	display: none;
245	}
246
247	.regular-checkbox + label {
248	background-color: #fafafa;
249	border: 1px solid #cacece;
250	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
251	padding: 9px;
252	border-radius: 3px;
253	display: inline-block;
254	position: relative;
255	}
256
257	.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
258	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
259	}
260
261	.regular-checkbox:checked + label {
262	background-color: #e9ecee;
263	border: 1px solid #adb8c0;
264	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
265	color: #99a1a7;
266	}
267
268	.regular-checkbox:checked + label:after {
269	content: '\2714';
270	font-size: 14px;
271	position: absolute;
272	top: 0px;
273	left: 3px;
274	color: #99a1a7;
275	}
276	.labelCheckbox {
277	margin: 0px;
278	cursor: pointer;
279	}
280	</style>
281	<style>
282	.regular-radio {
283	display: none;
284	}
285
286	.regular-radio + label {
287	-webkit-appearance: none;
288	background-color: #fafafa;
289	border: 1px solid #cacece;
290	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
291	padding: 7px;
292	border-radius: 50px;
293	display: inline-block;
294	position: relative;
295	margin-bottom: -3px;
296	}
297
298	.regular-radio:checked + label:after {
299	content: ' ';
300	width: 8px;
301	height: 8px;
302	border-radius: 50px;
303	position: absolute;
304	top: 3px;
305	background: #99a1a7;
306	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
307	text-shadow: 0px;
308	left: 3px;
309	font-size: 32px;
310	}
311
312	.regular-radio:checked + label {
313	background-color: #e9ecee;
314	color: #99a1a7;
315	border: 1px solid #adb8c0;
316	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
317	}
318
319	.regular-radio + label:active, .regular-radio:checked + label:active {
320	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
321	}
322	</style>
323
324	<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
325	<script src="jquery-1.8.2.min.js"></script>
326	<script src="bootstrap.min.js"></script>
327	<script src="bootbox.min.js"></script>
328
329	<style>
330	.modal {
331	width:300px;
332	margin:-150px 0 0 -150px;
333	}
334	</style>
335	<!-- JavaScript and HTML must be in separate files for security. -->
336	<script src="advanced.js?v=201211062258"></script>
337
338	</head>
339	<body>
340	<div id="content">
341	<div id="contentWrapper">
342
343	<!-- <button id="btnDoSomething">Do SOmething</button> -->
344	<img src="icon.png" style="border: 0; padding: 10px;" /><b>Tabs Backup & Restore - Advanced</b>
345
346	<a href="https://chrome.google.com/webstore/detail/tabs-backup-restore/dehocbglhkaogiljpihicakmlockmlgd/reviews" target="_blank" style="position: absolute; right: 54px; top: 12px;">Rate on the Chrome Store<img src="img/chrome-web-store.png" style="width: 24px;" /></a>
347
348	<div id="smallDescription">
349	With <i>Advanced Restore</i> you can restore a custom selection of your backups!<br />
350	<ul style="margin-top: 5px">
351	<li>Click on a Backup entry to expand it, and view all the windows that were backed up.</li>
352	<li>Click on a Window entry to view all the tabs it contained.</li>
353	<li>Select the checkboxes to make your selection.</li>
354	<li>Press the "Restore Selected" button when you are ready to restore.</li>
355	</ul>
356
357	</div>
358
359	<div id="backupsListTitle">
360	Your Backups
361	</div>
362	<div id="backupsDiv"></div>
363
364	<div id="showOlderBackupsDiv">
365	<a id="menuItem_showOlderBackups">Show all backups..</a>
366	</div>
367
368
369	<div id="floatingRightDiv">
370	<div>
371	<a id="restoreSelectedClearSelectionLink" style="float: right; padding-bottom: 4px;">Clear selection</a>
372	</div>
373
374	<div id="restoreSelectedInfoDiv">
375	Selected tabs: <span id="restoreSelectedInfoNumTabs" style="font-weight: bold;"></span>
376	</div>
377
378	<div id="restoreSelectedDiv">
379	Restore selected <img src="icon_48.png" style="width: 26px;" />
380	</div>
381	<div id="restoreSelectedRadio">
382	<input type="radio" id="restoreSelectedRadioSingleWindow" name="radio-1-set" class="regular-radio" checked />
383	<label for="restoreSelectedRadioSingleWindow" title="Restore all selected tabs into a single window"></label>
384	<span id="restoreSelectedRadioSingleWindowSpanLabel" class="radioSpanLabel" title="Restore all selected tabs into a single window"> Restore to a single window</span><br />
385
386	<input type="radio" id="restoreSelectedRadioMultipleWindows" name="radio-1-set" class="regular-radio" />
387	<label for="restoreSelectedRadioMultipleWindows" title="Restore selected tabs into their respective window"></label>
388	<span id="restoreSelectedRadioMultipleWindowsSpanLabel" class="radioSpanLabel" title="Restore selected tabs into their respective window"> Restore to multiple windows</span>
389	</div>
390	</div>
391	</div>
392	</div>
393	</body>
394	</html>