diff --git a/asset-manifest.json b/asset-manifest.json index 5d577d5..f00ba4e 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,8 +1,8 @@ { "files": { - "main.css": "/static/css/main.4a6e9426.chunk.css", - "main.js": "/static/js/main.0970a3bd.chunk.js", - "main.js.map": "/static/js/main.0970a3bd.chunk.js.map", + "main.css": "/static/css/main.015bbd8f.chunk.css", + "main.js": "/static/js/main.f98f9ce2.chunk.js", + "main.js.map": "/static/js/main.f98f9ce2.chunk.js.map", "runtime-main.js": "/static/js/runtime-main.f6e93472.js", "runtime-main.js.map": "/static/js/runtime-main.f6e93472.js.map", "static/js/2.1a3cb35a.chunk.js": "/static/js/2.1a3cb35a.chunk.js", @@ -28,7 +28,7 @@ "static/js/12.18f83d7a.chunk.js": "/static/js/12.18f83d7a.chunk.js", "static/js/12.18f83d7a.chunk.js.map": "/static/js/12.18f83d7a.chunk.js.map", "index.html": "/index.html", - "static/css/main.4a6e9426.chunk.css.map": "/static/css/main.4a6e9426.chunk.css.map", + "static/css/main.015bbd8f.chunk.css.map": "/static/css/main.015bbd8f.chunk.css.map", "static/js/2.1a3cb35a.chunk.js.LICENSE.txt": "/static/js/2.1a3cb35a.chunk.js.LICENSE.txt", "static/media/HeaderImage.f98423dd.svg": "/static/media/HeaderImage.f98423dd.svg", "static/media/ProfileFrame B&G Bars.png": "/static/media/ProfileFrame B&G Bars.b84e992d.png", @@ -44,7 +44,7 @@ "entrypoints": [ "static/js/runtime-main.f6e93472.js", "static/js/2.1a3cb35a.chunk.js", - "static/css/main.4a6e9426.chunk.css", - "static/js/main.0970a3bd.chunk.js" + "static/css/main.015bbd8f.chunk.css", + "static/js/main.f98f9ce2.chunk.js" ] } \ No newline at end of file diff --git a/index.html b/index.html index 1cc6953..dd9302b 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Volt Social Media Frame Generator
\ No newline at end of file +Volt Social Media Frame Generator
\ No newline at end of file diff --git a/static/css/main.015bbd8f.chunk.css b/static/css/main.015bbd8f.chunk.css new file mode 100644 index 0000000..4079dfb --- /dev/null +++ b/static/css/main.015bbd8f.chunk.css @@ -0,0 +1,2 @@ +:root{--volt-purple:#582c83;--background:#140022}*{margin:0;padding:0;font-family:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{text-align:center;background-color:#140022;background-color:var(--background);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff;padding:10vh}h2{margin:10vh 0 2vh;font-size:calc(10px + 4vmin)}p{max-width:100%;width:calc(40vh + 15vw)}.HeaderImage{height:calc(10px + 30vmin);max-width:100%}.FinishedFrame{height:36vh;margin:2vh}.FrameChooser .frame{height:12vh;margin:2vh;cursor:pointer;box-shadow:0 0 0 1vh hsla(0,0%,100%,0);transition:transform .2s ease}.FrameChooser .frame:hover{transform-origin:center center;transform:scale(1.1)}.FrameChooser .frame.choosen{box-shadow:0 0 0 1vh #fff}.labelButton,button{outline:none;border:none;margin:2vh;padding:1vh 2vh;font-size:calc(10px + 2vmin);font-weight:700;cursor:pointer;background:#fff;color:#582c83;color:var(--volt-purple);transition:transform .2s ease}.labelButton:hover,button:hover{transform-origin:center center;transform:scale(1.05)}.labelButton img{display:inline;height:calc(10px + 4vmin);margin:0 2vh 0 -1vh}.labelButton img,.labelButton span{vertical-align:middle} +/*# sourceMappingURL=main.015bbd8f.chunk.css.map */ \ No newline at end of file diff --git a/static/css/main.015bbd8f.chunk.css.map b/static/css/main.015bbd8f.chunk.css.map new file mode 100644 index 0000000..3e94476 --- /dev/null +++ b/static/css/main.015bbd8f.chunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack://src/App.css"],"names":[],"mappings":"AAAA,MACI,qBAAsB,CACtB,oBACJ,CAEA,EACI,QAAS,CACT,SAAU,CACV,mJAEU,CACV,kCAAmC,CACnC,iCACJ,CAEA,KACI,iBAAkB,CAElB,wBAAmC,CAAnC,kCAAmC,CACnC,gBAAiB,CACjB,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BAA6B,CAC7B,UAAY,CACZ,YACJ,CAEA,GACI,iBAAoB,CACpB,4BACJ,CAEA,EACI,cAAe,CACf,uBACJ,CAEA,aACI,0BAA2B,CAC3B,cACJ,CAEA,eACI,WAAY,CACZ,UACJ,CAEA,qBACI,WAAY,CACZ,UAAW,CACX,cAAe,CACf,sCAAyC,CACzC,6BACJ,CACA,2BACI,8BAA+B,CAC/B,oBACJ,CACA,6BACI,yBACJ,CAEA,oBAEI,YAAa,CACb,WAAY,CACZ,UAAW,CACX,eAAgB,CAChB,4BAA6B,CAC7B,eAAiB,CACjB,cAAe,CAEf,eAAiB,CACjB,aAAyB,CAAzB,wBAAyB,CACzB,6BACJ,CACA,gCAEI,8BAA+B,CAC/B,qBACJ,CAEA,iBACI,cAAe,CACf,yBAA0B,CAE1B,mBACJ,CACA,mCAHI,qBAKJ","file":"main.015bbd8f.chunk.css","sourcesContent":[":root{\n --volt-purple: #582C83;\n --background: #140022;\n}\n\n*{\n margin: 0;\n padding: 0;\n font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.App {\n text-align: center;\n\n background-color: var(--background);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n padding: 10vh;\n}\n\nh2{\n margin: 10vh 0 2vh 0;\n font-size: calc(10px + 4vmin);\n}\n\np{\n max-width: 100%;\n width: calc(40vh + 15vw);\n}\n\n.HeaderImage{\n height: calc(10px + 30vmin);\n max-width: 100%;\n}\n\n.FinishedFrame {\n height: 36vh;\n margin: 2vh;\n}\n\n.FrameChooser .frame{\n height: 12vh;\n margin: 2vh;\n cursor: pointer;\n box-shadow: 0 0 0 1vh rgba(255,255,255,0);\n transition: transform 0.2s ease;\n}\n.FrameChooser .frame:hover{\n transform-origin: center center;\n transform: scale(1.1);\n}\n.FrameChooser .frame.choosen{\n box-shadow: 0 0 0 1vh white;\n}\n\nbutton,\n.labelButton{\n outline: none;\n border: none;\n margin: 2vh;\n padding: 1vh 2vh;\n font-size: calc(10px + 2vmin);\n font-weight: bold;\n cursor: pointer;\n\n background: white;\n color: var(--volt-purple);\n transition: transform 0.2s ease;\n}\nbutton:hover,\n.labelButton:hover{\n transform-origin: center center;\n transform: scale(1.05);\n}\n\n.labelButton img{\n display: inline;\n height: calc(10px + 4vmin);\n vertical-align: middle;\n margin: 0 2vh 0 -1vh;\n}\n.labelButton span{\n vertical-align: middle;\n}\n"]} \ No newline at end of file diff --git a/static/css/main.4a6e9426.chunk.css b/static/css/main.4a6e9426.chunk.css deleted file mode 100644 index 35452b6..0000000 --- a/static/css/main.4a6e9426.chunk.css +++ /dev/null @@ -1,2 +0,0 @@ -:root{--volt-purple:#582c83;--background:#140022}*{margin:0;padding:0;font-family:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{text-align:center;background-color:#140022;background-color:var(--background);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff;padding:10vh}h2{margin:10vh 0 2vh;font-size:calc(10px + 4vmin)}.HeaderImage{height:calc(10px + 30vmin);max-width:100%}.FinishedFrame{height:36vh;margin:2vh}.FrameChooser .frame{height:12vh;margin:2vh;cursor:pointer;box-shadow:0 0 0 1vh hsla(0,0%,100%,0);transition:transform .2s ease}.FrameChooser .frame:hover{transform-origin:center center;transform:scale(1.1)}.FrameChooser .frame.choosen{box-shadow:0 0 0 1vh #fff}.labelButton,button{outline:none;border:none;margin:2vh;padding:1vh 2vh;font-size:calc(10px + 2vmin);font-weight:700;cursor:pointer;background:#fff;color:#582c83;color:var(--volt-purple);transition:transform .2s ease}.labelButton:hover,button:hover{transform-origin:center center;transform:scale(1.05)}.labelButton img{display:inline;height:calc(10px + 4vmin);margin:0 2vh 0 -1vh}.labelButton img,.labelButton span{vertical-align:middle} -/*# sourceMappingURL=main.4a6e9426.chunk.css.map */ \ No newline at end of file diff --git a/static/css/main.4a6e9426.chunk.css.map b/static/css/main.4a6e9426.chunk.css.map deleted file mode 100644 index 7b60973..0000000 --- a/static/css/main.4a6e9426.chunk.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://src/App.css"],"names":[],"mappings":"AAAA,MACI,qBAAsB,CACtB,oBACJ,CAEA,EACI,QAAS,CACT,SAAU,CACV,mJAEU,CACV,kCAAmC,CACnC,iCACJ,CAEA,KACI,iBAAkB,CAElB,wBAAmC,CAAnC,kCAAmC,CACnC,gBAAiB,CACjB,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BAA6B,CAC7B,UAAY,CACZ,YACJ,CAEA,GACI,iBAAoB,CACpB,4BACJ,CAEA,aACI,0BAA2B,CAC3B,cACJ,CAEA,eACI,WAAY,CACZ,UACJ,CAEA,qBACI,WAAY,CACZ,UAAW,CACX,cAAe,CACf,sCAAyC,CACzC,6BACJ,CACA,2BACI,8BAA+B,CAC/B,oBACJ,CACA,6BACI,yBACJ,CAEA,oBAEI,YAAa,CACb,WAAY,CACZ,UAAW,CACX,eAAgB,CAChB,4BAA6B,CAC7B,eAAiB,CACjB,cAAe,CAEf,eAAiB,CACjB,aAAyB,CAAzB,wBAAyB,CACzB,6BACJ,CACA,gCAEI,8BAA+B,CAC/B,qBACJ,CAEA,iBACI,cAAe,CACf,yBAA0B,CAE1B,mBACJ,CACA,mCAHI,qBAKJ","file":"main.4a6e9426.chunk.css","sourcesContent":[":root{\n --volt-purple: #582C83;\n --background: #140022;\n}\n\n*{\n margin: 0;\n padding: 0;\n font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.App {\n text-align: center;\n\n background-color: var(--background);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n padding: 10vh;\n}\n\nh2{\n margin: 10vh 0 2vh 0;\n font-size: calc(10px + 4vmin);\n}\n\n.HeaderImage{\n height: calc(10px + 30vmin);\n max-width: 100%;\n}\n\n.FinishedFrame {\n height: 36vh;\n margin: 2vh;\n}\n\n.FrameChooser .frame{\n height: 12vh;\n margin: 2vh;\n cursor: pointer;\n box-shadow: 0 0 0 1vh rgba(255,255,255,0);\n transition: transform 0.2s ease;\n}\n.FrameChooser .frame:hover{\n transform-origin: center center;\n transform: scale(1.1);\n}\n.FrameChooser .frame.choosen{\n box-shadow: 0 0 0 1vh white;\n}\n\nbutton,\n.labelButton{\n outline: none;\n border: none;\n margin: 2vh;\n padding: 1vh 2vh;\n font-size: calc(10px + 2vmin);\n font-weight: bold;\n cursor: pointer;\n\n background: white;\n color: var(--volt-purple);\n transition: transform 0.2s ease;\n}\nbutton:hover,\n.labelButton:hover{\n transform-origin: center center;\n transform: scale(1.05);\n}\n\n.labelButton img{\n display: inline;\n height: calc(10px + 4vmin);\n vertical-align: middle;\n margin: 0 2vh 0 -1vh;\n}\n.labelButton span{\n vertical-align: middle;\n}\n"]} \ No newline at end of file diff --git a/static/js/main.0970a3bd.chunk.js b/static/js/main.0970a3bd.chunk.js deleted file mode 100644 index c8b7f14..0000000 --- a/static/js/main.0970a3bd.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[0],{17:function(e,t,r){},19:function(e,t,r){var n={"./ProfileFrame B&G Bars.png":[21,4],"./ProfileFrame Blue Bars.png":[22,5],"./ProfileFrame Green Bars.png":[23,6],"./ProfileFrame Mixed Bars.png":[24,7],"./ProfileFrame Purple.png":[25,8],"./ProfileFrame R&Y Bars.png":[26,9],"./ProfileFrame Red Bars.png":[27,10],"./ProfileFrame White Bars.png":[28,11],"./ProfileFrame Yellow Bars.png":[29,12]};function a(e){if(!r.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],a=t[0];return r.e(t[1]).then((function(){return r(a)}))}a.keys=function(){return Object.keys(n)},a.id=19,e.exports=a},20:function(e,t,r){"use strict";r.r(t);var n=r(0),a=r(1),c=r.n(a),o=r(9),s=r.n(o),i=r(8),l=r(2),u=(r(17),r(10)),f=r.n(u),m=r(4),j=r.n(m),d=r(7);var p=function(e){var t=e.onFrameChange,c=Object(a.useState)([]),o=Object(l.a)(c,2),s=o[0],i=o[1],u=Object(a.useState)(null),f=Object(l.a)(u,2),m=f[0],p=f[1];Object(a.useEffect)((function(){function e(){return(e=Object(d.a)(j.a.mark((function e(){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["ProfileFrame Purple","ProfileFrame Yellow Bars","ProfileFrame Red Bars","ProfileFrame Blue Bars","ProfileFrame Green Bars","ProfileFrame White Bars","ProfileFrame Mixed Bars","ProfileFrame R&Y Bars","ProfileFrame B&G Bars"].map(function(){var e=Object(d.a)(j.a.mark((function e(t){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.t0=t,e.next=3,r(19)("./".concat(t,".png"));case 3:return e.t1=e.sent,e.abrupt("return",{name:e.t0,src:e.t1});case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){console.log(e),i(e),p(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var b=Object(a.useCallback)((function(e){p(e.target.dataset.src)}),[p]);return Object(a.useEffect)((function(){t(m)}),[t,m]),Object(n.jsxs)("div",{className:"FrameChooser",children:[Object(n.jsx)("h2",{children:"Choose a frame:"}),s.map((function(e){var t=e.src.default,r=m===t;return Object(n.jsx)("img",{alt:e.name,"data-src":t,src:t,className:r?"frame choosen":"frame",onClick:b},t)}))]})},b=r.p+"static/media/HeaderImage.f98423dd.svg",h=r(11),g=1080;var O=function(){var e=Object(a.useState)(null),t=Object(l.a)(e,2),r=t[0],c=t[1],o=Object(a.useState)(null),s=Object(l.a)(o,2),u=s[0],m=s[1],j=Object(a.useState)(null),d=Object(l.a)(j,2),O=d[0],F=d[1],P=Object(a.useCallback)((function(e){c(e)}),[c]),v=Object(a.useCallback)((function(e){var t=new FileReader;t.onload=function(e){var t=new Image;t.onload=function(){var e=document.createElement("canvas");e.width=g,e.height=g;var r=e.getContext("2d",{alpha:!1}),n=t.height/t.width*g;r.drawImage(t,0,(g-n)/2,1080,n);var a=e.toDataURL();m(a)},t.src=e.target.result},t.readAsDataURL(e.target.files[0])}),[m]);return Object(a.useEffect)((function(){Object(h.a)([].concat(Object(i.a)(u?[u]:[]),Object(i.a)(r?[r]:[]))).then((function(e){return F(e)}))}),[u,r]),Object(n.jsxs)("div",{className:"App",children:[Object(n.jsx)("img",{src:b,className:"HeaderImage",alt:"Volt Logo"}),Object(n.jsx)("h2",{children:"Choose your Photo:"}),Object(n.jsxs)("label",{className:"labelButton",tabIndex:"0",style:{outline:"none"},children:[u?Object(n.jsx)("img",{src:u,alt:"Preview"}):null,Object(n.jsx)("span",{children:"Load Photo"}),Object(n.jsx)("input",{onChange:v,type:"file",accept:"image/*",style:{display:"none"}})]}),Object(n.jsx)(p,{onFrameChange:P}),Object(n.jsx)("h2",{children:"Download your Photo:"}),Object(n.jsx)("img",{src:O,className:"FinishedFrame",alt:"Finished Frame"}),Object(n.jsx)("button",{onClick:function(){return f()(O,"volt-profile-picture.png","image/png")},children:"Download Profile Picture"})]})},F=function(e){e&&e instanceof Function&&r.e(3).then(r.bind(null,30)).then((function(t){var r=t.getCLS,n=t.getFID,a=t.getFCP,c=t.getLCP,o=t.getTTFB;r(e),n(e),a(e),c(e),o(e)}))};s.a.render(Object(n.jsx)(c.a.StrictMode,{children:Object(n.jsx)(O,{})}),document.getElementById("root")),F()}},[[20,1,2]]]); -//# sourceMappingURL=main.0970a3bd.chunk.js.map \ No newline at end of file diff --git a/static/js/main.0970a3bd.chunk.js.map b/static/js/main.0970a3bd.chunk.js.map deleted file mode 100644 index 01d6a1d..0000000 --- a/static/js/main.0970a3bd.chunk.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["frames lazy /^/.//.*/.png$/ groupOptions: {} namespace object","FrameChooser.js","HeaderImage.svg","App.js","reportWebVitals.js","index.js"],"names":["map","webpackAsyncContext","req","__webpack_require__","o","Promise","resolve","then","e","Error","code","ids","id","keys","Object","module","exports","FrameChooser","onFrameChange","useState","frames","setFrames","choosenFrame","setChoosenFrame","useEffect","a","all","frame_filename","name","src","new_frames","console","log","default","loadFrames","handleImageChoosing","useCallback","event","target","dataset","className","frame","frame_src_path","isChoosen","alt","data-src","onClick","frameSize","App","frameURL","setFrameURL","photo","setPhoto","combinedImage","setCombinedImage","handleFrameURL","newFrameURL","handleImage","files_event","reader","FileReader","onload","reader_event","img","Image","offscreenCanvas","document","createElement","width","height","offscreenCanvas_ctx","getContext","alpha","drawImage","pngUrl","toDataURL","result","readAsDataURL","files","mergeImages","b64","HeaderImage","tabIndex","style","outline","onChange","type","accept","display","download","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.0970a3bd.chunk.js","sourcesContent":["var map = {\n\t\"./ProfileFrame B&G Bars.png\": [\n\t\t21,\n\t\t4\n\t],\n\t\"./ProfileFrame Blue Bars.png\": [\n\t\t22,\n\t\t5\n\t],\n\t\"./ProfileFrame Green Bars.png\": [\n\t\t23,\n\t\t6\n\t],\n\t\"./ProfileFrame Mixed Bars.png\": [\n\t\t24,\n\t\t7\n\t],\n\t\"./ProfileFrame Purple.png\": [\n\t\t25,\n\t\t8\n\t],\n\t\"./ProfileFrame R&Y Bars.png\": [\n\t\t26,\n\t\t9\n\t],\n\t\"./ProfileFrame Red Bars.png\": [\n\t\t27,\n\t\t10\n\t],\n\t\"./ProfileFrame White Bars.png\": [\n\t\t28,\n\t\t11\n\t],\n\t\"./ProfileFrame Yellow Bars.png\": [\n\t\t29,\n\t\t12\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn __webpack_require__.e(ids[1]).then(function() {\n\t\treturn __webpack_require__(id);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 19;\nmodule.exports = webpackAsyncContext;","import { useState, useEffect, useCallback } from 'react'\n\nfunction FrameChooser({onFrameChange}) {\n const [frames, setFrames] = useState([])\n const [choosenFrame, setChoosenFrame] = useState(null)\n\n useEffect(() => {\n async function loadFrames(){\n Promise.all(\n [\n 'ProfileFrame Purple',\n 'ProfileFrame Yellow Bars',\n 'ProfileFrame Red Bars',\n 'ProfileFrame Blue Bars',\n 'ProfileFrame Green Bars',\n 'ProfileFrame White Bars',\n 'ProfileFrame Mixed Bars',\n 'ProfileFrame R&Y Bars',\n 'ProfileFrame B&G Bars',\n ]\n .map(async frame_filename => {\n return {\n name: frame_filename,\n src: await import(`./frames/${frame_filename}.png`),\n }\n })\n )\n .then(new_frames => {\n console.log(new_frames)\n setFrames(new_frames)\n setChoosenFrame(new_frames[0].src.default)\n })\n }\n loadFrames()\n }, [])\n\n const handleImageChoosing = useCallback(event => {\n setChoosenFrame(event.target.dataset.src)\n }, [setChoosenFrame])\n\n useEffect(() => {\n onFrameChange(choosenFrame)\n }, [onFrameChange, choosenFrame])\n\n return (\n
\n

Choose a frame:

\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return {frame.name}\n })\n } \n
\n )\n}\n\nexport default FrameChooser;\n","export default __webpack_public_path__ + \"static/media/HeaderImage.f98423dd.svg\";","import { useState, useEffect, useCallback } from 'react'\nimport './App.css'\nimport download from 'downloadjs'\nimport FrameChooser from './FrameChooser.js'\nimport HeaderImage from './HeaderImage.svg'\n\nimport mergeImages from 'merge-images'\n\nconst frameSize = 1080\n\nfunction App() {\n const [frameURL, setFrameURL] = useState(null)\n const [photo, setPhoto] = useState(null)\n const [combinedImage, setCombinedImage] = useState(null)\n\n const handleFrameURL = useCallback(newFrameURL => {\n setFrameURL(newFrameURL)\n }, [setFrameURL])\n\n const handleImage = useCallback(files_event => {\n const reader = new FileReader()\n reader.onload = reader_event => {\n const img = new Image()\n img.onload = function () {\n const offscreenCanvas = document.createElement('canvas')\n offscreenCanvas.width = frameSize\n offscreenCanvas.height = frameSize\n\n const offscreenCanvas_ctx = offscreenCanvas.getContext('2d', { alpha: false })\n\n const width = frameSize\n const height = (img.height / img.width) * frameSize\n offscreenCanvas_ctx.drawImage(\n img,\n (frameSize - width) / 2,\n (frameSize - height) / 2,\n width,\n height,\n );\n\n const pngUrl = offscreenCanvas.toDataURL()\n setPhoto(pngUrl)\n }\n img.src = reader_event.target.result\n }\n reader.readAsDataURL(files_event.target.files[0])\n }, [setPhoto])\n\n useEffect(() => {\n mergeImages([\n ...(photo ? [photo] : []),\n ...(frameURL ? [frameURL] : []),\n ])\n .then(b64 => setCombinedImage(b64))\n }, [photo, frameURL])\n\n\n\nreturn (\n
\n \"Volt\n\n

