mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

export to file

Browse Source
This commit is contained in:
jdescottes 2014-07-13 00:46:14 +02:00
parent c9be4f9452
commit ef6d253896
11 changed files with 235 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

295
css/piskel-style-packaged-2014-07-12-09-26.css → css/piskel-style-packaged-2014-07-13-12-45.css
View File

@ -571,151 +571,7 @@ body {
border: gold 1px solid;
}
/************************************************************************************************/
/* Gif/Png Export panel */
/************************************************************************************************/
.gif-upload-button,
.gif-render-button {
margin-top : 10px;
margin-right : 10px;
}
.gif-export-radio-group {
margin:10px 0;
}
.gif-export-progress-status {
margin-left: 5px;
}
.gif-export-progress-bar {
margin-top:5px;
height:3px;
width: 0;
background:gold;
}
.png-export-preview {
margin:10px 0;
overflow: hidden;
}
.png-export-preview img {
float: left;
}
.png-upload-status {
margin : 10px 0;
}
.gif-upload-status,
.gif-export-preview {
float : left;
}
.gif-export-preview {
}
.gif-upload-status {
width: 180px;
margin-left: 5px;
margin-top: 10px;
}
.gif-export-preview,
.png-export-preview {
margin-top:10px;
position:relative;
}
.gif-export-preview,
.png-export-preview {
max-width:32px;
max-height:32px;
}
.png-export-preview {
max-width:240px;
}
.preview-upload-ongoing:before{
content: "Upload ongoing ...";
position: absolute;
display: block;
height: 100%;
width: 100%;
text-align: center;
padding-top: 45%;
box-sizing:border-box;
-moz-box-sizing:border-box;
background: rgba(0,0,0,0.5);
color: white;
}
/************************************************************************************************/
/* Import panel */
/************************************************************************************************/
.import-section,
.resize-section {
margin: 10px 0;
}
.import-section-title {
display : inline-block;
}
.import-section-title-small {
width: 55px;
}
.import-section-disabled {
color : #888;
}
.import-section-preview {
display : inline-block;
height : 60px;
width: 60px;
border : 1px dashed #999;
border-radius: 3px;
}
.import-size-field,
.resize-size-field {
width: 50px;
margin-right: 8px;
text-align: right;
}
.import-size-field:nth-of-type(2),
.resize-size-field:nth-of-type(2) {
margin-left: 5px;
}
.file-input-button {
margin-right: 8px;
border-radius: 2px;
}
.import-image-file-name {
display: inline-block;
overflow: hidden;
height: 2rem;
word-break : break-all;
vertical-align: middle;
font-style: italic;
font-weight: normal;
text-shadow: none;
}
[name=smooth-resize-checkbox] {
margin : 0 8px;
}
/************************************************************************************************/
/* Save panel */
@ -739,6 +595,89 @@ body {
color: white;
font-style: normal;
}
/*******************************/
/* Gif/Png Export Setting panel*/
/*******************************/
.gif-download-button,
.gif-render-button {
margin-top : 10px;
margin-right : 10px;
}
.gif-export-preview,
.png-export-preview {
position:relative;
margin-top:10px;
max-height:32px;
}
.gif-export-preview {
max-width:32px;
}
.png-export-preview {
margin:10px 0;
overflow: hidden;
}
.png-export-preview img {
float: left;
}
.gif-upload-status {
width: 180px;
margin-left: 5px;
margin-top: 10px;
}
.gif-upload-status,
.gif-export-preview {
float : left;
}
.preview-upload-ongoing:before{
content: "Upload ongoing ...";
position: absolute;
display: block;
height: 100%;
width: 100%;
text-align: center;
padding-top: 45%;
box-sizing:border-box;
-moz-box-sizing:border-box;
background: rgba(0,0,0,0.5);
color: white;
}
.gif-export-progress-status {
margin-left: 5px;
}
.gif-export-progress-bar {
margin-top:5px;
height:3px;
width: 0;
background:gold;
}
/************************************************************************************************/
/* Import panel */
/************************************************************************************************/
.import-section,
.resize-section {
margin: 10px 0;
}
.file-input-button {
margin-right: 8px;
border-radius: 2px;
}
.import-highlight {
font-weight: bold;
color: white;
}
.tools-wrapper,
.options-wrapper,
@ -1225,6 +1164,61 @@ body {
cursor: pointer;
}
/************************************************************************************************/
/* Import dialog */
/************************************************************************************************/
.import-section-preview {
display : inline-block;
height : 60px;
width: 60px;
border : 1px dashed #999;
border-radius: 3px;
}
.dialog-section-title {
display : inline-block;
width: 55px;
}
.import-size-field,
.resize-size-field {
width: 50px;
margin-right: 8px;
text-align: right;
}
.import-size-field:nth-of-type(2),
.resize-size-field:nth-of-type(2) {
margin-left: 5px;
}
.import-image-file-name {
display: inline-block;
overflow: hidden;
height: 2rem;
word-break : break-all;
vertical-align: middle;
font-style: italic;
font-weight: normal;
text-shadow: none;
}
[name=smooth-resize-checkbox] {
margin : 0 8px;
}
.dialog-import-body {
padding:10px 20px;
font-size:1.5em
}
.import-button {
font-size: 1em;
height: auto;
padding: 5px 10px;
}
.palette-manager-wrapper {
height: 100%;
position: relative;
@ -1452,7 +1446,7 @@ body {
/* Browse local piskels panel */
/************************************************************************************************/
.local-piskels-list {
.local-piskel-list {
width: 100%;
}
@ -1468,12 +1462,19 @@ body {
font-weight : normal;
}
.local-piskels-list a {
.local-piskel-list a {
text-decoration: none;
}
.local-piskels-list a:hover {
.local-piskel-list a:hover {
text-decoration: underline;
}
.local-piskel-list-head {
font-weight: bold;
color: gold;
}
.local-piskel-load-button,
.local-piskel-delete-button {
width : 75px;

3
index.html
View File

@ -54,11 +54,10 @@
<iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container">
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/export.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>

209
js/piskel-packaged-2014-07-12-09-26.js → js/piskel-packaged-2014-07-13-12-45.js
View File

@ -17786,10 +17786,13 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
};
/**
* @private
* Translate absolute x,y screen coordinates into sprite coordinates
* @param {Number} screenX
* @param {Number} screenY
* @return {Object} {x:Number, y:Number}
*/
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
return this.renderer.getCoordinates(event.clientX, event.clientY);
ns.DrawingController.prototype.getSpriteCoordinates = function(screenX, screenY) {
return this.renderer.getCoordinates(screenX, screenY);
};
ns.DrawingController.prototype.setCurrentButton = function (event) {
@ -19104,6 +19107,19 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
})();;(function () {
var ns = $.namespace("pskl.controller.settings");
ns.ImageExportController = function (piskelController) {
this.piskelController = piskelController;
this.pngExportController = new ns.PngExportController(piskelController);
this.gifExportController = new ns.GifExportController(piskelController);
};
ns.ImageExportController.prototype.init = function () {
this.pngExportController.init();
this.gifExportController.init();
};
})();;(function () {
var ns = $.namespace("pskl.controller.settings");
var URL_MAX_LENGTH = 30;
var MAX_GIF_COLORS = 256;
@ -19295,8 +19311,6 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
document.querySelector(".zip-generate-button").addEventListener('click', this.onZipButtonClick_.bind(this));
this.updatePreview_(this.getFramesheetAsCanvas().toDataURL("image/png"));
(new ns.GifExportController(this.piskelController)).init();
};
ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
@ -19367,106 +19381,6 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
}
return url;
};
})();;(function () {
var ns = $.namespace("pskl.controller.settings");
ns.LocalStorageController = function () {};
/**
* @public
*/
ns.LocalStorageController.prototype.init = function() {
this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
this.previousSessionTemplate_ = pskl.utils.Template.get("previous-session-info-template");
this.service_ = pskl.app.localStorageService;
this.piskelsList = $('.local-piskels-list');
this.prevSessionContainer = $('.previous-session');
this.fillRestoreSession_();
this.fillLocalPiskelsList_();
this.piskelsList.click(this.onPiskelsListClick_.bind(this));
};
ns.LocalStorageController.prototype.onPiskelsListClick_ = function (evt) {
var action = evt.target.getAttribute('data-action');
var name = evt.target.getAttribute('data-name');
if (action === 'load') {
if (window.confirm('This will erase your current piskel. Continue ?')) {
this.service_.load(name);
$.publish(Events.CLOSE_SETTINGS_DRAWER);
}
} else if (action === 'delete') {
if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) {
this.service_.remove(name);
this.fillLocalPiskelsList_();
}
}
};
ns.LocalStorageController.prototype.fillRestoreSession_ = function () {
var previousInfo = pskl.app.backupService.getPreviousPiskelInfo();
if (previousInfo) {
var info = {
name : previousInfo.name,
date : this.formatDate_(previousInfo.date, "{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}")
};
this.prevSessionContainer.html(pskl.utils.Template.replace(this.previousSessionTemplate_, info));
$(".restore-session-button").click(this.onRestorePreviousSessionClick_.bind(this));
} else {
this.prevSessionContainer.html("No piskel backup was found on this browser.");
}
};
ns.LocalStorageController.prototype.onRestorePreviousSessionClick_ = function () {
if (window.confirm('This will erase your current workspace. Continue ?')) {
pskl.app.backupService.load();
$.publish(Events.CLOSE_SETTINGS_DRAWER);
}
};
var pad = function (num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
};
ns.LocalStorageController.prototype.formatDate_ = function (date, format) {
date = new Date(date);
var formattedDate = pskl.utils.Template.replace(format, {
Y : date.getFullYear(),
M : pad(date.getMonth() + 1),
D : pad(date.getDate()),
H : pad(date.getHours()),
m : pad(date.getMinutes())
});
return formattedDate;
};
ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () {
var html = "";
var keys = this.service_.getKeys();
keys.sort(function (k1, k2) {
if (k1.date < k2.date) {return 1;}
if (k1.date > k2.date) {return -1;}
return 0;
});
keys.forEach((function (key) {
var date = this.formatDate_(key.date, "{{Y}}/{{M}}/{{D}} {{H}}:{{m}}");
html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
}).bind(this));
var tableBody_ = this.piskelsList.get(0).tBodies[0];
tableBody_.innerHTML = html;
};
})();;(function () {
var ns = $.namespace('pskl.controller.settings');
@ -19556,10 +19470,14 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
this.piskelController.getPiskel().setDescriptor(descriptor);
this.beforeSaving_();
this.saveOnlineButton.attr('disabled', true);
this.saveOnlineStatus.html('Saving ...');
pskl.app.storageService.store({
success : this.onSaveSuccess_.bind(this),
error : this.onSaveError_.bind(this),
after : this.afterSaving_.bind(this)
after : this.afterOnlineSaving_.bind(this)
});
}
};
@ -19603,9 +19521,6 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
ns.SaveController.prototype.beforeSaving_ = function () {
this.updatePiskelDescriptor_();
this.saveOnlineButton.attr('disabled', true);
this.saveOnlineStatus.html('Saving ...');
if (this.piskelName) {
this.piskelName.classList.add('piskel-name-saving');
}
@ -19630,10 +19545,13 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]);
};
ns.SaveController.prototype.afterSaving_ = function () {
ns.SaveController.prototype.afterOnlineSaving_ = function () {
this.saveOnlineButton.attr('disabled', false);
this.saveOnlineStatus.html('');
this.afterSaving_();
};
ns.SaveController.prototype.afterSaving_ = function () {
if (this.piskelName) {
this.piskelName.classList.remove('piskel-name-saving');
}
@ -19774,9 +19692,9 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
template : 'templates/settings/resize.html',
controller : ns.ResizeController
},
'png' : {
'export' : {
template : 'templates/settings/export.html',
controller : ns.PngExportController
controller : ns.ImageExportController
},
'import' : {
template : 'templates/settings/import.html',
@ -20424,12 +20342,12 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
this.service_ = pskl.app.localStorageService;
this.piskelsList = $('.local-piskels-list');
this.piskelList = $('.local-piskel-list');
this.prevSessionContainer = $('.previous-session');
this.fillLocalPiskelsList_();
this.piskelsList.click(this.onPiskelsListClick_.bind(this));
this.piskelList.click(this.onPiskelsListClick_.bind(this));
};
ns.BrowseLocalController.prototype.onPiskelsListClick_ = function (evt) {
@ -20463,7 +20381,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
}).bind(this));
var tableBody_ = this.piskelsList.get(0).tBodies[0];
var tableBody_ = this.piskelList.get(0).tBodies[0];
tableBody_.innerHTML = html;
};
})();;(function () {
@ -21350,6 +21268,7 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
ns.FileDropperService = function (piskelController, drawingAreaContainer) {
this.piskelController = piskelController;
this.drawingAreaContainer = drawingAreaContainer;
this.dropPosition_ = null;
};
ns.FileDropperService.prototype.init = function () {
@ -21367,11 +21286,12 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
event.preventDefault();
event.stopPropagation();
// FIXME : Ahah this is horrible
this.coords_ = pskl.app.drawingController.getSpriteCoordinates(event);
this.dropPosition_ = {
x : event.clientX,
y : event.clientY
};
var files = event.dataTransfer.files;
for (var i = 0; i < files.length ; i++) {
var file = files[i];
var isImage = file.type.indexOf('image') === 0;
@ -21402,23 +21322,13 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
};
ns.FileDropperService.prototype.onImageLoaded_ = function () {
var frame = pskl.utils.FrameUtils.createFromImage(this.importedImage_);
var droppedFrame = pskl.utils.FrameUtils.createFromImage(this.importedImage_);
var currentFrame = this.piskelController.getCurrentFrame();
var xCoord = this.coords_.x - Math.floor(frame.width/2);
var yCoord = this.coords_.y - Math.floor(frame.height/2);
xCoord = Math.max(0, xCoord);
yCoord = Math.max(0, yCoord);
var dropCoordinates = this.adjustDropPosition_(this.dropPosition_, droppedFrame);
if (frame.width <= currentFrame.width) {
xCoord = Math.min(xCoord, currentFrame.width - frame.width);
}
if (frame.height <= currentFrame.height) {
yCoord = Math.min(yCoord, currentFrame.height - frame.height);
}
currentFrame.forEachPixel(function (color, x, y) {
var fColor = frame.getPixel(x-xCoord, y-yCoord);
var fColor = droppedFrame.getPixel(x-dropCoordinates.x, y-dropCoordinates.y);
if (fColor && fColor != Constants.TRANSPARENT_COLOR) {
currentFrame.setPixel(x, y, fColor);
}
@ -21430,6 +21340,30 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
});
};
ns.FileDropperService.prototype.adjustDropPosition_ = function (position, droppedFrame) {
var framePosition = pskl.app.drawingController.getSpriteCoordinates(position.x, position.y);
var xCoord = framePosition.x - Math.floor(droppedFrame.width/2);
var yCoord = framePosition.y - Math.floor(droppedFrame.height/2);
xCoord = Math.max(0, xCoord);
yCoord = Math.max(0, yCoord);
var currentFrame = this.piskelController.getCurrentFrame();
if (droppedFrame.width <= currentFrame.width) {
xCoord = Math.min(xCoord, currentFrame.width - droppedFrame.width);
}
if (droppedFrame.height <= currentFrame.height) {
yCoord = Math.min(yCoord, currentFrame.height - droppedFrame.height);
}
return {
x : xCoord,
y : yCoord
};
};
})();;/**
* @provide pskl.drawingtools.BaseTool
*
@ -22049,19 +21983,6 @@ zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, replayData.col, replayData.row, replayData.color);
};
})();
;/**
* @provide pskl.drawingtools.Rectangle
*

10
js/piskel-packaged-min-2014-07-12-09-26.js → js/piskel-packaged-min-2014-07-13-12-45.js
View File

File diff suppressed because one or more lines are too long

10
js/piskel-packaged-min.js vendored
View File

File diff suppressed because one or more lines are too long

2
piskel-boot-0.1.0.js
View File

@ -1,6 +1,6 @@
(function () {
var version = '-2014-07-12-09-26';
var version = '-2014-07-13-12-45';
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced) {
version = '';

3
templates/dialogs/browse-local.html
View File

@ -4,13 +4,12 @@
<span class="palette-manager-close dialog-close">X</span>
</h3>
<div style="padding:10px 20px; font-size:1.5em">
<table class="local-piskels-list">
<table class="local-piskel-list">
<thead>
<tr class="local-piskel-list-head">
<td class="local-piskel-name">Name</td>
<td class="local-piskel-save-date">Date</td>
<td colspan=2>Actions</td>
</tr>
</thead>
<tbody></tbody>

8
templates/dialogs/import-image.html
View File

@ -3,17 +3,17 @@
Import Image
<span class="palette-manager-close dialog-close">X</span>
</h3>
<div class="import-options" style="padding:10px 20px; font-size:1.5em">
<div class="dialog-import-body">
<form action="" method="POST" name="import-image-form">
<div class="import-section">
<span class="import-section-title import-section-title-small">Name :</span><span class="import-image-file-name"></span>
<span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
</div>
<div class="import-section">
<span class="import-section-title import-section-title-small" style="vertical-align:top">Info :</span>
<span class="dialog-section-title" style="vertical-align:top">Info :</span>
<div class="import-section-preview"></div>
</div>
<div class="import-section">
<span class="import-section-title import-section-title-small">Size :</span>
<span class="dialog-section-title">Size :</span>
<input type="text" class="textfield import-size-field" name="resize-width"/>x
<input type="text" class="textfield import-size-field" name="resize-height"/>
</div>

16
templates/settings.html
View File

@ -23,7 +23,7 @@
</div>
<div
data-setting="png"
data-setting="export"
class="tool-icon export-icon"
title="Export as Image, as Spritesheet<br/>or as Animated GIF"
rel="tooltip" data-placement="left">
@ -35,19 +35,5 @@
title="Import an existing image,<br/>an animated GIF or a .piskel file"
rel="tooltip" data-placement="left">
</div>
<!--
<div
data-setting="localstorage"
class="tool-icon local-storage-icon"
title="Browse piskels saved locally"
rel="tooltip" data-placement="left">
</div> -->
<!-- <div
data-setting="gif"
class="tool-icon upload-cloud-icon"
title="Export Animation"
rel="tooltip" data-placement="left">
<span class="label">ANIM</span>
</div> -->
</div>

8
templates/settings/import.html
View File

@ -3,7 +3,7 @@
Load from Browser
</div>
<div class="settings-item">
<span>Load a <span style="font-weight:bold;color:white">local piskel</span> saved in this Browser</span>
<span>Load a <span class="import-highlight">local piskel</span> saved in this Browser</span>
<div class="import-section">
<button type="button" class="button button-primary browse-local-button">Browse local saves</button>
</div>
@ -12,7 +12,7 @@
Load .piskel file
</div>
<div class="settings-item">
<span>Load a <span style="font-weight:bold;color:white">.piskel</span> file from your computer</span>
<span>Load a <span class="import-highlight">.piskel</span> file from your computer</span>
<div class="import-section">
<button type="button" class="button button-primary open-piskel-button">Browse .piskel files</button>
@ -26,7 +26,7 @@
Import From Picture
</div>
<div class="settings-item">
<div style="margin-top:5px;margin-bottom:5px;">Supports : <span style="font-weight:bold;color:white">PNG, JPG, BMP, Animated GIF ...</span></div>
<div style="margin-top:5px;margin-bottom:5px;">Supports : <span class="import-highlight">PNG, JPG, BMP, Animated GIF ...</span></div>
<div class="import-section">
<button type="button" class="button button-primary file-input-button">Browse images</button>
<input style="display:none"
@ -38,7 +38,7 @@
Recover recent sessions
</div>
<div class="settings-item previous-session">
<!-- <span>Load a <span style="font-weight:bold;color:white">backup</span> from a recent session</span>
<!-- <span>Load a <span class="import-highlight">backup</span> from a recent session</span>
<div class="import-section">
<button type="button" class="button button-primary load-recent-button">Browse recent sessions</button>
</div> -->

31
templates/settings/localstorage.html
View File

@ -1,31 +0,0 @@
<div class="settings-section">
<div class="settings-title">
Restore previous session
</div>
<div class="settings-item previous-session">
</div>
<div class="settings-title">
Browse Local Piskels
</div>
<div class="settings-item">
<table class="local-piskels-list">
<tbody></tbody>
</table>
</div>
<script type="text/template" id="local-storage-item-template">
<tr class="local-piskel-item">
<td class="local-piskel-name">{{name}}</td>
<td class="local-piskel-save-date">{{date}}</td>
<td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
<td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
</tr>
</script>
<script type="text/template" id="previous-session-info-template">
<div>
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
<div style="margin-top:10px;">
<button type="button" class="button button-primary restore-session-button">Restore</button>
</div>
</div>
</script>
</div>