diff --git a/build/index.html b/build/index.html index c43e0ff..aae4813 100644 --- a/build/index.html +++ b/build/index.html @@ -1,116 +1 @@ - - - - - - - - - - Painter - - - - -
-
-

Pa brush nter.

-

Express your creativity!

-
- GitHub -
-
-
-

Set the size of the canvas:

-

Resizing the canvas will reset it to default state.

-
-
-
-
-
-
-
-
-
-

Cap width: 20px

-
-

Cap type:

-
-
-
-
-
-
-

Line:

-
-

Eraser:

Eraser
-
-

Color: #000000colorize

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Fill color: none

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Undo / Redo:

-

Clear all: delete_forever

DOWNLOAD -
exit info
-
-
-
-

-
-
-
-

About

-

A custom sizeable canvas app, where you can draw whatever you want, and download your painting.

-
-

INFO

-
-
- - - - \ No newline at end of file +Painter

Pa brush nter.

Express your creativity!

GitHub

Set the size of the canvas:

Resizing the canvas will reset it to default state.

Cap width: 20px

Cap type:

Line:

Eraser:

Color: #000000colorize

Fill color: none

Undo / Redo:

Clear all: delete_forever

DOWNLOAD
exit info

About

A custom sizeable canvas app, where you can draw whatever you want, and download your painting.

INFO

