mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
d7044dc44d
Partial cleanup of piskel: new events and constant move palette and color picker in ToolSelector create Notifcation.js and move user message in it create LocalStorageService and move LS stuff in it
93 lines
3.1 KiB
HTML
93 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
<title>Piskel</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Julian Descottes">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div class='debug left-nav'>
|
|
|
|
<!-- Frame actions: -->
|
|
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
|
|
<button id='add-frame-button' class="action-button">
|
|
Add a Frame
|
|
</button>
|
|
|
|
<!-- List of frames: -->
|
|
<ul id="preview-list"></ul>
|
|
</div>
|
|
<div class='main-panel'>
|
|
|
|
<!-- Drawing area: -->
|
|
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
|
<div class="canvas-background"></div>
|
|
</div>
|
|
|
|
<!-- Tool section: -->
|
|
<div id="tools-container" class="tools-container">
|
|
<div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>
|
|
<div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>
|
|
<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
|
|
<div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
|
|
<div class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></div>
|
|
|
|
<div class="color-tool">
|
|
<input id="color-picker" class="color {hash:true}" type="text" value=""/>
|
|
|
|
<ul id="palette" class="palette">
|
|
<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animation preview: -->
|
|
<div class='preview-container'>
|
|
<div id='preview-canvas-container' class="canvas-container">
|
|
<div class="canvas-background"></div>
|
|
</div>
|
|
<div>
|
|
<input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
|
|
<span id="display-fps">12 fps</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="cursorInfo"></div>
|
|
|
|
<!-- Core libraries: -->
|
|
<script src="js/lib/jquery-1.8.0.js"></script>
|
|
<script src="js/lib/pubsub.js"></script>
|
|
|
|
<!-- Application wide configuration -->
|
|
<script src="js/Constants.js"></script>
|
|
<script src="js/Events.js"></script>
|
|
|
|
<!-- Libraries -->
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
|
|
|
|
<!-- Application libraries-->
|
|
<script src="js/FrameSheetModel.js"></script>
|
|
<script src="js/LocalStorageService.js"></script>
|
|
<script src="js/Notification.js"></script>
|
|
<script src="js/drawingtools/BaseTool.js"></script>
|
|
<script src="js/drawingtools/SimplePen.js"></script>
|
|
<script src="js/drawingtools/Eraser.js"></script>
|
|
<script src="js/drawingtools/Stroke.js"></script>
|
|
<script src="js/drawingtools/PaintBucket.js"></script>
|
|
<script src="js/drawingtools/Rectangle.js"></script>
|
|
<script src="js/ToolSelector.js"></script>
|
|
|
|
<!-- Application controller and initialization -->
|
|
<script src="js/piskel.js"></script>
|
|
</body>
|
|
</html>
|