# App
Remote
Editor
Test
Render
# Usage
## HTML
```html
<textarea documenter-slide>
[SECTIONS...]
</textarea>
```
```
<script src="//apps.asenax.com/documenter/documenter.js?disable-html=true"></script>
<script src="https://slide.asenax.com/app/export.js.php"></script>
<textarea documenter-slide>
<section id="Home" style="--x: 0; --y: 0; --w: 18; --h: 10;" class="slide" animotor-container=""><div item="text" class="horizontal-center vertical-center frontlight" style="--w: 14; --h: 1; --x: 2; --y: 4;" animotor="fade-in-bottom" y-axis="center" x-axis="center"><h1>Hello World</h1></div><div item="text" class="horizontal-center vertical-center" style="--w: 16; --h: 1; --x: 1; --y: 5;" animotor="fade-in-bottom" y-axis="center" x-axis="center">This is an example for SlideEditor</div></section>
<section id="Text&Image" style="--x: 0; --y: 11; --w: 18; --h: 10;" class="slide" animotor-container=""><img draggable="false" item="image" class="horizontal-center vertical-center" style="--x: 9; --y: 1; --w: 8; --h: 8; --natural-width: 24; --natural-height: 24; --natural-ratio: 1;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjODg4IiBkPSJNMTQgOWwtMi41MTkgNC0yLjQ4MS0xLjk2LTUgNi45NmgxNmwtNi05em04LTV2MTZoLTIwdi0xNmgyMHptMi0yaC0yNHYyMGgyNHYtMjB6bS0yMCA2YzAtMS4xMDQuODk2LTIgMi0yczIgLjg5NiAyIDJjMCAxLjEwNS0uODk2IDItMiAycy0yLS44OTUtMi0yeiIvPjwvc3ZnPg==" animotor="fade-in-bottom"><div item="text" class="horizontal-center vertical-center" style="--x: 1; --y: 2; --w: 7; --h: 1;" animotor="fade-in-bottom"><h1>Title</h1></div><div item="text" class="vertical-center" style="--x: 1; --y: 3; --w: 7; --h: 3;" animotor="fade-in-bottom"><div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus odio eget nunc pellentesque commodo.</span></div></div><a item="button" button="" class="horizontal-center vertical-center primary" href="#" target="_blank" style="--x: 3; --y: 6; --w: 3; --h: 1;" animotor="fade-in-bottom" y-axis="center" x-axis="center">connect</a></section>
<section id="Text&Video" style="--x: 0; --y: 22; --w: 18; --h: 10;" class="slide" animotor-container=""><video draggable="false" autoplay="" loop="" muted="" item="video" style="--x: 9; --y: 2; --w: 8; --h: 6; --natural-width: 1920; --natural-height: 976; --natural-ratio: 1.9672131147540983;" src="https://hasandelibas.asenax.com/uploads/5b7d3c7c6ce6577136531a4fc501a557.webm" animotor="fade-in-bottom" animotor-duration="400" animotor-delay="200"></video><div item="text" class="" style="--x: 1; --y: 3; --w: 7; --h: 1;" animotor="fade-in-bottom" animotor-duration="400" animotor-delay="200"><h1>Title</h1></div><div item="text" class="" style="--x: 1; --y: 4; --w: 7; --h: 3;" animotor="fade-in-bottom" animotor-duration="400" animotor-delay="200" x-axis="justify"><div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus odio eget nunc pellentesque commodo.</span></div></div></section>
</textarea>
<style>
iframe[documenter-slide]{
width:100%;
height:100%;
border:none;
}
</style>
```
## JS
```js
documenter.SlideEditor(textarea)
```
```
<meta charset="utf8">
<script src="https://slide.asenax.com/app/export.js.php"></script>
<textarea>
<section id="Home" style="--x: 0; --y: 0; --w: 18; --h: 10;" class="slide" animotor-container=""><div item="text" class="horizontal-center vertical-center frontlight" style="--w: 14; --h: 1; --x: 2; --y: 4;" animotor="fade-in-bottom"><h1>Hello World</h1></div><div item="text" class="horizontal-center vertical-center" style="--w: 16; --h: 1; --x: 1; --y: 5;" animotor="fade-in-bottom">This is an example for SlideEditor</div></section>
<section id="Text&Image" style="--x: 0; --y: 11; --w: 18; --h: 10;" class="slide" animotor-container=""><img draggable="false" item="image" class="horizontal-center vertical-center" style="--x: 9; --y: 1; --w: 8; --h: 8;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjODg4IiBkPSJNMTQgOWwtMi41MTkgNC0yLjQ4MS0xLjk2LTUgNi45NmgxNmwtNi05em04LTV2MTZoLTIwdi0xNmgyMHptMi0yaC0yNHYyMGgyNHYtMjB6bS0yMCA2YzAtMS4xMDQuODk2LTIgMi0yczIgLjg5NiAyIDJjMCAxLjEwNS0uODk2IDItMiAycy0yLS44OTUtMi0yeiIvPjwvc3ZnPg==" animotor="fade-in-bottom"><div item="text" class="horizontal-center vertical-center" style="--x: 1; --y: 2; --w: 7; --h: 1;" animotor="fade-in-bottom"><h1>Title</h1></div><div item="text" class="vertical-center" style="--x: 1; --y: 3; --w: 7; --h: 3;" animotor="fade-in-bottom"><div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus odio eget nunc pellentesque commodo.</span></div></div><a item="button" button="" class="horizontal-center vertical-center primary" href="#" target="_blank" style="--x: 3; --y: 6; --w: 3; --h: 1;" animotor="fade-in-bottom">connect</a></section>
<section id="Text&Video" style="--x: 0; --y: 22; --w: 18; --h: 10;" class="slide" animotor-container=""><video draggable="false" autoplay="" loop="" muted="" item="video" style="--x: 9; --y: 2; --w: 8; --h: 6;" src="https://hasandelibas.asenax.com/uploads/5b7d3c7c6ce6577136531a4fc501a557.webm" animotor="fade-in-bottom" animotor-duration="400" animotor-delay="200"></video><div item="text" class="" style="--x: 1; --y: 3; --w: 7; --h: 1;" animotor="fade-in-bottom" animotor-duration="400" animotor-delay="200"><h1>Title</h1></div><div item="text" class="" style="--x: 1; --y: 4; --w: 7; --h: 3;" animotor="fade-in-bottom" animotor-duration="400" animotor-delay="200"><div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus odio eget nunc pellentesque commodo.</span></div></div><div style="background: rgb(255, 255, 255); box-shadow: inset 0 0 0 calc(var(--z) * 2px) var(--primary); position: absolute; width: calc(var(--block) * var(--z) * 0.4); height: calc(var(--block) * var(--z) * 0.4); cursor: se-resize; left: calc(var(--z) * var(--x) * 1px); top: calc(var(--z) * var(--y) * 1px); z-index: 10000; --x: 249.59375762939453; --y: 218.38543701171875;"></div></section>
</textarea>
<style>
html,body{padding:0;margin:0;}
iframe[documenter-slide]{
width:100%;
height:100%;
border:none;
}
</style>
<script>
SlideEditor(document.querySelector("textarea"))
</script>
```
# Todo
+ Zoom Out Page Sorting (section & navbar)
+ load & save fix
+ --font-scale
+ animotor
+ new page
+ theme fix
+ new page (templates)
+ iframe inside testing
+ text editing
+ fullscreen item
- theme export (fix)
# Future
- https://www.svgbackgrounds.com/elements/svg-shape-dividers/
- https://www.camelgames.com/ [BUTTON THEME]