| <html lang="en"> |
| <head> |
| <link href="/public/ico/favicon.ico" rel="shortcut icon" type="image/ico"> |
| |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta property="og:title" content="Snappa - Create online graphics in a snap" /> |
| <meta property="og:site_name" content="Snappa"/> |
| <meta property="og:description" content="Snappa makes it easy to create any type of online graphic. Create & publish images for social media, blogs, ads, and more!" /> |
| <meta property="og:image" content="https://d2qp0siotla746.cloudfront.net/img/og-image.jpg" /> |
| |
| <title>Snappa</title> |
| |
| <meta name="authenticated" content="true"> |
| <meta name="ctoken" content="lOF93E9x-6hK1fgPGVx1AYUcCNb-FGURk2eI"> |
| <meta name="description" content=""> |
| <meta name="snappaBaseURL" content="snappa.com"> |
| <meta name="snappaDowngrade" content="false"> |
| <meta name="snappaNewUser" content=""> |
| <meta name="snappaProUser" content="false"> |
| <meta name="snappaTeamUser" content=""> |
| <meta name="snappaUserEmail" content="raj620197@gmail.com"> |
| <meta name="snappaUserName" content="Raj khan"> |
| <meta name="snappaVersion" content="Q423FP2"> |
| <meta name="snappaAPI" content="https://api.snappa.com/v1"> |
| |
| <script> |
| var _rollbarConfig = { |
| accessToken: "cb8291b5cfbe4cee97c8e32e2850bd6d", |
| captureUncaught: true, |
| captureUnhandledRejections: true, |
| code_version: "Q423FP2", |
| guess_uncaught_frames: true, |
| payload: { |
| environment: "production" |
| }, |
| hostWhiteList: ['snappa.com'], |
| filterTelemetry: function(e) { |
| return e.type === 'network' |
| && (e.body.subtype === 'xhr' || e.body.subtype === 'fetch') |
| && e.body.url.indexOf('https://api-js.mixpanel.com/') === 0; |
| |
| } |
| } |
| </script> |
| <link rel="stylesheet" href="https://use.typekit.net/xfy2thp.css"> |
| <link href="/public/css/editor.min.css?v=Q423FP2" rel="stylesheet" type="text/css"> |
| |
| |
| <script> |
| // Rollbar Snippet |
| !function(r){var e={};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,e,n){o.o(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:n})},o.r=function(r){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.t=function(r,e){if(1&e&&(r=o(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var t in r)o.d(n,t,function(e){return r[e]}.bind(null,t));return n},o.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return o.d(e,"a",e),e},o.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},o.p="",o(o.s=0)}([function(r,e,o){var n=o(1),t=o(4);_rollbarConfig=_rollbarConfig||{},_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.13.0/rollbar.min.js",_rollbarConfig.async=void 0===_rollbarConfig.async||_rollbarConfig.async;var a=n.setupShim(window,_rollbarConfig),l=t(_rollbarConfig);window.rollbar=n.Rollbar,a.loadFull(window,document,!_rollbarConfig.async,_rollbarConfig,l)},function(r,e,o){var n=o(2);function t(r){return function(){try{return r.apply(this,arguments)}catch(r){try{console.error("[Rollbar]: Internal error",r)}catch(r){}}}}var a=0;function l(r,e){this.options=r,this._rollbarOldOnError=null;var o=a++;this.shimId=function(){return o},"undefined"!=typeof window&&window._rollbarShims&&(window._rollbarShims[o]={handler:e,messages:[]})}var i=o(3),s=function(r,e){return new l(r,e)},d=function(r){return new i(s,r)};function c(r){return t(function(){var e=Array.prototype.slice.call(arguments,0),o={shim:this,method:r,args:e,ts:new Date};window._rollbarShims[this.shimId()].messages.push(o)})}l.prototype.loadFull=function(r,e,o,n,a){var l=!1,i=e.createElement("script"),s=e.getElementsByTagName("script")[0],d=s.parentNode;i.crossOrigin="",i.src=n.rollbarJsUrl,o||(i.async=!0),i.onload=i.onreadystatechange=t(function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){i.onload=i.onreadystatechange=null;try{d.removeChild(i)}catch(r){}l=!0,function(){var e;if(void 0===r._rollbarDidLoad){e=new Error("rollbar.js did not load");for(var o,n,t,l,i=0;o=r._rollbarShims[i++];)for(o=o.messages||[];n=o.shift();)for(t=n.args||[],i=0;i<t.length;++i)if("function"==typeof(l=t[i])){l(e);break}}"function"==typeof a&&a(e)}()}}),d.insertBefore(i,s)},l.prototype.wrap=function(r,e,o){try{var n;if(n="function"==typeof e?e:function(){return e||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._rollbar_wrapped&&(r._rollbar_wrapped=function(){o&&"function"==typeof o&&o.apply(this,arguments);try{return r.apply(this,arguments)}catch(o){var e=o;throw e&&("string"==typeof e&&(e=new String(e)),e._rollbarContext=n()||{},e._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=e),e}},r._rollbar_wrapped._isWrap=!0,r.hasOwnProperty))for(var t in r)r.hasOwnProperty(t)&&(r._rollbar_wrapped[t]=r[t]);return r._rollbar_wrapped}catch(e){return r}};for(var p="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad".split(","),u=0;u<p.length;++u)l.prototype[p[u]]=c(p[u]);r.exports={setupShim:function(r,e){if(r){var o=e.globalAlias||"Rollbar";if("object"==typeof r[o])return r[o];r._rollbarShims={},r._rollbarWrappedError=null;var a=new d(e);return t(function(){e.captureUncaught&&(a._rollbarOldOnError=r.onerror,n.captureUncaughtExceptions(r,a,!0),e.wrapGlobalEventHandlers&&n.wrapGlobals(r,a,!0)),e.captureUnhandledRejections&&n.captureUnhandledRejections(r,a,!0);var t=e.autoInstrument;return!1!==e.enabled&&(void 0===t||!0===t||"object"==typeof t&&t.network)&&r.addEventListener&&(r.addEventListener("load",a.captureLoad.bind(a)),r.addEventListener("DOMContentLoaded",a.captureDomContentLoaded.bind(a))),r[o]=a,a})()}},Rollbar:d}},function(r,e){function o(r,e,o){if(e.hasOwnProperty&&e.hasOwnProperty("addEventListener")){for(var n=e.addEventListener;n._rollbarOldAdd&&n.belongsToShim;)n=n._rollbarOldAdd;var t=function(e,o,t){n.call(this,e,r.wrap(o),t)};t._rollbarOldAdd=n,t.belongsToShim=o,e.addEventListener=t;for(var a=e.removeEventListener;a._rollbarOldRemove&&a.belongsToShim;)a=a._rollbarOldRemove;var l=function(r,e,o){a.call(this,r,e&&e._rollbar_wrapped||e,o)};l._rollbarOldRemove=a,l.belongsToShim=o,e.removeEventListener=l}}r.exports={captureUncaughtExceptions:function(r,e,o){if(r){var n;if("function"==typeof e._rollbarOldOnError)n=e._rollbarOldOnError;else if(r.onerror){for(n=r.onerror;n._rollbarOldOnError;)n=n._rollbarOldOnError;e._rollbarOldOnError=n}e.handleAnonymousErrors();var t=function(){var o=Array.prototype.slice.call(arguments,0);!function(r,e,o,n){r._rollbarWrappedError&&(n[4]||(n[4]=r._rollbarWrappedError),n[5]||(n[5]=r._rollbarWrappedError._rollbarContext),r._rollbarWrappedError=null);var t=e.handleUncaughtException.apply(e,n);o&&o.apply(r,n),"anonymous"===t&&(e.anonymousErrorsPending+=1)}(r,e,n,o)};o&&(t._rollbarOldOnError=n),r.onerror=t}},captureUnhandledRejections:function(r,e,o){if(r){"function"==typeof r._rollbarURH&&r._rollbarURH.belongsToShim&&r.removeEventListener("unhandledrejection",r._rollbarURH);var n=function(r){var o,n,t;try{o=r.reason}catch(r){o=void 0}try{n=r.promise}catch(r){n="[unhandledrejection] error getting `promise` from event"}try{t=r.detail,!o&&t&&(o=t.reason,n=t.promise)}catch(r){}o||(o="[unhandledrejection] error getting `reason` from event"),e&&e.handleUnhandledRejection&&e.handleUnhandledRejection(o,n)};n.belongsToShim=o,r._rollbarURH=n,r.addEventListener("unhandledrejection",n)}},wrapGlobals:function(r,e,n){if(r){var t,a,l="EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(",");for(t=0;t<l.length;++t)r[a=l[t]]&&r[a].prototype&&o(e,r[a].prototype,n)}}}},function(r,e){function o(r,e){this.impl=r(e,this),this.options=e,function(r){for(var e=function(r){return function(){var e=Array.prototype.slice.call(arguments,0);if(this.impl[r])return this.impl[r].apply(this.impl,e)}},o="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,_createItem,wrap,loadFull,shimId,captureEvent,captureDomContentLoaded,captureLoad".split(","),n=0;n<o.length;n++)r[o[n]]=e(o[n])}(o.prototype)}o.prototype._swapAndProcessMessages=function(r,e){var o,n,t;for(this.impl=r(this.options);o=e.shift();)n=o.method,t=o.args,this[n]&&"function"==typeof this[n]&&("captureDomContentLoaded"===n||"captureLoad"===n?this[n].apply(this,[t[0],o.ts]):this[n].apply(this,t));return this},r.exports=o},function(r,e){r.exports=function(r){return function(e){if(!e&&!window._rollbarInitialized){for(var o,n,t=(r=r||{}).globalAlias||"Rollbar",a=window.rollbar,l=function(r){return new a(r)},i=0;o=window._rollbarShims[i++];)n||(n=o.handler),o.handler._swapAndProcessMessages(l,o.messages);window[t]=n,window._rollbarInitialized=!0}}}}]); |
| // End Rollbar Snippet |
| </script> |
| <script data-cfasync="false" type="text/javascript" src="https://use.typekit.net/kto8onx.js"></script> |
| <script data-cfasync="false" type="text/javascript">try{Typekit.load({ async: false });}catch(e){}</script> |
| <script type="text/javascript" src="https://js.stripe.com/v2/"></script> |
| <script type="text/javascript">Stripe.setPublishableKey('pk_live_QD3LJJhQigqZwRIq3iR97VDr');</script> |
| |
| |
| <script> |
| dataLayer = []; |
| </script> |
| <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': |
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], |
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= |
| 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); |
| })(window,document,'script','dataLayer','GTM-NZQPRHS');</script> |
| |
| |
| |
| <script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments, |
| 0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" "); |
| for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]); |
| mixpanel.init("9b3b2e31f1554027a357c7ca1b1bd2c2");</script> |
| |
|
|
| </head> |
| <body> |
|
|
| <nav class="navbar navbar-fixed-top"> |
| <div class="container"> |
| <div id="navbar" class="navbar-collapse collapse"> |
| <div class="logo clearfix" href="#"> |
| <span class="circle-logo"> |
| <img src="https://d2qp0siotla746.cloudfront.net/brand/logos/snappa-swatch.svg"> |
| </span> |
| </div> |
| <ul class="nav navbar-nav"> |
| <li class="dropdown fluid-menu" style="display: none;"> |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#"> |
| Menu<span class="caret"></span> |
| </a> |
| <ul class="dropdown-menu" role="menu"> |
| <li> |
| <a href="/app"><i class="icon-picture"></i> Create a Graphic</a> |
| </li> |
| <li> |
| <a href="/app/saved-graphics"><i class="icon-folder"></i> Saved Graphics</a> |
| </li> |
| </ul> |
| </li> |
| <li class="non-fluid-menu"><a href="/app">Create a Graphic</a></li> |
| <li class="non-fluid-menu"><a href="/app/saved-graphics">Saved Graphics</a></li> |
| <div class="title-resize clearfix"></div> |
| </ul> |
| <ul class="nav navbar-nav navbar-right"> |
| <div id="upgradeToProNav" class="li"> |
| <button id="navbar-upg-pro" class="btn btn-success upgrade-btn" data-toggle="modal" data-backdrop="static" data-keyboard="false">Upgrade Now</button> |
| </div> |
| |
| <li class="dropdown help-menu"> |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#"> |
| Help<span class="caret"></span> |
| </a> |
| <ul class="dropdown-menu" role="menu"> |
| <li> |
| <a href="https://kb.snappa.com" target="_blank"><i class="icon-question"></i> Knowledge Base</a> |
| </li> |
| <li> |
| <a href="https://kb.snappa.com/category/16-getting-started-videos" target="_blank"><i class="icon-camcorder"></i> Video Tutorials</a> |
| </li> |
| <li> |
| <a href="#" class='supportBeacon'><i class="icon-envelope"></i> Contact Support</a> |
| </li> |
| </ul> |
| </li> |
| <li class="dropdown user-menu"> |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#"> |
| My Account<span class="caret"></span> |
| </a> |
| <ul class="dropdown-menu" role="menu"> |
| <li><a href="/app/account-settings"><i class="icon-settings"></i> Account settings</a></li> |
| <li><a href="/app/social-accounts"><i class="icon-share"></i> Social accounts</a></li> |
| <li><a href="/app/billing"><i class="icon-credit-card"></i> Billing</a></li> |
| <li class="divider"></li> |
| <li> |
| <a href="/logout"><i class="icon-logout"></i> Logout</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </nav> <div id="app"> |
| <div id="newImage"> |
|
|
| <div class="hidden-fonts" style="position: absolute; visibility: hidden; font-size: 1px;"> |
| <ul> |
| <li style="font-family:'Abril Fatface'">Abril Fatface</li> |
| <li style="font-family:'Aileron Heavy'">Aileron Heavy</li> |
| <li style="font-family:'Aileron Regular'">Aileron Regular</li> |
| <li style="font-family:'Aileron Thin'">Aileron Thin</li> |
| <li style="font-family:'Alegreya SC'">Alegreya SC</li> |
| <li style="font-family:'Aleo'">Aleo</li> |
| <li style="font-family:'Aleo Light'">Aleo Light</li> |
| <li style="font-family:'Alfa Slab One'">Alfa Slab One</li> |
| <li style="font-family:'Alike'">Alike</li> |
| <li style="font-family:'Allerta Stencil'">Allerta Stencil</li> |
| <li style="font-family:'Allura'">Allura</li> |
| <li style="font-family:'Amaranth'">Amaranth</li> |
| <li style="font-family:'Amatic SC'">Amatic SC</li> |
| <li style="font-family:'Anonymous Pro'">Anonymous Pro</li> |
| <li style="font-family:'Antic'">Antic</li> |
| <li style="font-family:'Anton'">Anton</li> |
| <li style="font-family:'Architects Daughter'">Architects Daughter</li> |
| <li style="font-family:'Archivo Black'">Archivo Black</li> |
| <li style="font-family:'Archivo Narrow'">Archivo Narrow</li> |
| <li style="font-family:'Arimo'">Arimo</li> |
| <li style="font-family:'Arvo'">Arvo</li> |
| <li style="font-family:'Bangers'">Bangers</li> |
| <li style="font-family:'Berkshire Swash'">Berkshire Swash</li> |
| <li style="font-family:'Black Ops One'">Black Ops One</li> |
| <li style="font-family:'Blogger Sans'">Blogger Sans</li> |
| <li style="font-family:'BodoniXT'">BodoniXT</li> |
| <li style="font-family:'Cabin Sketch'">Cabin Sketch</li> |
| <li style="font-family:'Cantora One'">Cantora One</li> |
| <li style="font-family:'Cardo'">Cardo</li> |
| <li style="font-family:'Carter One'">Carter One</li> |
| <li style="font-family:'Chewy'">Chewy</li> |
| <li style="font-family:'Chunkfive'">Chunkfive</li> |
| <li style="font-family:'Cinzel'">Cinzel</li> |
| <li style="font-family:'Clicker Script'">Clicker Script</li> |
| <li style="font-family:'Codystar'">Codystar</li> |
| <li style="font-family:'Coming Soon'">Coming Soon</li> |
| <li style="font-family:'Cooper Hewitt'">Cooper Hewitt</li> |
| <li style="font-family:'Cooper Hewitt Heavy'">Cooper Hewitt Heavy</li> |
| <li style="font-family:'Cooper Hewitt Thin'">Cooper Hewitt Thin</li> |
| <li style="font-family:'Courgette'">Courgette</li> |
| <li style="font-family:'Coustard'">Coustard</li> |
| <li style="font-family:'Crafty Girls'">Crafty Girls</li> |
| <li style="font-family:'Creepster'">Creepster</li> |
| <li style="font-family:'Crushed'">Crushed</li> |
| <li style="font-family:'Dekko'">Dekko</li> |
| <li style="font-family:'Diplomata SC'">Diplomata SC</li> |
| <li style="font-family:'Dosis'">Dosis</li> |
| <li style="font-family:'Dr Sugiyama'">Dr Sugiyama</li> |
| <li style="font-family:'Droid Serif'">Droid Serif</li> |
| <li style="font-family:'Economica'">Economica</li> |
| <li style="font-family:'Emilys Candy'">Emilys Candy</li> |
| <li style="font-family:'Engagement'">Engagement</li> |
| <li style="font-family:'Euphoria Script'">Euphoria Script</li> |
| <li style="font-family:'Exo'">Exo</li> |
| <li style="font-family:'Exo Thin'">Exo Thin</li> |
| <li style="font-family:'Faster One'">Faster One</li> |
| <li style="font-family:'Fauna One'">Fauna One</li> |
| <li style="font-family:'Forum'">Forum</li> |
| <li style="font-family:'Fredoka One'">Fredoka One</li> |
| <li style="font-family:'Germania One'">Germania One</li> |
| <li style="font-family:'Gidole'">Gidole</li> |
| <li style="font-family:'Glegoo'">Glegoo</li> |
| <li style="font-family:'Gochi Hand'">Gochi Hand</li> |
| <li style="font-family:'Graduate'">Graduate</li> |
| <li style="font-family:'Grand Hotel'">Grand Hotel</li> |
| <li style="font-family:'Great Vibes'">Great Vibes</li> |
| <li style="font-family:'Gruppo'">Gruppo</li> |
| <li style="font-family:'Hammersmith One'">Hammersmith One</li> |
| <li style="font-family:'IM Fell English SC'">IM Fell English SC</li> |
| <li style="font-family:'Indie Flower'">Indie Flower</li> |
| <li style="font-family:'Josefin Sans'">Josefin Sans</li> |
| <li style="font-family:'Josefin Slab'">Josefin Slab</li> |
| <li style="font-family:'Judson'">Judson</li> |
| <li style="font-family:'Julius Sans One'">Julius Sans One</li> |
| <li style="font-family:'Kaushan Script'">Kaushan Script</li> |
| <li style="font-family:'Kite One'">Kite One</li> |
| <li style="font-family:'Knewave'">Knewave</li> |
| <li style="font-family:'Lato'">Lato</li> |
| <li style="font-family:'Lato Hairline'">Lato Hairline</li> |
| <li style="font-family:'Lato Heavy'">Lato Heavy</li> |
| <li style="font-family:'League Gothic'">League Gothic</li> |
| <li style="font-family:'League Spartan'">League Spartan</li> |
| <li style="font-family:'Libre Baskerville'">Libre Baskerville</li> |
| <li style="font-family:'Lilita One'">Lilita One</li> |
| <li style="font-family:'Limelight'">Limelight</li> |
| <li style="font-family:'Lobster'">Lobster</li> |
| <li style="font-family:'Lobster Two'">Lobster Two</li> |
| <li style="font-family:'Londrina Outline'">Londrina Outline</li> |
| <li style="font-family:'Londrina Shadow'">Londrina Shadow</li> |
| <li style="font-family:'Londrina Sketch'">Londrina Sketch</li> |
| <li style="font-family:'Londrina Solid'">Londrina Solid</li> |
| <li style="font-family:'Lora'">Lora</li> |
| <li style="font-family:'Lustria'">Lustria</li> |
| <li style="font-family:'Megrim'">Megrim</li> |
| <li style="font-family:'Merriweather'">Merriweather</li> |
| <li style="font-family:'Merriweather Sans'">Merriweather Sans</li> |
| <li style="font-family:'Monda'">Monda</li> |
| <li style="font-family:'Monoton'">Monoton</li> |
| <li style="font-family:'Montserrat'">Montserrat</li> |
| <li style="font-family:'Montserrat Extra Bold'">Montserrat Extra Bold</li> |
| <li style="font-family:'Montserrat Hairline'">Montserrat Hairline</li> |
| <li style="font-family:'Montserrat Light'">Montserrat Light</li> |
| <li style="font-family:'Mr Dafoe'">Mr Dafoe</li> |
| <li style="font-family:'Niconne'">Niconne</li> |
| <li style="font-family:'Nixie One'">Nixie One</li> |
| <li style="font-family:'Norwester'">Norwester</li> |
| <li style="font-family:'Nunito'">Nunito</li> |
| <li style="font-family:'Nunito Black'">Nunito Black</li> |
| <li style="font-family:'Nunito Extra Light'">Nunito Extra Light</li> |
| <li style="font-family:'Old Standard TT'">Old Standard TT</li> |
| <li style="font-family:'Oleo Script'">Oleo Script</li> |
| <li style="font-family:'Open Sans'">Open Sans</li> |
| <li style="font-family:'Open Sans Extra Bold'">Open Sans Extra Bold</li> |
| <li style="font-family:'Open Sans Light'">Open Sans Light</li> |
| <li style="font-family:'Oregano'">Oregano</li> |
| <li style="font-family:'Ostrich Sans'">Ostrich Sans</li> |
| <li style="font-family:'Ostrich Sans Black'">Ostrich Sans Black</li> |
| <li style="font-family:'Ostrich Sans Bold'">Ostrich Sans Bold</li> |
| <li style="font-family:'Oswald'">Oswald</li> |
| <li style="font-family:'Oswald Extra Light'">Oswald Extra Light</li> |
| <li style="font-family:'Oswald Heavy'">Oswald Heavy</li> |
| <li style="font-family:'Oswald Stencil'">Oswald Stencil</li> |
| <li style="font-family:'Over The Rainbow'">Over The Rainbow</li> |
| <li style="font-family:'Pacifico'">Pacifico</li> |
| <li style="font-family:'Parisienne'">Parisienne</li> |
| <li style="font-family:'Passion One'">Passion One</li> |
| <li style="font-family:'Patrick Hand'">Patrick Hand</li> |
| <li style="font-family:'Patrick Hand SC'">Patrick Hand SC</li> |
| <li style="font-family:'Patua One'">Patua One</li> |
| <li style="font-family:'Permanent Marker'">Permanent Marker</li> |
| <li style="font-family:'Pinyon Script'">Pinyon Script</li> |
| <li style="font-family:'Pirou'">Pirou</li> |
| <li style="font-family:'Playfair Display'">Playfair Display</li> |
| <li style="font-family:'Playfair Display Black'">Playfair Display Black</li> |
| <li style="font-family:'Playfair SC'">Playfair SC</li> |
| <li style="font-family:'Playtime With Hot Toddies'">Playtime With Hot Toddies</li> |
| <li style="font-family:'Poiret One'">Poiret One</li> |
| <li style="font-family:'Prata'">Prata</li> |
| <li style="font-family:'Princess Sofia'">Princess Sofia</li> |
| <li style="font-family:'PT Mono'">PT Mono</li> |
| <li style="font-family:'PT Sans'">PT Sans</li> |
| <li style="font-family:'PT Serif'">PT Serif</li> |
| <li style="font-family:'Quando'">Quando</li> |
| <li style="font-family:'Quattrocento Roman'">Quattrocento Roman</li> |
| <li style="font-family:'Quattrocento Sans'">Quattrocento Sans</li> |
| <li style="font-family:'Quicksand'">Quicksand</li> |
| <li style="font-family:'Quicksand Dash'">Quicksand Dash</li> |
| <li style="font-family:'Quicksand Light'">Quicksand Light</li> |
| <li style="font-family:'Racing Sans One'">Racing Sans One</li> |
| <li style="font-family:'Rajdhani'">Rajdhani</li> |
| <li style="font-family:'Raleway'">Raleway</li> |
| <li style="font-family:'Raleway Dots'">Raleway Dots</li> |
| <li style="font-family:'Raleway Extra Bold'">Raleway Extra Bold</li> |
| <li style="font-family:'Raleway Thin'">Raleway Thin</li> |
| <li style="font-family:'Ribeye'">Ribeye</li> |
| <li style="font-family:'Roboto'">Roboto</li> |
| <li style="font-family:'Roboto Black'">Roboto Black</li> |
| <li style="font-family:'Roboto Slab'">Roboto Slab</li> |
| <li style="font-family:'Roboto Thin'">Roboto Thin</li> |
| <li style="font-family:'Rosario'">Rosario</li> |
| <li style="font-family:'Rubik One'">Rubik One</li> |
| <li style="font-family:'Rye'">Rye</li> |
| <li style="font-family:'Sacramento'">Sacramento</li> |
| <li style="font-family:'Sanchez'">Sanchez</li> |
| <li style="font-family:'Satisfy'">Satisfy</li> |
| <li style="font-family:'Schoolbell'">Schoolbell</li> |
| <li style="font-family:'Shadows Into Light Two'">Shadows Into Light Two</li> |
| <li style="font-family:'Signika'">Signika</li> |
| <li style="font-family:'Six Caps'">Six Caps</li> |
| <li style="font-family:'Sniglet'">Sniglet</li> |
| <li style="font-family:'Source Sans Pro'">Source Sans Pro</li> |
| <li style="font-family:'Source Sans Pro Black'">Source Sans Pro Black</li> |
| <li style="font-family:'Source Sans Pro Extra Light'">Source Sans Pro Extra Light</li> |
| <li style="font-family:'Source Serif Pro'">Source Serif Pro</li> |
| <li style="font-family:'Source Serif Pro Black'">Source Serif Pro Black</li> |
| <li style="font-family:'Source Serif Pro Extra Light'">Source Serif Pro Extra Light</li> |
| <li style="font-family:'Special Elite'">Special Elite</li> |
| <li style="font-family:'Stint Ultra Expanded'">Stint Ultra Expanded</li> |
| <li style="font-family:'Sunday'">Sunday</li> |
| <li style="font-family:'Tenor Sans'">Tenor Sans</li> |
| <li style="font-family:'Text Me One'">Text Me One</li> |
| <li style="font-family:'Trocchi'">Trocchi</li> |
| <li style="font-family:'Ubuntu'">Ubuntu</li> |
| <li style="font-family:'Ultra'">Ultra</li> |
| <li style="font-family:'UnifrakturMaguntia'">UnifrakturMaguntia</li> |
| <li style="font-family:'Vampiro One'">Vampiro One</li> |
| <li style="font-family:'Vast Shadow'">Vast Shadow</li> |
| <li style="font-family:'Vidaloka'">Vidaloka</li> |
| <li style="font-family:'Voga'">Voga</li> |
| <li style="font-family:'Vollkorn'">Vollkorn</li> |
| <li style="font-family:'VT323'">VT323</li> |
| <li style="font-family:'Waterlily'">Waterlily</li> |
| <li style="font-family:'Yellowtail'">Yellowtail</li> |
| </ul> |
| </div> |
|
|
| <div id="main" class="graphic-editor-page"> |
| <div id="graphicEditor" class="editor"> |
| <div class="tabbable tabs-left"> |
| <div class="reposition-bg-overlay"></div> |
|
|
| <div class="btn-group layer-type-select"> |
| <button type="button" id="change-background-layer" class="btn btn-default" href="#c" data-toggle="tab"><i class="icon-picture"></i>Bkgrnd</button> |
| <button type="button" class="btn btn-default" href="#d" data-toggle="tab"><i class="icon-magic-wand"></i>Effects</button> |
| <button type="button" class="btn btn-default" href="#f" data-toggle="tab"><i class="fa fa-font"></i>Text</button> |
| <button type="button" class="btn btn-default" href="#b" data-toggle="tab"><i class="icon-emoticon-smile"></i>Graphics</button> |
| <button type="button" class="btn btn-default" href="#e" data-toggle="tab"><i class="icon-control-play"></i>Shapes</button> |
| </div> |
|
|
| <div class="antiscroll-wrap nano"> |
| <div class="antiscroll-inner nano-content"> |
| <div id="main-tabs" class="tab-content"> |
|
|
| <div class="tab-pane" id="no-selection"> |
| <div class="padding-inner"> |
|
|
| <ul> |
| <li><span>Image Type: </span>YouTube Thumbnail</li> |
| <li><span>Width: </span>1280px</li> |
| <li><span>Height: </span>720px</li> |
| </ul> |
|
|
| </div> |
| </div> |
| <div class="tab-pane active" id="init-tab"> |
| <div class="padding-inner"> |
| <i class="fa fa-long-arrow-up bounce"></i> |
| <p>Add a background, text, or graphic to get started.</p> |
| </div> |
| </div> |
| <div class="tab-pane object-tab" id="object-options"> |
| <div class="padding-inner"> |
|
|
| <div class="object-pane text-object"> |
| <div class="font-options clearfix"> |
| <div class="clearfix"> |
| <p class="subhead">Font</p> |
|
|
| <div class="clearfix"> |
| <select id="font-family" class="font-family"> |
| <option data-onchange="Abril Fatface" value="Abril Fatface" style="font-family:'Abril Fatface'">Abril Fatface</option> |
| <option data-onchange="Aileron Heavy" value="Aileron Heavy" style="font-family:'Aileron Heavy'">Aileron Heavy</option> |
| <option data-onchange="Aileron Regular" value="Aileron Regular" style="font-family:'Aileron Regular'">Aileron Regular</option> |
| <option data-onchange="Aileron Thin" value="Aileron Thin" style="font-family:'Aileron Thin'">Aileron Thin</option> |
| <option data-onchange="Alegreya SC" value="Alegreya SC" style="font-family:'Alegreya SC'">Alegreya SC</option> |
| <option data-onchange="Aleo" value="Aleo" style="font-family:'Aleo'">Aleo</option> |
| <option data-onchange="Aleo Light" value="Aleo Light" style="font-family:'Aleo Light'">Aleo Light</option> |
| <option data-onchange="Alfa Slab One" value="Alfa Slab One" style="font-family:'Alfa Slab One'">Alfa Slab One</option> |
| <option data-onchange="Alike" value="Alike" style="font-family:'Alike'">Alike</option> |
| <option data-onchange="Allerta Stencil" value="Allerta Stencil" style="font-family:'Allerta Stencil'">Allerta Stencil</option> |
| <option data-onchange="Allura" value="Allura" style="font-family:'Allura'">Allura</option> |
| <option data-onchange="Amaranth" value="Amaranth" style="font-family:'Amaranth'">Amaranth</option> |
| <option data-onchange="Amatic SC" value="Amatic SC" style="font-family:'Amatic SC'">Amatic SC</option> |
| <option data-onchange="Anonymous Pro" value="Anonymous Pro" style="font-family:'Anonymous Pro'">Anonymous Pro</option> |
| <option data-onchange="Antic" value="Antic" style="font-family:'Antic'">Antic</option> |
| <option data-onchange="Anton" value="Anton" style="font-family:'Anton'">Anton</option> |
| <option data-onchange="Architects Daughter" value="Architects Daughter" style="font-family:'Architects Daughter'">Architects Daughter</option> |
| <option data-onchange="Archivo Black" value="Archivo Black" style="font-family:'Archivo Black'">Archivo Black</option> |
| <option data-onchange="Archivo Narrow" value="Archivo Narrow" style="font-family:'Archivo Narrow'">Archivo Narrow</option> |
| <option data-onchange="Arimo" value="Arimo" style="font-family:'Arimo'">Arimo</option> |
| <option data-onchange="Arvo" value="Arvo" style="font-family:'Arvo'">Arvo</option> |
| <option data-onchange="Bangers" value="Bangers" style="font-family:'Bangers'">Bangers</option> |
| <option data-onchange="Berkshire Swash" value="Berkshire Swash" style="font-family:'Berkshire Swash'">Berkshire Swash</option> |
| <option data-onchange="Black Ops One" value="Black Ops One" style="font-family:'Black Ops One'">Black Ops One</option> |
| <option data-onchange="Blogger Sans" value="Blogger Sans" style="font-family:'Blogger Sans'">Blogger Sans</option> |
| <option data-onchange="BodoniXT" value="BodoniXT" style="font-family:'BodoniXT'">BodoniXT</option> |
| <option data-onchange="Cabin Sketch" value="Cabin Sketch" style="font-family:'Cabin Sketch'">Cabin Sketch</option> |
| <option data-onchange="Cantora One" value="Cantora One" style="font-family:'Cantora One'">Cantora One</option> |
| <option data-onchange="Cardo" value="Cardo" style="font-family:'Cardo'">Cardo</option> |
| <option data-onchange="Carter One" value="Carter One" style="font-family:'Carter One'">Carter One</option> |
| <option data-onchange="Chewy" value="Chewy" style="font-family:'Chewy'">Chewy</option> |
| <option data-onchange="Chunkfive" value="Chunkfive" style="font-family:'Chunkfive'">Chunkfive</option> |
| <option data-onchange="Cinzel" value="Cinzel" style="font-family:'Cinzel'">Cinzel</option> |
| <option data-onchange="Clicker Script" value="Clicker Script" style="font-family:'Clicker Script'">Clicker Script</option> |
| <option data-onchange="Codystar" value="Codystar" style="font-family:'Codystar'">Codystar</option> |
| <option data-onchange="Coming Soon" value="Coming Soon" style="font-family:'Coming Soon'">Coming Soon</option> |
| <option data-onchange="Cooper Hewitt" value="Cooper Hewitt" style="font-family:'Cooper Hewitt'">Cooper Hewitt</option> |
| <option data-onchange="Cooper Hewitt Heavy" value="Cooper Hewitt Heavy" style="font-family:'Cooper Hewitt Heavy'">Cooper Hewitt Heavy</option> |
| <option data-onchange="Cooper Hewitt Thin" value="Cooper Hewitt Thin" style="font-family:'Cooper Hewitt Thin'">Cooper Hewitt Thin</option> |
| <option data-onchange="Courgette" value="Courgette" style="font-family:'Courgette'">Courgette</option> |
| <option data-onchange="Coustard" value="Coustard" style="font-family:'Coustard'">Coustard</option> |
| <option data-onchange="Crafty Girls" value="Crafty Girls" style="font-family:'Crafty Girls'">Crafty Girls</option> |
| <option data-onchange="Creepster" value="Creepster" style="font-family:'Creepster'">Creepster</option> |
| <option data-onchange="Crushed" value="Crushed" style="font-family:'Crushed'">Crushed</option> |
| <option data-onchange="Dekko" value="Dekko" style="font-family:'Dekko'">Dekko</option> |
| <option data-onchange="Diplomata SC" value="Diplomata SC" style="font-family:'Diplomata SC'">Diplomata SC</option> |
| <option data-onchange="Dosis" value="Dosis" style="font-family:'Dosis'">Dosis</option> |
| <option data-onchange="Dr Sugiyama" value="Dr Sugiyama" style="font-family:'Dr Sugiyama'">Dr Sugiyama</option> |
| <option data-onchange="Droid Serif" value="Droid Serif" style="font-family:'Droid Serif'">Droid Serif</option> |
| <option data-onchange="Economica" value="Economica" style="font-family:'Economica'">Economica</option> |
| <option data-onchange="Emilys Candy" value="Emilys Candy" style="font-family:'Emilys Candy'">Emilys Candy</option> |
| <option data-onchange="Engagement" value="Engagement" style="font-family:'Engagement'">Engagement</option> |
| <option data-onchange="Euphoria Script" value="Euphoria Script" style="font-family:'Euphoria Script'">Euphoria Script</option> |
| <option data-onchange="Exo" value="Exo" style="font-family:'Exo'">Exo</option> |
| <option data-onchange="Exo Thin" value="Exo Thin" style="font-family:'Exo Thin'">Exo Thin</option> |
| <option data-onchange="Faster One" value="Faster One" style="font-family:'Faster One'">Faster One</option> |
| <option data-onchange="Fauna One" value="Fauna One" style="font-family:'Fauna One'">Fauna One</option> |
| <option data-onchange="Forum" value="Forum" style="font-family:'Forum'">Forum</option> |
| <option data-onchange="Fredoka One" value="Fredoka One" style="font-family:'Fredoka One'">Fredoka One</option> |
| <option data-onchange="Germania One" value="Germania One" style="font-family:'Germania One'">Germania One</option> |
| <option data-onchange="Gidole" value="Gidole" style="font-family:'Gidole'">Gidole</option> |
| <option data-onchange="Glegoo" value="Glegoo" style="font-family:'Glegoo'">Glegoo</option> |
| <option data-onchange="Gochi Hand" value="Gochi Hand" style="font-family:'Gochi Hand'">Gochi Hand</option> |
| <option data-onchange="Graduate" value="Graduate" style="font-family:'Graduate'">Graduate</option> |
| <option data-onchange="Grand Hotel" value="Grand Hotel" style="font-family:'Grand Hotel'">Grand Hotel</option> |
| <option data-onchange="Great Vibes" value="Great Vibes" style="font-family:'Great Vibes'">Great Vibes</option> |
| <option data-onchange="Gruppo" value="Gruppo" style="font-family:'Gruppo'">Gruppo</option> |
| <option data-onchange="Hammersmith One" value="Hammersmith One" style="font-family:'Hammersmith One'">Hammersmith One</option> |
| <option data-onchange="IM Fell English SC" value="IM Fell English SC" style="font-family:'IM Fell English SC'">IM Fell English SC</option> |
| <option data-onchange="Indie Flower" value="Indie Flower" style="font-family:'Indie Flower'">Indie Flower</option> |
| <option data-onchange="Josefin Sans" value="Josefin Sans" style="font-family:'Josefin Sans'">Josefin Sans</option> |
| <option data-onchange="Josefin Slab" value="Josefin Slab" style="font-family:'Josefin Slab'">Josefin Slab</option> |
| <option data-onchange="Judson" value="Judson" style="font-family:'Judson'">Judson</option> |
| <option data-onchange="Julius Sans One" value="Julius Sans One" style="font-family:'Julius Sans One'">Julius Sans One</option> |
| <option data-onchange="Kaushan Script" value="Kaushan Script" style="font-family:'Kaushan Script'">Kaushan Script</option> |
| <option data-onchange="Kite One" value="Kite One" style="font-family:'Kite One'">Kite One</option> |
| <option data-onchange="Knewave" value="Knewave" style="font-family:'Knewave'">Knewave</option> |
| <option data-onchange="Lato" value="Lato" style="font-family:'Lato'">Lato</option> |
| <option data-onchange="Lato Hairline" value="Lato Hairline" style="font-family:'Lato Hairline'">Lato Hairline</option> |
| <option data-onchange="Lato Heavy" value="Lato Heavy" style="font-family:'Lato Heavy'">Lato Heavy</option> |
| <option data-onchange="League Gothic" value="League Gothic" style="font-family:'League Gothic'">League Gothic</option> |
| <option data-onchange="League Spartan" value="League Spartan" style="font-family:'League Spartan'">League Spartan</option> |
| <option data-onchange="Libre Baskerville" value="Libre Baskerville" style="font-family:'Libre Baskerville'">Libre Baskerville</option> |
| <option data-onchange="Lilita One" value="Lilita One" style="font-family:'Lilita One'">Lilita One</option> |
| <option data-onchange="Limelight" value="Limelight" style="font-family:'Limelight'">Limelight</option> |
| <option data-onchange="Lobster" value="Lobster" style="font-family:'Lobster'">Lobster</option> |
| <option data-onchange="Lobster Two" value="Lobster Two" style="font-family:'Lobster Two'">Lobster Two</option> |
| <option data-onchange="Londrina Outline" value="Londrina Outline" style="font-family:'Londrina Outline'">Londrina Outline</option> |
| <option data-onchange="Londrina Shadow" value="Londrina Shadow" style="font-family:'Londrina Shadow'">Londrina Shadow</option> |
| <option data-onchange="Londrina Sketch" value="Londrina Sketch" style="font-family:'Londrina Sketch'">Londrina Sketch</option> |
| <option data-onchange="Londrina Solid" value="Londrina Solid" style="font-family:'Londrina Solid'">Londrina Solid</option> |
| <option data-onchange="Lora" value="Lora" style="font-family:'Lora'">Lora</option> |
| <option data-onchange="Lustria" value="Lustria" style="font-family:'Lustria'">Lustria</option> |
| <option data-onchange="Megrim" value="Megrim" style="font-family:'Megrim'">Megrim</option> |
| <option data-onchange="Merriweather" value="Merriweather" style="font-family:'Merriweather'">Merriweather</option> |
| <option data-onchange="Merriweather Sans" value="Merriweather Sans" style="font-family:'Merriweather Sans'">Merriweather Sans</option> |
| <option data-onchange="Monda" value="Monda" style="font-family:'Monda'">Monda</option> |
| <option data-onchange="Monoton" value="Monoton" style="font-family:'Monoton'">Monoton</option> |
| <option data-onchange="Montserrat" value="Montserrat" style="font-family:'Montserrat'">Montserrat</option> |
| <option data-onchange="Montserrat Extra Bold" value="Montserrat Extra Bold" style="font-family:'Montserrat Extra Bold'">Montserrat Extra Bold</option> |
| <option data-onchange="Montserrat Hairline" value="Montserrat Hairline" style="font-family:'Montserrat Hairline'">Montserrat Hairline</option> |
| <option data-onchange="Montserrat Light" value="Montserrat Light" style="font-family:'Montserrat Light'">Montserrat Light</option> |
| <option data-onchange="Mr Dafoe" value="Mr Dafoe" style="font-family:'Mr Dafoe'">Mr Dafoe</option> |
| <option data-onchange="Niconne" value="Niconne" style="font-family:'Niconne'">Niconne</option> |
| <option data-onchange="Nixie One" value="Nixie One" style="font-family:'Nixie One'">Nixie One</option> |
| <option data-onchange="Norwester" value="Norwester" style="font-family:'Norwester'">Norwester</option> |
| <option data-onchange="Nunito" value="Nunito" style="font-family:'Nunito'">Nunito</option> |
| <option data-onchange="Nunito Black" value="Nunito Black" style="font-family:'Nunito Black'">Nunito Black</option> |
| <option data-onchange="Nunito Extra Light" value="Nunito Extra Light" style="font-family:'Nunito Extra Light'">Nunito Extra Light</option> |
| <option data-onchange="Old Standard TT" value="Old Standard TT" style="font-family:'Old Standard TT'">Old Standard TT</option> |
| <option data-onchange="Oleo Script" value="Oleo Script" style="font-family:'Oleo Script'">Oleo Script</option> |
| <option data-onchange="Open Sans" value="Open Sans" style="font-family:'Open Sans'">Open Sans</option> |
| <option data-onchange="Open Sans Extra Bold" value="Open Sans Extra Bold" style="font-family:'Open Sans Extra Bold'">Open Sans Extra Bold</option> |
| <option data-onchange="Open Sans Light" value="Open Sans Light" style="font-family:'Open Sans Light'">Open Sans Light</option> |
| <option data-onchange="Oregano" value="Oregano" style="font-family:'Oregano'">Oregano</option> |
| <option data-onchange="Ostrich Sans" value="Ostrich Sans" style="font-family:'Ostrich Sans'">Ostrich Sans</option> |
| <option data-onchange="Ostrich Sans Black" value="Ostrich Sans Black" style="font-family:'Ostrich Sans Black'">Ostrich Sans Black</option> |
| <option data-onchange="Ostrich Sans Bold" value="Ostrich Sans Bold" style="font-family:'Ostrich Sans Bold'">Ostrich Sans Bold</option> |
| <option data-onchange="Oswald" value="Oswald" style="font-family:'Oswald'">Oswald</option> |
| <option data-onchange="Oswald Extra Light" value="Oswald Extra Light" style="font-family:'Oswald Extra Light'">Oswald Extra Light</option> |
| <option data-onchange="Oswald Heavy" value="Oswald Heavy" style="font-family:'Oswald Heavy'">Oswald Heavy</option> |
| <option data-onchange="Oswald Stencil" value="Oswald Stencil" style="font-family:'Oswald Stencil'">Oswald Stencil</option> |
| <option data-onchange="Over The Rainbow" value="Over The Rainbow" style="font-family:'Over The Rainbow'">Over The Rainbow</option> |
| <option data-onchange="Pacifico" value="Pacifico" style="font-family:'Pacifico'">Pacifico</option> |
| <option data-onchange="Parisienne" value="Parisienne" style="font-family:'Parisienne'">Parisienne</option> |
| <option data-onchange="Passion One" value="Passion One" style="font-family:'Passion One'">Passion One</option> |
| <option data-onchange="Patrick Hand" value="Patrick Hand" style="font-family:'Patrick Hand'">Patrick Hand</option> |
| <option data-onchange="Patrick Hand SC" value="Patrick Hand SC" style="font-family:'Patrick Hand SC'">Patrick Hand SC</option> |
| <option data-onchange="Patua One" value="Patua One" style="font-family:'Patua One'">Patua One</option> |
| <option data-onchange="Permanent Marker" value="Permanent Marker" style="font-family:'Permanent Marker'">Permanent Marker</option> |
| <option data-onchange="Pinyon Script" value="Pinyon Script" style="font-family:'Pinyon Script'">Pinyon Script</option> |
| <option data-onchange="Pirou" value="Pirou" style="font-family:'Pirou'">Pirou</option> |
| <option data-onchange="Playfair Display" value="Playfair Display" style="font-family:'Playfair Display'">Playfair Display</option> |
| <option data-onchange="Playfair Display Black" value="Playfair Display Black" style="font-family:'Playfair Display Black'">Playfair Display Black</option> |
| <option data-onchange="Playfair SC" value="Playfair SC" style="font-family:'Playfair SC'">Playfair SC</option> |
| <option data-onchange="Playtime With Hot Toddies" value="Playtime With Hot Toddies" style="font-family:'Playtime With Hot Toddies'">Playtime With Hot Toddies</option> |
| <option data-onchange="Poiret One" value="Poiret One" style="font-family:'Poiret One'">Poiret One</option> |
| <option data-onchange="Prata" value="Prata" style="font-family:'Prata'">Prata</option> |
| <option data-onchange="Princess Sofia" value="Princess Sofia" style="font-family:'Princess Sofia'">Princess Sofia</option> |
| <option data-onchange="PT Mono" value="PT Mono" style="font-family:'PT Mono'">PT Mono</option> |
| <option data-onchange="PT Sans" value="PT Sans" style="font-family:'PT Sans'">PT Sans</option> |
| <option data-onchange="PT Serif" value="PT Serif" style="font-family:'PT Serif'">PT Serif</option> |
| <option data-onchange="Quando" value="Quando" style="font-family:'Quando'">Quando</option> |
| <option data-onchange="Quattrocento Roman" value="Quattrocento Roman" style="font-family:'Quattrocento Roman'">Quattrocento Roman</option> |
| <option data-onchange="Quattrocento Sans" value="Quattrocento Sans" style="font-family:'Quattrocento Sans'">Quattrocento Sans</option> |
| <option data-onchange="Quicksand" value="Quicksand" style="font-family:'Quicksand'">Quicksand</option> |
| <option data-onchange="Quicksand Dash" value="Quicksand Dash" style="font-family:'Quicksand Dash'">Quicksand Dash</option> |
| <option data-onchange="Quicksand Light" value="Quicksand Light" style="font-family:'Quicksand Light'">Quicksand Light</option> |
| <option data-onchange="Racing Sans One" value="Racing Sans One" style="font-family:'Racing Sans One'">Racing Sans One</option> |
| <option data-onchange="Rajdhani" value="Rajdhani" style="font-family:'Rajdhani'">Rajdhani</option> |
| <option data-onchange="Raleway" value="Raleway" style="font-family:'Raleway'">Raleway</option> |
| <option data-onchange="Raleway Dots" value="Raleway Dots" style="font-family:'Raleway Dots'">Raleway Dots</option> |
| <option data-onchange="Raleway Extra Bold" value="Raleway Extra Bold" style="font-family:'Raleway Extra Bold'">Raleway Extra Bold</option> |
| <option data-onchange="Raleway Thin" value="Raleway Thin" style="font-family:'Raleway Thin'">Raleway Thin</option> |
| <option data-onchange="Ribeye" value="Ribeye" style="font-family:'Ribeye'">Ribeye</option> |
| <option data-onchange="Roboto" value="Roboto" style="font-family:'Roboto'">Roboto</option> |
| <option data-onchange="Roboto Black" value="Roboto Black" style="font-family:'Roboto Black'">Roboto Black</option> |
| <option data-onchange="Roboto Slab" value="Roboto Slab" style="font-family:'Roboto Slab'">Roboto Slab</option> |
| <option data-onchange="Roboto Thin" value="Roboto Thin" style="font-family:'Roboto Thin'">Roboto Thin</option> |
| <option data-onchange="Rosario" value="Rosario" style="font-family:'Rosario'">Rosario</option> |
| <option data-onchange="Rubik One" value="Rubik One" style="font-family:'Rubik One'">Rubik One</option> |
| <option data-onchange="Rye" value="Rye" style="font-family:'Rye'">Rye</option> |
| <option data-onchange="Sacramento" value="Sacramento" style="font-family:'Sacramento'">Sacramento</option> |
| <option data-onchange="Sanchez" value="Sanchez" style="font-family:'Sanchez'">Sanchez</option> |
| <option data-onchange="Satisfy" value="Satisfy" style="font-family:'Satisfy'">Satisfy</option> |
| <option data-onchange="Schoolbell" value="Schoolbell" style="font-family:'Schoolbell'">Schoolbell</option> |
| <option data-onchange="Shadows Into Light Two" value="Shadows Into Light Two" style="font-family:'Shadows Into Light Two'">Shadows Into Light Two</option> |
| <option data-onchange="Signika" value="Signika" style="font-family:'Signika'">Signika</option> |
| <option data-onchange="Six Caps" value="Six Caps" style="font-family:'Six Caps'">Six Caps</option> |
| <option data-onchange="Sniglet" value="Sniglet" style="font-family:'Sniglet'">Sniglet</option> |
| <option data-onchange="Source Sans Pro" value="Source Sans Pro" style="font-family:'Source Sans Pro'">Source Sans Pro</option> |
| <option data-onchange="Source Sans Pro Black" value="Source Sans Pro Black" style="font-family:'Source Sans Pro Black'">Source Sans Pro Black</option> |
| <option data-onchange="Source Sans Pro Extra Light" value="Source Sans Pro Extra Light" style="font-family:'Source Sans Pro Extra Light'">Source Sans Pro Extra Light</option> |
| <option data-onchange="Source Serif Pro" value="Source Serif Pro" style="font-family:'Source Serif Pro'">Source Serif Pro</option> |
| <option data-onchange="Source Serif Pro Black" value="Source Serif Pro Black" style="font-family:'Source Serif Pro Black'">Source Serif Pro Black</option> |
| <option data-onchange="Source Serif Pro Extra Light" value="Source Serif Pro Extra Light" style="font-family:'Source Serif Pro Extra Light'">Source Serif Pro Extra Light</option> |
| <option data-onchange="Special Elite" value="Special Elite" style="font-family:'Special Elite'">Special Elite</option> |
| <option data-onchange="Stint Ultra Expanded" value="Stint Ultra Expanded" style="font-family:'Stint Ultra Expanded'">Stint Ultra Expanded</option> |
| <option data-onchange="Sunday" value="Sunday" style="font-family:'Sunday'">Sunday</option> |
| <option data-onchange="Tenor Sans" value="Tenor Sans" style="font-family:'Tenor Sans'">Tenor Sans</option> |
| <option data-onchange="Text Me One" value="Text Me One" style="font-family:'Text Me One'">Text Me One</option> |
| <option data-onchange="Trocchi" value="Trocchi" style="font-family:'Trocchi'">Trocchi</option> |
| <option data-onchange="Ubuntu" value="Ubuntu" style="font-family:'Ubuntu'">Ubuntu</option> |
| <option data-onchange="Ultra" value="Ultra" style="font-family:'Ultra'">Ultra</option> |
| <option data-onchange="UnifrakturMaguntia" value="UnifrakturMaguntia" style="font-family:'UnifrakturMaguntia'">UnifrakturMaguntia</option> |
| <option data-onchange="Vampiro One" value="Vampiro One" style="font-family:'Vampiro One'">Vampiro One</option> |
| <option data-onchange="Vast Shadow" value="Vast Shadow" style="font-family:'Vast Shadow'">Vast Shadow</option> |
| <option data-onchange="Vidaloka" value="Vidaloka" style="font-family:'Vidaloka'">Vidaloka</option> |
| <option data-onchange="Voga" value="Voga" style="font-family:'Voga'">Voga</option> |
| <option data-onchange="Vollkorn" value="Vollkorn" style="font-family:'Vollkorn'">Vollkorn</option> |
| <option data-onchange="VT323" value="VT323" style="font-family:'VT323'">VT323</option> |
| <option data-onchange="Waterlily" value="Waterlily" style="font-family:'Waterlily'">Waterlily</option> |
| <option data-onchange="Yellowtail" value="Yellowtail" style="font-family:'Yellowtail'">Yellowtail</option> |
| </select> |
|
|
| <div class="btn-group customizeFonts" role="group"> |
| <button type="button" class="btn btn-default"> |
| <i class="fa fa-plus-circle default"></i> Add font |
| </button> |
| </div> |
| </div> |
|
|
| <div class="btn-group font-style" role="group"> |
| <button type="button" class="btn btn-default fontStyle" data-font-style="bold"><i class="fa fa-bold"></i></button> |
| <button type="button" class="btn btn-default fontStyle" data-font-style="italic"><i class="fa fa-italic"></i></button> |
| <button type="button" class="btn btn-default fontStyle" data-font-style="boldItalic"><i class="fa fa-bold"></i><i class="fa fa-italic"></i></button> |
| <button type="button" class="btn btn-default" data-font-style="underline"><i class="fa fa-underline"></i></button> |
| <button type="button" class="btn btn-default" data-font-style="strikethrough"><i class="fa fa-strikethrough"></i></button> |
| </div> |
|
|
| <div class="input-group font-size-spinner spinner"> |
| <input type="text" class="form-control font-size" value="30" maxlength="3"> |
| <div class="input-group-btn-vertical"> |
| <button class="btn btn-default"><i class="fa fa-caret-up"></i></button> |
| <button class="btn btn-default"><i class="fa fa-caret-down"></i></button> |
| </div> |
| </div> |
| </div> |
| <div class="btn-group text-align" role="group"> |
| <button type="button" class="btn btn-default active" data-text-align="left"><i class="fa fa-align-left"></i></button> |
| <button type="button" class="btn btn-default" data-text-align="center"><i class="fa fa-align-center"></i></button> |
| <button type="button" class="btn btn-default" data-text-align="right"><i class="fa fa-align-right"></i></button> |
| </div> |
| <div class="colorInput fontColor"> |
| <span class="swatch"></span> |
| <input class="colorPick form-control loading" data-color-type="font"> |
| </div> |
|
|
| <div class="slider-option"> |
| <span class="slider-label">Letter Spacing <span class="slider-value letterSpacing-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="letterSpacing" type="text" data-slider-min="-10" data-slider-max="20" data-slider-step="1" data-slider-value="0" data-slider-ticks="[-10,0,20]" > |
| </div> |
| </div> |
| <div class="slider-option"> |
| <span class="slider-label">Line Height <span class="slider-value lineHeight-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="lineHeight" type="text" data-slider-min="0.8" data-slider-max="3" data-slider-step=".1" data-slider-value="1.2" data-slider-ticks="[0.8,1.2,3]" data-slider-ticks-snap-bounds=".1"> |
| </div> |
| </div> |
|
|
| <hr/> |
| <p class="subhead">Shadow</p> |
| <span class="shadowLabel">Offset</span> |
| <span class="shadowLabel shadowBlur">Blur</span> |
| <span class="shadowLabel shadowColor">Color</span> |
|
|
| <div class="textShadows"> |
| <div class="input-group shadow-size-spinner spinner"> |
| <input type="text" class="form-control shadow-size" value="0" maxlength="3"> |
| <div class="input-group-btn-vertical"> |
| <button class="btn btn-default"><i class="fa fa-caret-up"></i></button> |
| <button class="btn btn-default"><i class="fa fa-caret-down"></i></button> |
| </div> |
| </div> |
| <div class="input-group shadow-blur-spinner spinner"> |
| <input type="text" class="form-control shadow-blur" value="0" maxlength="3"> |
| <div class="input-group-btn-vertical"> |
| <button class="btn btn-default"><i class="fa fa-caret-up"></i></button> |
| <button class="btn btn-default"><i class="fa fa-caret-down"></i></button> |
| </div> |
| </div> |
|
|
| <div class="colorInput"><span class="swatch"></span> |
| <input class="form-control colorPick loading" data-color-type="textShadow"> |
| </div> |
| </div> |
| <hr/> |
| <p class="subhead">Effects</p> |
| <div class="slider-option"> |
| <span class="slider-label">Text Opacity <span class="slider-value text-opacity-value">100</span></span> |
| <div class="slider-wrap"> |
| <input id="textOpacity" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-ticks="[0, 50, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="object-pane graphic-object"> |
| <div class="graphic-color-option"> |
| <div class="clearfix"> |
| <span class="color-title">Color Fill </span><div class="colorInput"><span class="swatch"></span><input class="form-control colorPick loading" data-color-type="graphic"></div> |
| </div> |
| <hr/> |
| </div> |
| <p class="subhead">Flip & Rotate</p> |
| <div class="graphic-options"> |
| <button id="flip-element-h" type="button" class="btn btn-default"><img src="/public/img/flip-horizontal.svg"></button> |
| <button id="flip-element-v" type="button" class="btn btn-default"><img src="/public/img/flip-vertical.svg"></button> |
| <button id="rotate-element-counter" type="button" class="btn btn-default"><img src="/public/img/rotate-counterclock.svg"></button> |
| <button id="rotate-element-clock" type="button" class="btn btn-default"><img src="/public/img/rotate-clock.svg"></button> |
| <hr/> |
| </div> |
| <p class="subhead">Effects</p> |
| <div class="slider-option"> |
| <span class="slider-label">Opacity <span class="slider-value graphic-opacity-value">100</span></span> |
| <div class="slider-wrap"> |
| <input id="graphicOpacity" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-ticks="[0, 50, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| <hr/> |
| </div> |
| |
| <div class="remove-bg-options clearfix"> |
| <label class="photo-bg-switch"> |
| <input type="checkbox" checked> |
| <span class="photo-bg-slider round"></span> |
| </label> |
| <p>Remove Image Background</p> |
| </div> |
| |
| </div> |
|
|
| <div class="object-pane shape-object"> |
| <div class="shape-options clearfix"> |
| <div class="clearfix"> |
| <p class="subhead">Fill</p> |
| <select id="fill-type" class="shape-fill-type"> |
| <option value="nofill">No Fill</option> |
| <option value="solid">Solid Color</option> |
| </select> |
| <div class="colorInput"><span class="swatch"></span><input class="form-control colorPick loading" value="#454545" data-color-type="shapeColor"></div> |
| </div> |
| <hr/> |
| <p class="subhead">Border</p> |
| <div class="clearfix inlineFlex"> |
| <select id="border-type" class="shape-border-type"> |
| <option value="noborder">None</option> |
| <option value="solid">Solid</option> |
| <option value="dashed">Dashed</option> |
| </select> |
| <div class="colorInput"><span class="swatch" style="background-color:#454545;"></span><input class="form-control colorPick loading" value="#454545" data-color-type="shapeBorderColor"></div> |
| <div class="input-group spinner shape-border-spinner"> |
| <input type="text" class="form-control shape-border-size" value="30" maxlength="2"> |
| <div class="input-group-btn-vertical"> |
| <button class="btn btn-default"><i class="fa fa-caret-up"></i></button> |
| <button class="btn btn-default"><i class="fa fa-caret-down"></i></button> |
| </div> |
| </div> |
| </div> |
| <hr/> |
| <div class="border-radius-option"> |
| <p class="subhead">Rounded Corners</p> |
| <div class="input-group spinner shape-radius-spinner"> |
| <input type="text" class="form-control border-radius-size" value="30" maxlength="3"> |
| <div class="input-group-btn-vertical"> |
| <button class="btn btn-default"><i class="fa fa-caret-up"></i></button> |
| <button class="btn btn-default"><i class="fa fa-caret-down"></i></button> |
| </div> |
| </div> |
| <hr/> |
| </div> |
| <p class="subhead">Effects</p> |
| <div class="slider-option"> |
| <span class="slider-label">Shape Opacity <span class="slider-value shape-opacity-value">100</span></span> |
| <div class="slider-wrap"> |
| <input id="shapeOpacity" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-ticks="[0, 50, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="object-pane line-object"> |
| <div class="line-options clearfix"> |
| <p class="subhead">Type</p> |
| <div class="clearfix inlineFlex"> |
| <select id="line-type" class="line-type"> |
| <option value="solid">Solid</option> |
| <option value="dashed">Dashed</option> |
| </select> |
| <div class="colorInput"><span class="swatch"></span><input class="form-control colorPick loading" data-color-type="lineColor"></div> |
| <div class="input-group spinner line-size-spinner"> |
| <input type="text" class="form-control line-size" value="30" maxlength="2"> |
| <div class="input-group-btn-vertical"> |
| <button class="btn btn-default"><i class="fa fa-caret-up"></i></button> |
| <button class="btn btn-default"><i class="fa fa-caret-down"></i></button> |
| </div> |
| </div> |
| </div> |
| <hr/> |
| <p class="subhead">Effects</p> |
| <div class="slider-option"> |
| <span class="slider-label">Line Opacity <span class="slider-value line-opacity-value">100</span></span> |
| <div class="slider-wrap"> |
| <input id="lineOpacity" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-ticks="[0, 50, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| <div class="tab-pane" id="f"> |
| <div class="padding-inner"> |
| <div class="create-text-layer" style="font-family: 'Archivo Black';font-size: 36px;" data-font-family="Archivo Black" data-text-content="Heading text" data-font-size="72" data-text-width="674">Add a heading</div> |
| <div class="create-text-layer" style="font-family: 'Sanchez';font-size: 26px;" data-font-family="Sanchez" data-text-content="Subheading text" data-font-size="46" data-text-width="450">Add a subheading</div> |
| <div class="create-text-layer" style="font-family: 'Open Sans';font-size: 18px;" data-font-family="Open Sans" data-text-content="Body text" data-font-size="28" data-text-width="300">Add some body text</div> |
| </div> |
| </div> |
|
|
| <div class="tab-pane" id="b"> |
| <div class="padding-inner"> |
| <div class="graphics-list clearfix"> |
| <div role="tabpanel"> |
|
|
| <ul class="nav nav-tabs" role="tablist"> |
| <li role="presentation" class="active"><a class="scroll-top" href="#graphics-icons" aria-controls="graphics-icons" role="tab" data-toggle="tab">Icons</a></li> |
| <li role="presentation"><a class="scroll-top" href="#graphics-vectors" aria-controls="graphics-vectors" role="tab" data-toggle="tab">Vectors</a></li> |
| <li role="presentation"><a id="graphics-photos-tab" class="scroll-top" href="#graphics-photos" aria-controls="graphics-photos" role="tab" data-toggle="tab">Photos</a></li> |
| <li role="presentation"><a class="scroll-top" href="#graphics-uploads" aria-controls="graphics-uploads" role="tab" data-toggle="tab">Uploads</a></li> |
| <li role="presentation"> |
| <a class="scroll-top loadFavorites" href="#fav-uploads" aria-controls="fav-uploads" role="tab" data-toggle="tab"> |
| <i class="fa fa-star-o"></i> |
| </a> |
| </li> |
| </ul> |
|
|
| <div class="tab-content"> |
|
|
| <div role="tabpanel" class="tab-pane active" id="graphics-icons"> |
| <div class="graphic-search"> |
| <form id="graph-search" class="search-form"> |
| <div class="input-group search-box"> |
| <input id="graphic-search-terms" type="text" class="form-control" placeholder="Search graphics..."> |
| <span class="input-group-btn"> |
| <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button> |
| </span> |
| </div> |
| </form> |
| </div> |
| <div class="graphic-grid clearfix"> |
| <span class="initial-load-graphics"> |
| <i class="fa fa-spinner fa-pulse loader-icon"></i> |
| </span> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="graphics-vectors"> |
| <div class="vector-search"> |
| <form id="vector-search" class="search-form"> |
| <div class="input-group search-box"> |
| <input id="vector-search-terms" type="text" class="form-control" placeholder="Search vectors..."> |
| <span class="input-group-btn"> |
| <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button> |
| </span> |
| </div> |
| </form> |
| </div> |
| <div class="vector-grid clearfix"> |
| <div class="vector-masonry"> |
| </div> |
| <span class="initial-load-vectors"> |
| <i class="fa fa-spinner fa-pulse loader-icon"></i> |
| </span> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="graphics-photos"> |
| <div role="tabpanel" class="tab-pane" id="graphics-images"> |
| <div class="graphics-photo-search"> |
| <form id="graphics-photo-search" class="search-form clearfix"> |
| <div class="input-group search-box"> |
| <input id="graphics-photo-search-terms" type="text" class="form-control" placeholder="Search images..."> |
| <span class="input-group-btn"> |
| <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button> |
| </span> |
| </div> |
| <div class="btn-group photos-sorting"> |
| <input id="graphics-photo-sort" type="hidden" value="latest"> |
| </div> |
| </form> |
| </div> |
| <div class="thumbnails clearfix"> |
| <div class="graphics-photos clearfix"> |
| <span class="initial-load-photos"> |
| <i class="fa fa-spinner fa-pulse loader-icon"></i> |
| </span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="graphics-uploads"> |
| <button class="btn btn-success upload-img " type="button"> |
| <span class="upload-ready"><i class="fa fa-cloud-upload"></i> Upload an image</span> |
| <span class="uploading" style="display:none;"> |
| <span class="progress-bar-area"></span> |
| <span class="upload-progress-text"> |
| <i class="fa fa-circle-o-notch fa-spin"></i> Uploading <span class="percentage">(0%)</span> |
| </span> |
| </span> |
| </button> |
| <div class="graphic-uploads uploaded-items clearfix"> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="fav-uploads"> |
| <div class="thumbnails clearfix"> |
| <div class="svg-favs border-favs clearfix"></div> |
| <div class="vector-favs clearfix"></div> |
| <div class="upload-favs clearfix"></div> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
| <div class="tab-pane" id="c"> |
| <div class="padding-inner"> |
| <div class="bg-options"> |
|
|
| <div role="tabpanel"> |
|
|
| <div class="edit-bg"> |
| <button class="btn btn-default remove-bg-image-btn" disabled><i class="fa fa-times-circle"></i>Remove</button> |
| <button class="btn btn-default reposition-bg-image-btn" disabled><i class="fa fa-arrows"></i>Reposition</button> |
| <button class="btn btn-default bg-image-flip-h-btn" disabled data-toggle="tooltip" data-placement="top" data-original-title="Flip horizontal"><img src="/public/img/flip-horizontal.svg"></button> |
| <button class="btn btn-default bg-image-flip-v-btn" disabled data-toggle="tooltip" data-placement="top" data-original-title="Flip vertical"><img src="/public/img/flip-vertical.svg"></button> |
| </div> |
|
|
| <ul class="nav nav-tabs" role="tablist"> |
| <li role="presentation" class="active"><a class="scroll-top" href="#bg-images" aria-controls="bg-images" role="tab" data-toggle="tab">Photos</a></li> |
| <li role="presentation"><a class="scroll-top" href="#bg-patterns" aria-controls="bg-patterns" role="tab" data-toggle="tab">Patterns</a></li> |
| <li role="presentation"><a class="scroll-top" href="#bg-upload" aria-controls="bg-upload" role="tab" data-toggle="tab">Uploads</a></li> |
| <li role="presentation"><a class="scroll-top" href="#bg-color" aria-controls="bg-color" role="tab" data-toggle="tab">Color</a></li> |
| <li role="presentation"><a class="scroll-top" href="#bg-fav" aria-controls="bg-fav" role="tab" data-toggle="tab"><i class="fa fa-star-o"></i></a></li> |
| </ul> |
|
|
| <div class="tab-content"> |
|
|
| <div role="tabpanel" class="tab-pane active" id="bg-images"> |
| <div class="bg-search"> |
| <form id="photo-search" class="search-form clearfix"> |
| <div class="input-group search-box"> |
| <input id="photo-search-terms" type="text" class="form-control" placeholder="Search images..."> |
| <span class="input-group-btn"> |
| <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button> |
| </span> |
| </div> |
| <div class="btn-group bg-sorting"> |
| <input id="photo-sort" type="hidden" value="latest"> |
| </div> |
| </form> |
| </div> |
| <div class="thumbnails clearfix"> |
| <div class="bg-photos clearfix"> |
| <span class="initial-load-photos"> |
| <i class="fa fa-spinner fa-pulse loader-icon"></i> |
| </span> |
| </div> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="bg-patterns"> |
| <div class="thumbnails clearfix"> |
| <div class="bg-patterns"> |
| <span class="initial-load-patterns"> |
| <i class="fa fa-spinner fa-pulse loader-icon"></i> |
| </span> |
| </div> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="bg-upload"> |
| <button class="btn btn-success upload-img " type="button"> |
| <span class="upload-ready"><i class="fa fa-cloud-upload"></i> Upload an image</span> |
| <span class="uploading" style="display:none;"> |
| <span class="progress-bar-area"></span> |
| <span class="upload-progress-text"> |
| <i class="fa fa-circle-o-notch fa-spin"></i> Uploading <span class="percentage">(0%)</span> |
| </span> |
| </span> |
| </button> |
| <div class="background-uploads uploaded-items clearfix"> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="bg-color"> |
| <div class="bg-color"> |
| <span class="lbl">Background color</span> |
| <div class="colorInput"> |
| <span class="swatch" style="background-color:#fff;"></span> |
| <input class="colorPick form-control loading" value="#ffffff" data-color-type="bg"> |
| </div> |
| </div> |
| </div> |
|
|
| <div role="tabpanel" class="tab-pane" id="bg-fav"> |
| <div class="thumbnails clearfix"> |
| <div class="bg-favs clearfix"> |
| <span class="load-favorites"> |
| <i class="fa fa-spinner fa-pulse loader-icon"></i> |
| </span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="tab-pane" id="d"> |
| <div class="padding-inner"> |
| <div class="bg-filter-options"> |
| <div class="bg-filter-disable"> |
| <p> |
| To apply effects, you'll need to select a background image. |
| <button type="button" class="btn btn-success" href="#c" data-toggle="tab" data-tab-header="tab-c"><i class="icon-picture"></i> Select Background</button> |
| </p> |
|
|
| </div> |
|
|
| <div class="slider-option"> |
| <span class="slider-label">Color Overlay <span class="slider-value opacity-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="overlayBG" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-ticks="[0, 50, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| <div class="colorInput"><span class="swatch"></span> |
| <input class="colorPick form-control loading" data-color-type="bgOverlay"> |
| </div> |
| </div> |
|
|
| <hr/> |
|
|
| <div class="slider-option"> |
| <span class="slider-label">Darken <span class="slider-value darken-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="darkenBG" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-ticks="[0, 50, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
| <div class="slider-option"> |
| <span class="slider-label">Blur <span class="slider-value blur-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="blurBG" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-ticks="[0, 50, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
|
|
| <hr/> |
|
|
| <div class="slider-option"> |
| <span class="slider-label">Saturation <span class="slider-value saturation-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="saturationBG" type="text" data-slider-min="-100" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-ticks="[-100, 0, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
| <div class="slider-option"> |
| <span class="slider-label">Hue <span class="slider-value hue-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="hueBG" type="text" data-slider-min="-180" data-slider-max="180" data-slider-step="1" data-slider-value="0" data-slider-ticks="[-100, 0, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
| <div class="slider-option"> |
| <span class="slider-label">Brightness <span class="slider-value brightness-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="brightnessBG" type="text" data-slider-min="-100" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-ticks="[-100, 0, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
| <div class="slider-option"> |
| <span class="slider-label">Contrast <span class="slider-value contrast-value">0</span></span> |
| <div class="slider-wrap"> |
| <input id="contrastBG" type="text" data-slider-min="-100" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-ticks="[-100, 0, 100]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
| <div class="tab-pane" id="e"> |
| <div class="padding-inner"> |
| <div class="shapes-list clearfix"> |
| <span class="initial-load-shapes"> |
| <i class="fa fa-spinner fa-pulse loader-icon"></i> |
| </span> |
| </div> |
| </div> |
| </div> |
| <div id="colorManager"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="sub-menu clearfix"> |
| <div class="reposition-bg-overlay"></div> |
|
|
| <div class="edit-layers clearfix" style=""> |
| <button id="undo" type="button" class="btn btn-default disabled" data-toggle="tooltip" data-placement="bottom" title="Undo"><i class="arrow fa fa-undo"></i></button> |
| <button id="redo" type="button" class="btn btn-default disabled" data-toggle="tooltip" data-placement="bottom" title="Redo"><i class="arrow fa fa-repeat"></i></button> |
| <button id="duplicate-layer" type="button" class="btn btn-default disabled" data-toggle="tooltip" data-placement="bottom" title="Duplicate layer"><i class="fa fa-clone"></i></button> |
| <button id="move-layer-back" type="button" class="btn btn-default disabled" data-toggle="tooltip" data-placement="bottom" title="Move layer back"><i class="pad icon-layers"></i><i class="arrow fa fa-long-arrow-down"></i></button> |
| <button id="move-layer-forward" type="button" class="btn btn-default disabled" data-toggle="tooltip" data-placement="bottom" title="Move layer forward"><i class="pad icon-layers"></i><i class="arrow fa fa-long-arrow-up"></i></button> |
| <button id="delete-layer-btn" type="button" class="btn btn-default disabled trash" data-toggle="tooltip" data-placement="bottom" title="Delete layer"><i class="fa fa-trash-o"></i></button> |
| <button id="grid-toggle" type="button" class="btn btn-default grid-toggle" data-toggle="tooltip" data-placement="bottom" title="Toggle grid"><span><i class="fa fa-th"></i></span></button> |
| <button id="snap-toggle" type="button" class="btn btn-default snap-toggle on" data-toggle="tooltip" data-placement="bottom" data-snap-to-grid="true" title="Toggle snap to grid"><span><i class="fa fa-magnet"></i></span></button> |
| <button id="snap-profile-toggle" type="button" class="btn btn-default safe-zone-toggle endButton" data-toggle="tooltip" data-placement="bottom" title="Toggle safe zone"><span><i class="fa fa fa-user"></i></span></button> |
| <button id="twitter-toggle" type="button" class="btn btn-default safe-zone-toggle endButton" data-toggle="tooltip" data-placement="bottom" title="Toggle safe zone"><span><i class="fa fa-twitter"></i></span></button> |
| <button id="youtube-toggle" type="button" class="btn btn-default safe-zone-toggle endButton" data-toggle="tooltip" data-placement="bottom" title="Toggle safe zone"><span><i class="fa fa-youtube"></i></span></button> |
| <button id="yt-outro-toggle" type="button" class="btn btn-default safe-zone-toggle endButton" data-toggle="tooltip" data-placement="bottom" title="Toggle safe zone"><span><i class="fa fa-youtube"></i></span></button> |
| <button id="fb-header-toggle" type="button" class="btn btn-default safe-zone-toggle endButton" data-toggle="tooltip" data-placement="bottom" title="Toggle safe zone"><span><i class="fa fa-facebook-square"></i></span></button> |
| <button id="fb-group-toggle" type="button" class="btn btn-default safe-zone-toggle endButton" data-toggle="tooltip" data-placement="bottom" title="Toggle safe zone"><span><i class="fa fa-facebook-square"></i></span></button> |
| <button id="ig-story-toggle" type="button" class="btn btn-default safe-zone-toggle endButton" data-toggle="tooltip" data-placement="bottom" title="Toggle safe zone"><span><i class="fa fa fa-instagram"></i></span></button> |
| </div> |
|
|
| <div class="btn-group download-btn clearfix"> |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cloud-download"></i> Download</button> |
| <ul class="dropdown-menu dropdown-menu-right"> |
| <li><button type="button" class="no-style-btn download-image" data-img-type="jpeg" data-img-scale="1">Web optimized JPG</button></li> |
| <li><button type="button" class="no-style-btn download-image" data-img-type="png" data-img-scale="1">High-res PNG</button></li> |
| <li><button type="button" class="no-style-btn download-image" data-img-type="jpeg" data-img-scale="2">Retina JPG (2x size)</button></li> |
| <li><button type="button" class="no-style-btn download-image" data-img-type="png" data-img-scale="2">Retina PNG (2x size)</button></li> |
| <li class="transparent-check"><input id="transparentCheck" type="checkbox" name="transparentCheck" value="true"> Transparent background</li> |
| </ul> |
| </div> |
| <div class="btn-group share-btn"> |
| <button id="share-image" type="button" class="btn btn-default"><i class="icon-share"></i>Share</button> |
| </div> |
| <div class="btn-group save-btn"> |
| <button id="save-image" type="button" class="btn btn-default"><i class="fa fa-floppy-o"></i>Save</button> |
| </div> |
| </div> |
|
|
| <div class="canvas-wrap"> |
| <div class="saving-overlay" style="display: none;"> |
| <div class="preloader"> |
| <div class="status"> |
| <span class="save-success" style="display:none;"><i class="fa fa-check"></i></span><span class="save-error" style="display:none;"><i class="fa fa-times-circle"></i></span><span class="loader loader-quart"> </span> <span class="load-text">Saving</span> |
| </div> |
| </div> |
| </div> |
| <div class="downloading-overlay" style="display: none;"> |
| <div class="preloader"> |
| <h3>Downloading your image</h3> |
| <div class="preload preload-share"> |
| <span class="loader loader-quart"></span> |
| <p>Just a moment while we generate your image...</p> |
| </div> |
| <div class="download-btns"> |
| <p>Your download should start momentarily.</p> |
| </div> |
| </div> |
| </div> |
| <div class="transparency-wrap top"></div> |
| <div class="transparency-wrap right" style="height:720px; width:calc(50% - 1280 / 2 px);"></div> |
| <div class="transparency-wrap bottom" style="top:(720 + 40) px; height:calc(100% - 1280 + 40 px);"></div> |
| <div class="transparency-wrap left" style="height:720px; width:calc(50% - 1280 / 2 px);"></div> |
|
|
| <div id="reposition-bg" style="display:none;"> |
| <div class="inner clearfix"> |
| <div class="inst"> |
| <div class="rep">Reposition & scale background</div> |
| <div class="clikndrag">Click and drag the background to reposition</div> |
| </div> |
| <div class="slider"> |
| <div class="slider-wrap"> |
| <input id="bgScale" type="text" data-slider-min="1" data-slider-max="2" data-slider-step="0.01" data-slider-value="1" data-slider-ticks="[1, 2]" data-slider-ticks-snap-bounds="0.01"> |
| </div> |
| </div> |
| <div class="btns"> |
| <button id="cancel-bg-scale" type="button" class="btn btn-default">Cancel</button> |
| <button id="apply-bg-scale" type="button" class="btn btn-success">Apply</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="main-canvas-area" class="canvas-area"> |
| <div id="canvas-zoom-wrap" style="-webkit-transform-origin: center top; transform-origin: center top;"> |
| <div id="canvas-clip-area" data-zoom="1" class="canvas-resizer" style="width:1280px;height:720px;position:relative;"> |
| <style id="export-styles" type="text/css"> |
| * { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| .editor .canvas-wrap .canvas-area .draggable { |
| padding: 0px; |
| display: inline-block; |
| position: absolute !important; |
| padding: 0; |
| margin: 0; |
| background: rgba(255, 0, 0, 0.12); |
| } |
| .editor .canvas-area .resizable-graphic { |
| display: block; |
| } |
| #newexportcanvas { |
| background: #fff; |
| } |
| .canvas-resizer svg { |
| width: 100%; |
| max-height: 100%; |
| } |
| .canvas-resizer [data-layer-type="shape"] svg { |
| height: 100%; |
| } |
| </style> |
| <div id="background-area" style="display:block; width:1280px; height: 720px; overflow:hidden; position:relative; -webkit-transform-origin: 0 0; transform-origin: 0 0;"> |
| <div id="bgColor" style="background:#fff; position:absolute; top:0; left:0; right:0; bottom:0; opacity:1;"></div> |
| <div id="bgOverlay" style="background:#146DA8; position:absolute; top:0; left:0; right:0; bottom: 0; opacity:0;"></div> |
| <div id="bgDarken" style="background:#000000; position:absolute; top:0; left:0; right:0; bottom: 0; opacity:0;"></div> |
| </div> |
|
|
| <div id="objects-area" style="display:block; top:0; left:0; width:1280px; height: 720px; position:absolute; pointer-events:none; -webkit-transform-origin: 0 0; transform-origin: 0 0;"></div> |
| <div id="controls-area" style="display:block; top:0; left:0; width:1280px; height: 720px; overflow:hidden; position:absolute; pointer-events:none;"></div> |
| <div id="fbGrid" style="position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;"></div> |
| <div id="socialOverlay"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div style="display:none;"> |
| <canvas style="display:none;" id="thumbcanvas" width="400" height="225" style="background: #fff;"></canvas> |
| <canvas id="newexportcanvas" width="1280" height="720" style="max-width:600px;"></canvas> |
| </div> |
| </div> |
|
|
| <div class="zoom-wrap"> |
| <div class="zoom-option clearfix"> |
| <button type="button" class="btn zoomout zoombtn"><i class="fa fa-minus-circle"></i></button> |
| <div class="slider-wrap"> |
| <input id="zoomSlider" type="text" data-slider-min="10" data-slider-max="200" data-slider-step="1" data-slider-value="100" data-slider-ticks="[10, 50, 100, 200]" data-slider-ticks-snap-bounds="1"> |
| </div> |
| <button type="button" class="btn zoomin zoombtn"><i class="fa fa-plus-circle"></i></button> |
| <select class="zoom-select"> |
| <option value="10">10%</option> |
| <option value="25">25%</option> |
| <option value="50">50%</option> |
| <option value="75">75%</option> |
| <option value="100">100%</option> |
| <option value="200">200%</option> |
| </select> |
| <button type="button" class="btn zoomfit">Fit</button> |
| </div> |
| </div> |
|
|
| <div style="display:none;"> |
| <canvas id="flatBgPhoto" style="position:absolute;width:1280px;height:720px;" width="1280" height="720"></canvas> |
| <div class="loaded-bg" style="width:1280px;height:720px;"></div> |
| <div class="modded-bg" style=""></div> |
| <canvas id="exportcanvas" width="1280" height="720"></canvas> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="modal fade" id="bufferModal" tabindex="-1" role="dialog" aria-labelledby="bufferModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <iframe id="buffer-iframe" src=""></iframe> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="fontCustomizeModal" tabindex="-1" role="dialog" aria-labelledby="fontCustomizeModal" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
|
|
| <h2>Font Customization</h2> |
| <p class="explain">Import and manage your own custom fonts.</p> |
|
|
| <div class="customFontToasts"></div> |
|
|
| <div class="customFontGreeting"> |
| <span class="col-xs-9"> |
| <p class="customFontNotice upload-font"><strong>Note:</strong> Only .ttf, .otf, and .woff font types are supported.</p> |
| <p class="fontAgreement">By uploading fonts, you agree that you own the rights to use these fonts.</p> |
| </span> |
|
|
| <span class="col-xs-3"> |
| <button class="btn btn-success upload-font" type="button"> |
| <span class="upload-ready"><i class="fa fa-cloud-upload"></i> Upload font</span> |
| <span class="uploading" style="display:none;"> |
| <span class="progress-bar-area"></span> |
| <span class="upload-progress-text"> |
| <i class="fa fa-circle-o-notch fa-spin"></i> Uploading <span class="percentage">(0%)</span> |
| </span> |
| </span> |
| </button> |
| </span> |
| </div> |
|
|
| <hr> |
|
|
| <div class="fontTable"> |
| <p style="text-align: center;">You currently have no uploaded fonts.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <form id="upload-font-form" action="/api/customFont/upload?_csrf=lOF93E9x-6hK1fgPGVx1AYUcCNb-FGURk2eI" method="POST" enctype="multipart/form-data" style="display:none;"> |
| <input id="font-upload-select" type="file" name="file"> |
| </form><div class="modal fade" id="imageCropModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="imageCropModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
|
|
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
|
|
| <h2>Image Crop & Rotate</h2> |
| <p class="explain">Move the end points to change your image's crop.</p> |
|
|
| <div class="ajaxLoad"> |
| <div class="status"> |
| <span class="loader loader-quart"> </span> |
| <span class="load-text">Loading</span> |
| </div> |
| </div> |
|
|
| <div class="crop-editor" style="visibility:hidden"> |
| <div class="image-crop-holder"> |
| <img id='imgCrop' style="max-width: 100%; max-height:100%;"> |
| </div> |
|
|
| <div class="image-crop-toolbar"> |
| <div class="crop-rotate btn-group" role="group"> |
| <button class="btn btn-rot-left btn-default"> |
| <i class="fa fa-undo"></i> |
| </button> |
| <button class="btn btn-rot-right btn-default"> |
| <i class="fa fa-repeat"></i> |
| </button> |
| </div> |
|
|
| <div class="crop-type btn-group" role="group"> |
| <button class="btn square-crop active btn-default"> |
| <i class="fa fa-square"></i> |
| </button> |
| <button class="btn circle-crop btn-default"> |
| <i class="fa fa-circle"></i> |
| </button> |
| </div> |
|
|
| <div class="image-crop-buttons"> |
| <button class="btn btn-default" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> Cancel</button> |
| <button class="btn btn-success cropImg"><i class="fa fa-check"></i> Apply</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="image-crop-confirmation" style="display:none;"> |
| <div class='croppedImg'> |
| <img> |
| </div> |
| <p>Are you happy with the changes?</p> |
| <p>A new version of your image will be generated.</p> |
| <div class="btn-wrap clearfix"> |
| <button class="btn btn-danger" data-dismiss="modal" aria-label="Close">Discard Changes</button> |
| <button class="btn btn-success save-new">Accept Changes</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="imageResizeModal" tabindex="-1" role="dialog" aria-labelledby="imageResizeModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
|
|
| <h2>Resize Graphic</h2> |
| <p class="explain">Select a dimension to resize your graphic.</p> |
|
|
| <div class="image-size-select"> |
|
|
| <h3>Custom Graphic Size</h3> |
|
|
| <div class="image-group custom-size clearfix"> |
| <form action="" method="post" id="custom_image" name="custom_image" class="form-inline"> |
| <div class="form-group"> |
| <input name="width" type="text" class="form-control num-input custom-img-width" maxlength="4" placeholder="width (px)"> |
| </div> |
| <div class="form-group"> |
| <span class="by">x</span> |
| </div> |
| <div class="form-group"> |
| <input name="height" type="text" class="form-control num-input custom-img-height" maxlength="4" placeholder="height (px)"> |
| </div> |
| <div class="form-group action"> |
| <button class="pull-right btn btn-success create-btn" type="submit" data-loading-text="Resize">Resize</button> |
| </div> |
| </form> |
| </div> |
|
|
|
|
| <h3>Social Media Posts</h3> |
|
|
| <div class="image-group clearfix"> |
| <div class="resize-type" data-graphic-type="fb-post" data-width="1200" data-height="900"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="fb-post" style="width: 60px; height:45px; line-height: 45px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/facebook.png?v=" alt="Facebook Post Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Facebook Post</span> |
| <span class="img-size">1200px x 900px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="fb-link" data-width="1200" data-height="628"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="fb-link" style="width: 60px; height:31px; line-height: 31px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/facebook.png?v=" alt="Facebook Link Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Facebook Link</span> |
| <span class="img-size">1200px x 628px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="ig-post" data-width="1080" data-height="1080"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="ig-post" style="width: 60px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/instagram.png?v=" alt="Instagram Post Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Instagram Post</span> |
| <span class="img-size">1080px x 1080px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="ig-story" data-width="1080" data-height="1920"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="ig-story" style="width: 34px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/instagram.png?v=" alt="Instagram Story Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Instagram Story</span> |
| <span class="img-size">1080px x 1920px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="li-post" data-width="1200" data-height="628"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="li-post" style="width: 60px; height:31px; line-height: 31px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/linkedin.png?v=" alt="LinkedIn Post Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">LinkedIn Post</span> |
| <span class="img-size">1200px x 628px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="pin-post" data-width="735" data-height="1102"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="pin-post" style="width: 40px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/pinterest.png?v=" alt="Pinterest Pin Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Pinterest Pin</span> |
| <span class="img-size">735px x 1102px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="tw-post" data-width="1024" data-height="512"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="tw-post" style="width: 60px; height:30px; line-height: 30px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/twitter.png?v=" alt="Twitter Post Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Twitter Post</span> |
| <span class="img-size">1024px x 512px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="yt-thumbnail" data-width="1280" data-height="720"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="yt-thumbnail" style="width: 60px; height:34px; line-height: 34px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/youtube.png?v=" alt="YouTube Thumbnail Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">YouTube Thumbnail</span> |
| <span class="img-size">1280px x 720px</span> |
| </div> |
| </div> |
| </div> |
|
|
| <h3>Blogging and Infographics</h3> |
|
|
| <div class="image-group clearfix"> |
| <div class="resize-type" data-graphic-type="blog-featured" data-width="1200" data-height="628"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="blog-featured" style="width: 60px; height:31px; line-height: 31px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/blog.png?v=" alt="Blog Featured Image Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Blog Featured Image</span> |
| <span class="img-size">1200px x 628px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="infographic" data-width="800" data-height="2000"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="infographic" style="width: 24px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/infographic.png?v=" alt="Infographic Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Infographic</span> |
| <span class="img-size">800px x 2000px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="ebook-cover" data-width="1410" data-height="2250"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="ebook-cover" style="width: 38px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ebook.png?v=" alt="eBook Cover Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">eBook Cover</span> |
| <span class="img-size">1410px x 2250px</span> |
| </div> |
| </div> |
| </div> |
|
|
| <h3>Headers, Banners and Profile Pages</h3> |
|
|
| <div class="image-group clearfix"> |
| <div class="resize-type" data-graphic-type="fb-header" data-width="820" data-height="360"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="fb-header" style="width: 60px; height:26px; line-height: 26px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/facebook.png?v=" alt="Facebook Cover Photo Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Facebook Cover Photo</span> |
| <span class="img-size">820px x 360px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="fb-event" data-width="1920" data-height="1005"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="fb-event" style="width: 60px; height:31px; line-height: 31px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/facebook.png?v=" alt="Facebook Event Cover Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Facebook Event Cover</span> |
| <span class="img-size">1920px x 1005px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="fb-group" data-width="1640" data-height="856"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="fb-group" style="width: 60px; height:31px; line-height: 31px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/facebook.png?v=" alt="Facebook Group Cover Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Facebook Group Cover</span> |
| <span class="img-size">1640px x 856px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="li-page-header" data-width="1128" data-height="191"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="li-page-header" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/linkedin.png?v=" alt="LinkedIn Page Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">LinkedIn Page</span> |
| <span class="img-size">1128px x 191px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="li-profile-header" data-width="1128" data-height="376"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="li-profile-header" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/linkedin.png?v=" alt="LinkedIn Profile Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">LinkedIn Profile</span> |
| <span class="img-size">1128px x 376px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="snap-profile" data-width="1000" data-height="1000"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="snap-profile" style="width: 60px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/profile.png?v=" alt="Profile Picture Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Profile Picture</span> |
| <span class="img-size">1000px x 1000px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="sndcld-banner" data-width="2480" data-height="520"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="sndcld-banner" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/soundcloud.png?v=" alt="SoundCloud Banner Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">SoundCloud Banner</span> |
| <span class="img-size">2480px x 520px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="twch-banner" data-width="1200" data-height="480"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="twch-banner" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/twitch.png?v=" alt="Twitch Cover Image Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Twitch Cover Image</span> |
| <span class="img-size">1200px x 480px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="twch-offline" data-width="1920" data-height="1080"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="twch-offline" style="width: 60px; height:34px; line-height: 34px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/twitch.png?v=" alt="Twitch Offline Banner Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Twitch Offline Banner</span> |
| <span class="img-size">1920px x 1080px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="twch-panel" data-width="320" data-height="160"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="twch-panel" style="width: 60px; height:30px; line-height: 30px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/twitch.png?v=" alt="Twitch Panel Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Twitch Panel</span> |
| <span class="img-size">320px x 160px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="tw-header" data-width="1500" data-height="500"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="tw-header" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/twitter.png?v=" alt="Twitter Header Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Twitter Header</span> |
| <span class="img-size">1500px x 500px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="yt-channel-art" data-width="2560" data-height="1440"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="yt-channel-art" style="width: 60px; height:34px; line-height: 34px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/youtube.png?v=" alt="YouTube Channel Art Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">YouTube Channel Art</span> |
| <span class="img-size">2560px x 1440px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="yt-outro" data-width="1920" data-height="1080"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="yt-outro" style="width: 60px; height:34px; line-height: 34px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/youtube.png?v=" alt="YouTube End Screen Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">YouTube End Screen</span> |
| <span class="img-size">1920px x 1080px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="zm-bkgrnd" data-width="1920" data-height="1080"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="zm-bkgrnd" style="width: 60px; height:34px; line-height: 34px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/zoom.png?v=" alt="Zoom Background Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Zoom Background</span> |
| <span class="img-size">1920px x 1080px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="email-header" data-width="600" data-height="200"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="email-header" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/email.png?v=" alt="Email Header Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Email Header</span> |
| <span class="img-size">600px x 200px</span> |
| </div> |
| </div> |
| </div> |
|
|
| <h3>Social and Display Ads</h3> |
|
|
| <div class="image-group clearfix"> |
| <div class="resize-type" data-graphic-type="dda-fb-carousel" data-width="1080" data-height="1080"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-fb-carousel" style="width: 60px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/facebook.png?v=" alt="Facebook Carousel Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Facebook Carousel Ad</span> |
| <span class="img-size">1080px x 1080px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-fb-link" data-width="1200" data-height="628"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-fb-link" style="width: 60px; height:31px; line-height: 31px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/facebook.png?v=" alt="Facebook Link Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Facebook Link Ad</span> |
| <span class="img-size">1200px x 628px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-medium-rectangle" data-width="300" data-height="250"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-medium-rectangle" style="width: 60px; height:50px; line-height: 50px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ad.png?v=" alt="Medium Rectangle Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Medium Rectangle Ad</span> |
| <span class="img-size">300px x 250px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-rectangle" data-width="180" data-height="150"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-rectangle" style="width: 60px; height:50px; line-height: 50px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ad.png?v=" alt="Rectangle Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Rectangle Ad</span> |
| <span class="img-size">180px x 150px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-leaderboard" data-width="728" data-height="90"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-leaderboard" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ad.png?v=" alt="Leaderboard Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Leaderboard Ad</span> |
| <span class="img-size">728px x 90px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-skyscraper" data-width="160" data-height="600"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-skyscraper" style="width: 24px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ad.png?v=" alt="Wide Skyscraper Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Wide Skyscraper Ad</span> |
| <span class="img-size">160px x 600px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-filmstrip" data-width="300" data-height="600"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-filmstrip" style="width: 30px; height:60px; line-height: 60px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ad.png?v=" alt="Filmstrip Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Filmstrip Ad</span> |
| <span class="img-size">300px x 600px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-pushdown" data-width="970" data-height="90"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-pushdown" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ad.png?v=" alt="Pushdown Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Pushdown Ad</span> |
| <span class="img-size">970px x 90px</span> |
| </div> |
| </div> |
| <div class="resize-type" data-graphic-type="dda-billboard" data-width="970" data-height="250"> |
| <div class="alignit"> |
| <div class="inside"> |
| <span class="dda-billboard" style="width: 60px; height:24px; line-height: 24px;"> |
| <img class="img-type-symbol" src="https://d2qp0siotla746.cloudfront.net/img/create-graphic/icons/ad.png?v=" alt="Billboard Ad Icon"> |
| </span> |
| </div> |
| </div> |
| <div class="img-info"> |
| <span class="img-type">Billboard Ad</span> |
| <span class="img-size">970px x 250px</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="image-resize-confirmation" style="display:none;"> |
| <p>Would you like to override the current graphic or open a new one?</p> |
| <button class="btn btn-success override">Override current</button> |
| <button class="btn btn-success save-new">Open as new graphic</button> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="openGraphicModal" tabindex="-1" role="dialog" aria-labelledby="openGraphicModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <h3>Warning!</h3> |
| <h4>Someone on your team is editing this graphic!</h4> |
| <p>It appears that <span class="boldtext"></span> has this graphic open. You may continue, but you risk losing your changes. It's recommended that you create a duplicate of the graphic, or ask them to close their open editor before continuing to make changes.</p> |
| <div class="btn-holder"> |
| <button type="button" class="btn btn-success" data-dismiss="modal" aria-label="Close">Close</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade prompt" id="removeBGErr" tabindex="-1" role="dialog" aria-labelledby="removeBGErrModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <h4><i class="fa fa-exclamation-circle"></i> Your Background Could Not Be Removed</h4> |
| <p>All photos that have a subject that is clearly meant to be the foreground are supported. For instance, most photos of people, products, animals, cars and other objects work. For more information, please read <a href="https://kb.snappa.com/article/115-remove-image-background">this article.</a></p> |
| <div class="btnHolder"> |
| <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">Close</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="savePromptModal" tabindex="-1" role="dialog" aria-labelledby="savePromptModal" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
|
|
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
|
|
| <h2 style="margin:0px">Save Graphic</h2> |
| <p class="explain">Select a location to save your new graphic</p> |
|
|
| <div class="saveToasts"></div> |
|
|
| <hr/> |
|
|
| <div class="folderTable"> |
| <table class="table"> |
| <thead> |
| <tr class="folderHeaders"> |
| <th>Folder Name</th> |
| </tr> |
| </thead> |
| |
| <tbody> |
| <tr class="folderRow active" data-folder-id="0"> |
| <td class="folderAll"><i class="fa fa-picture-o"></i> All your graphics (default)</td> |
| </tr> |
| |
|
|
| </tbody> |
| </table> |
| </div> |
|
|
| <div class="saveBtnGroup"> |
| <button type="button" class="btn btn-default newFolder"> |
| <i class="fa fa-plus-circle default"></i> New Folder |
| </button> |
| <span class="saveBtnRight"> |
| <button type="button" class="btn btn-default save-cancel"> |
| Cancel |
| </button> |
| <button type="button" class="btn btn-success saveBtn"> |
| <i class="fa fa-save"></i> Save |
| </button> |
| </span> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="savedColorsModal" tabindex="-1" role="dialog" aria-labelledby="savedColorsModal" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
|
|
| <h2>Saved Colors</h2> |
| <p class="explain">Click the swatches to update your saved colors</p> |
| <hr> |
|
|
| <div class='savedColorsTable savedGroup'></div> |
| <div id='savedColorsManager'></div> |
|
|
| <div class="btnGroup"> |
| <button class="btn btn-default btnCancel" type="button"> |
| <i class="fa fa-times"></i> Cancel |
| </button> |
| <button class="btn btn-success btnSave" type="button"> |
| <i class="fa fa-floppy-o"></i> Save Colors |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="bufferModal" tabindex="-1" role="dialog" aria-labelledby="bufferModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <iframe id="buffer-iframe" src=""></iframe> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="blockadeModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <h2>Hold your horses!</h2> |
| <div class="row"> |
| <p class="col">You've searched for and loaded too many photos and graphics in the last minute. Please wait a few moments before trying again.</p> |
| </div> |
| <div class="btnHolder"> |
| <button type="button" class="btn btn-success" data-dismiss="modal" aria-label="Close">Okay</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <h3>Share your image</h3> |
| <div class="preload preload-share"> |
| <span class="loader loader-quart"></span> |
| <p class="preload-msg">Just a moment while we prepare your image...</p> |
| </div> |
| <div class="social-accounts"> |
| <div class="action-btns clearfix"> |
| <a class="btn btn-default" href="/app/social-accounts" target="_blank"><i class="fa fa-plus"></i> Add account</a> |
| <button id="share-with-buffer" class="btn btn-default buffer"><img class="buffer-svg" src="/public/img/buffer.svg">Buffer</button> |
| <button id="refreshSocial" class="btn btn-default"><i class="fa fa-refresh"></i> Refresh</button> |
| </div> |
| <div class="account-list"></div> |
| </div> |
| <div class="social-post clearfix"> |
| <div id="share-post-alert"></div> |
| <div class="post-profile clearfix"> |
| <div class="profile-pic"> |
| <i class="fa soc-tw"></i> |
| </div> |
| <div class="user-info"> |
| <div class="name"></div> |
| <div class="username"></div> |
| </div> |
| </div> |
| <textarea id="sharetext" class="form-control share-text-box" placeholder="Enter your text here (optional)..."></textarea> |
| <div class="social-post-form"> |
| <form class="share-post"> |
| <button type="submit" class="btn btn-success post-btn" data-loading-text="<i class=\'fa fa-spinner fa-pulse\'></i> Posting...">Share now</button> |
| <input type="hidden" name="sharenetwork" class="sharenetwork" value=""> |
| <input type="hidden" name="shareaccount" class="shareaccount" value=""> |
| </form> |
| </div> |
| <div class="text-count">280</div> |
| </div> |
| <div class="success-post"> |
| <p class="success-post-msg"></p> |
| <button type="button" class="btn btn-success close-btn" data-dismiss="modal" aria-label="Close">Okay</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="unsupportedBrowser" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div id="unsupportedContent" class="modal-body"> |
| <p>We’re sorry but Snappa will not work with your current browser due to the advanced technology we use to run our software.</p> |
| <p>To enable Snappa’s full functionality, please use the latest version of <a href="https://www.google.ca/chrome/browser/desktop/" target="_blank">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>, or <a href="https://www.apple.com/ca/safari/" target="_blank">Safari</a> to enable Snappa's full functionality.</p> |
| <div class="text-center" style="margin-top: 30px;"><a class="btn btn-success btn-lg" href="/app">Okay</a></div> |
| </div> |
| <div id="outdatedBrowser" class="modal-body" style="display:none"> |
| <p>We're sorry but Snappa will not currently work with your browser.</p> |
| <p>We’ve detected you're using an outdated version of your browser. Please update to the latest version or Snappa may not function correctly.</p> |
| <p>Please download the latest version of <a href="https://www.google.ca/chrome/browser/desktop/" target="_blank">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>, or <a href="https://www.apple.com/ca/safari/" target="_blank">Safari</a> to enable Snappa's full functionality.</p> |
| <div class="text-center" style="margin-top: 30px;"><a class="btn btn-success btn-lg">Okay</a></div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="uploadErrorModal" tabindex="-1" role="dialog" aria-labelledby="uploadErrorModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <h3>Upload error</h3> |
| <p class="upload-error-msg"></p> |
| <div class="button-bar"> |
| <button type="button" class="btn btn-success" data-dismiss="modal" aria-label="Close">Ok</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <img class="profile" src="https://d2qp0siotla746.cloudfront.net/img/headshots/jonny-welcome.jpg"> |
| <p class="hi">Hi I’m Jonny, the social media manager at Snappa. To help you get started, I’ve put together this quick tutorial on how to repurpose a template in less than a minute.</p> |
| <div class="iframe-holder"> |
| <img> |
| <div id="play-tutorial-video" class="play-btn"> |
| <span class="fa-stack fa-lg"> |
| <i class="fa fa-circle fa-stack-2x"></i> |
| <i class="fa fa-play fa-stack-1x fa-inverse"></i> |
| </span> |
| </div> |
| <div style="display: none"> |
| <div id="plyr" data-plyr-provider="vimeo" data-plyr-embed-id="146657573"> |
| </div> |
| </div> |
| </div> |
| <div class="btn-holder"> |
| <button type="button" id='welcomeClose' class="btn btn-success" data-dismiss="modal" aria-label="Close">Ok, I'm ready to get started »</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="modal fade upgradePrompt" id="bufferProModal" tabindex="-1" role="dialog" aria-labelledby="bufferProModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <div class="proTitle">Upgrade to share with Buffer</div> |
| <div class="clearfix"> |
| <div class="leftSide"> |
| <img class="proModalImage" src="https://d2qp0siotla746.cloudfront.net/img/modals/denial/unlimited-shares.jpg"> |
| <p class="promptText">To share graphics using Buffer, you'll have to upgrade your account.</p> |
| </div> |
| <div class="rightSide"> |
|
|
| <ul class="proList"> |
| <li><i class="fa fa-check"></i><span>5,000,000+</span> HD photos & graphics</li> |
| <li><i class="fa fa-check"></i><span>6,000+</span> templates</li> |
| <li><i class="fa fa-check"></i><span>Unlimited</span> downloads</li> |
| <li><i class="fa fa-check"></i><span>Buffer / Social media</span> integrations</li> |
| <li><i class="fa fa-check"></i><span>Custom</span> font uploads</li> |
| <li><i class="fa fa-check"></i><span>Remove</span> image backgrounds</li> |
| </ul> |
|
|
| <div class="priceBanner"> |
| <div class="low">As low as</div> |
| <div class="price">$10/month</div> |
| </div> |
|
|
| <div class="upgradeBtnHolder"> |
| <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#proUpgradeModal" class="btn btn-success upgrade-btn">See Plans & Pricing</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade upgradePrompt" id="customFontsProModal" tabindex="-1" role="dialog" aria-labelledby="customFontsProModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <div class="proTitle">Upgrade to use custom fonts</div> |
| <div class="clearfix"> |
| <div class="leftSide"> |
| <img class="proModalImage" src="https://d2qp0siotla746.cloudfront.net/img/modals/denial/custom-fonts.jpg"> |
| <p class="promptText">To upload custom fonts, you'll have to upgrade your account.</p> |
| </div> |
| <div class="rightSide"> |
|
|
| <ul class="proList"> |
| <li><i class="fa fa-check"></i><span>5,000,000+</span> HD photos & graphics</li> |
| <li><i class="fa fa-check"></i><span>6,000+</span> templates</li> |
| <li><i class="fa fa-check"></i><span>Unlimited</span> downloads</li> |
| <li><i class="fa fa-check"></i><span>Buffer / Social media</span> integrations</li> |
| <li><i class="fa fa-check"></i><span>Custom</span> font uploads</li> |
| <li><i class="fa fa-check"></i><span>Remove</span> image backgrounds</li> |
| </ul> |
|
|
| <div class="priceBanner"> |
| <div class="low">As low as</div> |
| <div class="price">$10/month</div> |
| </div> |
|
|
| <div class="upgradeBtnHolder"> |
| <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#proUpgradeModal" class="btn btn-success upgrade-btn">See Plans & Pricing</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade upgradePrompt" id="downloadMaxProModal" tabindex="-1" role="dialog" aria-labelledby="downloadMaxProModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <div class="proTitle">Upgrade for unlimited downloads</div> |
| <div class="clearfix"> |
| <div class="leftSide"> |
| <img class="proModalImage" src="https://d2qp0siotla746.cloudfront.net/img/modals/denial/unlimited-downloads.jpg"> |
| <p class="promptText">Download limit reached for the month. If you'd like to download this graphic, you'll need to upgrade your account.</p> |
| </div> |
| <div class="rightSide"> |
|
|
| <ul class="proList"> |
| <li><i class="fa fa-check"></i><span>5,000,000+</span> HD photos & graphics</li> |
| <li><i class="fa fa-check"></i><span>6,000+</span> templates</li> |
| <li><i class="fa fa-check"></i><span>Unlimited</span> downloads</li> |
| <li><i class="fa fa-check"></i><span>Buffer / Social media</span> integrations</li> |
| <li><i class="fa fa-check"></i><span>Custom</span> font uploads</li> |
| <li><i class="fa fa-check"></i><span>Remove</span> image backgrounds</li> |
| </ul> |
|
|
| <div class="priceBanner"> |
| <div class="low">As low as</div> |
| <div class="price">$10/month</div> |
| </div> |
|
|
| <div class="upgradeBtnHolder"> |
| <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#proUpgradeModal" class="btn btn-success upgrade-btn">See Plans & Pricing</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade upgradePrompt" id="removeBkgrndModal" tabindex="-1" role="dialog" aria-labelledby="removeBkgrndLockModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
| <div class="modal-body"> |
| <div class="proTitle">Upgrade To Remove Image Backgrounds</div> |
| <div class="clearfix"> |
| <div class="leftSide"> |
| <video class="proModalImage" autoplay muted loop> |
| <source src="/public/img/modal-imgs/rmBkgrnd.mp4" type="video/mp4" /> |
| </video> |
| <p class="promptText">Removing image backgrounds is a premium feature. If you’d like to continue, you’ll need to upgrade your account.</p> |
| <p class="promptText">Not convinced? <a href="https://kb.snappa.com/article/115-remove-image-background" target="_blank">Watch a demo.</a></p> |
| </div> |
| <div class="rightSide"> |
| <ul class="proList"> |
| <li><i class="fa fa-check"></i><span>5,000,000+</span> HD photos & graphics</li> |
| <li><i class="fa fa-check"></i><span>6,000+</span> templates</li> |
| <li><i class="fa fa-check"></i><span>Unlimited</span> downloads</li> |
| <li><i class="fa fa-check"></i><span>Buffer / Social media</span> integrations</li> |
| <li><i class="fa fa-check"></i><span>Custom</span> font uploads</li> |
| <li><i class="fa fa-check"></i><span>Remove</span> image backgrounds</li> |
| </ul> |
|
|
| <div class="priceBanner"> |
| <div class="low">As low as</div> |
| <div class="price">$10/month</div> |
| </div> |
|
|
| <div class="upgradeBtnHolder"> |
| <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#proUpgradeModal" class="btn btn-success upgrade-btn">See Plans & Pricing</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade upgradePrompt" id="shareMaxProModal" tabindex="-1" role="dialog" aria-labelledby="shareMaxProModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <div class="proTitle">Upgrade for unlimited shares</div> |
| <div class="clearfix"> |
| <div class="leftSide"> |
| <img class="proModalImage" src="https://d2qp0siotla746.cloudfront.net/img/modals/denial/unlimited-shares.jpg"> |
| <p class="promptText">If you'd like to share images directly to social media, you'll need to upgrade your plan.</p> |
| </div> |
| <div class="rightSide"> |
|
|
| <ul class="proList"> |
| <li><i class="fa fa-check"></i><span>5,000,000+</span> HD photos & graphics</li> |
| <li><i class="fa fa-check"></i><span>6,000+</span> templates</li> |
| <li><i class="fa fa-check"></i><span>Unlimited</span> downloads</li> |
| <li><i class="fa fa-check"></i><span>Buffer / Social media</span> integrations</li> |
| <li><i class="fa fa-check"></i><span>Custom</span> font uploads</li> |
| <li><i class="fa fa-check"></i><span>Remove</span> image backgrounds</li> |
| </ul> |
|
|
| <div class="priceBanner"> |
| <div class="low">As low as</div> |
| <div class="price">$10/month</div> |
| </div> |
|
|
| <div class="upgradeBtnHolder"> |
| <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#proUpgradeModal" class="btn btn-success upgrade-btn">See Plans & Pricing</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><div class="modal fade upgradePrompt" id="socialProModal" tabindex="-1" role="dialog" aria-labelledby="socialProModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <div class="proTitle">Upgrade for connected social accounts</div> |
| <div class="clearfix"> |
| <div class="leftSide"> |
| <img class="proModalImage" src="https://d2qp0siotla746.cloudfront.net/img/modals/denial/unlimited-shares.jpg"> |
| <p class="promptText">If you'd like to connect your social media accounts and share your designs faster, you'll need to upgrade your plan.</p> |
| </div> |
| <div class="rightSide"> |
|
|
| <ul class="proList"> |
| <li><i class="fa fa-check"></i><span>5,000,000+</span> HD photos & graphics</li> |
| <li><i class="fa fa-check"></i><span>6,000+</span> templates</li> |
| <li><i class="fa fa-check"></i><span>Unlimited</span> downloads</li> |
| <li><i class="fa fa-check"></i><span>Buffer / Social media</span> integrations</li> |
| <li><i class="fa fa-check"></i><span>Custom</span> font uploads</li> |
| <li><i class="fa fa-check"></i><span>Remove</span> image backgrounds</li> |
| </ul> |
|
|
| <div class="priceBanner"> |
| <div class="low">As low as</div> |
| <div class="price">$10/month</div> |
| </div> |
|
|
| <div class="upgradeBtnHolder"> |
| <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#proUpgradeModal" class="btn btn-success upgrade-btn">See Plans & Pricing</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <form id="upload-ajax-img" action="https://snappa-user-uploads.s3.amazonaws.com" method="POST" enctype="multipart/form-data" style="display:none;"> |
| |
| <input type="hidden" name="key" value=""> |
| <input type="hidden" name="Content-Type" value=""> |
| <input id="img-upload-select" type="file" name="file" multiple> |
|
|
| |
| <div class="progress-bar-area"></div> |
| </form> |
|
|
| |
| <form id="upload-buffer-img" action="https://snappa-user-downloads.s3.amazonaws.com" method="POST" enctype="multipart/form-data" style="display:none;"> |
| |
| <input type="hidden" name="key" value=""> |
| <input type="hidden" name="Content-Type" value=""> |
| <input id="img-download-select" type="file" name="file"> |
|
|
| |
| <div class="progress-bar-area"></div> |
| </form> |
|
|
|
|
| <script> |
| function htmlEntities(str) { |
| return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); |
| } |
|
|
|
|
| var api = 'https://api.snappa.com/v1'; |
| var actualWidth = 1280; |
| var actualHeight = 720; |
| var imgScale = 1; |
| var imgResize = ''; |
| if (typeof imgResize != 'object' && imgResize != '') { |
| imgResize = JSON.parse(imgResize); |
| } |
| var app_loaded = false; |
| var custom_fonts = [{"fontFamily":"Abril Fatface","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Aileron Heavy","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Aileron Regular","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Aileron Thin","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Alegreya SC","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Aleo","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Aleo Light","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Alfa Slab One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Alike","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Allerta Stencil","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Allura","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Amaranth","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Amatic SC","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Anonymous Pro","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Antic","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Anton","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Architects Daughter","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Archivo Black","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Archivo Narrow","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Arimo","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Arvo","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Bangers","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Berkshire Swash","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Black Ops One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Blogger Sans","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"BodoniXT","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Cabin Sketch","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Cantora One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Cardo","bold":1,"italic":1,"boldItalic":0},{"fontFamily":"Carter One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Chewy","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Chunkfive","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Cinzel","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Clicker Script","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Codystar","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Coming Soon","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Cooper Hewitt","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Cooper Hewitt Heavy","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Cooper Hewitt Thin","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Courgette","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Coustard","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Crafty Girls","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Creepster","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Crushed","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Dekko","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Diplomata SC","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Dosis","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Dr Sugiyama","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Droid Serif","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Economica","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Emilys Candy","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Engagement","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Euphoria Script","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Exo","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Exo Thin","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Faster One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Fauna One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Forum","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Fredoka One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Germania One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Gidole","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Glegoo","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Gochi Hand","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Graduate","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Grand Hotel","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Great Vibes","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Gruppo","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Hammersmith One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"IM Fell English SC","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Indie Flower","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Josefin Sans","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Josefin Slab","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Judson","bold":1,"italic":1,"boldItalic":0},{"fontFamily":"Julius Sans One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Kaushan Script","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Kite One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Knewave","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Lato","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Lato Hairline","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Lato Heavy","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"League Gothic","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"League Spartan","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Libre Baskerville","bold":1,"italic":1,"boldItalic":0},{"fontFamily":"Lilita One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Limelight","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Lobster","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Lobster Two","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Londrina Outline","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Londrina Shadow","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Londrina Sketch","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Londrina Solid","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Lora","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Lustria","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Megrim","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Merriweather","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Merriweather Sans","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Monda","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Monoton","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Montserrat","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Montserrat Extra Bold","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Montserrat Hairline","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Montserrat Light","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Mr Dafoe","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Niconne","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Nixie One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Norwester","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Nunito","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Nunito Black","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Nunito Extra Light","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Old Standard TT","bold":1,"italic":1,"boldItalic":0},{"fontFamily":"Oleo Script","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Open Sans","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Open Sans Extra Bold","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Open Sans Light","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Oregano","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Ostrich Sans","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Ostrich Sans Black","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Ostrich Sans Bold","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Oswald","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Oswald Extra Light","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Oswald Heavy","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Oswald Stencil","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Over The Rainbow","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Pacifico","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Parisienne","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Passion One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Patrick Hand","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Patrick Hand SC","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Patua One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Permanent Marker","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Pinyon Script","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Pirou","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Playfair Display","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Playfair Display Black","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Playfair SC","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Playtime With Hot Toddies","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Poiret One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Prata","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Princess Sofia","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"PT Mono","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"PT Sans","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"PT Serif","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Quando","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Quattrocento Roman","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Quattrocento Sans","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Quicksand","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Quicksand Dash","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Quicksand Light","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Racing Sans One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Rajdhani","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Raleway","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Raleway Dots","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Raleway Extra Bold","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Raleway Thin","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Ribeye","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Roboto","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Roboto Black","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Roboto Slab","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Roboto Thin","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Rosario","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Rubik One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Rye","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Sacramento","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Sanchez","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Satisfy","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Schoolbell","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Shadows Into Light Two","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Signika","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Six Caps","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Sniglet","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Source Sans Pro","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Source Sans Pro Black","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Source Sans Pro Extra Light","bold":0,"italic":1,"boldItalic":0},{"fontFamily":"Source Serif Pro","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Source Serif Pro Black","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Source Serif Pro Extra Light","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Special Elite","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Stint Ultra Expanded","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Sunday","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Tenor Sans","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Text Me One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Trocchi","bold":1,"italic":0,"boldItalic":0},{"fontFamily":"Ubuntu","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"Ultra","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"UnifrakturMaguntia","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Vampiro One","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Vast Shadow","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Vidaloka","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Voga","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Vollkorn","bold":1,"italic":1,"boldItalic":1},{"fontFamily":"VT323","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Waterlily","bold":0,"italic":0,"boldItalic":0},{"fontFamily":"Yellowtail","bold":0,"italic":0,"boldItalic":0}]; |
| var font_families_js = ['Abril Fatface:n4','Aileron Heavy:n4,i4','Aileron Regular:n4,n7,i4,i7','Aileron Thin:n4,i4','Alegreya SC:n4,n7,i4,i7','Aleo:n4,n7,i4,i7','Aleo Light:n4,i4','Alfa Slab One:n4','Alike:n4','Allerta Stencil:n4','Allura:n4','Amaranth:n4,n7,i4,i7','Amatic SC:n4,n7','Anonymous Pro:n4,n7,i4,i7','Antic:n4','Anton:n4','Architects Daughter:n4','Archivo Black:n4','Archivo Narrow:n4,n7,i4,i7','Arimo:n4,n7,i4,i7','Arvo:n4,n7,i4,i7','Bangers:n4','Berkshire Swash:n4','Black Ops One:n4','Blogger Sans:n4,n7,i4,i7','BodoniXT:n4','Cabin Sketch:n4,n7','Cantora One:n4','Cardo:n4,n7,i4','Carter One:n4','Chewy:n4','Chunkfive:n4','Cinzel:n4,n7','Clicker Script:n4','Codystar:n4','Coming Soon:n4','Cooper Hewitt:n4,n7,i4,i7','Cooper Hewitt Heavy:n4,i4','Cooper Hewitt Thin:n4,i4','Courgette:n4','Coustard:n4,n7','Crafty Girls:n4','Creepster:n4','Crushed:n4','Dekko:n4','Diplomata SC:n4','Dosis:n4,n7','Droid Serif:n4,n7,i4,i7','Dr Sugiyama:n4','Economica:n4,n7,i4,i7','Emilys Candy:n4','Engagement:n4','Euphoria Script:n4','Exo:n4,n7,i4,i7','Exo Thin:n4,i4','Faster One:n4','Fauna One:n4','Forum:n4','Fredoka One:n4','Germania One:n4','Gidole:n4','Glegoo:n4,n7','Gochi Hand:n4','Graduate:n4','Grand Hotel:n4','Great Vibes:n4','Gruppo:n4','Hammersmith One:n4','IM Fell English SC:n4','Indie Flower:n4','Josefin Sans:n4,n7,i4,i7','Josefin Slab:n4,n7,i4,i7','Judson:n4,n7,i4','Julius Sans One:n4','Kaushan Script:n4','Kite One:n4','Knewave:n4','Lato:n4,n7,i4,i7','Lato Hairline:n4,i4','Lato Heavy:n4,i4','League Gothic:n4,i4','League Spartan:n4','Libre Baskerville:n4,n7,i4','Lilita One:n4','Limelight:n4','Lobster:n4','Lobster Two:n4,n7,i4,i7','Londrina Outline:n4','Londrina Shadow:n4','Londrina Sketch:n4','Londrina Solid:n4','Lora:n4,n7,i4,i7','Lustria:n4','Megrim:n4','Merriweather:n4,n7,i4,i7','Merriweather Sans:n4,n7,i4,i7','Monda:n4,n7','Monoton:n4','Montserrat:n4,n7','Montserrat Extra Bold:n4','Montserrat Hairline:n4','Montserrat Light:n4','Mr Dafoe:n4','Niconne:n4','Nixie One:n4','Norwester:n4','Nunito:n4,n7','Nunito Black:n4','Nunito Extra Light:n4','Old Standard TT:n4,n7,i4','Oleo Script:n4,n7','Open Sans:n4,n7,i4,i7','Open Sans Extra Bold:n4,i4','Open Sans Light:n4,i4','Oregano:n4,i4','Ostrich Sans:n4','Ostrich Sans Black:n4','Ostrich Sans Bold:n4','Oswald:n4,n7,i4,i7','Oswald Extra Light:n4,i4','Oswald Heavy:n4,i4','Oswald Stencil:n4','Over The Rainbow:n4','Pacifico:n4','Parisienne:n4','Passion One:n4','Patrick Hand:n4','Patrick Hand SC:n4','Patua One:n4','Permanent Marker:n4','Pinyon Script:n4','Pirou:n4','Playfair Display:n4,n7,i4,i7','Playfair Display Black:n4,i4','Playfair SC:n4,n7,i4,i7','Playtime With Hot Toddies:n4,i4','Poiret One:n4','Prata:n4','Princess Sofia:n4','PT Mono:n4','PT Sans:n4,n7,i4,i7','PT Serif:n4,n7,i4,i7','Quando:n4','Quattrocento Roman:n4','Quattrocento Sans:n4,n7,i4,i7','Quicksand:n4,n7,i4,i7','Quicksand Dash:n4','Quicksand Light:n4,i4','Racing Sans One:n4','Rajdhani:n4,n7','Raleway:n4,n7,i4,i7','Raleway Dots:n4','Raleway Extra Bold:n4,i4','Raleway Thin:n4,i4','Ribeye:n4','Roboto:n4,n7,i4,i7','Roboto Black:n4,i4','Roboto Slab:n4,n7','Roboto Thin:n4,i4','Rosario:n4,n7,i4,i7','Rubik One:n4','Rye:n4','Sacramento:n4','Sanchez:n4,i4','Satisfy:n4','Schoolbell:n4','Shadows Into Light Two:n4','Signika:n4,n7','Six Caps:n4','Sniglet:n4','Source Sans Pro:n4,n7,i4,i7','Source Sans Pro Black:n4,i4','Source Sans Pro Extra Light:n4,i4','Source Serif Pro:n4,n7','Source Serif Pro Black:n4','Source Serif Pro Extra Light:n4','Special Elite:n4','Stint Ultra Expanded:n4','Sunday:n4','Tenor Sans:n4','Text Me One:n4','Trocchi:n4,n7','Ubuntu:n4,n7,i4,i7','Ultra:n4','UnifrakturMaguntia:n4','Vampiro One:n4','Vast Shadow:n4','Vidaloka:n4','Voga:n4','Vollkorn:n4,n7,i4,i7','VT323:n4','Waterlily:n4','Yellowtail:n4']; |
| var graphicID = 'f5e91a4a-e897-4b34-b522-219325483732'; |
| var graphicTitle = htmlEntities('Untitled Design'); |
| var graphicTypeName = 'YouTube Thumbnail'; |
| var graphicTypeSlug = 'yt-thumbnail'; |
| var graphicVersion = ''; |
| var savedColors = []; |
| var teamUser = false; |
| var unsupportedBrowser = false; |
| var unsupportedBrowserName; |
| var userID = 1530174; |
| var wasSaved = parseInt(1); |
| var cfPhotos = 'https://d2lm6fxwu08ot6.cloudfront.net/'; |
| var cfFonts = 'https://d2zizw0e7d1l0e.cloudfront.net/'; |
| var cfUploads = 'https://d19b7twp0l3x30.cloudfront.net/'; |
| var cfAssets = 'https://d2qp0siotla746.cloudfront.net/'; |
|
|
| var websafeFonts = [ |
| 'Arial Black', |
| 'Arial', |
| 'Comic Sans MS', |
| 'Courier New', |
| 'Courier', |
| 'Geneva', |
| 'Georgia', |
| 'Helvetica', |
| 'Impact', |
| 'Lucida Grande', |
| 'Monaco', |
| 'Palatino', |
| 'Tahoma', |
| 'Times New Roman', |
| 'Times', |
| 'Trebuchet MS', |
| 'Verdana' |
| ]; |
|
|
| if(wasSaved === 1){ |
| var imgData = {"graphicID":"f5e91a4a-e897-4b34-b522-219325483732","graphicTypeName":"YouTube Thumbnail","graphicTypeSlug":"yt-thumbnail","version":2,"width":1280,"height":720,"bgColor":"#ffffff","bgImgId":"1530174-1621402549294","bgImgType":"jpg","bgImgProvider":"https://d19b7twp0l3x30.cloudfront.net/1530174-1621402549294.jpg","bgImgSrc":"https://d19b7twp0l3x30.cloudfront.net/1530174-1621402549294.jpg","bgBlurValue":0,"bgSaturationValue":0,"bgHueValue":0,"bgBrightnessValue":0,"bgContrastValue":0,"bgDarkenValue":0,"bgOverlayColor":"#146da8","bgOverlayOpacity":0,"bgZoom":1,"bgLeftPos":"-128.0000","bgTopPos":"0.0000","bgWidth":"1535.0000","bgHeight":"720.0000","objects":[{"type":"img","top":"65.0000","left":"-32.0000","width":"545.0000","height":"660.0000","angle":"0.0000","rotatePos":"1","opacity":"1","imgSource":"undefined","photoAlt":"false","img":"https://d19b7twp0l3x30.cloudfront.net/1530174-1621402762813.png"},{"type":"img","top":"-35.0000","left":"869.0000","width":"441.0000","height":"451.0000","angle":"0.0000","rotatePos":"1","opacity":"1","imgSource":"undefined","photoAlt":"false","img":"https://d19b7twp0l3x30.cloudfront.net/1530174-1621402901982.png"},{"type":"img","top":"27.0000","left":"863.0000","width":"533.0000","height":"543.0000","angle":"0.0000","rotatePos":"1","opacity":"1","imgSource":"undefined","photoAlt":"false","img":"https://d19b7twp0l3x30.cloudfront.net/1530174-1621402901982.png"},{"type":"text","top":"118.0000","left":"294.0000","width":"675.0000","height":"175.0000","angle":"0.0000","rotatePos":"0","opacity":"1","textShadow":"rgb(69, 69, 69) 0px 0px 0px","fontStyle":"normal","letterSpacing":"0","textAlign":"center","color":"rgb(246, 187, 66)","lineHeight":"168px","fontSize":"105px","fontWeight":"400","fontFamily":"Waterlily","textDecoration":"","content":"<p style=\"margin:0;\"> CUSTOM</p>"},{"type":"text","top":"314.0000","left":"303.0000","width":"675.0000","height":"209.0000","angle":"0.0000","rotatePos":"0","opacity":"1","textShadow":"rgb(69, 69, 69) 0px 0px 0px","fontStyle":"normal","letterSpacing":"5px","textAlign":"center","color":"rgb(246, 187, 66)","lineHeight":"202.3px","fontSize":"119px","fontWeight":"400","fontFamily":"Waterlily","textDecoration":"","content":"<p style=\"margin:0;\"> GIVEWAY</p>"}],"requiredFonts":[{"fontFamily":"Waterlily","fontWeight":"400","fontStyle":"normal"},{"fontFamily":"Waterlily","fontWeight":"400","fontStyle":"normal"}]}; |
| if (typeof imgData != 'object') { |
| imgData = JSON.parse(imgData); |
| } |
| } |
|
|
| </script> |
|
|
| <div class="saving-overlay-wrap" style="display:none;"></div> |
| </div> |
|
|
| <div id="appLoading" style="display:none;"> |
| <div class="bgOverlay"></div> |
| <div class="status"> |
| <span class="loader loader-quart"> </span> <span class="load-text">Loading</span> |
| </div> |
| </div> |
|
|
| <div class="modal fade" id="loaderModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="loaderModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| |
| <div class="ajaxLoad" style="display: inline-block"> |
| <div class="status"> |
| <span class="loader loader-quart"> </span> |
| <span class="load-text">Generating Your Image</span> |
| </div> |
| </div> |
| |
| <div class="content"> |
| <div class="imgReady" style="display: none"> |
| |
| <img src="https://d2qp0siotla746.cloudfront.net/img/modals/duplicate-graphic.jpg"> |
| <p>Your image has been duplicated!</p> |
| <div class="confirm-buttons"> |
| <button class="btn btn-default" data-dismiss="modal" aria-label="Close"> Cancel</button> |
| <a href="#" target="_blank"> |
| <button class="btn btn-success"> View image</button> |
| </a> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| </div> <div class="modal fade upgradePrompt" id="downgradedProModal" tabindex="-1" role="dialog" aria-labelledby="downgradedProModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body "> |
| <div class="proTitle">Whoops!</div> |
| <div class="downgradeImg"> |
| <img class="proModalImage" src="/public/img/modal-imgs/downgrade.png"> |
| </div> |
| <div class="clearfix"> |
| <p>Unfortunately we were unable to process your latest payment after 3 failed attempts. As a result, your account has been downgraded. Please upgrade your account to regain full access.</p> |
| </div> |
| <div class="btnHolder"> |
| <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#proUpgradeModal" class="btn btn-success upgrade-btn">Upgrade</button> |
| <button data-dismiss="modal" aria-label="Close" class="btn btn-danger">Close</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> <div class="modal fade" id="proUpgradeModal" tabindex="-1" role="dialog" aria-labelledby="proUpgradeModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <div class="ajaxLoad"> |
| <div class="status"> |
| <span class="loader loader-quart"> </span> <span class="load-text">Loading</span> |
| </div> |
| </div> |
| <div class="ajaxFail" style="display:none;"> |
| <p>Something didn't quite work. Please reload the page and try again.</p> |
| <button type="button" class="btn btn-success" data-dismiss="modal" aria-label="Close">Okay</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> <div class="modal fade prompt" id="supportModal" tabindex="-1" role="dialog" aria-labelledby="supportModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <div class="modal-body"> |
| <h3>Support & feedback</h3> |
| <div class="alert alert-danger"></div> |
| <p class="notice">Need help with anything? Do you have a suggestion to make Snappa better? Drop us a line and we'll get right back to you.</p> |
| <form action="" id="support-feedback" method="post" accept-charset="utf-8"> |
| <input name="name" type="text" class="form-control name-input" placeholder="Your name" autocomplete="off"> |
| <textarea class="support-text form-control" name="supporttext" placeholder="Your message"></textarea> |
| <div class="btnHolder"> |
| <button class="btn btn-default" type="button" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> Cancel</button> |
| <button class="btn btn-success support-btn" type="submit" data-loading-text="Submit">Submit</button> |
| </div> |
| </form> |
| <div class="preload preload-share"> |
| <span class="loader loader-quart"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <img class="profile" src="https://d2qp0siotla746.cloudfront.net/img/headshots/jonny-welcome.jpg"> |
| <p class="hi">Hi I’m Jonny, the social media manager at Snappa. To help you get started, I’ve put together this quick tutorial on how to repurpose a template in less than a minute.</p> |
| <div class="iframe-holder"> |
| <img> |
| <div id="play-tutorial-video" class="play-btn"> |
| <span class="fa-stack fa-lg"> |
| <i class="fa fa-circle fa-stack-2x"></i> |
| <i class="fa fa-play fa-stack-1x fa-inverse"></i> |
| </span> |
| </div> |
| <div style="display: none"> |
| <div id="plyr" data-plyr-provider="vimeo" data-plyr-embed-id="146657573"> |
| </div> |
| </div> |
| </div> |
| <div class="btn-holder"> |
| <button type="button" id='welcomeClose' class="btn btn-success" data-dismiss="modal" aria-label="Close">Ok, I'm ready to get started »</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> <div class="modal fade" id="sessionExpModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <h4>Your session has timed out</h4> |
| <p class="sessionWarning">Please enter your password to continue.</p> |
| <div class="alert-danger alert msg" style="display:none;"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div> |
| <form action="" id="loginForm" method="post" accept-charset="utf-8"> |
| <div class="form-group has-feedback has-feedback-left"> |
| <input name="email" type="text" class="form-control" placeholder="Email"> |
| <i class="icon-envelope form-control-feedback"></i> |
| </div> |
| <div class="form-group has-feedback has-feedback-left"> |
| <input name="password" type="password" class="form-control" placeholder="Password"> |
| <i class="icon-key form-control-feedback"></i> |
| </div> |
| <div class="form-group action clearfix"> |
| <a href="/" class="btn btn-default" role="button">Cancel</a> |
| <button id="loginBtn" class="pull-right btn btn-success loginBtn" type="submit" data-loading-text="<i class='fa fa-spinner fa-pulse'></i>">Log in</button> |
| </div> |
| <input name="pageLoad" type="hidden" value=""> |
| <input name="loadFunction" type="hidden" value=""> |
| </form> |
| <p class="kbExplanation"><a href="https://kb.snappa.com/article/64-why-did-my-session-time-out" target="_blank">Why am I seeing this?</a></p> |
| </div> |
| </div> |
| </div> |
| </div> <div class="modal fade" id="ajaxFailModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-body"> |
| <h4>Oops!</h4> |
| <p>We can't seem to reach the server to continue with your request. Please try again.</p> |
| <div class="btnHolder"> |
| <button type="button" class="btn btn-success" data-dismiss="modal" aria-label="Close">Okay</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script src="/public/js/main.min.js?v=Q423FP2"></script> |
| <script src="/public/js/bootstrap-select.min.js?v=Q423FP2"></script> |
| <script src="/public/js/app-dependencies.min.js?v=Q423FP2"></script> |
| <script src="/public/js/editor-core.min.js?v=Q423FP2"></script> |
|
|
| |
| <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NZQPRHS" |
| height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> |
| |
|
|
| <script> |
| // -- Facebook Snappa app -- |
| window.fbAsyncInit = function () { |
| FB.init({ |
| appId: '1015219541843702', |
| cookie: true, |
| xfbml: true, |
| version: 'v3.1' |
| }); |
| }; |
| |
| (function (d, s, id) { |
| var js, fjs = d.getElementsByTagName(s)[0]; |
| if (d.getElementById(id)) { |
| return; |
| } |
| js = d.createElement(s); |
| js.id = id; |
| js.src = "//connect.facebook.net/en_US/sdk.js"; |
| fjs.parentNode.insertBefore(js, fjs); |
| }(document, 'script', 'facebook-jssdk')); |
| |
| // -- Mixpanel Identify -- |
| mixpanel.identify('raj620197@gmail.com'); |
| |
| // -- Helpscout Beacon -- |
| var beaconLoaded = false |
| !function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){}); |
| Beacon('init', '6a0c4590-37a9-4124-87a9-f900557d5fb2') |
| Beacon('config', { |
| "chatEnabled": true, |
| "color": "#34b2f5", |
| "docsEnabled": true, |
| "enableFabAnimation": false, |
| "hideFABOnMobile": true, |
| "iconImage": 'question', |
| "mode": "neutral", |
| "zIndex": 1040, |
| "contactForm": { |
| "allowAttachments": true |
| } |
| }) |
| |
| Beacon('on', 'ready', () => { |
| beaconLoaded = true |
| var group = 'Starter'; |
| if (_meta('snappaProUser') == 'true'){ |
| group = 'Pro'; |
| if (_meta('snappaTeamUser') == 'true'){ |
| group = 'Team'; |
| } |
| } |
| |
| // No user names set? |
| var userName = _meta('snappaUserName'); |
| if (userName == "null null"){ |
| userName = _meta('snappaUserEmail'); |
| } |
| |
| var browser = getBrowser(); |
| |
| Beacon('identify', { |
| 'Plan': group, |
| 'Browser': browser.name + ' ' + browser.version |
| |
| }); |
| |
| Beacon('prefill', { |
| subject: "Contact from Snappa", |
| name: userName, |
| email: _meta('snappaUserEmail') |
| |
| }) |
| |
| |
| $(document).on('click', function(){ |
| Beacon('close') |
| |
| }); |
| |
| }); |
| |
| // -- LeadDyno -- |
| $.getJS('https://static.leaddyno.com/js', 'leadDyno', function () { |
| if (typeof LeadDyno != 'undefined') { |
| LeadDyno.key = "51839d4f13aabe33f91e55df09a51ad728b5f04b" |
| LeadDyno.recordVisit() |
| LeadDyno.recordLead('raj620197@gmail.com') |
| } |
| |
| }) |
| |
| </script> |
|
|
|
|
| <script> |
| $(document).on('click', 'a', function(e) { |
| if (requestLoading == true) { |
| e.preventDefault(); |
| } |
| }); |
|
|
| function sendSupportRequest() { |
| $('#supportModal .support-btn').button('loading'); |
| $('#supportModal .notice').hide(); |
| $('#supportModal .alert').hide(); |
| $('#supportModal #support-feedback').hide(); |
| $('#supportModal .preload').show(); |
|
|
| $('#support-feedback').find('input[name="_csrf"]').remove(); |
| $('#support-feedback').append('<input type="hidden" name="_csrf" value="' + _meta('ctoken') + '">'); |
|
|
| var request = $.ajax({ |
| type: 'POST', |
| url: '/api/support/submitMessage', |
| data: $('form#support-feedback').serialize(), |
| dataType: 'json' |
| }); |
|
|
| request.fail(function(jqXHR, textStatus) { |
| $('#supportModal .preload').hide(); |
| $('#supportModal .notice').show(); |
| $('#supportModal #support-feedback').show(); |
| $('#supportModal .alert').html('An error occurred. Please try again.').show(); |
| $('#supportModal .support-btn').button('reset'); |
| }); |
|
|
| request.done(function(data) { |
| if (!_auth(data)) { |
| _showLoginForm(false, ['sendSupportRequest']); |
| return false; |
| } |
|
|
| if (!data.success) { |
| $('#supportModal .preload').hide(); |
| $('#supportModal .notice').show(); |
| $('#supportModal #support-feedback').show(); |
| $('#supportModal .alert').html(data.msg).show(); |
| $('#supportModal .support-btn').button('reset'); |
| return false; |
| } |
|
|
| $('#supportModal .notice').html(data.msg).show(); |
| $('#supportModal .notice').addClass('successNotice'); |
| $('#supportModal .preload').hide(); |
|
|
| }); |
|
|
| } |
|
|
| function loadProModal() { |
| var getReq = $.getJSON('/api/upgrade/proModal'); |
|
|
| getReq.fail(function(data) { |
| $('#proUpgradeModal .ajaxFail p').text('An error occurred. Please reload the page and try again.'); |
| $('#proUpgradeModal .ajaxFail').show(); |
| }); |
|
|
| getReq.done(function(data) { |
| if (!_auth(data)) { |
| _showLoginForm(false, ['loadProModal']); |
| return false; |
| } |
|
|
| $('#proUpgradeModal .ajaxLoad').hide(); |
| if (!data.success) { |
| $('#proUpgradeModal .ajaxFail p').text(data.msg); |
| $('#proUpgradeModal .ajaxFail').show(); |
| return false; |
| } |
|
|
| $('#proUpgradeModal .modal-body').html(data.html); |
|
|
| if (typeof proModalScript == 'undefined' || typeof updatePricingTierPrices != 'function'){ |
| $.getJS('/public/js/pages/pro-modal.js', '_snappaProModal', function() { |
| updatePricingTierPrices('yearly'); |
| $('body').addClass('modal-open'); |
| }); |
| } else { |
| updatePricingTierPrices('yearly'); |
| $('body').addClass('modal-open'); |
|
|
| } |
|
|
| pricing = data.pricing; |
|
|
| if (_meta('snappaVersion') != 'development') { |
| mixpanel.track('View Pro Page'); |
| } |
|
|
| }); |
| } |
|
|
| $('#supportModal').on('hidden.bs.modal', function(e) { |
| $('#supportModal .preload').hide(); |
| $('#supportModal .notice').html('Need help with anything? Do you have a suggestion to make Snappa better? Drop us a line and we\'ll get right back to you.').show(); |
| $('#supportModal .notice').removeClass('successNotice'); |
| $('#supportModal #support-feedback').show(); |
| $('#supportModal .alert').html('').hide(); |
| $('#supportModal .support-btn').button('reset'); |
| $('#supportModal input[name="name"]').val(''); |
| $('#supportModal textarea[name="supporttext"]').val(''); |
| }) |
|
|
| $('#support-feedback').validate({ |
| rules: { |
| name: { |
| required: false |
| }, |
| supporttext:{ |
| required:true |
| } |
| }, |
| messages: { |
| name: { |
| required: 'Please enter your name.' |
| }, |
| supporttext: { |
| required: 'Please enter a message.' |
| } |
| }, |
| focusInvalid: false, |
| errorPlacement: function(error,element) { |
| return false; |
| }, |
| highlight: function(label) { |
| return false; |
| }, |
| invalidHandler: function(form) { |
| $('#supportModal .support-btn').button('reset'); |
| }, |
| submitHandler: function(form) { |
| sendSupportRequest(); |
| } |
| }); |
|
|
| // Main Navbar Upgrade button |
| $('#navbar-upg-pro, #upgradeToTeam').on('click',function(e){ |
| e.preventDefault(); |
| $('#proUpgradeModal').modal('show'); |
| }); |
|
|
| // Pro modal |
| $('#proUpgradeModal').on('show.bs.modal', function (e) { |
| $('.modal').not('#proUpgradeModal').modal('hide'); |
| modalOpen = true; |
| proModalOpen = true; |
| loadProModal(); |
| }); |
|
|
| $('#proUpgradeModal').on('hidden.bs.modal', function (e) { |
| proModalOpen = false; |
| $('#proUpgradeModal #paymentPage').remove(); |
| $('#proUpgradeModal #pricingTiers').remove(); |
| $('#proUpgradeModal .ajaxFail').hide(); |
| $('#proUpgradeModal .ajaxLoad').show(); |
| $('#_snappaProModal').remove(); |
| }); |
|
|
| $(document).on('ready',function(e){ |
| $.ajax({ |
| url: "/api/mixpanel/update", |
| type: "POST", |
| data: { |
| _csrf: _meta('ctoken') |
| } |
| }); |
| }); |
| </script> |
|
|
| </body> |
কোন মন্তব্য নেই