Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/mandala. flo-bit.github.io/mandala
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326<!DOCTYPE html><html> <head> <meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-core.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" ></script>
<script type="text/javascript" src="./script.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta name="theme-color" content="#f14668" /> <title>vector mandalas</title> <link rel="icon" type="image/x-icon" href="/images/favicon.ico" /> </head> <body> <canvas id="myCanvas" resize></canvas> <div id="controls"> <button class="button is-danger is-large top-right-button js-modal-trigger" id="file-button" data-target="file-modal" > <span class="icon is-large"> <i class="mdi mdi-file mdi-36px"></i> </span> </button> <button class="button is-danger is-large bottom-right-button js-modal-trigger" id="brush-button" data-target="brush-modal" > <span class="icon is-large"> <i class="mdi mdi-brush mdi-36px"></i> </span> </button>
<button class="button is-danger is-large bottom-left-button js-modal-trigger" id="help-button" data-target="help-modal" > <span class="icon is-large"> <i class="mdi mdi-help mdi-36px"></i> </span> </button> </div>
<div class="modal" id="brush-modal"> <div class="modal-background"></div>
<div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">drawing settings</p> <button class="delete" aria-label="close"></button> </header> <div class="modal-card-body"> <div class="block"> <div class="field"> <div class="control columns is-mobile is-vcentered"> <div class="column is-narrow"> <label class="label">background color</label> </div> <div class="column"> <div class="control"> <input class="input" type="color" value="#ff0000" id="background-color-input" style="width: 100px" /> </div> </div> </div> </div> </div>
<div class="block"> <div class="field"> <div class="control columns is-mobile is-vcentered"> <div class="column is-narrow"> <label class="label">brush color</label> </div> <div class="column"> <div class="control"> <input class="input" type="color" value="#ff0000" id="brush-color-input" style="width: 100px" /> </div> </div> </div> </div>
<div class="field"> <div class="control columns is-mobile is-vcentered"> <div class="column is-narrow"> <label class="label">size</label> </div> <div class="column"> <progress class="progress is-large is-danger" id="brush-size-bar" value="80" max="100" > X% </progress> </div> <div class="column is-3"> <div class="control"> <input class="input" type="text" placeholder="0" value="80" id="brush-size-input" /> </div> </div> </div> </div> </div>
<div class="block"> <div class="field"> <div class="columns is-mobile is-vcentered"> <div class="column is-narrow"> <label class="label">rotations</label> </div> <div class="column"> <progress class="progress is-large is-danger" id="rotations-bar" value="80" max="100" > X% </progress> </div> <div class="column is-3"> <div class="control"> <input class="input" type="text" placeholder="0" value="80" id="rotations-input" /> </div> </div> </div> </div>
<div class="field"> <div class="buttons"> <button class="button is-danger" id="mirror-button"> <span class="icon"> <i class="mdi mdi-mirror"></i> </span> <span>mirror</span> </button>
<button class="button is-danger" id="simplify-button"> <span class="icon"> <i class="mdi mdi-chart-bell-curve-cumulative"></i> </span> <span>simplify</span> </button> </div> </div> </div> </div> </div> </div>
<div class="modal" id="file-modal"> <div class="modal-background"></div>
<div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">file</p> <button class="delete" aria-label="close"></button> </header> <div class="modal-card-body"> <div class="block"> <div class="field"> <div class="control columns is-mobile is-vcentered"> <div class="column is-narrow"> <label class="label">start over</label> </div> <div class="column"> <button class="button is-danger" id="clear-button"> <span class="icon"> <i class="mdi mdi-delete"></i> </span> <span>clear</span> </button> </div> </div> </div>
<div class="columns is-mobile is-vcentered"> <div class="column is-narrow"> <label class="label">import</label> </div> <div class="column is-narrow"> <div class="file is-danger"> <label class="file-label"> <input id="svg-file-input" class="file-input" type="file" name="resume" /> <span class="file-cta"> <span class="file-icon"> <i class="mdi mdi-file-upload"></i> </span> <span class="file-label">svg</span> </span> </label> </div> </div> </div>
<div class="field"> <div class="control columns is-mobile is-vcentered"> <div class="column is-narrow"> <label class="label">export</label> </div> <div class="column"> <button class="button is-danger" id="png-export-button"> <span class="icon"> <i class="mdi mdi-image"></i> </span>
<span>png</span> </button> <button class="button is-danger" id="svg-export-button"> <span class="icon"> <i class="mdi mdi-vector-circle"></i> </span>
<span>svg</span> </button> </div> </div> </div> </div> </div> </div> </div>
<div class="modal" id="help-modal"> <div class="modal-background"></div>
<div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">help</p> <button class="delete" aria-label="close"></button> </header> <div class="modal-card-body"> <div class="content"> Welcome to the Mandala Web Drawing App! This app is designed to help you create beautiful and intricate mandalas with ease. Here's a quick guide to using the app: <ul> <li> Brush settings: To change the brush color and size, tap the brush icon located in the bottom right corner of the screen. You can also change the background color, number of rotations, turn mirroring on/off, and simplify on/off in this menu. </li>
<li> File settings: To manage your drawings, tap the file icon located in the top right corner of the screen. You can clear your drawing, import previously saved SVGs, and save your drawing as a PNG or SVG. To save your drawing quickly, you can use the keyboard shortcut Control/Command + [S]. </li>
<li> Undo and Navigation: To undo a mistake, use the keyboard shortcut Control/Command + [Z] or a tap with two fingers. You can move the canvas with your arrow keys (or two finger pan on touchscreen/trackpad) and zoom in and out with Control/Command + [+]/[-] (or pinch gesture on touchscreen/trackpad). </li> </ul> </div> </div> </div> </div> </body></html>