\ No newline at end of file diff --git a/dist/FredokaOne-Regular.2417a706.ttf b/dist/FredokaOne-Regular.2417a706.ttf new file mode 100644 index 0000000..0cdf5ae Binary files /dev/null and b/dist/FredokaOne-Regular.2417a706.ttf differ diff --git a/dist/LuckiestGuy-Regular.fefc07c0.ttf b/dist/LuckiestGuy-Regular.fefc07c0.ttf new file mode 100644 index 0000000..8bc3f11 Binary files /dev/null and b/dist/LuckiestGuy-Regular.fefc07c0.ttf differ diff --git a/dist/MaterialIcons-Regular.0803c818.woff2 b/dist/MaterialIcons-Regular.0803c818.woff2 new file mode 100644 index 0000000..9fa2112 Binary files /dev/null and b/dist/MaterialIcons-Regular.0803c818.woff2 differ diff --git a/dist/MaterialIcons-Regular.30b8ceaf.woff b/dist/MaterialIcons-Regular.30b8ceaf.woff new file mode 100644 index 0000000..b648a3e Binary files /dev/null and b/dist/MaterialIcons-Regular.30b8ceaf.woff differ diff --git a/dist/MaterialIcons-Regular.8c1edd37.eot b/dist/MaterialIcons-Regular.8c1edd37.eot new file mode 100644 index 0000000..70508eb Binary files /dev/null and b/dist/MaterialIcons-Regular.8c1edd37.eot differ diff --git a/dist/MaterialIcons-Regular.d14747fd.ttf b/dist/MaterialIcons-Regular.d14747fd.ttf new file mode 100644 index 0000000..7015564 Binary files /dev/null and b/dist/MaterialIcons-Regular.d14747fd.ttf differ diff --git a/dist/Montserrat-Black.7f2de76c.ttf b/dist/Montserrat-Black.7f2de76c.ttf new file mode 100644 index 0000000..f0d24ad Binary files /dev/null and b/dist/Montserrat-Black.7f2de76c.ttf differ diff --git a/dist/Montserrat-Bold.361393eb.ttf b/dist/Montserrat-Bold.361393eb.ttf new file mode 100644 index 0000000..9a425b9 Binary files /dev/null and b/dist/Montserrat-Bold.361393eb.ttf differ diff --git a/dist/Montserrat-Medium.53048cef.ttf b/dist/Montserrat-Medium.53048cef.ttf new file mode 100644 index 0000000..db5b1af Binary files /dev/null and b/dist/Montserrat-Medium.53048cef.ttf differ diff --git a/dist/Montserrat-SemiBold.3c6fdb44.ttf b/dist/Montserrat-SemiBold.3c6fdb44.ttf new file mode 100644 index 0000000..0ecc667 Binary files /dev/null and b/dist/Montserrat-SemiBold.3c6fdb44.ttf differ diff --git a/dist/app.c3f9f951.css b/dist/app.c3f9f951.css new file mode 100644 index 0000000..22020b7 --- /dev/null +++ b/dist/app.c3f9f951.css @@ -0,0 +1,685 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body button { + width: 100px; + padding: 5px; + margin: 3px 0; + background: none; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 2px; + cursor: pointer; + outline: none; + font-family: "Montserrat Medium"; + color: #222; + background: #fff; + transition: 0.2s ease; +} +body button:hover { + border: 1px solid rgba(0, 0, 0, 0.6); + color: #fff; + background: #222; +} +body input[type=color] { + display: block; + text-align: left; + background: none; + border: none; + width: 110px; + font-size: 14px; + cursor: pointer; + outline: none; +} +body #colorPalette::before { + font-family: "Montserrat Medium"; + content: "Custom color"; +} +body #backgroundColor::before { + font-family: "Montserrat Medium"; + content: "Custom color"; +} +body #colorPalette:hover::before, body #backgroundColor:hover::before { + color: #e1302a; +} +body input[type=color]::-webkit-color-swatch-wrapper { + opacity: 0; +} + +.container { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; +} + +.new-project_window { + display: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 10px; + width: 40%; + min-width: 200px; + max-width: 600px; + background-color: #fff; + z-index: 9; +} +@media (max-width: 768px) { + .new-project_window { + width: 100%; + padding: auto auto; + } +} +.new-project_window #show-warning { + display: none; +} +.new-project_window * { + margin: 5px 0; +} +.new-project_window h3 { + font-family: "Montserrat Black"; + font-size: 2rem; + color: #0097e6; + line-height: 3rem; +} +@media (max-width: 1200px) { + .new-project_window h3 { + font-size: 1.5rem; + } +} +@media (max-width: 768px) { + .new-project_window h3 { + font-size: 1.3rem; + } +} +.new-project_window p { + text-align: center; + font-size: 12px; + color: #e1302a; + font-family: "Montserrat Medium"; +} +.new-project_window .input-fields { + display: flex; + flex-direction: column; + width: 100%; + margin: auto auto; + font-size: 1.3rem; +} +.new-project_window .input-fields input { + width: 80%; + padding: 10px; + margin: 5px 5px 5px 0px; + border: 1px solid rgba(0, 0, 0, 0.4); + outline-color: #0097e6; + border-radius: 5px; +} +.new-project_window button { + width: 60px; +} + +.new-project_window.active { + border: 1px solid rgba(0, 0, 0, 0.3); + width: 250px; +} + +.main-menu { + display: block; + width: 250px; + text-align: center; + padding: 10px; +} +.main-menu h1 { + font-family: "Fredoka One"; + letter-spacing: 3px; + font-size: 3rem; + color: #0097e6; + animation: titleColor 5s ease forwards infinite; + position: relative; +} +.main-menu h1 i { + font-size: 60px; + position: absolute; + left: 56px; + top: -10px; + transform: rotate(140deg); + animation: brushAnimation 5s ease forwards infinite; +} +.main-menu p { + font-family: "Montserrat SemiBold"; + font-style: italic; + color: #33333380; + font-size: 0.8rem; +} +.main-menu .buttons-main { + margin: 10px 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.main-menu .buttons-main a { + display: inline-block; + margin: 10px 0; +} + +main { + display: none; + grid-template-columns: 230px 1fr; + grid-template-areas: "controls canvas"; + height: 100vh; +} +main .canvas-container { + grid-area: canvas; + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} +main .canvas-container #cap-pointer { + display: none; + width: 20px; + height: 20px; + background-color: #000000; + position: absolute; +} +main .canvas-container canvas { + border: 1px solid rgba(0, 0, 0, 0.2); + background-repeat: center center; + background-repeat: no-repeat; + background-size: cover; +} +main .canvas-container .notification { + display: block; + width: 250px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + z-index: 99999; + position: absolute; + top: -50px; + left: 50%; + transform: translateX(-50%); + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); + font-family: "Montserrat Bold"; + font-size: 1rem; + text-transform: uppercase; + transition: 0.5s ease; +} +main .canvas-container .notification p { + color: #0097e6; +} +main .canvas-container .notification.notificationActive { + transform: translate(-50%, 60px); +} +main .controls { + grid-area: controls; + background-color: #f5f5f5; + width: 250px; + height: 100%; + border: 1px solid rgba(0, 0, 0, 0.2); + border-top: none; + border-bottom: none; + padding: 8px; + margin-right: 5px; + position: absolute; + left: 0; + top: 0; + transition: 0.5s ease; + overflow-y: scroll; +} +main .controls * { + margin: 1px 0; +} +main .controls .burger-menu { + width: 30px; + height: 30px; + position: absolute; + right: 10px; + top: 10px; + overflow: hidden; + cursor: pointer; +} +main .controls .burger-menu span { + display: block; + position: absolute; + margin: 5px 0; + width: 20px; + height: 2px; + border-radius: 2px; + background-color: #e1302a; + opacity: 1; + transition: 0.3s ease; +} +main .controls .burger-menu span:nth-child(1) { + top: 10px; + transform: rotate(45deg); +} +main .controls .burger-menu span:nth-child(2) { + transform: translateX(-30px); + opacity: 1; +} +main .controls .burger-menu span:nth-child(3) { + top: 10px; + transform: rotate(-45deg); +} +main .controls .burger-menu.active span { + width: 15px; + transform: rotate(0deg); + background-color: #444; +} +main .controls .burger-menu.active span:nth-child(1) { + top: 0px; +} +main .controls .burger-menu.active span:nth-child(2) { + top: 6px; + transform: translateX(0px); +} +main .controls .burger-menu.active span:nth-child(3) { + top: 12px; + transform: rotate(0deg); +} +main .controls h4 { + color: #0097e6; + font-family: "Montserrat Bold"; +} +main .controls label { + font-family: "Montserrat Medium"; + font-size: 0.9rem; +} +main .controls #drawColor-title { + display: flex; + align-items: center; +} +main .controls #drawColor-title #current-drawColor { + color: #555; +} +main .controls #drawColor-title #color-info { + margin-left: 65px; + cursor: pointer; +} +main .controls #current-bgColor { + color: #555; +} +main .controls #saveDrawing { + display: inline-block; + border: 1px solid rgba(0, 0, 0, 0.3); + padding: 3px; + cursor: pointer; + text-decoration: none; + font-family: "Montserrat Bold"; + text-transform: uppercase; + font-size: 0.8rem; + color: #0097e6; + background-color: #fff; + transition: 0.2s ease; +} +main .controls #saveDrawing:hover { + color: #fff; + background-color: #0097e6; +} +main .controls .cap-line_type { + display: flex; + justify-content: space-between; + align-items: center; +} +main .controls .cap-line_type input { + display: inline-block; + width: 15px; + height: 15px; +} +main .controls .cap-line_type img { + display: inline-block; + padding: 0; + margin: 0; + margin-right: -5px; +} +main .controls .switch { + position: relative; + display: block; + width: 30px; + height: 30px; +} +main .controls .switch .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + bottom: 0; + right: 0; + transition: 0.3s ease; + padding: 0; +} +main .controls .switch input { + display: none; +} +main .controls .switch .slider:before { + position: absolute; + top: 0px; + left: 0px; + transition: 0.3s ease; + font-size: 10px; + font-family: "Montserrat Bold"; + color: #fff; + width: 28px; + height: 24px; + display: flex; + justify-content: center; + align-items: center; +} +main .controls .switch input:checked + .slider:before { + color: #fff; + content: "ON"; + background-color: #0097e6; +} +main .controls .switch input:not(:checked) + .slider:before { + color: #fff; + content: "OFF"; + background-color: #e1302a; +} +main .controls .eraser { + align-items: center; +} +main .controls #clear-all_container { + display: flex; + justify-content: flex-start; + align-items: center; +} +main .controls #clear-all_container i { + margin-left: 10px; + color: #33333380; + cursor: pointer; + transition: 0.2s ease; +} +main .controls #clear-all_container i:hover { + transform: translateY(-2px); + color: #e1302a; +} +main .controls #canvas-size { + margin: 0 0 10px 0; + width: 150px; +} +main .controls .undo-redo_container { + display: flex; + align-items: center; + justify-content: space-between; + margin: 10px 0 0 0; +} +main .controls .undo-redo_container button { + width: 40px; + padding: 0px; + margin-right: 3px; + display: flex; + justify-content: center; + align-items: center; +} +main .controls .undo-redo_container button i { + font-size: 22px; +} +main .controls .color-boxes_container { + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + width: 202px; + height: 52px; + border: 1px solid rgba(0, 0, 0, 0.2); +} +main .controls .color-boxes_container .color-box { + width: 25px; + height: 25px; + margin: 0; + padding: 0; + cursor: pointer; +} +main .controls .controls-bottom { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 40px; + margin: 0; + border-top: 1px solid rgba(0, 0, 0, 0.2); + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px; +} +main .controls .controls-bottom #exit { + cursor: pointer; + font-family: "Montserrat SemiBold"; + font-size: 0.85rem; + transition: 0.2s ease; +} +main .controls .controls-bottom #exit:hover { + color: #e1302a; +} +main .controls .controls-bottom #info { + color: #0097e6; + cursor: pointer; + transition: 0.2s ease; +} +main .controls .controls-bottom #info i { + font-size: 28px; +} +main .controls .controls-bottom #info:hover { + color: #0173b1; +} +main .controlsActive { + transform: translateX(-250px); +} +main .controlsActive .burger-menu { + right: -70px; +} + +.mainDisplay { + grid-template-columns: 0px 1fr; +} + +.about-menu { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + width: 500px; + height: 250px; + padding: 10px; + text-align: center; +} +@media (max-width: 768px) { + .about-menu { + width: 100%; + } +} +.about-menu h3 { + font-family: "Montserrat Black"; + font-size: 2.5rem; + color: #33333380; + text-transform: uppercase; +} +.about-menu p { + font-family: "Montserrat Medium"; + font-size: 1.2rem; + line-height: 1.5rem; + margin: 10px; +} + +#color-pallete_container { + display: flex; + justify-content: flex-start; + align-items: center; +} +#color-pallete_container #color-info { + margin-left: 10px; + cursor: pointer; + color: #33333380; + transition: 0.2s ease; +} +#color-pallete_container #color-info:hover { + color: #e1302a; +} + +.info-box { + width: 400px; + padding: 10px; + background-color: #fff; + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; +} +.info-box h3 { + text-align: center; + font-family: "Montserrat Black"; + color: #0097e6; + font-size: 1.5rem; + letter-spacing: 2px; +} +.info-box ul { + list-style-type: none; +} +.info-box ul li { + margin: 2px 0; +} + +#capWidth { + -webkit-appearance: none; + margin-bottom: 15px; +} +#capWidth:focus { + outline: none; +} +#capWidth::-webkit-slider-runnable-track { + width: 100%; + height: 2px; + cursor: pointer; + box-shadow: none; + background: #0097e6; + border-radius: 5px; + border: 0px solid #010101; +} +#capWidth::-moz-range-track { + width: 100%; + height: 2px; + cursor: pointer; + box-shadow: none; + background: #0097e6; + border-radius: 5px; + border: 0px solid #010101; +} +#capWidth::-webkit-slider-thumb { + box-shadow: none; + border: 0px solid #ffffff; + box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2); + height: 20px; + width: 10px; + border-radius: 10px; + background: white; + cursor: pointer; + -webkit-appearance: none; + margin-top: -10px; +} +#capWidth::-moz-range-thumb { + box-shadow: none; + border: 0px solid #ffffff; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); + height: 20px; + width: 10px; + border-radius: 10px; + background: white; + cursor: pointer; + -webkit-appearance: none; + margin-top: -10px; +} +#capWidth::-moz-focus-outer { + border: 0; +} + +#capWidth-display { + display: inline-block; + width: 0px; + height: 0px; + background-color: red; + position: absolute; + right: -120px; + border-radius: 50%; + transform-origin: center center; +} + +.material-icons { + font-family: "Material Icons"; + font-weight: normal; + font-style: normal; + font-size: 24px; + /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + -webkit-font-feature-settings: "liga"; + font-feature-settings: "liga"; +} + +@keyframes titleColor { + 0% { + color: #0097e6; + } + 20% { + color: goldenrod; + } + 40% { + color: #e1302a; + } + 60% { + color: deeppink; + } + 80% { + color: limegreen; + } + 100% { + color: #0097e6; + } +} +@keyframes brushAnimation { + 0% { + transform: translateX(0px) rotate(140deg); + } + 30% { + transform: translateX(-4px) rotate(125deg); + } + 60% { + transform: translateX(-4px) rotate(125deg); + } + 100% { + transform: translateX(0px) rotate(140deg); + } +} + +/*# sourceMappingURL=/app.c3f9f951.css.map */ \ No newline at end of file diff --git a/dist/app.c3f9f951.css.map b/dist/app.c3f9f951.css.map new file mode 100644 index 0000000..33b9e9f --- /dev/null +++ b/dist/app.c3f9f951.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["scss\\main.scss"],"names":[],"mappings":"AA4BA;EACI;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,aAhCG;EAiCH;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,aAvDG;EAwDH;;AAGJ;EACI,aA5DG;EA6DH;;AAGJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AACA;EAbJ;IAcQ;IACA;;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI,aA9GI;EA+GJ;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAEJ;EATJ;IAUQ;;;AAIR;EACI;EACA;EACA;EACA,aA9HG;;AAiIP;EACI;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAMZ;EACI;EACA;EACA;EACA;;AAEA;EACI;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA,aA3PD;EA4PC;EACA;EACA;;AAEA;EACI;;AAGR;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAIJ;EACI;EACA,aA1VD;;AA6VH;EACI,aA/VD;EAgWC;;AAGJ;EACI;EACA;;AAGA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EAEA,aA7XD;EA8XC;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EAAQ;EAAS;EAAW;EAC5B;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,aApbL;EAqbK;EACA;EACA;EAEA;EACA;EACA;;AAOJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAKR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;;AAMZ;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGR;EACI;;AAIZ;EACI;;AAEA;EACI;;;AAKZ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAfJ;IAgBQ;;;AAGJ;EACI,aA9lBI;EA+lBJ;EACA;EACA;;AAGJ;EACI,aApmBG;EAqmBH;EACA;EACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;EACA,aA/oBI;EAgpBJ;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;;;AAMZ;EACI;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEN;EACM;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEN;EACE;;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;EACQ;;;AAGV;EACI;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI","file":"app.c3f9f951.css","sourceRoot":"..\\src","sourcesContent":["$colors: (\r\n backgroundCol: #fff,\r\n color: #222,\r\n placeholder: #33333380,\r\n titlesColor: #0097e6\r\n);\r\n\r\n@function color($colorName) {\r\n @return map-get($colors, $colorName );\r\n};\r\n\r\n// Fonts\r\n$titleFont: \"Montserrat Black\";\r\n$mainFont: \"Montserrat Medium\";\r\n$textFont: \"Montserrat Bold\";\r\n\r\n$breakpoint-tablet:(\r\n one: 1200px,\r\n two: 768px,\r\n three: 576px\r\n);\r\n\r\n@function breakpoint($breakpoint-value) {\r\n @return map-get($breakpoint-tablet, $breakpoint-value );\r\n};\r\n\r\n\r\n// Reset margin and padding\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n button {\r\n width: 100px;\r\n padding: 5px;\r\n margin: 3px 0;\r\n background: none;\r\n border: 1px solid rgba(0,0,0,0.3);\r\n border-radius: 2px;\r\n cursor: pointer;\r\n outline: none;\r\n\r\n font-family: $mainFont;\r\n color: color(color);\r\n background: color(backgroundCol);\r\n transition: 0.2s ease;\r\n }\r\n\r\n button:hover {\r\n border: 1px solid rgba(0,0,0,0.6);\r\n color: color(backgroundCol);\r\n background: color(color);\r\n }\r\n\r\n input[type='color'] {\r\n display: block;\r\n text-align: left;\r\n background: none;\r\n border: none;\r\n width: 110px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n outline: none;\r\n }\r\n #colorPalette::before {\r\n font-family: $mainFont;\r\n content: \"Custom color\";\r\n }\r\n\r\n #backgroundColor::before {\r\n font-family: $mainFont;\r\n content: \"Custom color\"\r\n }\r\n\r\n #colorPalette:hover::before, #backgroundColor:hover::before {\r\n color: #e1302a;\r\n }\r\n input[type='color']::-webkit-color-swatch-wrapper {\r\n opacity: 0;\r\n }\r\n}\r\n\r\n.container {\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: color(backgroundCol);\r\n\r\n}\r\n\r\n// NEW PROJECT WINDOW\r\n.new-project_window {\r\n display: none;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n padding: 10px;\r\n // text-align: center;\r\n width: 40%;\r\n min-width: 200px;\r\n max-width: 600px;\r\n background-color: color(backgroundCol);\r\n z-index: 9;\r\n @media (max-width: breakpoint(two)) {\r\n width: 100%;\r\n padding: auto auto;\r\n }\r\n\r\n #show-warning {\r\n display: none;\r\n }\r\n\r\n * {\r\n margin: 5px 0;\r\n }\r\n\r\n h3 {\r\n font-family: $titleFont;\r\n font-size: 2rem;\r\n color: color(titlesColor);\r\n line-height: 3rem;\r\n\r\n @media (max-width: breakpoint(one)) {\r\n font-size: 1.5rem;\r\n }\r\n @media (max-width: breakpoint(two)) {\r\n font-size: 1.3rem;\r\n }\r\n }\r\n\r\n p {\r\n text-align: center;\r\n font-size: 12px;\r\n color: #e1302a;\r\n font-family: $mainFont;\r\n }\r\n\r\n .input-fields {\r\n display: flex;\r\n flex-direction: column;\r\n // align-items: center;\r\n width: 100%;\r\n margin: auto auto ;\r\n font-size: 1.3rem;\r\n\r\n input {\r\n width: 80%;\r\n padding: 10px;\r\n margin: 5px 5px 5px 0px;\r\n border: 1px solid rgba(0,0,0,0.4);\r\n outline-color: #0097e6;\r\n border-radius: 5px;\r\n }\r\n }\r\n\r\n button {\r\n width: 60px;\r\n }\r\n}\r\n\r\n.new-project_window.active {\r\n border: 1px solid rgba(0,0,0,0.3);\r\n width: 250px;\r\n}\r\n\r\n.main-menu {\r\n display: block;\r\n width: 250px;\r\n // background-color: red;\r\n text-align: center;\r\n padding: 10px;\r\n\r\n h1 {\r\n font-family: \"Fredoka One\";\r\n letter-spacing: 3px;\r\n font-size: 3rem;\r\n color: color(titlesColor);\r\n animation: titleColor 5s ease forwards infinite;\r\n position: relative;\r\n\r\n i {\r\n font-size: 60px;\r\n position: absolute;\r\n left: 56px;\r\n top: -10px;\r\n transform: rotate(140deg);\r\n animation: brushAnimation 5s ease forwards infinite;\r\n }\r\n }\r\n\r\n p {\r\n font-family: \"Montserrat SemiBold\";\r\n font-style: italic;\r\n color: color(placeholder);\r\n font-size: .8rem;\r\n }\r\n\r\n // Buttons\r\n .buttons-main {\r\n margin: 10px 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n a {\r\n display: inline-block;\r\n margin: 10px 0;\r\n }\r\n }\r\n}\r\n\r\n// Main container - Canvas\r\nmain {\r\n display: none;\r\n grid-template-columns: 230px 1fr;\r\n grid-template-areas: \"controls canvas\";\r\n height: 100vh;\r\n\r\n .canvas-container {\r\n grid-area: canvas;\r\n\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n #cap-pointer {\r\n display: none;\r\n width: 20px;\r\n height: 20px;\r\n background-color: #000000;\r\n position: absolute;\r\n }\r\n\r\n canvas {\r\n border: 1px solid rgba(0,0,0,0.2);\r\n background-repeat: center center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n }\r\n\r\n // NOTIFICATIONS\r\n .notification {\r\n // background-color: red;\r\n display: block;\r\n width: 250px;\r\n height: 40px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 99999;\r\n \r\n position: absolute;\r\n top: -50px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n\r\n box-shadow: 0 3px 10px rgba(0,0,0,0.2);\r\n font-family: $textFont;\r\n font-size: 1rem;\r\n text-transform: uppercase;\r\n transition: 0.5s ease;\r\n\r\n p {\r\n color: color(titlesColor);\r\n }\r\n }\r\n .notification.notificationActive {\r\n transform: translate(-50%, 60px);\r\n }\r\n }\r\n\r\n // CONTROLS\r\n .controls {\r\n grid-area: controls;\r\n background-color: #f5f5f5;\r\n width: 250px;\r\n height: 100%;\r\n border: 1px solid rgba(0,0,0,0.2);\r\n border-top: none;\r\n border-bottom: none;\r\n padding: 8px;\r\n margin-right: 5px;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n transition: 0.5s ease;\r\n overflow-y: scroll;\r\n\r\n * {\r\n margin: 1px 0;\r\n }\r\n\r\n // BURGER MENU\r\n .burger-menu {\r\n width: 30px;\r\n height: 30px;\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n\r\n span {\r\n display: block;\r\n position: absolute;\r\n margin: 5px 0;\r\n width: 20px;\r\n height: 2px;\r\n border-radius: 2px;\r\n background-color: #e1302a;\r\n opacity: 1;\r\n transition: 0.3s ease;\r\n }\r\n\r\n span:nth-child(1) {\r\n top: 10px;\r\n transform: rotate(45deg);\r\n }\r\n\r\n span:nth-child(2) {\r\n transform: translateX(-30px);\r\n opacity: 1;\r\n }\r\n\r\n span:nth-child(3) {\r\n top: 10px;\r\n transform: rotate(-45deg);\r\n }\r\n }\r\n\r\n .burger-menu.active span {\r\n width: 15px;\r\n transform: rotate(0deg);\r\n background-color: #444;\r\n }\r\n\r\n .burger-menu.active span:nth-child(1) {\r\n top: 0px;\r\n }\r\n .burger-menu.active span:nth-child(2) {\r\n top: 6px;\r\n transform: translateX(0px);\r\n\r\n }\r\n .burger-menu.active span:nth-child(3) {\r\n top: 12px;\r\n transform: rotate(0deg);\r\n }\r\n\r\n // Titles\r\n h4 {\r\n color: color(titlesColor);\r\n font-family: $textFont;\r\n }\r\n\r\n label {\r\n font-family: $mainFont;\r\n font-size: 0.9rem;\r\n }\r\n\r\n #drawColor-title {\r\n display: flex;\r\n align-items: center;\r\n // justify-content: space-between;\r\n \r\n #current-drawColor {\r\n color: #555;\r\n }\r\n\r\n #color-info {\r\n margin-left: 65px;\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n #current-bgColor { \r\n color: #555;\r\n }\r\n\r\n // Download drawing\r\n #saveDrawing {\r\n display: inline-block;\r\n border: 1px solid rgba(0,0,0,0.3);\r\n padding: 3px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n\r\n font-family: $textFont;\r\n text-transform: uppercase;\r\n font-size: 0.8rem;\r\n color: color(titlesColor);\r\n background-color: color(backgroundCol);\r\n transition: 0.2s ease;\r\n }\r\n #saveDrawing:hover {\r\n color: color(backgroundCol);\r\n background-color: color(titlesColor);\r\n }\r\n\r\n // Checkboxes for cap and line types\r\n .cap-line_type {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n input {\r\n display: inline-block;\r\n width: 15px;\r\n height: 15px;\r\n }\r\n\r\n img {\r\n display: inline-block;\r\n padding: 0;\r\n margin: 0;\r\n margin-right: -5px;\r\n }\r\n }\r\n\r\n // CUSTOM CHECKBOX\r\n .switch {\r\n position: relative;\r\n display: block;\r\n width: 30px;\r\n height: 30px;\r\n\r\n .slider {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0; left: 0; bottom: 0; right: 0;\r\n transition: 0.3s ease;\r\n padding: 0;\r\n }\r\n input {\r\n display: none;\r\n }\r\n .slider:before {\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n transition: 0.3s ease;\r\n font-size: 10px;\r\n font-family: $textFont;\r\n color: #fff;\r\n width: 28px;\r\n height: 24px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n // input:checked + .slider {\r\n // transform: rotate(45deg);\r\n // }\r\n\r\n input:checked + .slider:before {\r\n color: #fff;\r\n content: \"ON\";\r\n background-color: #0097e6;\r\n }\r\n\r\n input:not(:checked) + .slider:before {\r\n color: #fff;\r\n content: \"OFF\";\r\n background-color: #e1302a;\r\n }\r\n }\r\n\r\n .eraser {\r\n align-items: center;\r\n }\r\n\r\n #clear-all_container {\r\n display: flex;\r\n justify-content:flex-start;\r\n align-items: center;\r\n\r\n i {\r\n margin-left: 10px;\r\n color: color(placeholder);\r\n cursor: pointer;\r\n transition: 0.2s ease;\r\n }\r\n\r\n i:hover {\r\n transform: translateY(-2px);\r\n color: #e1302a;\r\n }\r\n\r\n }\r\n\r\n #canvas-size {\r\n margin: 0 0 10px 0;\r\n width: 150px;\r\n }\r\n\r\n .undo-redo_container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin: 10px 0 0 0;\r\n \r\n button {\r\n width: 40px;\r\n padding: 0px;\r\n margin-right: 3px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n i {\r\n font-size: 22px;\r\n }\r\n }\r\n }\r\n\r\n // COLOR BOXES\r\n .color-boxes_container {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n flex-wrap: wrap;\r\n\r\n width: 202px;\r\n height: 52px;\r\n border: 1px solid rgba(0,0,0,0.2);\r\n\r\n .color-box {\r\n width: 25px;\r\n height: 25px;\r\n margin: 0;\r\n padding: 0;\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .controls-bottom {\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 40px;\r\n margin: 0;\r\n border-top: 1px solid rgba(0,0,0,0.2);\r\n\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 5px;\r\n \r\n #exit {\r\n cursor: pointer;\r\n font-family: \"Montserrat SemiBold\";\r\n font-size: 0.85rem;\r\n transition: 0.2s ease;\r\n }\r\n #exit:hover {\r\n color: #e1302a;\r\n }\r\n\r\n #info {\r\n color: color(titlesColor);\r\n cursor: pointer;\r\n transition: 0.2s ease;\r\n \r\n i {\r\n font-size: 28px;\r\n }\r\n }\r\n #info:hover {\r\n color: #0173b1\r\n }\r\n }\r\n }\r\n .controlsActive {\r\n transform: translateX(-250px);\r\n\r\n .burger-menu {\r\n right: -70px;\r\n }\r\n }\r\n}\r\n\r\n.mainDisplay {\r\n grid-template-columns: 0px 1fr;\r\n}\r\n\r\n// ABOUT MENU\r\n.about-menu {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background-color: color(backgroundCol);\r\n\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 500px;\r\n height: 250px;\r\n padding: 10px;\r\n text-align: center;\r\n @media (max-width: breakpoint(two)) {\r\n width: 100%;\r\n }\r\n\r\n h3 {\r\n font-family: $titleFont;\r\n font-size: 2.5rem;\r\n color: color(placeholder);\r\n text-transform: uppercase;\r\n }\r\n\r\n p {\r\n font-family: $mainFont;\r\n font-size: 1.2rem;\r\n line-height: 1.5rem;\r\n margin: 10px;\r\n }\r\n}\r\n\r\n#color-pallete_container {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n\r\n #color-info {\r\n margin-left: 10px;\r\n cursor: pointer;\r\n color: color(placeholder);\r\n transition: 0.2s ease;\r\n }\r\n #color-info:hover {\r\n color: #e1302a;\r\n }\r\n}\r\n\r\n// INFO BOX\r\n.info-box {\r\n width: 400px;\r\n padding: 10px;\r\n background-color: color(backgroundCol);\r\n box-shadow: 0px 3px 10px rgba(0,0,0,0.2);\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 9;\r\n\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n h3 {\r\n text-align: center;\r\n font-family: $titleFont;\r\n color: color(titlesColor);\r\n font-size: 1.5rem;\r\n letter-spacing: 2px;\r\n }\r\n\r\n ul {\r\n list-style-type: none;\r\n\r\n li {\r\n margin: 2px 0;\r\n }\r\n }\r\n}\r\n\r\n// TEST\r\n#capWidth {\r\n -webkit-appearance: none;\r\n margin-bottom: 15px;\r\n &:focus {\r\n outline: none;\r\n }\r\n &::-webkit-slider-runnable-track {\r\n width: 100%;\r\n height: 2px;\r\n cursor: pointer;\r\n box-shadow: none;\r\n background: #0097e6;\r\n border-radius: 5px;\r\n border: 0px solid #010101;\r\n }\r\n &::-moz-range-track {\r\n width: 100%;\r\n height: 2px;\r\n cursor: pointer;\r\n box-shadow: none;\r\n background: #0097e6;\r\n border-radius: 5px;\r\n border: 0px solid #010101;\r\n }\r\n \r\n &::-webkit-slider-thumb {\r\n box-shadow: none;\r\n border: 0px solid #ffffff;\r\n box-shadow: 0px 1px 10px rgba(0,0,0,0.2);\r\n height: 20px;\r\n width: 10px;\r\n border-radius: 10px;\r\n background: rgba(255,255,255,1);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n margin-top: -10px;\r\n }\r\n &::-moz-range-thumb{\r\n box-shadow: none;\r\n border: 0px solid #ffffff;\r\n box-shadow: 0px 10px 10px rgba(0,0,0,0.2);\r\n height: 20px;\r\n width: 10px;\r\n border-radius: 10px;\r\n background: rgba(255,255,255,1);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n margin-top: -10px;\r\n }\r\n &::-moz-focus-outer {\r\n border: 0;\r\n }\r\n\r\n\r\n}\r\n\r\n#capWidth-display {\r\n display: inline-block;\r\n width: 0px;\r\n height: 0px;\r\n background-color: red;\r\n position: absolute;\r\n right: -120px;\r\n border-radius: 50%;\r\n transform-origin: center center;\r\n}\r\n\r\n// SUPPORT FOR MATERIAL ICONS\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n /* Preferred icon size */\r\n display: inline-block;\r\n line-height: 1;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n word-wrap: normal;\r\n white-space: nowrap;\r\n direction: ltr;\r\n /* Support for all WebKit browsers. */\r\n -webkit-font-smoothing: antialiased;\r\n /* Support for Safari and Chrome. */\r\n text-rendering: optimizeLegibility;\r\n /* Support for Firefox. */\r\n -moz-osx-font-smoothing: grayscale;\r\n /* Support for IE. */\r\n -webkit-font-feature-settings: 'liga';\r\n font-feature-settings: 'liga';\r\n }\r\n\r\n @keyframes titleColor {\r\n 0% {\r\n color: #0097e6;\r\n }\r\n 20% {\r\n color: goldenrod;\r\n }\r\n 40% {\r\n color: #e1302a;\r\n }\r\n 60% {\r\n color: deeppink;\r\n }\r\n 80% {\r\n color: limegreen\r\n }\r\n 100% {\r\n color: #0097e6;\r\n }\r\n }\r\n\r\n @keyframes brushAnimation {\r\n 0% {\r\n transform: translateX(0px) rotate(140deg);\r\n }\r\n 30% {\r\n transform: translateX(-4px) rotate(125deg);\r\n }\r\n 60% {\r\n transform: translateX(-4px) rotate(125deg);\r\n }\r\n 100% {\r\n transform: translateX(0px) rotate(140deg);\r\n }\r\n }"]} \ No newline at end of file diff --git a/dist/app.c3f9f951.js b/dist/app.c3f9f951.js new file mode 100644 index 0000000..3da7204 --- /dev/null +++ b/dist/app.c3f9f951.js @@ -0,0 +1,1117 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + // + + +
+
+

Pa brush nter.

+

Express your creativity!

+ +
+ + + GitHub +
+
+ + +
+

Set the size of the canvas:

+

Resizing the canvas will reset it to default state.

+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+
+ +
+ + + +
+ + +
+ +
+

Cap width: 20px

+ + +
+ +
+

Cap type:

+
+ + +
+
+ + +
+
+ + +
+
+
+ + + +
+

Line:

+ +
+ + +
+

Eraser:

+ +
+ + +
+

Color: #000000colorize

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+

Fill color: none

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+

Undo / Redo:

+ + +
+ + +

Clear all: delete_forever

+ + + + + + DOWNLOAD + +
+ + exit + info +
+
+ +
+ +
+

+
+ + +
+
+ + +
+

About

+

A custom sizeable canvas app, where you can draw whatever you want, and download your painting.

+ +
+ + +
+

INFO

+ + +
+
+ + + + \ No newline at end of file diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..840ef64 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,392 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + //