Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add build files #1

Closed
wants to merge 1 commit into from
Closed

feat: add build files #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app.bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions app.bundle.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added assets/img/color-pattern.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/feature-live-preview.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/llama.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/megaman.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added favicon.ico
View file
Open in desktop
Binary file not shown.
74 changes: 74 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<title>Piskel clone</title>
<link rel="shortcut icon" href="favicon.ico"></head>

<body style="background-color: #34495e">
<header class="header">
<h1 class="logo">Piskel clone</h1>
</header>
<main>
<section class="screenshot">
<div class="description">
<h2 class="description-caption">Piskel-clone is a clone of free online animated sprite editor.</h2>

<a href="piskel-clone-edit.html" class="link create-sprite">Create Sprite</a>
<a href="https://github.com/rolling-scopes-school/tasks/blob/2018-Q3/tasks/piskel-clone.md"
class="link task-link">Task link</a>
</div>
<img class="screnshot-img" src="./assets/img/screenshot.png" alt="screenshot piskel clone editor"
width="800px" height="485px">
</section>

<section class="wrapper">
<div class="example">
<h2>Exsample</h2>
<div class="example-preview">
<div>
<img class="example-img" src="./assets/img/megaman.gif" alt="megaman exsample" width="64px"
height="64px">
<img class="example-img" src="./assets/img/llama.gif" alt="megaman exsample" width="64px"
height="64px">
</div>
<div>
<img class="example-img" src="./assets/img/color-pattern.gif" alt="megaman exsample"
width="64px" height="64px">
<img class="example-img" src="./assets/img/feature-live-preview.gif" alt="megaman exsample"
width="64px" height="64px">
</div>
</div>
</div>
<div class="functionlity">
<h2>Implemented functionality</h2>
<ul class="functionality-list">
<li class="functionality-list-item"><span>Tools:</span> pen, eraser, color picker, vertical mirror,
rectangle, lighten</li>
<li class="functionality-list-item"><span>Preview:</span> Small animation preview and Full screen
mode</li>
<li class="functionality-list-item"><span>Frame management:</span> add, delete,
clone and reorder a frame via Drag and
Drop</li>
<li class="functionality-list-item"><span>Keyboard shortcuts</span> for tools and frame management
</li>
<li class="functionality-list-item"><span>Show cursor coordinates</span></li>
<li class="functionality-list-item"><span>Save user session in localstorage</span></li>
<li class="functionality-list-item"><span>Full compatibility with original export format
(.piskel)</span></li>
</ul>
</div>
</section>
<footer class="footer">
<a class="footer-link" href="https://github.com/Spinnen87"><span class="fab fa-github"></span> Maxim
Semikov</a>
</footer>
</main>
<script type="text/javascript" src="app.bundle.js"></script></body>

</html>
106 changes: 106 additions & 0 deletions piskel-clone-edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" />
<title>Piskel clone edit</title>
<link rel="shortcut icon" href="favicon.ico"></head>

<body>
<div class="wrapper-piskel-clon-edit">
<header class="header">
<h1 class="logo">Piskel clone</h1>
</header>
<main class="main">
<div class="toolbar">
<ul class="toolbar__item tools">
<li id="pen" class="tools__item fas fa-pen" data-tool="pen"></li>
<li id="pen" class="tools__item fas fa-eraser" data-tool="eraser"></li>
<li id="pen" class="tools__item fas fa-eye-dropper" data-tool="color-picker"></li>
<li id="pen" class="tools__item fas fa-grip-vertical" data-tool="vertical-mirror"></li>
<li id="pen" class="tools__item far fa-square" data-tool="rectangle"></li>
<li id="pen" class="tools__item fas fa-fill disable-tool" data-tool="paint-bucket"></li>
<li id="pen" class="tools__item fas fa-sun" data-tool="lighten"></li>

</ul>
<div class="toolbar__item color-palette">
<ul class="palette">
<li class="palette-color emerland"></li>
<li class="palette-color turquoise"></li>
<li class="palette-color peterriver"></li>
<li class="palette-color amethyst"></li>
<li class="palette-color sunflower"></li>
<li class="palette-color carrot"></li>
<li class="palette-color alizarin"></li>
<li class="palette-color clouds"></li>
<li class="palette-color wetasphalt"></li>
</ul>
<div class="cur-pev-color">
<div class="cur-pev-color__item current-color">
<input class="choose-color" type="color" name="color-input" id="color-input"
value="#1abc9c" />
<label for="color-input" class="hidden-on-small">Cur. color</label>
</div>
<div class="cur-pev-color__item prev-color hidden-on-small">
<div id="prev-color-mark" class="palette-color carrot"></div>
<p class="hidden-on-small">Prev color</p>
</div>
</div>
</div>
</div>
<div class="toolbar-layers">
<div class="layers">
<div class="canvas-background">
<div class="layers__item dragn-drop activ-layer" data-layer-num="0" draggable="true">
<span class="layer-control clone fas fa-clone"></span>
<span class="layer-control trash fas fa-trash-alt"></span>
</div>
</div>
</div>
<div class="layers__new">
<div class="fas fa-plus"></div>
<div>Add new frame</div>
</div>
</div>
<div class="canvas-wrapper">
<div class="canvas-background">
<canvas id="main-canvas" class="main-canvas" width="32px" height="32px"></canvas>
</div>
</div>
<div class="animated-preview">
<div class="fullScreen">
<div class="canvas-background">
<div class="animated-preview__canvas">
<span class="openFullScreen fas fa-compress"></span>
</div>

</div>
</div>
<input class="fps-range" type="range" min="1" max="24" value="12" step="1">
<div class="fps-label">12 fps</div>
<div class="save-piskel">
<a href="#" class="btn save-piskel-clone"><span class="far fa-save"></span>Save as .clpiskel</a>
<a href="#" class="btn save-piskel"><span class="far fa-save"></span>Save as .piskel</a>
</div>
<div class="canvas-info">
<div class="canvas-size">
[ 32 x 32 ]
</div>
<div class="canvas-current-position">
0:0
</div>

</div>
</div>

</main>
</div>

<script type="text/javascript" src="app.bundle.js"></script></body>

</html>