├── LICENSE ├── README.md ├── fabric.min.js ├── images ├── PNGs │ ├── PNGs.md │ ├── fonds │ │ ├── alien │ │ │ ├── alien.png │ │ │ ├── alienlandscape │ │ │ ├── qmlalien.png │ │ │ ├── qmralien.png │ │ │ ├── qtlalien.png │ │ │ ├── qtralien.png │ │ │ ├── sblalien.png │ │ │ ├── sbralien.png │ │ │ ├── smlalien.png │ │ │ ├── smralien.png │ │ │ ├── stlalien.png │ │ │ ├── stralien.png │ │ │ └── utlalien.png │ │ ├── desert │ │ │ ├── desert.png │ │ │ ├── justadesert │ │ │ ├── qmldesert.png │ │ │ ├── qmrdesert.png │ │ │ ├── qtldesert.png │ │ │ ├── qtrdesert.png │ │ │ ├── sbldesert.png │ │ │ ├── sbrdesert.png │ │ │ ├── smldesert.png │ │ │ ├── smrdesert.png │ │ │ ├── stldesert.png │ │ │ ├── strdesert.png │ │ │ └── utldesert.png │ │ └── fonds.md │ ├── objets │ │ ├── ampoule.png │ │ ├── ananas.png │ │ ├── arbre.png │ │ ├── arbre2.png │ │ ├── balancoire.png │ │ ├── boite.png │ │ ├── bolide.png │ │ ├── boutons.png │ │ ├── burger.png │ │ ├── cactus.png │ │ ├── caddie.png │ │ ├── casserole.png │ │ ├── chapeau.png │ │ ├── coeur.png │ │ ├── cointable.png │ │ ├── colis.png │ │ ├── conserve.png │ │ ├── couvert.png │ │ └── objects │ └── personnages │ │ ├── animaux_et_autres │ │ ├── animals │ │ ├── chat.png │ │ ├── dragon.png │ │ ├── egar.png │ │ ├── grenouille.png │ │ ├── grenouille2.png │ │ └── homard.png │ │ ├── humains │ │ ├── addict.png │ │ ├── arthur.png │ │ ├── arthur2.png │ │ ├── aventurier.png │ │ ├── beargrylls.png │ │ ├── blagueur.png │ │ └── human │ │ └── somecharacters ├── autres │ ├── clrchg.png │ ├── croix.png │ ├── egar.png │ ├── fondQuatre.png │ ├── fondSix.png │ ├── importer.png │ ├── mmmh.png │ ├── piaf.png │ └── test.md ├── blanc.png ├── favicon.ico ├── resources.md └── temp.png ├── jquery-3.6.0.min.js ├── script.js ├── studio.html └── styles.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 le-egar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # studio 2 | 3 | * a simple comic strip creator for browsers, made for desktop/mobile devices 4 | * implemented [here](https://egar.fr/studio.html) 5 | * the version available here lacks some image resources because i dont know how to import everything at once and creating folders is painfully slow 6 | 7 | ## get started / prerequisites 8 | 9 | * download the html, css, and js files 10 | * use your preferred code editor 11 | 12 | not much else to it i think 13 | 14 | ## contributing 15 | 16 | * i don't know how github works, you probably do 17 | * feel free to make changes and fix anything i did incorrectly 18 | 19 | ## author 20 | 21 | **[egar](https://github.com/le-egar)** 22 | 23 | ## license 24 | 25 | licensed under the [mit license](LICENSE.md) 26 | 27 | ## acknowledgments 28 | 29 | * this was inspired by the work done in the [historic tale construction kit](https://htck.github.io/bayeux/#!/) 30 | * whoever made the js libraries i used has contributed more to this project than i have 31 | -------------------------------------------------------------------------------- /images/PNGs/PNGs.md: -------------------------------------------------------------------------------- 1 | some of the PNGs used in the creator - hopefully enough to show how it works 2 | -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/alien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/alien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/alienlandscape: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/qmlalien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/qmlalien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/qmralien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/qmralien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/qtlalien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/qtlalien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/qtralien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/qtralien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/sblalien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/sblalien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/sbralien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/sbralien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/smlalien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/smlalien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/smralien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/smralien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/stlalien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/stlalien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/stralien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/stralien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/alien/utlalien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/alien/utlalien.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/desert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/desert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/justadesert: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/qmldesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/qmldesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/qmrdesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/qmrdesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/qtldesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/qtldesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/qtrdesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/qtrdesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/sbldesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/sbldesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/sbrdesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/sbrdesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/smldesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/smldesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/smrdesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/smrdesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/stldesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/stldesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/strdesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/strdesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/desert/utldesert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/fonds/desert/utldesert.png -------------------------------------------------------------------------------- /images/PNGs/fonds/fonds.md: -------------------------------------------------------------------------------- 1 | these are the various backgrounds for each comic strip panel 2 | -------------------------------------------------------------------------------- /images/PNGs/objets/ampoule.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/ampoule.png -------------------------------------------------------------------------------- /images/PNGs/objets/ananas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/ananas.png -------------------------------------------------------------------------------- /images/PNGs/objets/arbre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/arbre.png -------------------------------------------------------------------------------- /images/PNGs/objets/arbre2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/arbre2.png -------------------------------------------------------------------------------- /images/PNGs/objets/balancoire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/balancoire.png -------------------------------------------------------------------------------- /images/PNGs/objets/boite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/boite.png -------------------------------------------------------------------------------- /images/PNGs/objets/bolide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/bolide.png -------------------------------------------------------------------------------- /images/PNGs/objets/boutons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/boutons.png -------------------------------------------------------------------------------- /images/PNGs/objets/burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/burger.png -------------------------------------------------------------------------------- /images/PNGs/objets/cactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/cactus.png -------------------------------------------------------------------------------- /images/PNGs/objets/caddie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/caddie.png -------------------------------------------------------------------------------- /images/PNGs/objets/casserole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/casserole.png -------------------------------------------------------------------------------- /images/PNGs/objets/chapeau.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/chapeau.png -------------------------------------------------------------------------------- /images/PNGs/objets/coeur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/coeur.png -------------------------------------------------------------------------------- /images/PNGs/objets/cointable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/cointable.png -------------------------------------------------------------------------------- /images/PNGs/objets/colis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/colis.png -------------------------------------------------------------------------------- /images/PNGs/objets/conserve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/conserve.png -------------------------------------------------------------------------------- /images/PNGs/objets/couvert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/objets/couvert.png -------------------------------------------------------------------------------- /images/PNGs/objets/objects: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/PNGs/personnages/animaux_et_autres/animals: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/PNGs/personnages/animaux_et_autres/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/animaux_et_autres/chat.png -------------------------------------------------------------------------------- /images/PNGs/personnages/animaux_et_autres/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/animaux_et_autres/dragon.png -------------------------------------------------------------------------------- /images/PNGs/personnages/animaux_et_autres/egar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/animaux_et_autres/egar.png -------------------------------------------------------------------------------- /images/PNGs/personnages/animaux_et_autres/grenouille.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/animaux_et_autres/grenouille.png -------------------------------------------------------------------------------- /images/PNGs/personnages/animaux_et_autres/grenouille2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/animaux_et_autres/grenouille2.png -------------------------------------------------------------------------------- /images/PNGs/personnages/animaux_et_autres/homard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/animaux_et_autres/homard.png -------------------------------------------------------------------------------- /images/PNGs/personnages/humains/addict.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/humains/addict.png -------------------------------------------------------------------------------- /images/PNGs/personnages/humains/arthur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/humains/arthur.png -------------------------------------------------------------------------------- /images/PNGs/personnages/humains/arthur2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/humains/arthur2.png -------------------------------------------------------------------------------- /images/PNGs/personnages/humains/aventurier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/humains/aventurier.png -------------------------------------------------------------------------------- /images/PNGs/personnages/humains/beargrylls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/humains/beargrylls.png -------------------------------------------------------------------------------- /images/PNGs/personnages/humains/blagueur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/PNGs/personnages/humains/blagueur.png -------------------------------------------------------------------------------- /images/PNGs/personnages/humains/human: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/PNGs/personnages/somecharacters: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/autres/clrchg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/clrchg.png -------------------------------------------------------------------------------- /images/autres/croix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/croix.png -------------------------------------------------------------------------------- /images/autres/egar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/egar.png -------------------------------------------------------------------------------- /images/autres/fondQuatre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/fondQuatre.png -------------------------------------------------------------------------------- /images/autres/fondSix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/fondSix.png -------------------------------------------------------------------------------- /images/autres/importer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/importer.png -------------------------------------------------------------------------------- /images/autres/mmmh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/mmmh.png -------------------------------------------------------------------------------- /images/autres/piaf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/autres/piaf.png -------------------------------------------------------------------------------- /images/autres/test.md: -------------------------------------------------------------------------------- 1 | test 2 | -------------------------------------------------------------------------------- /images/blanc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/blanc.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/favicon.ico -------------------------------------------------------------------------------- /images/resources.md: -------------------------------------------------------------------------------- 1 | this folder is where the images used in the creator are stored 2 | -------------------------------------------------------------------------------- /images/temp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-egar/studio/f0d6a356f328000e7d3ea9f1e081982023e8d72d/images/temp.png -------------------------------------------------------------------------------- /jquery-3.6.0.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ 2 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 { 13 | btn.addEventListener("click", (event) => { 14 | var imgAjout = event.target.id; 15 | var objet = new fabric.Image(imgAjout, { 16 | left: 50, 17 | top: 50, 18 | }); 19 | canvas.add(objet); 20 | }); 21 | }); 22 | 23 | 24 | // Contrôle pour supprimer les éléments sélectionnés 25 | // Nouveau contrôle 26 | var croix = document.getElementById("croix"); 27 | fabric.Object.prototype.controls.deleteControl = new fabric.Control({ 28 | x: 0.5, 29 | y: -0.5, 30 | offsetX: 16, 31 | offsetY: -16, 32 | cursorStyle: 'pointer', 33 | mouseUpHandler: deleteObject, 34 | render: renderIcon, 35 | cornerSize: 24 36 | }); 37 | 38 | // Fonction supprimer 39 | function deleteObject() { 40 | var activeObject = canvas.getActiveObjects(); 41 | canvas.discardActiveObject(); 42 | canvas.remove(...activeObject); 43 | canvas.requestRenderAll(); 44 | } 45 | 46 | // Supprimer avec Touche Suppr 47 | document.addEventListener("keydown", function(e) { 48 | if (e.key == "Delete") { 49 | deleteObject(); 50 | } 51 | }); 52 | 53 | // Rendu de la croix 54 | function renderIcon(ctx, left, top, fabricObject) { 55 | var size = this.cornerSize; 56 | ctx.save(); 57 | ctx.translate(left, top); 58 | ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); 59 | ctx.drawImage(croix, -size/2, -size/2, size, size); 60 | ctx.restore(); 61 | } 62 | 63 | 64 | // Mettre objet sélectionné au premier plan 65 | canvas.on("before:selection:cleared", function(e) { 66 | e.target.bringToFront(); 67 | }); 68 | 69 | 70 | // Texte 71 | 72 | // Sélection couleur 73 | var txtC = document.getElementById("txtcolor"); 74 | var txtB = document.getElementById("bkgcolor"); 75 | txtC.addEventListener("change", onChangeColor); 76 | function onChangeColor() { 77 | console.log(this.value); 78 | } 79 | txtB.addEventListener("change", onChangeColor); 80 | function onChangeColor() { 81 | console.log(this.value); 82 | } 83 | 84 | 85 | // Ajout du texte 86 | var txt = document.getElementById('txt'); 87 | var add = document.getElementById('ajouter'); 88 | add.addEventListener('click', function(){ 89 | var texteContenu = txt.value; 90 | var texteCouleur = txtC.value; 91 | var texteFond = txtB.value; 92 | var text = new fabric.Text(texteContenu, { 93 | fill: texteCouleur, 94 | backgroundColor: texteFond, 95 | }); 96 | canvas.add(text); 97 | }); 98 | 99 | 100 | // Nommer et télécharger bd 101 | var titreTxt = document.getElementById('titre'); 102 | var imageSaver = document.getElementById('lnkDownload'); 103 | imageSaver.addEventListener('click', saveImage, false); 104 | function saveImage(e) { 105 | this.href = canvas.toDataURL({ 106 | format: 'png', 107 | quality: 0.8 108 | }); 109 | if (titreTxt.value === '') { 110 | this.download ='mabd.png' 111 | } else { 112 | this.download = titreTxt.value + '.png'} 113 | } 114 | 115 | 116 | // Overlay pour les cases de la BD 117 | var overlay = 'overSix'; 118 | overChange(overlay); 119 | function overChange(overlay) { 120 | canvas.getObjects().forEach(function(e) { 121 | if(e.id == 'tl') { 122 | canvas.remove(e); 123 | } else if(e.id == 'tr') { 124 | canvas.remove(e); 125 | } else if(e.id == 'ml') { 126 | canvas.remove(e); 127 | } else if(e.id == 'mr') { 128 | canvas.remove(e); 129 | } else if(e.id == 'bl') { 130 | canvas.remove(e); 131 | } else if(e.id == 'br') { 132 | canvas.remove(e); 133 | }; 134 | }); 135 | canvas.getObjects().forEach(function(o) { 136 | if(o.id === 'overlay') { 137 | canvas.remove(o); 138 | }}); 139 | if (overlay.value === '1') { 140 | document.getElementsByClassName('quatre')[0].style.display = "none"; 141 | document.getElementsByClassName('quatre')[1].style.display = "none"; 142 | document.getElementsByClassName('six')[0].style.display = "none"; 143 | document.getElementsByClassName('six')[1].style.display = "none"; 144 | document.getElementsByClassName('deux')[0].style.display = "none"; 145 | $(document).ready(function() { 146 | $("#fonds").find("[id^='ong']").hide(); // Hide all content 147 | $("#ongs li").attr("id",""); //Reset id's 148 | $("#ongs li:first").attr("id","current"); // Activate the first tab 149 | $("#fonds #ong1").show(); // Show first tab's content 150 | var scroll = document.getElementById('fonds'); scroll.scrollTo(0,0); // Scroll reset 151 | }); 152 | 153 | // console.log('rien'); 154 | } else if (overlay.value === '2') { 155 | document.getElementsByClassName('quatre')[0].style.display = "block"; 156 | document.getElementsByClassName('quatre')[1].style.display = "block"; 157 | document.getElementsByClassName('deux')[0].style.display = "block"; 158 | document.getElementsByClassName('six')[0].style.display = "none"; 159 | document.getElementsByClassName('six')[1].style.display = "none"; 160 | $(document).ready(function() { 161 | $("#fonds").find("[id^='ong']").hide(); // Hide all content 162 | $("#ongs li").attr("id",""); //Reset id's 163 | $("#ongs li:first").attr("id","current"); // Activate the first tab 164 | $("#fonds #ong1").show(); // Show first tab's content 165 | var scroll = document.getElementById('fonds'); scroll.scrollTo(0,0); // Scroll reset 166 | }); 167 | var overQuatre = document.getElementById("overQuatre"); 168 | var out_frame = new fabric.Image(overQuatre, { 169 | width: 800, 170 | height: 800, 171 | selectable: false, 172 | evented: false, 173 | id: 'overlay' 174 | }); 175 | canvas.add(out_frame); 176 | canvas.on('selection:cleared', function() { 177 | out_frame.bringToFront(); 178 | }); 179 | // console.log('ajouté Quatre'); 180 | } else { 181 | document.getElementsByClassName('quatre')[0].style.display = "block"; 182 | document.getElementsByClassName('quatre')[1].style.display = "block"; 183 | document.getElementsByClassName('six')[0].style.display = "block"; 184 | document.getElementsByClassName('six')[1].style.display = "block"; 185 | document.getElementsByClassName('deux')[0].style.display = "block"; 186 | $(document).ready(function() { 187 | $("#fonds").find("[id^='ong']").hide(); // Hide all content 188 | $("#ongs li").attr("id",""); //Reset id's 189 | $("#ongs li:first").attr("id","current"); // Activate the first tab 190 | $("#fonds #ong1").show(); // Show first tab's content 191 | var scroll = document.getElementById('fonds'); scroll.scrollTo(0,0); // Scroll reset 192 | }); 193 | var overSix = document.getElementById("overSix"); 194 | var out_frame = new fabric.Image(overSix, { 195 | width: 800, 196 | height: 800, 197 | selectable: false, 198 | evented: false, 199 | id: 'overlay' 200 | }); 201 | canvas.add(out_frame); 202 | canvas.on('selection:cleared', function(e) { 203 | out_frame.bringToFront(); 204 | }); 205 | // console.log('ajouté Six'); 206 | } 207 | 208 | }; 209 | 210 | 211 | 212 | // Pour ajout fond 213 | let fonds = document.querySelectorAll('.fond') 214 | fonds.forEach((fnd) => { 215 | fnd.addEventListener("click", (event) => { 216 | var nbrecase = document.querySelector('input[name="o"]:checked').value; 217 | if (nbrecase === '1') { 218 | var nbrecase = 'u'; 219 | } else if (nbrecase === '2') { 220 | var nbrecase = 'q'; 221 | } else if (nbrecase === '3') { 222 | var nbrecase = 's'; 223 | }; 224 | var fondAjout = document.getElementById('temp'); 225 | var fichier = event.target.id; 226 | var position = event.target.parentElement.parentElement.id; 227 | canvas.getObjects().forEach(function(o) { 228 | if(o.id == position) { 229 | canvas.remove(o); 230 | }}); 231 | var posX = '0'; 232 | var posY = '0'; 233 | if (nbrecase === 's') { 234 | if (position === 'tr') { 235 | posX = '396'; 236 | } else if (position === 'ml') { 237 | posY = '266'; 238 | } else if (position === 'mr') { 239 | posY = '262'; 240 | posX = '406'; 241 | } else if (position === 'bl') { 242 | posY = '546'; 243 | } else if (position === 'br') { 244 | posY = '538'; 245 | posX = '404'; 246 | }; 247 | } else if (nbrecase === 'q') { 248 | if (position === 'tr') { 249 | posX = '404'; 250 | } else if (position === 'ml') { 251 | posY = '382'; 252 | } else if (position === 'mr') { 253 | posY = '402'; 254 | posX = '404'; 255 | }; 256 | } else if (nbrecase === 'u') { 257 | posX = '0'; 258 | posY = '0'; 259 | }; 260 | var objet = new fabric.Image(fondAjout, { 261 | id: position, 262 | left: posX, 263 | top: posY, 264 | }); 265 | canvas.add(objet); 266 | objet.set({selectable:false, id:position}); 267 | objet.setSrc('/images/PNGs/fonds/' + fichier + '/' + nbrecase + position + fichier + '.png', 268 | function () { 269 | objet.set('dirty', true); 270 | canvas.renderAll(); 271 | },objet.toObject() 272 | ); 273 | objet.sendToBack(); 274 | canvas.renderAll(); 275 | }); 276 | }); 277 | 278 | function changeFond(e) { 279 | var fondC = e.value; 280 | canvas.backgroundColor=fondC; 281 | canvas.renderAll(); 282 | } 283 | 284 | 285 | 286 | // Upload image 287 | function upload(e) { 288 | var url = URL.createObjectURL(e.target.files[0]); 289 | fabric.Image.fromURL(url, function(img) { 290 | img.scaleToWidth(200, false); 291 | canvas.add(img); 292 | }); 293 | } -------------------------------------------------------------------------------- /studio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | egar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | maison 22 | ►studio 23 | magasin 24 | a propos 25 |
26 | 27 |
28 |
creer ta bandessiner (lourdement inspire de ceci)
29 |
30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | 49 | 50 |
51 | 52 | sauvegarder la bede 53 |
54 |
55 |
56 | 57 | 58 | 59 | 66 | 67 | 68 |
69 | 70 | 71 |
72 |
73 | 76 | 77 | 80 | 81 | 84 | 85 | 88 | 89 | 92 | 93 | 96 | 97 | 100 | 101 | 104 | 105 | 108 | 109 | 112 | 113 | 116 | 117 | 120 | 121 | 124 | 125 | 128 | 129 | 132 | 133 | 136 | 137 | 140 | 141 | 144 | 145 | 148 | 149 | 152 | 153 | 156 | 157 | 160 | 161 | 164 | 165 | 168 | 169 | 172 | 173 | 176 | 177 | 180 | 181 | 184 | 185 | 188 | 189 | 192 | 193 | 196 | 197 | 200 | 201 | 204 | 205 | 208 | 209 | 212 | 213 | 216 | 217 | 220 | 221 | 224 | 225 | 228 | 229 | 232 | 233 | 236 | 237 | 240 | 241 | 244 | 245 | 248 | 249 | 252 | 253 | 256 | 257 | 260 | 261 | 264 | 265 | 268 | 269 | 272 | 273 | 276 | 277 | 280 | 281 | 284 | 285 | 288 | 289 | 292 | 293 | 296 | 297 | 300 | 301 | 304 | 305 | 308 | 309 | 312 | 313 | 316 | 317 | 320 | 321 | 324 | 325 | 328 | 329 | 332 | 333 | 336 | 337 | 340 | 341 | 344 | 345 | 348 | 349 | 352 | 353 | 356 | 357 | 360 | 361 | 364 | 365 | 368 | 369 | 372 | 373 | 376 | 377 | 380 | 381 | 384 | 385 | 388 | 389 | 392 | 393 | 396 | 397 | 400 | 401 | 404 | 405 | 408 | 409 | 412 | 413 | 416 | 417 | 420 |
421 |
422 | 423 | 424 |
425 |
426 | 429 | 430 | 433 | 434 | 437 | 438 | 441 | 442 | 445 | 446 | 449 | 450 | 453 | 454 | 457 | 458 | 461 | 462 | 465 | 466 | 469 | 470 | 473 | 474 | 477 | 478 | 481 | 482 | 485 | 486 | 489 | 490 | 493 | 494 | 497 | 498 | 501 | 502 | 505 | 506 | 509 | 510 | 513 | 514 | 517 |
518 |
519 | 520 | 521 |
522 |
523 | 526 | 527 | 530 | 531 | 534 | 535 | 538 | 539 | 542 | 543 | 546 | 547 | 550 | 551 | 554 | 555 | 558 | 559 | 562 | 563 | 566 | 567 | 570 | 571 | 574 | 575 | 578 | 579 | 582 | 583 | 586 | 587 | 590 | 591 | 594 | 595 | 598 | 599 | 602 | 603 | 606 | 607 | 610 | 611 | 614 | 615 | 618 | 619 | 622 | 623 | 626 | 627 | 630 | 631 | 634 | 635 | 638 | 639 | 642 | 643 | 646 | 647 | 650 | 651 | 654 | 655 | 658 | 659 | 662 | 663 | 666 | 667 | 670 | 671 | 674 | 675 | 678 | 679 | 682 | 683 | 686 | 687 | 690 | 691 | 694 | 695 | 698 | 699 | 702 | 703 | 706 | 707 | 710 | 711 | 714 | 715 | 718 | 719 | 722 | 723 |
724 |
725 | 726 | 727 |
728 |
729 |
730 | 731 | 732 | 733 |
734 | 735 |
736 |
couleur du texte
737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 |
couleur du fond
752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 |
767 |
768 |
769 | 770 | 771 |
772 |
773 | 774 | 775 |
776 |
777 |
778 | 779 | 780 | 801 | 802 | 803 | 812 | 813 | 814 |
815 |
816 |
817 | 820 | 823 | 826 | 829 | 832 | 835 | 838 | 841 | 844 | 847 | 850 | 853 | 856 | 859 | 862 | 865 | 868 | 871 | 874 | 877 | 880 |
881 |
882 |
883 |
884 | 887 | 890 | 893 | 896 | 899 | 902 | 905 | 908 | 911 | 914 | 917 | 920 | 923 | 926 | 929 | 932 | 935 | 938 | 941 | 944 | 947 |
948 |
949 |
950 |
951 | 954 | 957 | 960 | 963 | 966 | 969 | 972 | 975 | 978 | 981 | 984 | 987 | 990 | 993 | 996 | 999 | 1002 | 1005 | 1008 | 1011 | 1014 |
1015 |
1016 |
1017 |
1018 | 1021 | 1024 | 1027 | 1030 | 1033 | 1036 | 1039 | 1042 | 1045 | 1048 | 1051 | 1054 | 1057 | 1060 | 1063 | 1066 | 1069 | 1072 | 1075 | 1078 | 1081 |
1082 |
1083 |
1084 |
1085 | 1088 | 1091 | 1094 | 1097 | 1100 | 1103 | 1106 | 1109 | 1112 | 1115 | 1118 | 1121 | 1124 | 1127 | 1130 | 1133 | 1136 | 1139 | 1142 | 1145 | 1148 |
1149 |
1150 |
1151 |
1152 | 1155 | 1158 | 1161 | 1164 | 1167 | 1170 | 1173 | 1176 | 1179 | 1182 | 1185 | 1188 | 1191 | 1194 | 1197 | 1200 | 1203 | 1206 | 1209 | 1212 | 1215 |
1216 |
1217 |
1218 |
1219 |
1220 | 1221 | 1222 |
1223 |
1224 |
1225 |
1226 | 1227 | 1228 | 1229 | 1250 | 1251 | 1252 | 1253 | 1254 | 1255 | 1256 | 1257 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | .contenu { 2 | cursor: crosshair; 3 | text-decoration: none; 4 | font-size: 35px; 5 | margin-top: 30px; 6 | text-align: center; 7 | } 8 | 9 | .liens a { 10 | text-decoration: none; 11 | font-style: normal; 12 | color: rgb(213, 241, 52); 13 | background-color: rgb(109, 85, 61); 14 | cursor: grab; 15 | margin: 15px; 16 | text-align: center; 17 | } 18 | 19 | body { 20 | background-color: rgb(93, 163, 93); 21 | margin-left: -5px; 22 | } 23 | 24 | html { 25 | cursor: crosshair; 26 | font-family: 'Times New Roman', Times, serif; 27 | } 28 | 29 | .soustitre { 30 | margin: 0px 0px 25px auto; 31 | font-style: italic; 32 | text-decoration: none; 33 | font-size: inherit; 34 | } 35 | 36 | .grille { 37 | max-width: 2300px; 38 | height: auto; 39 | display: grid; 40 | grid-template-columns: repeat(1, 800px); 41 | justify-content: center; 42 | grid-gap: 100px; 43 | } 44 | 45 | .grid-item { 46 | display: block; 47 | width: 800px; 48 | height: 800px; 49 | border: 8px solid rgb(0, 0, 0); 50 | justify-content: center; 51 | margin-left: -8px; 52 | } 53 | 54 | .legende { 55 | font-size: x-large; 56 | margin: 10px 0px; 57 | } 58 | 59 | .sociaux { 60 | text-align: center; 61 | margin: 50px 0px auto; 62 | justify-content: center; 63 | } 64 | 65 | .sociaux a { 66 | cursor: grab; 67 | } 68 | 69 | .textsoc { 70 | display: block; 71 | margin: 0px auto; 72 | width: fit-content; 73 | background-color: rgb(213, 241, 52); 74 | text-align: center; 75 | justify-content: center; 76 | } 77 | 78 | .grillesoc { 79 | display: grid; 80 | grid-template-columns: repeat(3, 250px); 81 | margin: auto; 82 | width: 800px; 83 | height: auto; 84 | justify-content: center; 85 | } 86 | 87 | .apropos { 88 | margin: 60px; 89 | font-style: italic; 90 | color: rgb(109, 85, 61); 91 | } 92 | 93 | .paypal { 94 | position: fixed; 95 | bottom: 2%; 96 | width: 100%; 97 | text-align: center; 98 | left: 0; 99 | } 100 | 101 | .paypal a { 102 | cursor: grab; 103 | } 104 | 105 | .boutique { 106 | margin: 10% auto; 107 | color: rgb(213, 241, 52); 108 | border: solid rgb(213, 241, 52); 109 | width: fit-content; 110 | font-size: 27px; 111 | } 112 | 113 | .canvas-container { 114 | margin: 0 auto; 115 | background-color: white; 116 | border: 8px solid black; 117 | cursor: inherit; 118 | } 119 | 120 | .bouton, 121 | .fond { 122 | background-color: transparent; 123 | border: transparent; 124 | cursor: inherit; 125 | } 126 | 127 | .objimg { 128 | width: 100%; 129 | max-width: 150px; 130 | max-height: 150px; 131 | vertical-align: middle; 132 | padding-top: 15px; 133 | cursor: crosshair; 134 | } 135 | 136 | #tabs, 137 | #ongs { 138 | max-width: 816px; 139 | overflow: hidden; 140 | width: 100%; 141 | margin: 0 auto; 142 | padding-top: 50px; 143 | padding-left: 0; 144 | list-style: none; 145 | cursor: inherit; 146 | } 147 | 148 | #tabs a, 149 | #ongs a { 150 | position: relative; 151 | padding: 1em 2em; 152 | float: left; 153 | font-weight: bold; 154 | text-decoration: none; 155 | color: black; 156 | background: green; 157 | cursor: inherit; 158 | } 159 | 160 | #tabs #current a, 161 | #tabs #current a::after, 162 | #ongs #current a, 163 | #ongs #current a::after { 164 | background: rgb(112, 194, 112); 165 | z-index: 3; 166 | cursor: inherit; 167 | } 168 | 169 | #content, 170 | #fonds { 171 | margin: 0 auto; 172 | max-width: 816px; 173 | background: rgb(112, 194, 112); 174 | height: 200px; 175 | position: relative; 176 | z-index: 2; 177 | overflow: auto; 178 | white-space: nowrap; 179 | cursor: inherit; 180 | } 181 | 182 | /* SCROLLBAR */ 183 | /* width */ 184 | ::-webkit-scrollbar { 185 | width: 10px; 186 | cursor: inherit; 187 | } 188 | /* Track */ 189 | ::-webkit-scrollbar-track { 190 | background: rgb(112, 194, 112); 191 | } 192 | /* Handle */ 193 | ::-webkit-scrollbar-thumb { 194 | background: green; 195 | } 196 | /* Handle on hover */ 197 | ::-webkit-scrollbar-thumb:hover { 198 | background: green; 199 | } 200 | 201 | .colorpicker { 202 | height: 35px; 203 | width: 60px; 204 | background-color: transparent; 205 | border: transparent; 206 | cursor: inherit; 207 | } 208 | 209 | .txtgrid { 210 | display: grid; 211 | grid-template-columns: repeat(auto-fit, 400px); 212 | width: 816px; 213 | height: 120px; 214 | padding-top: 30px; 215 | } 216 | 217 | .txtgriditem { 218 | width: 388px; 219 | height: 120px; 220 | display: block; 221 | font-size: 20px; 222 | margin-left: 20px; 223 | } 224 | 225 | .btnadd { 226 | font-size: 20px; 227 | vertical-align: top; 228 | font-family: 'Times New Roman', Times, serif; 229 | background-color: rgb(109, 85, 61); 230 | color: greenyellow; 231 | border-style: none; 232 | height: 120px; 233 | cursor: inherit; 234 | } 235 | 236 | .txtarea { 237 | margin: 0 20px 0; 238 | font-size: 20px; 239 | font-family: 'Times New Roman', Times, serif; 240 | background-color: rgb(112, 194, 112); 241 | border: 2px solid black; 242 | cursor: inherit; 243 | } 244 | 245 | ::placeholder { 246 | color: black; 247 | } 248 | 249 | textarea { 250 | border: none; 251 | outline: none; 252 | } 253 | 254 | .telecharger{ 255 | color: black; 256 | font-size: 25px; 257 | display: block; 258 | text-decoration: underline; 259 | float:right; 260 | cursor: crosshair; 261 | } 262 | 263 | .conteneurCanvas { 264 | margin: 0 auto; 265 | width: 816px; 266 | } 267 | 268 | .titre { 269 | margin: 5px 0 0; 270 | font-size: 20px; 271 | font-family: 'Times New Roman', Times, serif; 272 | background-color: rgb(112, 194, 112); 273 | border: 2px solid black; 274 | cursor: inherit; 275 | } 276 | 277 | .nombrecases { 278 | width: 100px; 279 | height: 25px; 280 | margin: 0 auto; 281 | cursor: inherit; 282 | background: rgb(0, 65, 0); 283 | text-align: center; 284 | font-size: 20px; 285 | } 286 | 287 | .nombrecases input { 288 | position: absolute; 289 | opacity: 0; 290 | cursor: inherit; 291 | width: 20px; 292 | height: 30px; 293 | } 294 | 295 | .nombrecases input + label { 296 | padding: 7px; 297 | color: rgb(203, 233, 203); 298 | cursor: inherit; 299 | } 300 | 301 | .nombrecases input:checked + label { 302 | background: green; 303 | } 304 | 305 | .conteneuroverlay { 306 | display: grid; 307 | } 308 | 309 | .nombrecases, .telechargerdiv { 310 | grid-area: 1 / 1; 311 | } 312 | 313 | .clrbtn { 314 | width: 200px; 315 | margin: 25px; 316 | display: grid; 317 | } 318 | 319 | .clrbtn input { 320 | width: 200px; 321 | height: 120px; 322 | margin: 0; 323 | background-color: transparent; 324 | border: none; 325 | opacity: 0; 326 | } 327 | 328 | .clrbtn input, .imagechg { 329 | grid-area: 1 / 1; 330 | max-width: 200px; 331 | } 332 | 333 | .htck { 334 | text-decoration: none underline; 335 | color: black; 336 | cursor: grab; 337 | } 338 | 339 | .importgrid { 340 | display: grid; 341 | } 342 | 343 | .importer { 344 | opacity: 0; 345 | } 346 | 347 | .importerimg, .importer { 348 | grid-column: 1; 349 | grid-row: 1; 350 | display: block; 351 | margin: 20px auto; 352 | width: 300px; 353 | height: 150px; 354 | } --------------------------------------------------------------------------------