Choose your Photo:

\n\n \n\n \n \n

Download your Photo:

\n \"Finished\n \n
\n)\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.f98f9ce2.chunk.js b/static/js/main.f98f9ce2.chunk.js new file mode 100644 index 0000000..d96c649 --- /dev/null +++ b/static/js/main.f98f9ce2.chunk.js @@ -0,0 +1,2 @@ +(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[0],{17:function(e,t,r){},19:function(e,t,r){var a={"./ProfileFrame B&G Bars.png":[21,4],"./ProfileFrame Blue Bars.png":[22,5],"./ProfileFrame Green Bars.png":[23,6],"./ProfileFrame Mixed Bars.png":[24,7],"./ProfileFrame Purple.png":[25,8],"./ProfileFrame R&Y Bars.png":[26,9],"./ProfileFrame Red Bars.png":[27,10],"./ProfileFrame White Bars.png":[28,11],"./ProfileFrame Yellow Bars.png":[29,12]};function n(e){if(!r.o(a,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=a[e],n=t[0];return r.e(t[1]).then((function(){return r(n)}))}n.keys=function(){return Object.keys(a)},n.id=19,e.exports=n},20:function(e,t,r){"use strict";r.r(t);var a=r(0),n=r(1),c=r.n(n),o=r(9),s=r.n(o),i=r(8),l=r(2),u=(r(17),r(10)),f=r.n(u),h=r(4),d=r.n(h),m=r(7);var j=function(e){var t=e.onFrameChange,c=Object(n.useState)([]),o=Object(l.a)(c,2),s=o[0],i=o[1],u=Object(n.useState)(null),f=Object(l.a)(u,2),h=f[0],j=f[1];Object(n.useEffect)((function(){function e(){return(e=Object(m.a)(d.a.mark((function e(){return d.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["ProfileFrame Purple","ProfileFrame Yellow Bars","ProfileFrame Red Bars","ProfileFrame Blue Bars","ProfileFrame Green Bars","ProfileFrame White Bars","ProfileFrame Mixed Bars","ProfileFrame R&Y Bars","ProfileFrame B&G Bars"].map(function(){var e=Object(m.a)(d.a.mark((function e(t){return d.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.t0=t,e.next=3,r(19)("./".concat(t,".png"));case 3:return e.t1=e.sent,e.abrupt("return",{name:e.t0,src:e.t1});case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){console.log(e),i(e),j(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var b=Object(n.useCallback)((function(e){j(e.target.dataset.src)}),[j]);return Object(n.useEffect)((function(){t(h)}),[t,h]),Object(a.jsxs)("div",{className:"FrameChooser",children:[Object(a.jsx)("h2",{children:"Choose a frame:"}),s.map((function(e){var t=e.src.default,r=h===t;return Object(a.jsx)("img",{alt:e.name,"data-src":t,src:t,className:r?"frame choosen":"frame",onClick:b},t)}))]})},b=r.p+"static/media/HeaderImage.f98423dd.svg",p=r(11),g=1080;var O=function(){var e=Object(n.useState)(null),t=Object(l.a)(e,2),r=t[0],c=t[1],o=Object(n.useState)(null),s=Object(l.a)(o,2),u=s[0],h=s[1],d=Object(n.useState)(null),m=Object(l.a)(d,2),O=m[0],F=m[1],P=Object(n.useState)(null),v=Object(l.a)(P,2),x=v[0],B=v[1],w=Object(n.useCallback)((function(e){c(e)}),[c]),C=Object(n.useCallback)((function(e){var t=new FileReader;t.onload=function(e){var t=new Image;t.onload=function(){var e=document.createElement("canvas");e.width=g,e.height=g;var r,a,n=e.getContext("2d",{alpha:!0});t.width {\n async function loadFrames(){\n Promise.all(\n [\n 'ProfileFrame Purple',\n 'ProfileFrame Yellow Bars',\n 'ProfileFrame Red Bars',\n 'ProfileFrame Blue Bars',\n 'ProfileFrame Green Bars',\n 'ProfileFrame White Bars',\n 'ProfileFrame Mixed Bars',\n 'ProfileFrame R&Y Bars',\n 'ProfileFrame B&G Bars',\n ]\n .map(async frame_filename => {\n return {\n name: frame_filename,\n src: await import(`./frames/${frame_filename}.png`),\n }\n })\n )\n .then(new_frames => {\n console.log(new_frames)\n setFrames(new_frames)\n setChoosenFrame(new_frames[0].src.default)\n })\n }\n loadFrames()\n }, [])\n\n const handleImageChoosing = useCallback(event => {\n setChoosenFrame(event.target.dataset.src)\n }, [setChoosenFrame])\n\n useEffect(() => {\n onFrameChange(choosenFrame)\n }, [onFrameChange, choosenFrame])\n\n return (\n
\n

Choose a frame:

\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return {frame.name}\n })\n } \n
\n )\n}\n\nexport default FrameChooser;\n","export default __webpack_public_path__ + \"static/media/HeaderImage.f98423dd.svg\";","import { useState, useEffect, useCallback } from 'react'\nimport './App.css'\nimport download from 'downloadjs'\nimport FrameChooser from './FrameChooser.js'\nimport HeaderImage from './HeaderImage.svg'\n\nimport mergeImages from 'merge-images'\n\nconst frameSize = 1080\n\nfunction App() {\n const [frameURL, setFrameURL] = useState(null)\n const [originalPhoto, setOriginalPhoto] = useState(null)\n const [photo, setPhoto] = useState(null)\n const [combinedImage, setCombinedImage] = useState(null)\n\n const handleFrameURL = useCallback(newFrameURL => {\n setFrameURL(newFrameURL)\n }, [setFrameURL])\n\n const handleImage = useCallback(files_event => {\n const reader = new FileReader()\n reader.onload = reader_event => {\n const img = new Image()\n img.onload = function () {\n const offscreenCanvas = document.createElement('canvas')\n offscreenCanvas.width = frameSize\n offscreenCanvas.height = frameSize\n\n const offscreenCanvas_ctx = offscreenCanvas.getContext('2d', { alpha: true })\n\n let width, height;\n if (img.width < img.height) {\n height = (img.height / img.width) * frameSize\n width = frameSize\n } else {\n height = frameSize\n width = (img.width / img.height) * frameSize\n }\n \n offscreenCanvas_ctx.drawImage(\n img,\n (frameSize - width) / 2,\n (frameSize - height) / 2,\n width,\n height,\n );\n\n const pngUrl = offscreenCanvas.toDataURL()\n setPhoto(pngUrl)\n }\n img.src = reader_event.target.result\n setOriginalPhoto(reader_event.target.result)\n }\n reader.readAsDataURL(files_event.target.files[0])\n }, [setPhoto])\n\n useEffect(() => {\n mergeImages([\n ...(photo ? [photo] : []),\n ...(frameURL ? [frameURL] : []),\n ])\n .then(b64 => setCombinedImage(b64))\n }, [photo, frameURL])\n\n\n\nreturn (\n
\n \"Volt\n\n

Choose your Photo:

\n

It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.

\n\n \n\n \n \n

Download your Photo:

\n \"Finished\n \n
\n)\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""} \ No newline at end of file