API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 4th, 2018
353
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 82.47 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6. <meta charset="utf-8">
  7. <!--[if lt IE 9]>
  8. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  9. <meta name="Robots" content=
  10. 'index follow' />
  11. <title>Wireframe.cc - minimal wireframing tool</title><meta name="description" content="A simple wireframing tool that doesn't get in your way. Create and share simple wireframes of websites and mobile apps."/>
  12. <!-- <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> -->
  13.  
  14.  
  15.  
  16. <!-- <link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin-ext,vietnamese" rel="stylesheet"> -->
  17.  
  18.  
  19. <meta property="og:title" content="Wireframe.cc - minimal wireframing tool"/>
  20. <meta property="og:image" content="https://wireframecc-9947.kxcdn.com/images/screen-shot-landing.png"/>
  21. <meta property="og:site_name" content="Wireframe.cc"/>
  22. <meta property="og:description" content="A simple wireframing tool that doesn't get in your way. Create and share simple wireframes of websites and mobile apps."/>
  23. <style>
  24. article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:100%;-webkit-font-smoothing:antialiased}.panel p{line-height:1.5rem;margin-top:1.5rem;margin-bottom:0}ul,ol{margin-top:1.5rem;margin-bottom:1.5rem}ul li,ol li{line-height:1.5rem}ul ul,ul ol,ol ul,ol ol{margin-top:0;margin-bottom:0}blockquote{line-height:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem}h1,h2,h3,h4,h5,h6{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}h1{font-size:4.242rem;line-height:4.5rem;margin-top:3rem}h2{font-size:2.828rem;line-height:3rem;margin-top:3rem}h3,h4{font-size:1.414rem}h5{font-size:.47133rem}h6{font-size:.3535rem}html{padding:0}html,body{min-height:100%!important;height:100%}body{background:#eee;padding:0;margin:0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;background:#eee;height:100%;width:100%;overflow:hidden}a{outline:0;text-decoration:none;color:inherit}:-moz-any-link:focus{outline:0}body.show-about{overflow:hidden}.brandnew{cursor:crosshair}.container{display:block;width:100%;height:100%;height:calc(100% - 45px);position:absolute;top:45px;left:0;overflow:auto;z-index:2;-webkit-transition:transform .2s ease;-o-transition:transform .2s ease;transition:transform .2s ease}.left{float:left}.right{float:right}.panel b{font-weight:400}h3{color:#111;text-align:center;clear:both;margin-top:3rem}h3 i{padding-right:8px;border-right:1px solid rgba(255,255,255,0.22);margin-right:8px}h2{color:#111;text-align:center;text-transform:capitalize}h4{text-align:center;color:#aaa}.panel{position:absolute;width:50%;min-width:920px;min-height:100%;right:0;top:0;opacity:0;pointer-events:none;background:#FFF;color:#333;z-index:3;padding:0 90px;box-sizing:border-box;-webkit-transform:translate(100%,0);transform:translate(100%,0);-webkit-transition:transform .2s ease-in-out,.6s opacity;-moz-transition:transform .2s ease-in-out,.6s opacity;-o-transition:transform .2s ease-in-out,.6s opacity;transition:transform .2s ease-in-out,.6s opacity;box-shadow:-8px 0 8px rgba(17,17,17,0.1)}.show-about .panel{opacity:1;pointer-events:all;-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:transform .2s ease-in-out,.2s opacity;-moz-transition:transform .2s ease-in-out,.2s opacity;-o-transition:transform .2s ease-in-out,.2s opacity;transition:transform .2s ease-in-out,.2s opacity}.innerpanelwrap{position:relative}.panel-inner{clear:both;padding-bottom:10px;width:70%;margin:4.5rem auto 0;text-align:center;border-top:3px solid #eee}.panel #h2h4.left{width:40%}.panel h1{font-size:2.828rem;line-height:3rem;margin-top:3rem;text-align:left;margin-top:5.656rem;box-sizing:border-box;letter-spacing:-.5px;text-transform:capitalize}#h2h4:before{content:"About";font-weight: bold;position:absolute;top:0;font-size:16px;border-top:2px solid #aaa;padding-top:2px;line-height:1.5rem;color:#AAA}.panel h4{width:60%;text-align:left;font-size:1rem}.innerpanelwrap{margin:100px auto 0;width:100%}.feux-canvas{width:59%;height:300px;position:relative;border:solid #ccc;border-width:3px 3px 0;border-radius:8px 8px 0 0;display:inline-block}.feux-browser-bar{width:100%;height:32px;position:absolute;top:-36px;left:-3px;border:solid #ccc;border-width:3px 3px 0;border-radius:6px 6px 0 0}.feux-canvas .f-c{border:solid #ccc 3px;display:inline-block;margin-right:5px;width:8px;height:8px;top:4px;position:relative;border-radius:50px}.feux-canvas .f-c:first-of-type{margin-left:11px}.feux-canvas .f-i{border:solid #ccc 3px;display:inline-block;left:4px;height:12px;top:6px;position:relative;border-radius:3px;width:60%;width:calc(100% - 130px);width:-webkit-calc(100% - 130px)}.panel svg{overflow:hidden;width:100%;clear:both}#feux-svg-grid{position:relative;top:9px;border-top:3px solid #ccc}#feux-play2{position:absolute;top:47%;left:50%;padding-right: 20px;height:44px;z-index:3;border-radius:50px;box-shadow:#ff6347 0 0 0 0;transform:translate(-50%,0) scale(1);-webkit-transform:translate(-50%,0) scale(1);background:#ff6347;transition:box-shadow .12s,background .12s;-webkit-transition:box-shadow .12s,background .12s}#feux-play2:hover{cursor:pointer;background:#FF5233;box-shadow:#FF5233 0 0 0 2px}#feux-play2 svg{display:inline-block;fill:#fff;width:28px;height:28px;margin:8px;float:left;opacity:.5}#feux-play2 span.watch-text{color:#fff;font-weight:700;margin-top:0;display:inline-block;text-transform:capitalize;line-height:44px;margin-left:8px}.panel-inner article > p{text-align:left}@media screen and (max-width:1024px){.orstart{display:none}#top{min-width:690px}.copypaste{display:none}}@media screen and (max-width:1250px){#top{min-width:690px}.orstart{display:none}.copypaste{display:none}}@media screen and (max-width:768px){.panel-inner{-moz-column-count:1;column-count:1;-webkit-column-count:1}}#email,#contactname,#message{width:100%;outline:0;border:0;border-image:initial;padding:6px}.panel-inner article{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;column-break-inside:avoid}.options{display:none}#grid-div{position:absolute;top:0;top:.5px;left:0;left:.5px}#grid-dot{display:none}#logo{width:180px}.topicon{width:35px}.draw{background-color:rgba(0,0,0,0.486275)}.demowrap{position:absolute;width:260px;top:100px;height:160px;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%)}.demo{top:0;width:100%;height:100%;display:block;position:relative}.cursor,#cursor{height:20px;width:12px;z-index:4;background:transparent;display:none;background-size:100% 100%;-o-background-size:100% 100%;-webkit-background-size:100% 100%}#cursor{-webkit-filter:drop-shadow(-1px 2px 2px rgba(0,0,0,0.3));filter:drop-shadow(-1px 2px 2px rgba(0,0,0,0.3));color:#000;position:absolute;left:130px;top:60px;z-index:8;color:#000;-webkit-filter:drop-shadow(-1px 5px 2px rgba(0,0,0,0.3))!important}#cursor.drag{-webkit-filter:drop-shadow(-1px 2px 2px rgba(0,0,0,0.3))!important;filter:drop-shadow(-1px 2px 2px rgba(0,0,0,0.3))!important}.no-cursor{cursor:none}#d1{position:relative}#boxinner.bg-grey{background:#EEE}.bottomcorner{position:absolute;bottom: 0;right: 0;}.topcorner{position:absolute;top:0;left:0}.feux-wirepanel{position:absolute;top:0;width:0;display:none;width:260px;height:20px;background:#444;padding:9px;margin:-6px 0 0 -9px;border-radius:3px;z-index:3!important;color:#FFF;cursor:none}.feux-wirepanel .icon{cursor:none}.feux-wirepanel .edit-icons{display:none;width:270px}.feux-wirepanel .show-border,.feux-wirepanel .colorpickers{display:inline-block}.feux-wirepanel .show-border{margin-left:10px}.feux-wirepanel .cpicker{float:right;width:20px;height:20px}.closeabout{position:fixed;top:15px;right:15px;color:#BBB;float:right;font-size:36px;cursor:pointer;z-index:4;opacity:0;pointer-events:none;display:block;transform:translate(50vw,0);-webkit-transform:translate(50vw,0);transition:transform .22s ,opacity .2s;-webkit-transition:transform .22s ,opacity .2s}.show-about .closeabout{opacity:1;pointer-events:all;transform:translate(0,0);-webkit-transform:translate(0,0)}#about-overlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;pointer-events:none;-moz-transition:.2s opacity;-webkit-transition:.2s opacity;transition:.2s opacity;opacity:0;display:inline-block;float:left;box-shadow:0 0 0 7000px rgba(34,34,34,0.3)}.show-about #about-overlay{opacity:1;pointer-events:all;background:#b1b1b1}#about-wrap{position:fixed;overflow-x:auto;top:0;left:0;pointer-events:none;z-index:101;overflow:hidden;width:100%;height:100%}.show-about #about-wrap{pointer-events:all}.show-about .container{overflow:hidden}.panel article{margin-top:60px}.panel article img,.panel article svg{width:150px;position:relative;margin:2rem auto 0}#pricing{margin-top:3rem;width:740px;left:50%;height:23rem;position:relative;transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0)}.price-col{width:33.33%;float:left;border:1px solid #ccc;box-sizing:border-box;padding:1.5rem 8px;height:22.5rem}.panel h5{font-size:1.5rem}.demo #d2{width:0;height:0;position:absolute;top:315px;z-index:3;left:220px;display:none}.demo #d3{width:0;height:0;position:absolute;top:385px;z-index:4;left:120px;display:none}.demotext{width:400px;height:15px!important;background:#eee;border:none}.demotext:before{content:'';top:25px;left:50px;width:300px;height:15px;background:#eee;position:absolute}.demotext:after{position:absolute;content:'';top:50px;left:30px;width:340px;height:15px;background:#eee}#d4{width:0;height:0;z-index:5;right:-11px;bottom:230px;position:absolute;border-style:dashed;display:none}.demo .selectd{outline:1px dashed #eee;outline-offset:4px}.demo-box{border:1px solid #111;background:#FFF}#compare{margin:4.5rem auto 0;position:relative;height:500px;width:570px}.sign-up-card{width:380px;border:2px solid #ff6347;margin:4.5rem auto 1.5rem;border-radius:12px;position:relative}.sign-up-card:before{content:"Premium Version";position:absolute;top:-13px;left:125px;right:125px;background:#fff;color:#ff6347;padding:5px;border-radius:4px;font-size:.75rem;text-transform:uppercase}.sign-up-card h3{width:84%;margin:3rem auto 1.5rem;color:#ff6347;border-bottom:1px solid #ff6347;padding-bottom:1.5rem}.sign-up-form label{width:80%;margin:0 auto;display:block;text-align:left;padding:.75rem}.sign-up-form input[type="text"],.sign-up-form input[type="password"]{width:80%;margin:0 auto;padding:6px;border:1px solid #bbb}:focus{outline:none}.sign-up-form input[type="text"]:focus,.sign-up-form input[type="password"]:focus{box-shadow:0 0 0 1px #bbb}.sign-up-form input[type="submit"]{display:block;margin:0 auto;padding:12px 18px;margin:1.5rem auto;background:#ff6347;border:none;outline:none;color:#FFF;font-weight:700;border-radius:6px}.sign-up-form input[type="submit"]:hover{background:#FF5233;box-shadow:#FF5233 0 0 0 1px}.panel article img.press-logos{width:100%;opacity:.7;width:740px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%}h4.featured-by{text-transform:uppercase;text-align:center;width:100%;margin-top:3rem}.qacol{width:47%;margin:0 1.5%;float:left;text-align:left}.qa{padding-bottom:110px;color:#555;width:100%;font-size:.9em}.qawrap{width:100%}.q{font-weight:bolder}nav.breadcrumb{font-size:12px;color:#ccc;clear:both;text-align:center;padding:3rem 0 1.5rem;color:#888}nav.breadcrumb a{margin:0 5px;text-decoration:none;color:#888}nav.breadcrumb a:first-child{margin-left:0}nav.breadcrumb a:hover,nav.breadcrumb a:focus{color:#333}nav.breadcrumb a:active{color:#666}nav.breadcrumb strong{margin-left:5px;font-weight:700;color:#333}#qa{display:none;color:#333;margin-top:1.5rem}#qa-wrap input[type="Checkbox"]{display:none}#qa-wrap{color:#888}#qa-wrap label{padding:4px;cursor:pointer;user-select:none;border-bottom:2px solid #bbb;font-size:.75rem}input[type="Checkbox"]:checked ~ #qa{display:block}#qa-wrap input[type="Checkbox"]:checked ~ label:after{content:"X";padding:5px;box-shadow:none;border-bottom:none;border-bottom:0;background:#bbb;position:absolute;right:12px;margin-top:-5px;width:20px;height:20px;border-radius:20px;color:#fff;line-height:21px}#wirepanel,.wirepanel{display:none;width:auto;padding:9px;margin:-6px 0 0 -9px;border-radius:3px;background:rgba(0,0,0,0.85);position:absolute;color:#eee;font-size:10px;z-index:5999}.inactive{color:#222!important}#cursor svg,.#cursor svg,.cursor svg{width: 100%;height: 100%;}#feux-play2{display: block;}#svg-spinner{position: absolute;top: 140px;left: 50%;margin-left: -22px;display: none;z-index: 2;}.loader,.loader:after{border-radius:50%;width:44px;height:44px;box-sizing:border-box}.loader{margin:0 auto;font-size:10px;position:relative;text-indent:-9999em;border-top:5px solid tomato;border-right:5px solid tomato;border-bottom:5px solid tomato;border-left:5px solid #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
  25. </style><link rel="icon" href="https://wireframecc-9947.kxcdn.com/favicon.ico?v=1.1">
  26. </head>
  27.  
  28.  
  29. <body class='show-about'>
  30.  
  31. <script nonce=f12ca362f729e1cda57c6eb7d1030776 >
  32. if (localStorage.getItem("about-closed") !== null){
  33. var body = document.getElementsByTagName( "body" );
  34. body[0].classList.remove("show-about");
  35.  
  36.  
  37. }
  38. </script>
  39.  
  40. <div id="about-overlay"></div>
  41. <div id="about-wrap">
  42. <span class="closeabout"><i class="icon-remove-sign"></i></span>
  43. <div id="about" class="panel">
  44. <div class="innerpanelwrap">
  45. <div class="left" id='h2h4'>
  46. <h1>A better wireframing experience</h1>
  47. <h4><span class="blocktext">with a simple app that doesn't get in your way</span></h4>
  48. </div>
  49. <div class="feux-canvas">
  50. <div id="svg-spinner">
  51. <div class="loader"></div>
  52. </div>
  53.  
  54. <div id="feux-play2" class='play2'>
  55. <svg width="100%" height="100%" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M40,-1.77636e-15c22.0914,0 40,17.9086 40,40c0,22.0914 -17.9086,40 -40,40c-22.0914,0 -40,-17.9086 -40,-40c0,-22.0914 17.9086,-40 40,-40ZM40,6.12296c18.7098,0 33.877,15.1673 33.877,33.877c0,18.7098 -15.1673,33.877 -33.877,33.877c-18.7098,0 -33.877,-15.1673 -33.877,-33.877c0,-18.7098 15.1673,-33.877 33.877,-33.877ZM55.4528,37.1551c0.870171,0.543529 1.40224,1.49405 1.41059,2.51999c0.00835632,1.02594 -0.508155,1.985 -1.36936,2.54263c-5.57691,3.6111 -15.7244,10.1817 -21.6436,14.0145c-0.922657,0.597428 -2.09816,0.642432 -3.06379,0.117298c-0.965634,-0.525135 -1.56676,-1.53631 -1.56676,-2.6355c-1.16955e-11,-7.34235 -1.16955e-11,-20.2449 -1.17097e-11,-27.5335c-1.41999e-06,-1.09043 0.59167,-2.09499 1.54533,-2.62373c0.953663,-0.528737 2.11913,-0.498376 3.04397,0.0792966c5.89873,3.68447 16.045,10.0221 21.6436,13.5191l2e-05,-8.46e-05Z" /></svg>
  56. <span class="watch-text">Watch demo</span>
  57. </div>
  58. <span class="f-c"></span>
  59. <span class="f-c"></span>
  60. <span class="f-c"></span>
  61. <span class="f-i"></span>
  62. <svg id="feux-svg-grid" zoomAndPan="disable" currentscale="2" xmlns="http://www.w3.org/2000/svg" version="1.2" width="1024" height="268"><pattern id="feux-grid-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" ><g id="sharp" transform="translate(-0.5,-0.5)"><line class="lineH" x1="0" x2="100" y1="20" y2="20" stroke="#eee" stroke-width="1"></line><line class="lineH" x1="0" x2="100" y1="40" y2="40" stroke="#eee" stroke-width="1"></line><line class="lineH" x1="0" x2="100" y1="60" y2="60" stroke="#eee" stroke-width="1"></line><line class="lineH" x1="0" x2="100" y1="80" y2="80" stroke="#eee" stroke-width="1"></line><line class="lineV" x1="20" x2="20" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class="lineV" x1="40" x2="40" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class="lineV" x1="60" x2="60" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class="lineV" x1="80" x2="80" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class="lineV" x1="100" x2="100" y1="0" y2="100" stroke="#e1e1e1" stroke-width="1"></line><line class="lineH" x1="0" x2="100" y1="100" y2="100" stroke="#e1e1e1" stroke-width="1"></line></g></pattern><rect id="grid" fill="url(#feux-grid-pattern)" width="1024" height="268"></rect></svg>
  63.  
  64. <div class="demowrap">
  65. <div class=" demo">
  66.  
  67. <div id='cursor'><svg id='cursor-svg' width="100%" height="100%" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M2,16l-1,0l0,-6l1,0l0,6ZM7,18l0,-2l-1,0l0,-2l-1,0l0,-1l-1,0l0,1l-1,0l0,1l-1,0l0,-6l2,0l0,-1.46341e-06l-2,0l0,-6l1,0l0,1l1,0l0,1l1,0l0,1l1,0l0,1l-1,0l0,-1.46341e-06l-1,0l0,-1l-1,0l0,1.46341e-06l1,0l0,1l3,0l0,1l1,0l0,1l1,0l0,1l1,0l0,1l1,0l0,1l-4,0l0,2l1,0l0,2l1,0l0,2l-2,0ZM2,10l-1,0l0,-8l1,0l0,8Z" style="fill:#000;"/><rect x="2" y="3" width="1" height="1" style="fill:#fff;"/><rect x="6" y="7" width="1" height="1" style="fill:#fff;"/><rect x="4" y="5" width="1" height="1" style="fill:#fff;"/><rect x="8" y="9" width="1" height="1" style="fill:#fff;"/><rect x="3" y="4" width="1" height="1" style="fill:#fff;"/><rect x="7" y="8" width="1" height="1" style="fill:#fff;"/><rect x="5" y="6" width="1" height="1" style="fill:#fff;"/><rect x="9" y="10" width="1" height="1" style="fill:#fff;"/><rect x="10" y="11" width="1" height="1" style="fill:#fff;"/><rect x="8" y="13" width="4" height="1" style="fill:#fff;"/><rect x="9" y="15" width="1" height="1" style="fill:#fff;"/><rect x="4" y="14" width="1" height="1" style="fill:#fff;"/><rect x="5" y="16" width="1" height="1" style="fill:#fff;"/><rect x="6" y="18" width="1" height="1" style="fill:#fff;"/><rect x="7" y="19" width="2" height="1" style="fill:#fff;"/><rect x="3" y="15" width="1" height="1" style="fill:#fff;"/><rect x="2" y="16" width="1" height="1" style="fill:#fff;"/><rect x="9.7561e-08" y="17" width="2" height="1" style="fill:#fff;"/><rect x="9" y="18" width="1" height="1" style="fill:#fff;"/><rect x="10" y="16" width="1" height="2" style="fill:#fff;"/><path d="M7,19l0,-1l2,0l0,1l-2,0ZM7,18l-1,0l0,-2l1,0l0,2ZM10,18l-1,0l0,-2l-1,0l0,-2l1,0l0,2l1,0l0,2ZM9.7561e-08,17l0,-1l2,0l0,1l-2,0ZM3,15l-1,0l0,1l1,0l0,-1ZM6,16l-1,0l0,-2l1,0l0,2ZM1,2l0,14l-1,0l0,-16l1,0l0,1l1,0l0,1l-1,0ZM4,14l-1,0l0,1l1,0l0,-1ZM8,13l0,1l-1,0l0,-2l4,0l0,1l-3,0ZM5,13l-1,0l0,1l1,0l0,-1ZM12,13l-1,0l0,-2l1,0l0,2ZM11,10l-1,0l0,1l1,0l0,-1ZM10,9l-1,0l0,1l1,0l0,-1ZM9,8l-1,0l0,1l1,0l0,-1ZM8,7l-1,0l0,1l1,0l0,-1ZM7,6l-1,0l0,1l1,0l0,-1ZM6,5l-1,0l0,1l1,0l0,-1ZM5,4l-1,0l0,1l1,0l0,-1ZM4,3l-1,0l0,1l1,0l0,-1ZM3,2l-1,0l0,1l1,0l0,-1Z" style="fill:#fff;"/><rect x="1" y="2" width="1" height="14" style="fill:#fff;"/></g></svg></div>
  68. <div id="d1" class='v2'>
  69. <div id="boxinner" style="width:calc(100% - 12px); height:calc(100% - 20px);display:block;"></div>
  70. <div class='cursor bottomcorner' ><svg viewBox="0 0 12 20">
  71. <use xlink:href="#cursor-svg" x="0" y="0" />
  72. </svg></div>
  73.  
  74. </div>
  75.  
  76. <div class="feux-wirepanel">
  77. <div class='draw-icons'>
  78.  
  79. <div class='icon rect horizontal vertical highlightable' elementtype='box' title=Box></div>
  80. <div class='icon rect horizontal vertical highlightable' elementtype='roundbox' title='Rounded Box'></div>
  81. <div class='icon rect highlightable' elementtype='elipse' title='Ellipse/Circle' ></div>
  82. <div class='icon rect highlightable' elementtype='image' title=Image><i class="icon-picture"></i></div>
  83. <div class='icon rect highlightable' elementtype='paragraph' title='Paragraph' ><i class="icon-align-left"></i></div>
  84. <div class='icon rect highlightable' elementtype='list' title='List' ><i class="icon-list"></i></div>
  85. <div class='icon rect horizontal highlightable' elementtype='headline' title='Headline' >H</div>
  86. <div class='icon rect horizontal highlightable' elementtype='headlinetxt' title='Text' >T</div>
  87. <div id=textinput class='icon horizontal rect highlightable ' elementtype='textinput' title='Text input' ></div>
  88. <div id=annotate class='icon horizontal rect vertical highlightable' elementtype='annotate' title='Add annotation' style='margin-top:-2px;' ><i class="icon-comments-alt"></i></div>
  89. </div>
  90. <div class="edit-icons">
  91. <div id="strokes" style="display: block;">
  92. <div class="stroke_width strokeweight highlightable" title="Stroke width: thin" stroke="1"><span class="line onepx "></span></div>
  93. <div class="stroke_width strokeweight highlightable" title="Stroke width: medium" stroke="2"><span class="line twopx "></span></div>
  94. <div class="stroke_width strokeweight highlightable" title="Stroke width: thick" stroke="4"><span class="line fourpx "></span></div>
  95. </div>
  96. <div >
  97.  
  98.  
  99. <div class="show-border" >
  100. <span></span>
  101. </div>
  102.  
  103. <div class="colorpickers">
  104. <div class="cpicker nocolor" style="background:transparent;" title="Transparent"></div>
  105. <div class="cpicker rect" style="background:rgb(255,255,255);" title="Fill color: white"></div>
  106. <div class="cpicker rect" style="background:rgb(221,221,221);" title="Fill color: #ddd"></div>
  107. <div class="cpicker rect" style="background:rgb(170,170,170);" title="Fill color: #aaa"></div>
  108. <div class="cpicker rect" style="background:rgb(119,119,119);" title="Fill color: #777"></div>
  109. <div class="cpicker rect" style="background:rgb(68,68,68);" title="Fill color: #444"></div>
  110. <div class="cpicker rect" style="background:rgb(17,17,17);" title="Fill color: #111"></div>
  111. <div class="cpicker rect" style="background:tomato;" title="Fill color: tomato"></div>
  112. </div>
  113.  
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119.  
  120. </div>
  121.  
  122.  
  123. <div class="panel-inner">
  124. <article>
  125.  
  126. <h3>Super-minimal interface</h3>
  127. <!-- <img src="images/lp-ui.svg" alt="Minimal ui"> -->
  128. <svg width="100%" height="100%" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer1"><g><path d="M172.707,5.74079c0,-2.02107 -1.6384,-3.65946 -3.65947,-3.65946l-163.388,0c-2.02107,0 -3.65947,1.6384 -3.65947,3.65946l8.15348e-13,119.99l170.707,5.68434e-14l-4.26326e-13,-119.99Z" style="fill:none;stroke-width:2px;stroke:#ffb3a5;"/><path d="M2,9.37075l170.707,0" style="fill:none;stroke-width:2px;stroke:#ffb3a5;"/></g><path d="M3.48015,18.773l167.828,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><rect x="2" y="18.773" width="38.8683" height="106.958" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M15.2383,18.8646l0,106.209" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M28.0634,19.2306l0,106.209" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.00575,67.5575l38.8683,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.2226,30.9708l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.2226,30.9708l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.22835,91.9971l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.18055,79.7703l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.1748,55.425l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.1748,43.2145l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.1748,43.2145l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.1748,43.2145l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.18055,104.241l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M2.18055,115.139l38.5302,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><rect x="53.2551" y="31.5618" width="105.353" height="80.6319" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><rect x="63.4037" y="18.8646" width="33.4836" height="38.1781" style="fill:#fff;stroke-width:0.75px;stroke:#ffb3a5;"/><rect x="136.899" y="40.8806" width="31.0645" height="46.0508" style="fill:#fff;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M141.89,59.4621l21.0831,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M40.8561,18.773l0,-9.51114" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M52.4353,18.2675l0,-9.00563" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M63.4037,18.2675l0,-9.00563" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M141.588,18.2675l0,-9.00563" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M73.9199,18.2675l0,-9.00563" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M152.105,18.2675l0,-9.00563" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M83.7897,18.2675l0,-9.00563" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M161.975,18.2675l0,-9.00563" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M63.4037,37.3722l33.4836,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M96.8872,27.7039l-33.4836,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M63.4037,47.3478l33.4836,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><g><path d="M298.808,79.0101c0,-2.02107 -1.6384,-3.65946 -3.65947,-3.65946l-163.388,0c-2.02107,0 -3.65947,1.6384 -3.65947,3.65946l8.2423e-13,119.99l170.707,5.68434e-14l-3.97904e-13,-119.99Z" style="fill:#fff;stroke-width:2px;stroke:#ff6347;"/><path d="M128.101,82.6401l170.707,0" style="fill:#fff;stroke-width:2px;stroke:#ff6347;"/></g><path d="M129.497,92.0424l167.828,0" style="fill:none;stroke-width:0.75px;stroke:#ff6347;"/><rect x="161.625" y="104.831" width="105.353" height="80.6319" style="fill:none;stroke-width:0.75px;stroke:#ff6347;"/><path d="M141.89,65.9919l21.0831,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/><path d="M141.89,72.0778l21.0831,0" style="fill:none;stroke-width:0.75px;stroke:#ffb3a5;"/></g></svg>
  129. <p>Wireframe.cc offers a clutter-free environment instead of countless toolbars and icons that we all know from other tools and apps. You can now focus on your ideas and easily sketch them before they fade away.</p>
  130. <h3>Click and drag to draw</h3>
  131. <!-- <img src="images/lp-draw.svg" alt="Click and drag to draw"> -->
  132. <svg width="100%" height="100%" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer1"><path d="M133.063,71.4225c5.22437,0 9.45956,4.23519 9.45956,9.45956c-5.68434e-14,2.596 -1.04572,4.94776 -2.7389,6.65703c-0.150246,0.151673 -1.19758,-1.21845 -1.19758,-1.21845l-5.18596,-5.27473c0,0 0.627139,9.29571 -0.337124,9.29571c-5.22437,0 -9.45956,-4.23519 -9.45956,-9.45956c0,-5.22437 4.23519,-9.45956 9.45956,-9.45956Z" style="fill:#ffb3a6;"/><g><g><rect x="9.70532" y="5.68583" width="1.02338" height="1.02259" style="fill:#ff6347;"/><rect x="10.7287" y="6.71" width="1.02417" height="1.02259" style="fill:#ff6347;"/><rect x="8.68114" y="4.66086" width="1.02417" height="1.02417" style="fill:#ff6347;"/><rect x="7.65697" y="3.63669" width="1.02259" height="1.02259" style="fill:#ff6347;"/><rect x="6.63439" y="2.6141" width="1.02259" height="1.02259" style="fill:#ff6347;"/><rect x="14.8246" y="10.8027" width="1.02417" height="1.02655" style="fill:#ff6347;"/><path d="M13.7988,9.77855l0,1.02417l1.02575,0l0,-1.02417l-1.02417,0l0,-1.02259l-1.02259,0l0,1.02259l1.02101,0Z" style="fill:#ff6347;fill-rule:nonzero;"/><rect x="11.7529" y="7.73258" width="1.02338" height="1.02417" style="fill:#ff6347;"/><rect x="10.7287" y="16.9462" width="1.02417" height="2.04676" style="fill:#ff6347;"/><path d="M5.61021,2.6141l1.02417,0l0,-1.02417l-1.02417,0l0,-1.02496l-1.02496,0l0,17.407l2.04913,0l0,-1.02575l-1.02417,0l0,-14.3321Z" style="fill:#ff6347;fill-rule:nonzero;"/><rect x="9.70532" y="14.8994" width="1.02338" height="2.04676" style="fill:#ff6347;"/><path d="M16.8713,13.8768l0,-2.04755l-1.02259,0l0,1.02259l-4.09589,0l0,2.04755l1.02496,0l0,-1.02259l4.09352,0Z" style="fill:#ff6347;fill-rule:nonzero;"/><path d="M13.7988,16.9462l0,2.04913l-2.04597,0l0,1.02338l2.04755,0l0,-1.02338l1.02417,0l0,-2.04913l-1.02417,0l0,-2.04676l-1.02259,0l0,2.04676l1.02101,0Z" style="fill:#ff6347;fill-rule:nonzero;"/><rect x="6.63439" y="15.922" width="1.02259" height="1.02259" style="fill:#ff6347;"/><rect x="8.68114" y="13.8768" width="1.02417" height="1.02259" style="fill:#ff6347;"/><rect x="7.65697" y="14.8994" width="1.02259" height="1.02259" style="fill:#ff6347;"/></g></g><g><rect x="138.25" y="86.0024" width="1.0218" height="1.0218" style="fill:#ff6347;"/><rect x="139.274" y="87.0242" width="1.02338" height="1.02417" style="fill:#ff6347;"/><rect x="137.222" y="84.9774" width="1.02496" height="1.02496" style="fill:#ff6347;"/><rect x="136.2" y="83.9525" width="1.0218" height="1.02496" style="fill:#ff6347;"/><rect x="135.176" y="82.9307" width="1.02417" height="1.02021" style="fill:#ff6347;"/><rect x="143.368" y="91.1201" width="1.02496" height="1.02496" style="fill:#ff6347;"/><path d="M142.344,90.0951l0,1.02496l1.02417,0l0,-1.02496l-1.02417,0l0,-1.0218l-1.02496,0l0,1.0218l1.02496,0Z" style="fill:#ff6347;fill-rule:nonzero;"/><rect x="140.297" y="88.0484" width="1.0218" height="1.02496" style="fill:#ff6347;"/><rect x="139.274" y="97.2627" width="1.02338" height="2.04676" style="fill:#ff6347;"/><path d="M134.155,82.9307l1.02101,0l0,-1.02496l-1.02101,0l0,-1.02496l-1.02575,0l0,17.407l2.04676,0l0,-1.02496l-1.02101,0l0,-14.3321Z" style="fill:#ff6347;fill-rule:nonzero;"/><rect x="138.25" y="95.2168" width="1.0218" height="2.04597" style="fill:#ff6347;"/><path d="M145.415,94.1918l0,-2.04676l-1.02338,0l0,1.0218l-4.09431,0l0,2.04993l1.0218,0l0,-1.02496l4.09589,0Z" style="fill:#ff6347;fill-rule:nonzero;"/><path d="M142.344,97.2627l0,2.04676l-2.04676,0l0,1.02496l2.04676,0l0,-1.02496l1.02417,0l0,-2.04676l-1.02417,0l0,-2.04597l-1.02496,0l0,2.04597l1.02496,0Z" style="fill:#ff6347;fill-rule:nonzero;"/><rect x="135.176" y="96.2386" width="1.02417" height="1.02417" style="fill:#ff6347;"/><rect x="137.222" y="94.1918" width="1.02496" height="1.02496" style="fill:#ff6347;"/><rect x="136.2" y="95.2168" width="1.0218" height="1.02021" style="fill:#ff6347;"/></g><path d="M4.98387,21.7509l0,59.2545l128.146,-0.124676l0.0570866,-79.9111l-120.922,0" style="fill:none;stroke-width:0.75px;stroke:#ff6347;"/></g></svg>
  133. <p>Creating elements of your wireframe couldn't be easier. All you have to do is draw a rectangle on the canvas and select the stencil type that will be inserted there. You can do that by dragging your mouse across the canvas and selecting an option from a pop-up menu. If you need to edit anything just double-click it.</p>
  134. <h3>Limited palette</h3>
  135. <!-- <img src="images/lp-palette.svg" alt="Limited palette" style="opacity:.8;"> -->
  136. <svg width="100%" height="100%" viewBox="0 0 299 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer_2"><g><circle cx="103.785" cy="100" r="22.8575" style="fill:#ffe0db;stroke-width:3px;stroke:#fff;"/><circle cx="126.642" cy="100" r="22.8575" style="fill:#ffcfc8;stroke-width:3px;stroke:#fff;"/><circle cx="149.5" cy="100" r="22.8575" style="fill:#ffb6a9;stroke-width:3px;stroke:#fff;"/><circle cx="172.358" cy="100" r="22.8575" style="fill:#fb7f69;stroke-width:3px;stroke:#fff;"/><circle cx="195.215" cy="100" r="22.8575" style="fill:#ff6347;stroke-width:3px;stroke:#fff;"/></g><circle cx="52.3116" cy="100" r="48.5942" style="fill:#ffe4df;stroke-width:3px;stroke:#fff;"/><circle cx="100.906" cy="100" r="48.5942" style="fill:#ffcfc8;stroke-width:3px;stroke:#fff;"/><circle cx="149.5" cy="100" r="48.5942" style="fill:#ffb6a9;stroke-width:3px;stroke:#fff;"/><circle cx="198.094" cy="100" r="48.5942" style="fill:#ff846e;stroke-width:3px;stroke:#fff;"/><circle cx="246.688" cy="100" r="48.5942" style="fill:#ff6347;stroke-width:3px;stroke:#fff;"/></g></svg>
  137. <p>Wireframe.cc can help you keep your wireframes simple by offering a very limited palette of options. That applies to color palette and the number of stencils that you can choose from. This way the essence of your idea will never be lost in unnecessary decorations and fancy styles. Instead you will get a wireframe with a clarity of a hand-drawn sketch.</p>
  138.  
  139. <h3>Context sensitive UI</h3>
  140. <!-- <img src="images/lp-smart.svg" alt="Smart suggestions" > -->
  141. <svg width="100%" height="100%" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer1"><g><path d="M243,111.816c0,-8.2847 -6.71608,-15.0008 -15.0008,-15.0008l-209.998,0c-8.2847,0 -15.0008,6.71608 -15.0008,15.0008l0,30.0354c0,8.2847 6.71608,15.0008 15.0008,15.0008l209.998,0c8.2847,0 15.0008,-6.71608 15.0008,-15.0008l0,-30.0354Z" style="fill:#ffa797;stroke-width:3px;stroke:#fff;"/><g><rect x="19.5842" y="112.867" width="21" height="4" style="fill:#fff;"/><rect x="19.5842" y="136.8" width="28" height="4" style="fill:#fff;"/><rect x="19.5842" y="128.8" width="21.009" height="4" style="fill:#fff;"/><rect x="19.5842" y="120.734" width="28" height="4" style="fill:#fff;"/></g><g><rect x="112.584" y="112.84" width="21" height="4" style="fill:#fff;"/><rect x="105.584" y="136.774" width="28" height="4" style="fill:#fff;"/><rect x="112.575" y="128.774" width="21.009" height="4" style="fill:#fff;"/><rect x="105.584" y="120.708" width="28" height="4" style="fill:#fff;"/></g><g><rect x="67.1107" y="112.867" width="21" height="4" style="fill:#fff;"/><rect x="63.5842" y="136.8" width="28" height="4" style="fill:#fff;"/><rect x="67.1107" y="128.8" width="21.009" height="4" style="fill:#fff;"/><rect x="63.5842" y="120.734" width="28" height="4" style="fill:#fff;"/></g><path d="M153.875,134.716l6.75634,0l1.54263,4.04209c0.136689,0.371013 0.449121,0.546756 0.800607,0.546756c0.117162,0 0.234324,-0.019527 0.351486,-0.058581c0.39054,-0.0976349 0.702972,-0.39054 0.702972,-0.78108c0,-0.117162 -0.019527,-0.214797 -0.078108,-0.331959l-5.31134,-13.376c-0.253851,-0.663918 -0.761553,-0.917769 -1.38642,-0.917769c-0.605337,0 -1.09351,0.253851 -1.34736,0.917769l-5.31134,13.3369c-0.039054,0.117162 -0.058581,0.214797 -0.058581,0.331959c0,0.371013 0.292905,0.702972 0.683445,0.800607c0.136689,0.039054 0.253851,0.058581 0.39054,0.058581c0.331959,0 0.624864,-0.156216 0.761553,-0.546756l1.50358,-4.02256ZM154.461,133.076l2.20655,-5.66283c0.234324,-0.58581 0.429594,-1.21067 0.605337,-1.87459c0.175743,0.663918 0.39054,1.28878 0.605337,1.85506l2.1675,5.68235l-5.58472,0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M179.978,133.554l8.46739,0l1.93331,5.06575c0.171306,0.464972 0.562861,0.685222 1.00336,0.685222c0.146833,0 0.293667,-0.0244722 0.4405,-0.0734167c0.489444,-0.122361 0.881,-0.489444 0.881,-0.978889c0,-0.146833 -0.0244722,-0.269194 -0.0978889,-0.416028l-6.65644,-16.7635c-0.318139,-0.832055 -0.954417,-1.15019 -1.73753,-1.15019c-0.758639,0 -1.37044,0.318139 -1.68858,1.15019l-6.65644,16.7145c-0.0489444,0.146833 -0.0734167,0.269194 -0.0734167,0.416028c0,0.464972 0.367083,0.881 0.856528,1.00336c0.171306,0.0489444 0.318139,0.0734167 0.489444,0.0734167c0.416028,0 0.783111,-0.195778 0.954417,-0.685222l1.88436,-5.04128ZM180.712,131.498l2.76536,-7.09694c0.293667,-0.734167 0.538389,-1.51728 0.758639,-2.34933c0.22025,0.832055 0.489444,1.61517 0.758639,2.32486l2.71642,7.12142l-6.99905,0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M210.153,132.725l9.688,0l2.212,5.796c0.196,0.532 0.644,0.784 1.148,0.784c0.168,0 0.336,-0.028 0.504,-0.084c0.56,-0.14 1.008,-0.56 1.008,-1.12c0,-0.168 -0.028,-0.308 -0.112,-0.476l-7.616,-19.18c-0.364,-0.952 -1.092,-1.316 -1.988,-1.316c-0.868,0 -1.568,0.364 -1.932,1.316l-7.616,19.124c-0.056,0.168 -0.084,0.308 -0.084,0.476c0,0.532 0.42,1.008 0.98,1.148c0.196,0.056 0.364,0.084 0.56,0.084c0.476,0 0.896,-0.224 1.092,-0.784l2.156,-5.768ZM210.993,130.373l3.164,-8.12c0.336,-0.84 0.616,-1.736 0.868,-2.688c0.252,0.952 0.56,1.848 0.868,2.66l3.108,8.148l-8.008,0Z" style="fill:#fff;fill-rule:nonzero;"/></g><path d="M298.584,70.9888c0,-8.2847 -6.71608,-15.0008 -15.0008,-15.0008l-209.998,0c-8.2847,0 -15.0008,6.71608 -15.0008,15.0008l0,30.0354c0,8.2847 6.71608,15.0008 15.0008,15.0008l209.998,0c8.2847,0 15.0008,-6.71608 15.0008,-15.0008l0,-30.0354Z" style="fill:#ff6347;stroke-width:4px;stroke:#fff;"/><path d="M93.5914,77.8019l-0.928768,-0.928768l-18.1666,18.1666l0.928768,0.928768l18.1666,-18.1666Z" style="fill:#fff;"/><path d="M116.257,78.5067l-2.09134,-2.09134l-18.1666,18.1666l2.09134,2.09134l18.1666,-18.1666Z" style="fill:#fff;"/><path d="M138.003,79.995l-3.57962,-3.57962l-18.1666,18.1666l3.57962,3.57962l18.1666,-18.1666Z" style="fill:#fff;"/><path d="M165.236,94.5423l10.2099,0l0,-10.2099l-10.2099,0l0,10.2099ZM162.236,97.5423l0,-16.2099l16.2099,0l0,16.2099l-16.2099,0Z" style="fill:#fff;"/><rect x="154.911" y="74.0077" width="17.9494" height="17.9494" style="fill:#fff;stroke-width:2px;stroke:#ff6347;"/><rect x="187.946" y="73.4789" width="23.9095" height="23.9632" style="fill:#fff;fill-opacity:0.4;"/><rect x="211.855" y="73.4789" width="23.9095" height="23.9632" style="fill:#fff;fill-opacity:0.6;"/><rect x="235.765" y="73.4789" width="23.9095" height="23.9632" style="fill:#fff;fill-opacity:0.8;"/><rect x="259.674" y="73.4789" width="23.9095" height="23.9632" style="fill:#fff;"/><path d="M147.755,72.381l0,29.9631" style="fill:none;stroke-width:1px;stroke-linejoin:miter;stroke:#fff;"/></g><g id="Layer2"></g></svg>
  142.  
  143. <p>Most parts of the UI are presented to you only when you need them. It is possible due to the unique drawing mechanism. The list of stencil elements is only available just before inserting an element. Even then the pop-up menu will contain only icons of the elements that can take this shape.
  144. <p>The same goes for editing - you are presented only with options that are applicable for a given element. That means different icons in a toolbar for editing a paragraph and different for a simple rectangle.</p>
  145.  
  146. <h3>Wireframe websites and mobile apps</h3>
  147. <svg width="100%" height="100%" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g id="Layer_2"><path d="M53.963,62.734c0,-5.314 -4.315,-9.628 -9.629,-9.628l-28.304,0c-5.314,0 -9.628,4.314 -9.628,9.628l0,76.335c0,5.314 4.314,9.628 9.628,9.628l28.304,0c5.314,0 9.629,-4.314 9.629,-9.628l0,-76.335Z" style="fill:#fff;stroke:#ff6347;stroke-width:3px;"/><path d="M9.331,136.321l0,-70.839l41.702,0l0,70.839l-41.702,0l0,0Zm2.535,-2.535l36.632,0l0,-65.768l-36.632,0l0,65.768Z" style="fill:#ff6347;"/><path d="M38.059,60.185c0,0.494 -0.4,0.893 -0.893,0.893l-4.198,0l-9.071,0c-0.494,0 -0.894,-0.399 -0.894,-0.893c0,-0.492 0.4,-0.892 0.894,-0.892l13.269,0c0.493,0 0.893,0.4 0.893,0.892Z" style="fill:#fff;fill-rule:nonzero;stroke:#ff6347;stroke-width:1px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><circle cx="30.404" cy="140.734" r="2.363" style="fill:#fff;stroke:#ff6347;stroke-width:1px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><path d="M126.667,42.398c0,-3.981 -3.227,-7.208 -7.208,-7.208l-63.999,0c-3.98,0 -7.207,3.227 -7.207,7.208l0,112.787c0,3.981 3.227,7.208 7.207,7.208l63.999,0c3.981,0 7.208,-3.227 7.208,-7.208l0,-112.787Z" style="fill:#fff;stroke:#ff6347;stroke-width:3px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><rect x="54.974" y="49.387" width="68.046" height="96.246" style="fill:none;stroke:#ff6347;stroke-width:2.28px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:1.41421;"/><circle cx="88.997" cy="43.043" r="1.131" style="fill:#fff;stroke:#ff6347;stroke-width:0.8px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><circle cx="88.997" cy="153.065" r="2.607" style="fill:#fff;stroke:#ff6347;stroke-width:1px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><path d="M295.155,29.618c0,-1.698 -1.379,-3.077 -3.077,-3.077l-175.584,0c-1.698,0 -3.077,1.379 -3.077,3.077l0,140.764c0,1.698 1.379,3.077 3.077,3.077l175.584,0c1.698,0 3.077,-1.379 3.077,-3.077l0,-140.764Z" style="fill:#fff;stroke:#ff6347;stroke-width:3px;"/><circle cx="127.294" cy="39.913" r="4.885" style="fill:none;stroke:#ff6347;stroke-width:1px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><circle cx="141.968" cy="39.913" r="4.885" style="fill:none;stroke:#ff6347;stroke-width:1px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><circle cx="156.734" cy="39.913" r="4.885" style="fill:none;stroke:#ff6347;stroke-width:1px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><path d="M287.996,36.615c0,-1.61 -1.305,-2.915 -2.915,-2.915l-114.505,0c-1.609,0 -2.914,1.305 -2.914,2.915l0,7.127c0,1.61 1.305,2.915 2.914,2.915l114.505,0c1.61,0 2.915,-1.305 2.915,-2.915l0,-7.127Z" style="fill:none;stroke:#ff6347;stroke-width:1px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/><path d="M113.417,51.494l181.238,0" style="fill:none;stroke:#ff6347;stroke-width:3.02px;stroke-linecap:butt;stroke-miterlimit:1.41421;"/></g></svg>
  148.  
  149. <p>You can choose from three templates: a browser window, a tablet and a mobile phone. The mobile devices come in vertical and landscape orientations. To switch between the templates you can use the icon in the top left corner.</p>
  150.  
  151. <h3>Annotate with ease</h3>
  152. <svg width="100%" height="100%" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer1"><path d="M171.297,48.5363l-162.866,0l0,152.294" style="fill:none;stroke-width:3px;stroke:#ffa898;"/><path d="M171.297,200.831l0,-152.294" style="fill:none;stroke-width:3px;stroke:#ffa898;"/><rect x="29.0232" y="68.6847" width="120.977" height="72.6187" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><rect x="29.0232" y="179.678" width="43.3069" height="24.2025" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><rect x="106.693" y="179.77" width="43.3069" height="24.2025" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><path d="M29.0232,68.6847l120.977,72.6187" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><path d="M29.0232,179.678l43.3069,24.2025" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><path d="M106.693,179.77l43.3069,24.2025" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><path d="M29.0232,141.303l120.977,-72.6187" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><path d="M29.0232,203.88l43.3069,-24.2025" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><path d="M106.693,203.973l43.3069,-24.2025" style="fill:none;stroke-width:1px;stroke:#ffa899;"/><rect x="47.6667" y="148.287" width="84.9166" height="4.01758" style="fill:#ffa392;"/><rect x="53.381" y="156.481" width="73.488" height="4.01758" style="fill:#ffa392;"/><rect x="51.0648" y="164.581" width="78.1203" height="4.01758" style="fill:#ff9e8d;"/><path d="M111.587,125.241l167.674,-0.135825c9.82669,0 17.7928,-9.03817 17.7928,-20.1873l0,-76.3896c0,-11.1492 -7.96611,-20.1873 -17.7928,-20.1873l-134.869,0c-9.82669,0 -17.7928,9.03817 -17.7928,20.1873l0,76.3896c-1.42109e-14,14.6148 -15.0123,20.3232 -15.0123,20.3232l0.0001,-7.5e-05Z" style="fill:#fff;stroke-width:3px;stroke:#ff6347;"/><rect x="145.092" y="27.4984" width="131.823" height="8.81653" style="fill:#ff6347;"/><rect x="145.092" y="79.4375" width="100.964" height="8.81653" style="fill:#ff6347;"/><rect x="145.092" y="44.6502" width="123.911" height="8.81653" style="fill:#ff6347;"/><rect x="145.092" y="96.5892" width="116.236" height="8.81653" style="fill:#ff6347;"/><rect x="145.092" y="61.8585" width="131.823" height="8.81653" style="fill:#ff6347;"/></g></svg>
  153. <!-- <img src="images/lp-annotate.svg" alt="Annotations"> -->
  154.  
  155. <p>If you want to be sure that your message gets through you can always annotate your wireframe. Annotations are created the same way as any other objects on the canvas and they can be turned on and off.</p>
  156.  
  157. <h3 class='bt'>Free & Premium versions available</h3>
  158.  
  159. <div id="compare">
  160.  
  161. <div class="left free-card">
  162. <h4>Free version</h4>
  163. <ul>
  164. <li>No user accounts</li>
  165. <li>Public wireframes</li>
  166. <li>Single-page wireframes</li>
  167. </ul>
  168. </div>
  169. <div class="right premium-card">
  170. <h4>Premium version</h4>
  171. <ul>
  172. <li>Your private account</li>
  173. <li>Private wireframes</li>
  174. <li>Multi-paged wireframes</li>
  175. <li>Clickable elements</li>
  176. <li>Export to PDF & PNG</li>
  177. <li>Revisions</li>
  178. </ul>
  179. </div>
  180.  
  181. </div>
  182. <p>A basic version of the app is available for free. In the free version each wireframe that you save gets a unique URL that you can bookmark or share. The Premium version separates the editor and the preview mode. It offers a private dashboard with all your projects and shareable links that can be used for previewing but not editing.
  183. </p>
  184.  
  185. <h5>Premium version pricing</h5>
  186.  
  187. <div class="plans" id='pricing'>
  188.  
  189.  
  190. <div class="price-col">
  191. <div class="planname">Solo</div>
  192. <div class="pricewrap">
  193. <span class="dolar">$</span><span class="price">16</span><span class="amonth dolar">/month</span>
  194. </div>
  195. <span class="yearly dolar">or $<b>144</b>/year</span>
  196. <ul>
  197. <li><b>1</b> user</li>
  198. <li><b>Unlimited</b> projects</li>
  199. <li><b>Unlimited</b> revisions</li>
  200. <li>PDF/PNG export</li>
  201. <li>your own logo</li>
  202. </ul>
  203.  
  204. </div>
  205.  
  206. <div class="price-col">
  207. <div class="planname">Trio</div>
  208. <div class="pricewrap">
  209. <span class="dolar">$</span><span class="price">39</span><span class="amonth dolar ">/month</span>
  210. </div>
  211. <span class="yearly dolar">or $<b>390</b>/year</span>
  212. <ul>
  213. <li><b>3</b> users</li>
  214. <li><b>Unlimited</b> projects</li>
  215. <li><b>Unlimited</b> revisions</li>
  216. <li>PDF/PNG export</li>
  217. <li>your own logo</li>
  218. </ul>
  219.  
  220. </div>
  221.  
  222. <div class="price-col">
  223. <div class="planname">Enterprise</div>
  224. <div class="pricewrap">
  225. <span class="dolar">$</span><span class="price">99</span><span class="amonth dolar">/month</span>
  226. </div>
  227. <span class="yearly dolar">or $<b>990</b>/year</span>
  228. <ul>
  229. <li><b>Unlimited</b> users</li>
  230. <li><b>Unlimited</b> projects</li>
  231. <li><b>Unlimited</b> revisions</li>
  232. <li>PDF/PNG export</li>
  233. <li>your own logo</li>
  234. </ul>
  235.  
  236. </div>
  237. <!-- <span class="discl"> * There may occur additional VAT charges for clients in EU. You get 2 months free when billed annually.</span> -->
  238. </div>
  239.  
  240.  
  241.  
  242. <h4 class='featured-by'>Featured By:</h4>
  243. <!-- <img src="images/featuredby-prg-comp.jpg" alt="Logos" class='press-logos'> -->
  244. <div class="press-logos"></div>
  245.  
  246. <div class="sign-up-card">
  247. <h3>Start your 7 day free trial</h3>
  248.  
  249. <form method="post" action="pro/ps/register.php" class='sign-up-form'>
  250. <label>Username:</label>
  251. <input type="text" name="username">
  252.  
  253. <label>Email: </label>
  254. <input type="text" name="email">
  255.  
  256. <label>Password:</label>
  257. <input type="password" name="password">
  258.  
  259.  
  260.  
  261. <br>
  262.  
  263. <input type="submit" value="Start my trial" class="transit">
  264. </form>
  265.  
  266. <div class="btn-signup"></div>
  267. </div>
  268.  
  269. <div id="qa-wrap">
  270. <input type="Checkbox" id='qa-toggle'>
  271. <label for="qa-toggle">FAQ</label>
  272. <div class="qa" id='qa'>
  273. <div class="qacol">
  274. <div class="qawrap">
  275. <p class="q">How does the free trial work?</p>
  276. <p class="a">When you sign up you’ll get a free, unlimited access to all features of Wireframe.cc Premium. After 7 days you will be asked to pick a paid plan that works for you. Your projects will not be deleted even if you fail to do that - you can come back any time.</p>
  277. </div>
  278. <div class="qawrap">
  279.  
  280. <p class="q">Can I change plans or cancel my subscription?</p>
  281. <p class="a">Yes you can easily upgrade, downgrade or cancel your plan at any time. There is no contract nor long term obligation. If you cancel you will not be billed again. </p>
  282. </div>
  283. <div class="qawrap">
  284. <p class="q">Is my data safe?</p>
  285. <p class="a">All data is backed up daily and stored in multiple locations. All plans come with SSL encryption. Your projects can only be edited by you or your team.</p>
  286. </div>
  287. </div>
  288.  
  289. <div class="qacol">
  290. <div class="qawrap">
  291. <p class="q">What are the available payment options?</p>
  292. <p class="a">You can pay with Visa, Mastercard, American Express, Discover, JCB or PayPal. The billing period starts on the day you upgrade to a paying plan. You will be billed in advance on a monthly or annual basis. Payments are handled securely by FastSpring.</p>
  293.  
  294. </div>
  295. <div class="qawrap">
  296. <p class="q">What browsers do you support?</p>
  297. <p class="a">Wireframe.cc Premium supports the latest versions of Chrome, Safari, and Firefox. It may be probably possible to use it in other browsers, but we can't guarantee it.</p>
  298. </div>
  299. <div class="qawrap">
  300. <p class="q">What if I have more questions?</p>
  301. <p class="a">If you have any further questions about the premium features, pricing, or the sign-up process you can email us at <a href="mailto:info@wireframe.cc">info@wireframe.cc</a></p>
  302. </div>
  303. </div>
  304. </div>
  305. </div>
  306.  
  307. <nav class="breadcrumb">
  308. <a target="_blank" href="/docs">Docs</a> /
  309. <a target="_blank" href="terms.html">Terms</a> /
  310. <a target="_blank" href="privacy.html">Privacy</a> /
  311. <a target='_blank' href="/contact">Contact</a>
  312. / © 2018 wireframe.cc
  313. </nav>
  314.  
  315. </article>
  316.  
  317. </div>
  318. </div>
  319. <div class="cta-btn"></div>
  320. </div>
  321. </div>
  322. <script type="text/javascript" nonce=f12ca362f729e1cda57c6eb7d1030776 >
  323. var playBtnClicked = false;
  324.  
  325. document.getElementById("feux-play2").addEventListener("click", function( event ) {
  326. playBtnClicked = true;
  327. this.style.display = 'none';
  328. document.getElementById('svg-spinner').style.display = 'block';
  329. }, false);
  330. </script>
  331.  
  332. <link rel="stylesheet" href="https://wireframecc-9947.kxcdn.com/style.2.6.5.6.min.css" type="text/css" />
  333. <style>.show-about #about-overlay{background: rgba(34, 34, 34, 0.3);}.cursor,#cursor{background: none;}</style>
  334.  
  335.  
  336. <div class='container'>
  337.  
  338.  
  339.  
  340.  
  341. <div class=supercanvas><div id=canvas-wrap class='browser-wrap' snappy=0 data-grid='graph'><span id=browser><span> </span></span>
  342. <div id='canvas'><div id="gridcol"><div class="col" id="col1" ></div><div class="col" id="col2" ></div><div class="col" id="col3" ></div><div class="col" id="col4" ></div><div class="col" id="col5" ></div><div class="col" id="col6" ></div><div class="col" id="col7" ></div><div class="col" id="col8" ></div><div class="col" id="col9" ></div><div class="col" id="col10" ></div><div class="col" id="col11" ></div><div class="col" id="col12" ></div></div><div id="grid-dot" style="width:100%;height:100%;overflow:hidden;">
  343. <svg id="svg-grid" zoomAndPan="disable" currentscale="2" xmlns="http://www.w3.org/2000/svg" version="1.2" width="3000" height="12000">
  344.  
  345. <pattern id="dot-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
  346. <g id="sharp">
  347. <circle class="svgdot" cx="0" cy="0" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  348. <circle class="svgdot" cx="20" cy="20" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  349.  
  350. <circle class="svgdot" cx="20" cy="0" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  351. <circle class="svgdot" cx="0" cy="20" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  352. </g>
  353. </pattern>
  354.  
  355. <rect id="grid" fill="url(#dot-pattern)" width="3000" height="12000"></rect>
  356. </svg></div><div id="grid-div" style='width:100%;height:100%;overflow:hidden;'><svg id="svg-grid" zoomAndPan="disable" currentscale="2" xmlns="http://www.w3.org/2000/svg" version="1.2" width="3000" height="12000"><pattern id="grid-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"><g id="sharp" transform="translate(-0.5,-0.5)"><line class='lineH' x1="0" x2="100" y1="20" y2="20" stroke="#eee" stroke-width="1"></line><line class='lineH' x1="0" x2="100" y1="40" y2="40" stroke="#eee" stroke-width="1"></line><line class='lineH' x1="0" x2="100" y1="60" y2="60" stroke="#eee" stroke-width="1"></line><line class='lineH' x1="0" x2="100" y1="80" y2="80" stroke="#eee" stroke-width="1"></line><line class='lineV' x1="20" x2="20" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class='lineV' x1="40" x2="40" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class='lineV' x1="60" x2="60" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class='lineV' x1="80" x2="80" y1="0" y2="100" stroke="#eee" stroke-width="1"></line><line class='lineV' x1="100" x2="100" y1="0" y2="100" stroke="#e1e1e1" stroke-width="1"></line><line class='lineH' x1="0" x2="100" y1="100" y2="100" stroke="#e1e1e1" stroke-width="1"></line></g></pattern><rect id="grid" fill="url(#grid-pattern)" width="3000" height="12000" ></rect></svg></div><div id='guide-h' class='guide'></div><div id='guide-v' class='guide'></div></div></div></div>
  357.  
  358. <!-- ///wirepanel START -->
  359.  
  360. <div id="wirepanel" class='wirepanel'>
  361.  
  362. <div id='icons'>
  363.  
  364. <div class='icon rect horizontal vertical highlightable' elementtype='box' data-hint=Box></div>
  365. <div class='icon rect horizontal vertical highlightable' elementtype='roundbox' data-hint='Rounded Box'></div>
  366. <div class='icon rect highlightable' elementtype='elipse' data-hint='Ellipse/Circle' ></div>
  367. <div class='icon rect highlightable' elementtype='image' data-hint=Image><i class="icon-picture"></i></div>
  368. <div class='icon rect highlightable' elementtype='paragraph' data-hint='Paragraph' ><i class="icon-align-left"></i></div>
  369. <div class='icon rect highlightable' elementtype='list' data-hint='List' ><i class="icon-list"></i></div>
  370. <div class='icon highlightable' elementtype='radiobtn' data-hint='Radio button' ></div>
  371. <div class='icon highlightable' elementtype='checkbox' data-hint='Checkbox' ></div>
  372. <div class='icon horizontal highlightable' elementtype='line_hor' data-hint='Line' ></div>
  373. <div class='icon vertical highlightable' elementtype='line_vert' data-hint='Line' ></div>
  374. <div class='icon horizontal highlightable' elementtype='slider' data-hint='Slider' ></div>
  375. <!-- <div class='icon horizontal highlightable' elementtype='progressbar' data-hint='Progress bar' ></div> -->
  376.  
  377. <div class='icon horizontal highlightable' elementtype='combobox' data-hint='Combo box' > <i class="icon-caret-down"></i> </div>
  378. <div class='icon horizontal highlightable' elementtype='scrollh' data-hint='Scrollbar (horizontal)' > <i class="icon-caret-left" style="position:absolute;left:-5px;"></i> <i class="icon-caret-right" style="position:absolute;left:3px;"></i></div>
  379. <div class='icon vertical highlightable' elementtype='scrollv' data-hint='Scrollbar (vertical)' > <i class="icon-caret-up" style="position:absolute;top:-5px;"></i> <i class="icon-caret-down" style="position:absolute;top:3px;"></i></div>
  380. <div class='icon rect horizontal highlightable' elementtype='headline' data-hint='Headline' >H</div>
  381. <div class='icon rect horizontal highlightable' elementtype='headlinetxt' data-hint='Text' >T</div>
  382. <div id=textinput class='icon horizontal rect highlightable ' elementtype='textinput' data-hint='Text input' ></div>
  383. <div id=annotate class='icon horizontal rect vertical highlightable' elementtype='annotate' data-hint='Add annotation' style='margin-top:-2px;' ><i class="icon-comments-alt"></i></div>
  384. </div>
  385.  
  386.  
  387.  
  388. <div id='strokes' style='display:none;'>
  389. <div class='stroke_width strokeweight highlightable' data-hint='Stroke width: thin' stroke=1><span class='line onepx '></span></div>
  390. <div class='stroke_width strokeweight highlightable' data-hint='Stroke width: medium' stroke=2><span class='line twopx '></span></div>
  391. <div class='stroke_width strokeweight highlightable' data-hint='Stroke width: thick' stroke=4 ><span class='line fourpx '></span></div>
  392. </div>
  393.  
  394. <div id=textalign >
  395. <div id=alignleft class='highlightable text-edit-btn'><i class="icon-align-left" data-hint='Align left'></i></div>
  396. <div id=aligncenter class='highlightable text-edit-btn'><i class="icon-align-center" data-hint='Center'></i></div>
  397. <div id=alignright class='highlightable text-edit-btn'><i class="icon-align-right" data-hint='Aligne right'></i></div>
  398. <div id=alignjustify class='highlightable text-edit-btn'><i class="icon-align-justify" data-hint='Justify'></i></div>
  399. </div>
  400. <div id=textsize >
  401.  
  402. <div class='font-s svg-icon' data-hint="Text size">
  403. <svg class='ql-snow ql-stroke'>
  404. <use xlink:href="sprite2.svg#icon-font-small"></use>
  405. </svg>
  406. </div>
  407. <span >
  408. <!-- <input type="range" id="font-size-range" min="0" max="3" value='1' step='1'> -->
  409. <div id="feux-font-size-slider" >
  410. </div>
  411. </span>
  412. <div class='font-l svg-icon' data-hint="Text size">
  413. <svg class='ql-snow ql-stroke'>
  414. <use xlink:href="sprite2.svg#icon-font-large"></use>
  415. </svg>
  416. </div>
  417. </div>
  418. <!-- <div> -->
  419.  
  420.  
  421. <div id='show-border' class='highlightable' data-hint='Change to fill color'>
  422. <span></span>
  423. </div>
  424. <div id='show-bg' style='display:none;' class='highlightable' data-hint='Change to background color'>
  425. <span></span>
  426. </div>
  427.  
  428.  
  429.  
  430.  
  431.  
  432.  
  433. <div id='colorpickers'>
  434. <div class='colorpicker nocolor' data-hint='Transparent'></div>
  435. <div class='colorpicker rect' style='background:rgb(255,255,255);' data-hint='Fill color: white'></div>
  436. <div class='colorpicker rect' style='background:rgb(221,221,221);' data-hint='Fill color: #ddd'></div>
  437. <div class='colorpicker rect' style='background:rgb(170,170,170);' data-hint='Fill color: #aaa'></div>
  438. <div class='colorpicker rect' style='background:rgb(119,119,119);' data-hint='Fill color: #777'></div>
  439. <div class='colorpicker rect' style='background:rgb(68,68,68);' data-hint='Fill color: #444'></div>
  440. <div class='colorpicker rect' style='background:rgb(17,17,17);' data-hint='Fill color: #111'></div>
  441. <div class='colorpicker rect' style='background:tomato;' data-hint='Fill color: tomato'></div>
  442. </div>
  443.  
  444. <div id='bordercolors' style='display:none;'>
  445.  
  446. <div class='brcolor noborder' style='border-color:transparent;' data-hint='Border color: transparent'></div>
  447. <div class='brcolor' style='border-color:#fff;' data-hint='Border color: #fff' ></div>
  448. <div class='brcolor' style='border-color:#ddd;' data-hint='Border color: #ddd' ></div>
  449. <div class='brcolor' style='border-color:#aaa;' data-hint='Border color: #aaa' ></div>
  450. <div class='brcolor' style='border-color:#777;' data-hint='Border color: #777' ></div>
  451. <div class='brcolor' style='border-color:#444;' data-hint='Border color: #444' ></div>
  452. <div class='brcolor' style='border-color:#111;' data-hint='Border color: #111' ></div>
  453. <div class='brcolor' style='border-color:tomato;' data-hint='Border color: tomato' ></div>
  454.  
  455. </div>
  456. </div>
  457.  
  458.  
  459. </div>
  460. <!-- ///wirepanel END -->
  461.  
  462. </div>
  463. <!-- /container end -->
  464.  
  465. <div class="overlay"></div>
  466.  
  467. <div id=top class='free-version'>
  468. <div class="left topico device-wrap" data-intro="More templates" data-position="bottom">
  469.  
  470. <span class='device-window' data-template-btn='browser-wrap' ><i class="icon-window"></i></span>
  471. <span class='device-tablet' data-template-btn='mobile tablet' ><i class="icon-tablet"></i></span>
  472. <span class='device-mobile' data-template-btn='mobile' ><i class="icon-mobile"></i></span>
  473. <span class='device-mobile-landscp' data-template-btn='mobile-landscape' ><i class="icon-mobile"></i></span>
  474. </div>
  475. <div id='logo' class='left' style="padding:0;">
  476. <a href="http://wireframe.cc" target="_blank">wireframe<span style="color: tomato;">|</span>cc</a>
  477.  
  478. </div>
  479.  
  480.  
  481.  
  482. <div class='controls' class='left'>
  483. <div class='left '>
  484. <div id='undo' class='topicon left inactive' data-hint='Undo (Ctrl+Z)' ><span><i class="icon-reply"></i></span><p>undo</p></div>
  485. <div id='redo' class='topicon left inactive' data-hint='Redo (Ctrl+Y)' ><span><i class="icon-share-alt" ></i></span><p>redo</p></div>
  486. </div>
  487. <div class='left copypaste' data-intro="Copy / paste between wireframes <span class='better'>Better</span>" data-position="bottom">
  488. <div id='copy' class='topicon left' data-hint='Copy selected elements (Ctrl+C)'><span><i class="icon-copy"></i></span><p>copy</p></div>
  489. <div id='cut' class='topicon left' data-hint='Cut selected elements (Ctrl+X)'><span><i class="icon-cut"></i></span><p>cut</p></div>
  490. <div id='paste' class='topicon left' data-hint='Paste selected elements (Ctrl+V)'><span><i class="icon-paste"></i></span><p>paste</p></div>
  491. <div id='del' class='topicon left' data-hint='Delete selected elements (Del/Backspace)'><span><i class="icon-remove"></i></span><p>delete</p></div>
  492. </div>
  493. <div class='left' data-intro="Aligning and grouping <span class='intronew'>New</span>" data-position="bottom">
  494. <div id='lock' class='topicon left ' data-hint='Lock / unlock selected element (Ctrl+L)'><span class="icon-lock"></span></div>
  495.  
  496. <div id='arrange' class='topicon left' data-hint='Arrange elements'><span><i class="arrange-icon custom-icon"></i></span></div>
  497.  
  498. <span id='arrange-icons' >
  499. <div id='front' class="topicon inner-btn left" data-hint='Bring to front'>
  500. <span ><i class="front-icon custom-icon"></i></span>
  501. </div><div id='forward' class="topicon inner-btn left" data-hint='Bring forward'>
  502. <span ><i class="forward-icon custom-icon"></i></span>
  503. </div>
  504. <div id='back'class="topicon inner-btn left" data-hint='Send to back'>
  505. <span ><i class="back-icon custom-icon"></i></span>
  506. </div>
  507. <div id='backward'class="topicon inner-btn left" data-hint='Send backward'>
  508. <span ><i class="backward-icon custom-icon"></i></span>
  509. </div>
  510. </span>
  511.  
  512. <div id='align' class='topicon left' data-hint='Align elements'><span><i class="group-align custom-icon"></i></span><p>Align</p></div>
  513.  
  514. <span class="align-icons">
  515. <div id='align-top' class='topicon inner-btn left' data-hint='Align Top'><span><i class="align-icon align-top custom-icon"></i></span><p>Align Top</p></div>
  516. <div id='align-left' class='topicon inner-btn left' data-hint='Align Left'><span><i class="align-left custom-icon"></i></span><p>Align Left</p></div>
  517. <div id='align-bottom' class='topicon inner-btn left' data-hint='Align Bottom'><span><i class=" align-icon align-bottom custom-icon"></i></span><p>Align Bottom</p></div>
  518. <div id='align-right' class='topicon inner-btn left' data-hint='Align Right'><span><i class="align-right align-icon custom-icon"></i></span><p>Align Right</p></div>
  519.  
  520. <div id='align-center' class='topicon inner-btn left' data-hint='Align Center'><span><i class=" align-icon align-center custom-icon"></i></span><p>Align Center</p></div>
  521. <div id='align-middle' class='topicon inner-btn left' data-hint='Align Middle'><span><i class="align-icon align-middle custom-icon"></i></span><p>Align Middle</p></div>
  522. <div id='dist-v' class='topicon inner-btn left' data-hint='Distribute Vertically'><span><i class="align-icon dist-v custom-icon"></i></span><p>Distribute Vertically</p></div>
  523. <div id='dist-h' class='topicon inner-btn left' data-hint='Distribute Horizontally'><span><i class="align-icon dist-h custom-icon"></i></span><p>Distribute Horizontally</p></div>
  524. </span>
  525.  
  526. <div id='group' class='topicon left' data-hint='Group elements'><span><i class="group-icon custom-icon"></i></span></div>
  527. </div>
  528.  
  529.  
  530. </div><!-- controls end -->
  531.  
  532.  
  533.  
  534.  
  535. <span class="cta-top"><a href="pro/register.php" target="_blank">Sign Up</a></span>
  536. <div id='links' class='linksmin'>
  537. <div class="linksdown "><span><i class="icon-menu"></i></span></div>
  538.  
  539. <div class="linksdownwrap">
  540. <div class='linkwrap '><a href="pro/login.php" >login</a></div>
  541. <div class='linkwrap '><a target='_blank' href="/contact">contact</a></div>
  542. <div class='linkwrap ' ><a href="/docs" target="_blank" >docs</a></div>
  543. <div class='linkwrap about' id='about-btn' >about</div>
  544. </div>
  545.  
  546. </div>
  547.  
  548. <div class="settings topicon single-icon right controls" data-hint="Settings"><span><i class="icon-cogs"></i></span></div>
  549. <div class="topicon right withlabel controls single-icon" id="savefree" data-hint='Save' data-intro="SSL encryption" data-position="bottom"><span><i class="icon-floppy"></i></span><p>Save</p></div>
  550. <span class="right controls">
  551. <div id='hide-annotation' class='topicon left single-icon' data-hint='Hide annotations'><span><i class="icon-comment"></i></span></div>
  552. </span>
  553. <span class="right controls">
  554. <div id='show-annotation' class='topicon left single-icon' style='display:none;' data-hint='Show annotations'><span><i class="icon-comment-alt"></i></span></div>
  555. </span>
  556.  
  557. </div>
  558.  
  559. <div class="options">
  560. <div class="optitem check "><input type="checkbox" name="check" id="show-grid" checked /><label for="show-grid"></label> <span>Show grid</span>
  561. <div class="grid-type-div">
  562.  
  563. <label class="dropdown">
  564. <select id="grid-type">
  565. <option selected value='graph' >Graph paper</option>
  566. <option value='dots' >Dots</option>
  567. <!-- <option value='col' >Columns</option> -->
  568. </select>
  569. </label>
  570. </div>
  571. </div>
  572. <!-- <div class="optitem">
  573. Grid type
  574.  
  575. </div> -->
  576. <div class="optitem check "><input type="checkbox" name="check" id="show-columns" /><label for="show-columns"></label> <span>Show columns</span></div>
  577.  
  578. <div class="optitem check "><input type="checkbox" name="check" id="snap-to-grid" /><label for="snap-to-grid"></label> <span>Snap to grid</span></div>
  579. <div class=" check optitem">
  580. <input type="checkbox" name="check" id="snap-to-guides" checked="yes" /><label for="snap-to-guides"></label> <span>Enable smart guides:</span>
  581.  
  582. <div class=" check optitem">
  583. <input type="checkbox" name="check" id="draw-snap" checked="yes" /><label for="draw-snap"></label> <span>While drawing</span>
  584. </div>
  585. <div class=" check optitem">
  586. <input type="checkbox" name="check" id="transform-snap" checked="yes" /><label for="transform-snap"></label> <span>While transforming</span>
  587. </div>
  588. </div>
  589. <div class="optitem "> Grid size: <span class="grid-size-val">20</span>px</div>
  590. <div id="grid-slider-wrap " class="optitem">
  591. <div id="grid-slider"></div>
  592. </div>
  593. <div class="optitem">
  594. Default stroke:</br>
  595. <label class="dropdown">
  596. <select id="def-stroke-width">
  597. <option selected value=1 >Thin</option>
  598. <option value='2' >Medium</option>
  599. <option value=4 >Thick</option>
  600. </select>
  601. </label>
  602. <label class="dropdown">
  603. <select id="def-stroke-color">
  604. <option value='transparent' >Transparent</option>
  605. <option value='rgb(255,255,255)' >white</option>
  606. <option value='rgb(221,221,221)' >#ddd</option>
  607. <option value='rgb(170,170,170)' >#aaa</option>
  608. <option value='rgb(119,119,119)' >#777</option>
  609. <option selected value='rgb(68,68,68)' >#444</option>
  610. <option value='rgb(17,17,17)' >#111</option>
  611. <option value='tomato' >tomato</option>
  612. </select>
  613. </label>
  614. </div>
  615.  
  616. <div class="optitem">
  617. Default fill color
  618. <div class="def-bg-color">
  619. <label class="dropdown">
  620. <select id="def-bg-color">
  621. <option value='transparent' >Transparent</option>
  622. <option selected value='rgb(255,255,255)' >white</option>
  623. <option value='rgb(221,221,221)' >#ddd</option>
  624. <option value='rgb(170,170,170)' >#aaa</option>
  625. <option value='rgb(119,119,119)' >#777</option>
  626. <option value='rgb(68,68,68)' >#444</option>
  627. <option value='rgb(17,17,17)' >#111</option>
  628. <option value='tomato' >tomato</option>
  629. </select>
  630. </label>
  631. </div>
  632. </div>
  633.  
  634. <div class="optitem" style="padding-bottom: 30px;">
  635. Canvas size:
  636. <input type="text" id="canvas_w_val" class="input"/>/
  637. <input type="text" id="canvas_h_val" class="input"/>
  638. px
  639. </div>
  640. </div>
  641.  
  642.  
  643. <div class="save-wrap">
  644. <span>Wireframe saved as:</span>
  645. <span class="savedURL"></span>
  646. </div>
  647. <div class="saved">Saved</div><div class="copied">Copied</div>
  648.  
  649. <div class="bottomright" id='dimcoord'>
  650.  
  651. <span class="canvassize"></span>
  652. <span id=btm-coord class="coord"><span>X: – px </span><span>Y: – px</span></span>
  653. <span id=btm-dim class="dim"><span>W: – px </span><span>H: – px</span></span>
  654.  
  655. </div>
  656.  
  657.  
  658.  
  659. <div class="grids" style="display:none;">
  660. <div id="gridcol">
  661. <div class="col" id="col1" ></div>
  662. <div class="col" id="col2" ></div>
  663. <div class="col" id="col3" ></div>
  664. <div class="col" id="col4" ></div>
  665. <div class="col" id="col5" ></div>
  666. <div class="col" id="col6" ></div>
  667. <div class="col" id="col7" ></div>
  668. <div class="col" id="col8" ></div>
  669. <div class="col" id="col9" ></div>
  670. <div class="col" id="col10" ></div>
  671. <div class="col" id="col11" ></div>
  672. <div class="col" id="col12" ></div>
  673. </div>
  674. <div id="grid-dot" style="width:100%;height:100%;overflow:hidden;">
  675. <svg id="svg-grid" zoomAndPan="disable" currentscale="2" xmlns="http://www.w3.org/2000/svg" version="1.2" width="3000" height="12000">
  676.  
  677. <pattern id="dot-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
  678. <g id="sharp">
  679. <circle class="svgdot" cx="0" cy="0" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  680. <circle class="svgdot" cx="20" cy="20" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  681.  
  682. <circle class="svgdot" cx="20" cy="0" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  683. <circle class="svgdot" cx="0" cy="20" r="0.75" stroke="#666" style="fill: #bfbfbf;stroke: transparent;"></circle>
  684. </g>
  685. </pattern>
  686.  
  687. <rect id="grid" fill="url(#dot-pattern)" width="3000" height="12000"></rect>
  688. </svg></div>
  689. <div id="grid-div" style='width:100%;height:100%;overflow:hidden;'>
  690. <svg id="svg-grid" zoomAndPan="disable" currentscale="2" xmlns="http://www.w3.org/2000/svg" version="1.2" width="3000" height="12000"><pattern id="grid-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
  691. <g id="sharp" transform="translate(-0.5,-0.5)">
  692. <line class='lineH' x1="0" x2="100" y1="20" y2="20" stroke="#eee" stroke-width="1"></line>
  693. <line class='lineH' x1="0" x2="100" y1="40" y2="40" stroke="#eee" stroke-width="1"></line>
  694. <line class='lineH' x1="0" x2="100" y1="60" y2="60" stroke="#eee" stroke-width="1"></line>
  695. <line class='lineH' x1="0" x2="100" y1="80" y2="80" stroke="#eee" stroke-width="1"></line>
  696.  
  697. <line class='lineV' x1="20" x2="20" y1="0" y2="100" stroke="#eee" stroke-width="1"></line>
  698. <line class='lineV' x1="40" x2="40" y1="0" y2="100" stroke="#eee" stroke-width="1"></line>
  699. <line class='lineV' x1="60" x2="60" y1="0" y2="100" stroke="#eee" stroke-width="1"></line>
  700. <line class='lineV' x1="80" x2="80" y1="0" y2="100" stroke="#eee" stroke-width="1"></line>
  701.  
  702. <line class='lineV' x1="100" x2="100" y1="0" y2="100" stroke="#e1e1e1" stroke-width="1"></line>
  703. <line class='lineH' x1="0" x2="100" y1="100" y2="100" stroke="#e1e1e1" stroke-width="1"></line>
  704. </g></pattern><rect id="grid" fill="url(#grid-pattern)" width="3000" height="12000" ></rect></svg></div><div id='guide-h' class='guide'></div><div id='guide-v' class='guide'></div></div>
  705.  
  706. <div id='wcc-toolbar' class='wcc-toolbar'>
  707.  
  708. <span class="ql-formats ql-start" id='fs-slider' >
  709.  
  710.  
  711.  
  712. <div class='font-s svg-icon' data-hint="Text size">
  713. <svg class="ql-snow ql-stroke">
  714. <use xlink:href="sprite2.svg#icon-font-small"></use>
  715. </svg>
  716. </div>
  717. <span >
  718. <!-- <input type="range" id="font-size-range" min="0" max="3" value='1' step='1'> -->
  719. <div id="font-size-ui-slider" style='display:none'>
  720. </div>
  721. </span>
  722. <div class='font-l svg-icon' data-hint="Text size">
  723. <svg class="ql-snow ql-stroke">
  724. <use xlink:href="sprite2.svg#icon-font-large"></use>
  725. </svg>
  726. </div>
  727.  
  728.  
  729. </span>
  730.  
  731.  
  732.  
  733. <span class="ql-formats ml-1"><button type="button" class="ql-bold" data-hint='Bold (Ctrl+B)'></button><button type="button" data-hint='Italic (Ctrl+I)' class="ql-italic"></button><button type="button" data-hint='Underline (Ctrl+U)' class="ql-underline"></button>
  734. </span>
  735.  
  736. <span class="ql-formats ql-align-icons">
  737. <select class="ql-align" data-hint='Align text'><option selected="selected"></option><option value="center"></option><option value="right"></option><option value="justify"></option></select>
  738. </span>
  739.  
  740.  
  741.  
  742.  
  743. <span class="ql-formats ql-font-color ml-1">
  744. <select class="ql-color" data-hint='Text color'><option value="f"></option><option value="d"></option><option value="a"></option><option value="h7"></option><option value="h4" selected></option><option value="h1"></option><option value="t"></option></select>
  745. </span>
  746.  
  747. <span class="ql-formats ql-fr">
  748. <button type="button" class="ql-clean" data-hint='Clear formatting'><svg class="" viewBox="0 0 18 18"> <line class="ql-stroke" x1="5" x2="13" y1="3" y2="3"></line> <line class="ql-stroke" x1="6" x2="9.35" y1="12" y2="3"></line> <line class="ql-stroke" x1="11" x2="15" y1="11" y2="15"></line> <line class="ql-stroke" x1="15" x2="11" y1="11" y2="15"></line> <rect class="ql-fill" height="1" rx="0.5" ry="0.5" width="7" x="2" y="14"></rect> </svg></button>
  749. </span>
  750. <span class="ql-formats ql-end" id='wcc-toolbar-more'>
  751. <div class='svg-icon' >
  752. <button type="button" data-hint='More...'>
  753. <svg class="ql-snow ql-fill">
  754. <use xlink:href="sprite2.svg#icon-kebab"></use>
  755. </svg>
  756. </button>
  757. </div>
  758. </span>
  759. <span class="ql-formats formats-wrap-flat">
  760. <span class="lhr-wrap" >
  761. <div class='lh-svg svg-icon' data-hint="Line height">
  762. <svg >
  763. <use xlink:href="sprite2.svg#icon-line-height"></use>
  764. </svg>
  765. </div>
  766. <div id="line-height-ui-slider">
  767. <span class="val-label"></span>
  768. </div>
  769. <!-- <span class='lhr-inner-wrap'>
  770. <input type="range" id="line-height-range" min="0" max="9" value='1' step='1'>
  771. </span> -->
  772. </span>
  773. <span class="ql-formats ">
  774. <button class="ql-ttu svg-icon " style='width:27px;' data-hint='All caps'>
  775. <svg class="ql-snow ql-stroke">
  776. <use xlink:href="sprite2.svg#icon-all-caps"></use>
  777. </svg>
  778. </button>
  779. <button class="ql-smallcaps svg-icon" style='width:27px;' data-hint='Small caps'>
  780. <svg class="ql-snow ql-stroke">
  781. <use xlink:href="sprite2.svg#icon-small-caps"></use>
  782. </svg>
  783. </button>
  784. </span>
  785.  
  786. <span class="ql-formats ql-fl"><button type="button" class="ql-list" data-hint='Ordered list' value="ordered"></button><button type="button" class="ql-list" value="bullet" data-hint='Bulleted list'></button></span>
  787.  
  788. </span>
  789.  
  790. </div>
  791.  
  792. <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" nonce=f12ca362f729e1cda57c6eb7d1030776 ></script>
  793. <script nonce=f12ca362f729e1cda57c6eb7d1030776 >
  794. WebFont.load({
  795. google: {
  796. families: ['Arimo:400,400i,700,700i:cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin-ext,vietnamese']
  797. }
  798. });
  799. </script>
  800.  
  801.  
  802. <script nonce=f12ca362f729e1cda57c6eb7d1030776 >
  803.  
  804. var filename = 0
  805. </script>
  806.  
  807.  
  808.  
  809. <script src="https://wireframecc-9947.kxcdn.com/scripts.1.8.2.min.js"></script>
  810. <script nonce=f12ca362f729e1cda57c6eb7d1030776 >
  811. function demoStart2(){fc2.addClass("no-cursor"),c.show().transition({x:"0",y:"0"},0).transition({x:"-130px",y:"-68px"},1600).transition({x:"-130px",y:"-60px",easing:"snap",delay:200},150,demo11)}function demo11(){c.hide(),console.log($("#d1 .cursor")),d1.find("#boxinner").addClass("draw").removeClass("bg-grey demo-box"),d1.show().transition({width:"12px",height:"20px"},0).transition({width:"272px",height:"180px",delay:100},2500,demo22),$("#d1 .cursor").show().css("display","block")}function demo22(){d1.find(".cursor").hide(),wp.css({top:"-45px",left:"0px"}).show().find(".draw-icons").show().end().find(".edit-icons").hide(),c.show().transition({x:"128px",y:"98px"},0,demo32)}function demo32(){c.transition({x:"-120px",y:"-95px",delay:"600"},1600,demo42)}function demo42(){d1.find("#boxinner").removeClass("draw").addClass("demo-box"),c.transition({x:"-120px",y:"-91px"},100).transition({x:"-120px",y:"-95px"},100,demo52)}function demo52(){wp.hide(),c.transition({x:"-42px",y:"-35px",delay:"400"},1e3).transition({x:"-42px",y:"-30px"},100).transition({x:"-42px",y:"-35px"},150).transition({x:"-42px",y:"-30px"},100).transition({x:"-42px",y:"-35px"},150,demo62)}function demo62(){wp.show().find(".draw-icons").hide().end().find(".edit-icons").show(),c.transition({x:"75px",y:"-95px"},1100).transition({x:"75px",y:"-90px"},100).transition({x:"75px",y:"-95px"},100,demo72)}function demo72(){d1.find("#boxinner").addClass("bg-grey"),window.setTimeout(demo82,800)}function demo82(){$("#feux-play2").show().css("display","block"),wp.hide(),fc2.removeClass("no-cursor"),d1.hide(),dw.hide()}var d1=$("#d1.v2"),dw=$(".demowrap"),c=$("#cursor"),wp=$(".feux-wirepanel"),fc2=$(".panel");$("#feux-play2").bind("click",function(){$(this).hide(),dw.show(),$("#svg-spinner").hide(),localStorage.setItem("demo-watched",!0),demoStart2()}),playBtnClicked&&(document.getElementById("svg-spinner").style.visibility="hidden",$("#feux-play2").click());
  812. </script>
  813. <style>#svg-spinner{display: none;}</style>
  814.  
  815. <script src="https://wireframecc-9947.kxcdn.com/wireframe.2.108.82.min.js" type="text/javascript"></script>
  816.  
  817. <script nonce=f12ca362f729e1cda57c6eb7d1030776 >
  818. if (filename!==0) {
  819.  
  820. MakeCanvasDrag();
  821. // makeDrag($('.wire'));
  822. makeDrag($('.aa'));
  823.  
  824. }
  825. $('#about-wrap').perfectScrollbar({suppressScrollX:true});
  826. $('#qa-toggle').click(function () {
  827. $('#about-wrap').perfectScrollbar('update')
  828. });
  829. key('ctrl+s, command+s', function(e) {
  830. if (!previewMode) {
  831. e.preventDefault();
  832. $('#savefree').click();
  833. }
  834. });
  835.  
  836. if($canvaswrap.hasClass('blocked')){
  837. $('#savefree, .settings, .controls').hide();
  838. activepage.find('.selected').removeClass('selected');
  839.  
  840. $('.bottomright, #wirepanel').hide();
  841. $('#canvas .page .wire').draggable('destroy').resizable('destroy').removeClass('ui-resizable-autohide');
  842. $('#canvas').addClass('preview');
  843. $('.ui-boxer').boxer('destroy');
  844. $canvas.unbind('mousemove');
  845. previewMode = true;
  846. }
  847.  
  848.  
  849. document.addEventListener('DOMContentLoaded', function () {
  850. var metaTag = document.createElement('meta');
  851. metaTag.setAttribute('http-equiv', 'Content-Security-Policy');
  852. metaTag.setAttribute('content', "script-src https: 'unsafe-eval';");
  853. document.head.appendChild(metaTag);
  854. });
  855. </script>
  856.  
  857.  
  858.  
  859.  
  860. <!-- Piwik -->
  861. <script type="text/javascript" nonce=f12ca362f729e1cda57c6eb7d1030776 >
  862. var _paq = _paq || [];
  863. _paq.push(['trackPageView']);
  864. _paq.push(['enableLinkTracking']);
  865. (function() {
  866. var u=(("https:" == document.location.protocol) ? "https" : "http") + "://wireframe.cc/piwik//";
  867. _paq.push(['setTrackerUrl', u+'piwik.php']);
  868. _paq.push(['setSiteId', 1]);
  869. var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
  870. g.defer=true; g.async=true; g.src='https://wireframecc-9947.kxcdn.com/piwik/piwik.js'; s.parentNode.insertBefore(g,s);
  871. })();
  872.  
  873. </script>
  874. <noscript><p><img src="http://wireframe.cc/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
  875. <!-- End Piwik Code -->
  876.  
  877. </body>
  878. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!