API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 25th, 2019
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width">
  7. <title>Punch Stream II</title>
  8. <script src="http://wrasse.pw/~joel/tools/html2canvas.min.js"></script>
  9. <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  11. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  14. <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.css" type="text/css" rel="stylesheet" />
  15. <script>
  16. (function(i, s, o, g, r, a, m) {
  17. i['GoogleAnalyticsObject'] = r;
  18. i[r] = i[r] || function() {
  19. (i[r].q = i[r].q || []).push(arguments)
  20. }, i[r].l = 1 * new Date();
  21. a = s.createElement(o),
  22. m = s.getElementsByTagName(o)[0];
  23. a.async = 1;
  24. a.src = g;
  25. m.parentNode.insertBefore(a, m)
  26. })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
  27.  
  28. ga('create', 'UA-16398615-1', 'auto');
  29. ga('send', 'pageview');
  30.  
  31. </script>
  32. <script>
  33. var canvasIMG;
  34.  
  35. function initUpload() {
  36. var canvas2 = document.getElementById('punchcanvas');
  37. var xhr = new XMLHttpRequest();
  38. var formData = new FormData();
  39. var dataURI = canvas2.toDataURL();
  40. var blob = dataURItoBlob(dataURI);
  41. var timename = Date.now();
  42. var filename = timename + '.png';
  43. formData.append(filename, blob);
  44. xhr.open('POST', 'http://wrasse.pw:3000/upload', true);
  45. xhr.onload = function(e) {
  46. console.log('success');
  47. };
  48. xhr.send(formData);
  49. }
  50.  
  51. function dataURItoBlob(dataURI) {
  52. var byteString = atob(dataURI.split(',')[1]);
  53. var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  54. var ab = new ArrayBuffer(byteString.length);
  55. var dw = new DataView(ab);
  56. for (var i = 0; i < byteString.length; i++) {
  57. dw.setUint8(i, byteString.charCodeAt(i));
  58. }
  59. return new Blob([ab], {
  60. type: mimeString
  61. });
  62. }
  63.  
  64. function explode() {
  65. $('.card-container').addClass('off');
  66. $('.expander').addClass('on');
  67. $('#form-name').append($('#name').val());
  68. $('#form-email').append($('#email').val());
  69. $('#form-stream').append($('#stream').is(":checked"));
  70. window.scrollTo(0, 0);
  71. canvasme();
  72. }
  73.  
  74. function canvasme() {
  75. html2canvas($('#punchcard'), {
  76. onrendered: function(canvas) {
  77. $('.container.page-elem').addClass('off');
  78. canvas.id = "punchcanvas";
  79. canvasIMG = canvas.toDataURL('image/png');
  80. document.body.appendChild(canvas);
  81. $('.expander').addClass('on');
  82. initUpload();
  83. }
  84. });
  85. }
  86.  
  87.  
  88. </script>
  89.  
  90. <link rel="icon" href="http://yvonnemart.com/portfolio/img/ico.gif" />
  91.  
  92. <style>
  93. #form-name,
  94. #form-email,
  95. #form-stream {
  96. width: 100%;
  97. }
  98.  
  99. #punchcanvas {
  100. display: none;
  101. }
  102.  
  103. .card-container {
  104. border-top: 3px solid black;
  105. border-bottom: 3px solid black;
  106. border-left: 3px solid black;
  107. display: flex;
  108. flex-wrap: wrap;
  109. width: 100%;
  110. margin-top: 100px;
  111. }
  112.  
  113. .card-container.off {
  114. border: 0;
  115. }
  116.  
  117. .card-text {
  118. margin-top: 100px;
  119. }
  120.  
  121. .punch {
  122. flex-basis: 4.16%;
  123. height: 14px;
  124. box-shadow: 0px 0px 1px #aaa;
  125. -moz-user-select: none;
  126. user-select: none!important
  127. }
  128.  
  129. .punch:hover {
  130. background: #aaa;
  131. }
  132.  
  133. .punch.on {
  134. background: #000;
  135. }
  136.  
  137. .punch:nth-child(6n+3) {
  138. border-right: 3px solid #ccc;
  139. }
  140.  
  141. .punch:nth-child(12n+3) {
  142. border-right: 3px solid #000;
  143. }
  144.  
  145. .punch:nth-child(n+148):nth-child(-n+171) {
  146. border-top: 3px solid #ccc;
  147. }
  148.  
  149. .punch:nth-child(n+292):nth-child(-n+315) {
  150. border-top: 3px solid #ccc;
  151. }
  152.  
  153. .punch:nth-child(n+436):nth-child(-n+459) {
  154. border-top: 3px solid #ccc;
  155. }
  156.  
  157. .punch:nth-child(n+580):nth-child(-n+603) {
  158. border-top: 3px solid #ccc;
  159. }
  160.  
  161. .punch:nth-child(n+724):nth-child(-n+747) {
  162. border-top: 3px solid #000;
  163. }
  164.  
  165. .punch:nth-child(n+868):nth-child(-n+891) {
  166. border-top: 3px solid #ccc;
  167. }
  168.  
  169. .punch:nth-child(n+1012):nth-child(-n+1035) {
  170. border-top: 3px solid #ccc;
  171. }
  172.  
  173. .punch:nth-child(n+1156):nth-child(-n+1179) {
  174. border-top: 3px solid #ccc;
  175. }
  176.  
  177. .punch:nth-child(n+1300):nth-child(-n+1323) {
  178. border-top: 3px solid #ccc;
  179. }
  180.  
  181. #punch-container {
  182. position: relative;
  183. }
  184.  
  185. .container.page-elem.off {
  186. display: none;
  187. }
  188.  
  189. .expander {
  190. display: none;
  191. opacity: 0;
  192. transition: 2s;
  193. }
  194.  
  195. .expander.on {
  196. position: absolute;
  197. background: #fff;
  198. width: 100%;
  199. height: 100%;
  200. z-index: 1000;
  201. padding: 20% 0 0 0;
  202. text-align: center;
  203. display: block;
  204. opacity: 1;
  205. }
  206.  
  207. .success-title {
  208. font-size: 3em;
  209. padding: 0 0 1em 0;
  210. }
  211.  
  212. .success-reload button {
  213. padding: 0.6em 1.4em;
  214. font-size: 1.2em;
  215. border-radius: 0.7em;
  216. }
  217. #slideout {
  218. /* position: absolute; */
  219. position: fixed;
  220. top: 100px;
  221. right: 0;
  222. width: 60px;
  223. -webkit-transition-duration: 0.3s;
  224. -moz-transition-duration: 0.3s;
  225. -o-transition-duration: 0.3s;
  226. transition-duration: 0.3s;
  227. }
  228. #slideout_tab {
  229. position: relative;
  230. top: 0;
  231. left: 0;
  232. padding: 12px 6px 12px 12px;
  233. text-align: center;
  234. background: #7d09d4;
  235. color: #fff;
  236. cursor:pointer;
  237. -webkit-border-radius: 5px 0 0 5px;
  238. -moz-border-radius: 5px 0 0 5px;
  239. border-radius: 5px 0 0 5px;
  240. }
  241. #slideout_inner {
  242. position: absolute;
  243. top: 0px;
  244. left: 60px;
  245. background: #7d09d4;
  246. width: 250px;
  247. padding: 15px;
  248. height: 224px;
  249. cursor:auto;
  250. -webkit-border-radius: 0px 0 0 0px;
  251. -moz-border-radius: 0px 0 0 0px;
  252. border-radius: 0px 0 0 0px;
  253. }
  254. #showblock:checked + #slideout{right: 250px;}
  255. #showblock{display:none;}
  256.  
  257. </style>
  258.  
  259. </head>
  260.  
  261.  
  262. <body>
  263. <!--<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  264. <div class="container">
  265.  
  266. <div class="navbar-header">
  267. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  268. <span class="sr-only">Toggle navigation</span>
  269. <span class="icon-bar"></span>
  270. <span class="icon-bar"></span>
  271. <span class="icon-bar"></span>
  272. </button>
  273. <a class="navbar-brand" href="/">Home</a>
  274. </div>
  275.  
  276. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  277. <ul class="nav navbar-nav">
  278.  
  279. <li>
  280. <a href="/about.html">About</a>
  281. </li>
  282. <li>
  283. <a href="/contact.html">Contact</a>
  284. </li>
  285. </ul>
  286. </div>
  287.  
  288. </div>
  289.  
  290. </nav>-->
  291. <div class="container">
  292. <div class="col-md-2 hidden-sm hidden-xs">
  293. <ul class="nav flex-column">
  294. <h2>Yvonne Mart</h2>
  295. <li class="nav-item">
  296. <a class="nav-link" href="http://yvonnemart.com/">Home</a>
  297. </li>
  298. <li class="nav-item">
  299. <a class="nav-link" href="http://yvonnemart.com/punch/">Punch Stream</a>
  300. </li>
  301. <li class="nav-item">
  302. <a class="nav-link" href="http://yvonnemart.com/textiledesign.html">Textiles</a>
  303. </li>
  304. <li class="nav-item">
  305. <a class="nav-link" href="http://yvonnemart.com/illustration.html">Illustration</a>
  306. </li>
  307. <li class="nav-item">
  308. <a class="nav-link" href="http://yvonnemart.com/gifgenerator.html">Gif Generator</a>
  309. </li>
  310. <li class="nav-item">
  311. <a class="nav-link" href="http://yvonnemart.com/flash.html">Flash Corner</a>
  312. </li>
  313. <li class="nav-item">
  314. <a class="nav-link" href="http://yvonnemart.com/about.html">About</a>
  315. </li>
  316. </ul>
  317. </div>
  318. <div class="hidden-md hidden-lg">
  319. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  320. <div class="container">
  321.  
  322. <div class="navbar-header">
  323. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  324. <span class="sr-only">Toggle navigation</span>
  325. <span class="icon-bar"></span>
  326. <span class="icon-bar"></span>
  327. <span class="icon-bar"></span>
  328. </button>
  329. <a class="navbar-brand" href="/">Yvonne Mart</a>
  330. </div>
  331.  
  332. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  333. <ul class="nav navbar-nav">
  334.  
  335. <li class="nav-item">
  336. <a class="nav-link" href="http://yvonnemart.com/puncher/">Punch Stream</a>
  337. </li>
  338. <li class="nav-item">
  339. <a class="nav-link" href="http://yvonnemart.com/textiledesign.html">Textiles</a>
  340. </li>
  341. <li class="nav-item">
  342. <a class="nav-link" href="http://yvonnemart.com/illustration.html">Illustration</a>
  343. </li>
  344. <li class="nav-item">
  345. <a class="nav-link" href="http://yvonnemart.com/gifgenerator.html">Gif Generator</a>
  346. </li>
  347. <li class="nav-item">
  348. <a class="nav-link" href="http://yvonnemart.com/flash.html">Flash Corner</a>
  349. </li>
  350. <li class="nav-item">
  351. <a class="nav-link" href="http://yvonnemart.com/about.html">About</a>
  352. </li>
  353. </ul>
  354. </div>
  355.  
  356. </div>
  357.  
  358. </nav>
  359. </div>
  360. <div id="slideout">
  361. <label id="slideout_tab" for="showblock" title="Admin Slider">
  362. <img height="200px" src="http://yvonnemart.com/puncher/bymail.png" />
  363. </label>
  364. <div id="slideout_inner" style="color:#fff">
  365. <h3 style="margin-top:-10px;">Submit by Mail!</h3>
  366. <a style="color:#fff" href="http://yvonnemart.com/puncher"><img style="margin-top:-8px" width="180px" src="http://yvonnemart.com/punch/submit.gif" />
  367. <p><b>Click here to receive a punch card in the mail.</b></p></a>
  368. </div>
  369. </div>
  370. <div class="col-md-10">
  371. <div class="expander">
  372. <div class="success-title">Thanks !!</div>
  373. <div class="success-reload">
  374. <button onClick="window.location.reload()">Start Over</button>
  375. </div>
  376. </div>
  377.  
  378. <div class="container page-elem">
  379. <div class="row">
  380.  
  381. <div class="col-lg-5" style="margin-top:-20px">
  382. <div class="visible-xs-block visible-md-block">
  383. <div class="card-text">
  384. <h1>Punch Stream II</h1>
  385. <p class="lead">Design a punch card for me and watch me knit it live!</p>
  386. <img width="100%" src="http://yvonnemart.com/punch/paunch/sheen2.gif" />
  387. <p style="margin-top:10px;"><strong>How to do it:</strong></p>
  388. <ol>
  389. <li>Click in the grid below to make a design.</li>
  390. <li>Enter your name and email, and let me know if you want a heads up from me before your design is debuted online.</li>
  391. <li>Press submit, and then leave the rest to me!</li>
  392. </ol>
  393. <p>I will manually punch your deisgn into a physical card and then load it into my knitting machine! Your design will <a href="#" data-featherlight="https://pbs.twimg.com/media/DKiCQDkXoAA6qGC.jpg">repeat horizontally and vertically</a> in a large piece of fabric. You can tune in and watch me knit your design <strong>live on <a href="http://twitch.tv/yvonnemart">my Twitch channel</a>.</strong></p>
  394. <p>Want to work offline? <a href="http://yvonnemart.com/punch/paunch/Punchcard-Chart.jpg" target="_blank">Download a sample grid.</a></p>
  395. <p><i><strong>Note:</strong> This site is optimized for desktop computers. Landscape mode is recommended for mobile devices.</i></p>
  396. </div>
  397. </div>
  398. <div class="visible-xs-block visible-md-block" style="margin-bottom:-60px;"></div>
  399. <div id="punch-container">
  400. <div class="expander"></div>
  401. <div id="punchcard" class="card-container">
  402. <div id="form-name"></div>
  403. <div id="form-email"></div>
  404. <div id="form-stream"></div>
  405. </div>
  406. </div>
  407. </div>
  408. <div class="col-lg-5">
  409. <div class="hidden-xs hidden-md" style="margin-top:-20px;">
  410. <div class="card-text">
  411. <h1>Punch Stream II</h1>
  412. <p class="lead">Design a punch card for me and watch me knit it live!</p>
  413. <img width="100%" src="http://yvonnemart.com/portfolio/img/puncher.gif" />
  414. <p style="margin-top:10px;"><strong>How to do it:</strong></p>
  415. <ol>
  416. <li>Click in the grid to the left to make a design.</li>
  417. <li>Enter your name and email, and let me know if you want a heads up from me before your design is debuted online.</li>
  418. <li>Press submit, and then leave the rest to me!</li>
  419. </ol>
  420. <p>I will manually punch your design into a physical card and then load it into my knitting machine! Your design will <a href="#" data-featherlight="https://pbs.twimg.com/media/DKiCQDkXoAA6qGC.jpg">repeat horizontally and vertically</a> in a large piece of fabric. You can tune in and watch me knit your design <strong>live on <a href="http://twitch.tv/yvonnemart">my Twitch channel</a>.</strong></p>
  421. <p>Want to work offline? <a href="http://yvonnemart.com/punch/paunch/Punch-Template.jpg" target="_blank">Download a sample grid.</a></p>
  422. <h4>Rather do this through the mail? Sign up <a href="http://www.yvonnemart.com/punch">HERE</a>!</h4>
  423. </div>
  424. </div>
  425. <div class="visible-xs-block visible-md-block" style="height:20px;"></div>
  426. <div class="form-group">
  427. <label for="name">Name:</label>
  428. <input type="name" class="form-control" id="name">
  429. </div>
  430. <div class="form-group">
  431. <label for="email">Email address:</label>
  432. <input type="email" class="form-control" id="email">
  433. </div>
  434. <div class="checkbox">
  435. <label>
  436. <input type="checkbox" id="stream"> I want to be notified when my design is going to be streamed on Twitch!</label>
  437. </div>
  438. <button type="submit" class="btn btn-default" onclick="explode()">Submit</button>
  439. </div>
  440. </div>
  441. <div class="row">
  442. <div class="col-lg-10">
  443. <h3>Punch Stream season II gallery</h3>
  444. <p>
  445. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/chese.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/chese.JPG" /></a>
  446. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/garrett.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/garrett.JPG" /></a>
  447. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/biggum.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/biggum.JPG" /></a>
  448. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/kiptok.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/kiptok.JPG" /></a>
  449. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/dvvid.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/dvvid.JPG" /></a>
  450. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/helvetica.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/helvetica.JPG" /></a>
  451. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/jfk.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/jfk.JPG" /></a>
  452. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/clio.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/clio.JPG" /></a>
  453. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/ellis.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/ellis.JPG" /></a>
  454. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/alex.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/alex.JPG" /></a>
  455. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/sahaj.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/sahaj.JPG" /></a>
  456. <a href="#" data-featherlight="http://yvonnemart.com/puncher/img/ant.JPG"><img style="margin:5px;" width="300px" src="http://yvonnemart.com/puncher/img/ant.JPG" /></a>
  457. </p>
  458. </div>
  459. </div>
  460. <div class="row">
  461. <div class="col-lg-10">
  462. <h3>Punch Stream season I gallery</h3>
  463. <p>
  464. <a href="#" data-featherlight="https://i.imgur.com/rrLYIiz.png"><img style="margin:5px;" height="300px" src="https://i.imgur.com/rrLYIiz.png" /></a>
  465. <a href="#" data-featherlight="https://i.imgur.com/NE4xPvI.png/yvonnie_Screen%20Shot%202017-09-26%20at%2011.58.41%20AM.png"><img style="margin:5px;" height="300px" src="https://i.imgur.com/NE4xPvI.png/yvonnie_Screen%20Shot%202017-09-26%20at%2011.58.41%20AM.png" /></a>
  466. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/fred-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/fred-card.jpg" /></a>
  467. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/bucci-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/bucci-card.jpg" /></a>
  468. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/andy-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/andy-card.jpg" /></a>
  469. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/tiff-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/tiff-card.jpg" /></a>
  470. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/meli-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/meli-card.jpg" /></a>
  471. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/gorski-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/gorski-card.jpg" /></a>
  472. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/anon-butt-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/anon-butt-card.jpg" /></a>
  473. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/christina-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/christina-card.jpg" /></a>
  474. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chese-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chese-card.jpg" /></a>
  475. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/anon2-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/anon2-card.jpg" /></a>
  476. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/andrej-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/andrej-card.jpg" /></a>
  477. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/peef-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/peef-card.jpg" /></a>
  478. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/leon-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/leon-card.jpg" /></a>
  479. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rg-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rg-card.jpg" /></a>
  480. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/andy-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/andy-card2.jpg" /></a>
  481. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/paul-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/paul-card.jpg" /></a>
  482. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/tyler-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/tyler-card.jpg" /></a>
  483. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/clio-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/clio-card.jpg" /></a>
  484. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/vrunt-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/vrunt-card.jpg" /></a>
  485. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/lauren-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/lauren-card.jpg" /></a>
  486. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chese-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chese-card2.jpg" /></a>
  487. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/claire-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/claire-card.jpg" /></a>
  488. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rachel-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rachel-card.jpg" /></a>
  489. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/andrej-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/andrej-card2.jpg" /></a>
  490. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/amelia-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/amelia-card.jpg" /></a>
  491. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/tiff-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/tiff-card2.jpg" /></a>
  492. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rg-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rg-card2.jpg" /></a>
  493. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/tiff-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/tiff-card3.jpg" /></a>
  494. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/maggie-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/maggie-card.jpg" /></a>
  495. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rackem-card1.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rackem-card1.jpg" /></a>
  496. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/bucci-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/bucci-card2.jpg" /></a>
  497. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/jamie-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/jamie-card.jpg" /></a>
  498. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/anon-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/anon-card3.jpg" /></a>
  499. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chese-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chese-card3.jpg" /></a>
  500. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/jfk-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/jfk-card.jpg" /></a>
  501. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/dv-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/dv-card.jpg" /></a>
  502. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/andrej-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/andrej-card3.jpg" /></a>
  503. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/yvonne-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/yvonne-card.jpg" /></a>
  504. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/robot-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/robot-card.jpg" /></a>
  505. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rackem-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rackem-card2.jpg" /></a>
  506. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rackem-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rackem-card3.jpg" /></a>
  507. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/mom-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/mom-card.jpg" /></a>
  508. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/alex-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/alex-card.jpg" /></a>
  509. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/alex-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/alex-card2.jpg" /></a>
  510. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/james-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/james-card.jpg" /></a>
  511. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/luke-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/luke-card.jpg" /></a>
  512. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/billy-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/billy-card.jpg" /></a>
  513. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/luke-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/luke-card2.jpg" /></a>
  514. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chese-card4.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chese-card4.jpg" /></a>
  515. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/purp-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/purp-card.jpg" /></a>
  516. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/jamie-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/jamie-card2.jpg" /></a>
  517. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/anon-card4.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/anon-card4.jpg" /></a>
  518. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/fish-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/fish-card.jpg" /></a>
  519. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/jimmy-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/jimmy-card.jpg" /></a>
  520. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/hayley-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/hayley-card.jpg" /></a>
  521. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/hayley-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/hayley-card2.jpg" /></a>
  522. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/hayley-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/hayley-card3.jpg" /></a>
  523. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/john-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/john-card.jpg" /></a>
  524. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/wup-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/wup-card.jpg" /></a>
  525. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/kacie-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/kacie-card.jpg" /></a>
  526. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/anon-card5.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/anon-card5.jpg" /></a>
  527. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/joel-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/joel-card2.jpg" /></a>
  528. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/andrej-card4.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/andrej-card4.jpg" /></a>
  529. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/wife-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/wife-card.jpg" /></a>
  530. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/jake-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/jake-card.jpg" /></a>
  531. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/anon-card6.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/anon-card6.jpg" /></a>
  532. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/koreen-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/koreen-card.jpg" /></a>
  533. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rackem-card4.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rackem-card4.jpg" /></a>
  534. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rackem-card5.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rackem-card5.jpg" /></a>
  535. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/daniel-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/daniel-card.jpg" /></a>
  536. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chris-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chris-card.jpg" /></a>
  537. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/yvonne-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/yvonne-card2.jpg" /></a>
  538. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/jamie-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/jamie-card3.jpg" /></a>
  539. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/dv-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/dv-card2.jpg" /></a>
  540. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/jamie-card4.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/jamie-card4.jpg" /></a>
  541. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/amy-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/amy-card.jpg" /></a>
  542. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/justin-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/justin-card.jpg" /></a>
  543. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/pummp-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/pummp-card.jpg" /></a>
  544. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/vivian-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/vivian-card.jpg" /></a>
  545. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/matty-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/matty-card.jpg" /></a>
  546. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/tia-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/tia-card.jpg" /></a>
  547. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/plant-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/plant-card.jpg" /></a>
  548. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/scher-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/scher-card.jpg" /></a>
  549. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/laurent-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/laurent-card.jpg" /></a>
  550. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/yvonne-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/yvonne-card3.jpg" /></a>
  551. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/papa-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/papa-card.jpg" /></a>
  552. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chese-card6.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chese-card6.jpg" /></a>
  553. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/rene-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/rene-card.jpg" /></a>
  554. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/tia-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/tia-card2.jpg" /></a>
  555. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/pummp-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/pummp-card2.jpg" /></a>
  556. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/kiptok-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/kiptok-card.jpg" /></a>
  557. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/katie-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/katie-card.jpg" /></a>
  558. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/purp-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/purp-card2.jpg" /></a>
  559. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/andrew-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/andrew-card3.jpg" /></a>
  560.  
  561. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chelsea-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chelsea-card.jpg" /></a>
  562. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/griffin-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/griffin-card.jpg" /></a>
  563.  
  564. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/catalina-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/catalina-card.jpg" /></a>
  565. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/purp-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/purp-card3.jpg" /></a>
  566. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/lindsey-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/lindsey-card.jpg" /></a>
  567. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/ben-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/ben-card.jpg" /></a>
  568. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/dave-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/dave-card.jpg" /></a>
  569. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/koreen-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/koreen-card2.jpg" /></a>
  570. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/koreen-card3.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/koreen-card3.jpg" /></a>
  571. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/koreen-card4.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/koreen-card4.jpg" /></a>
  572. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/koreen-card5.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/koreen-card5.jpg" /></a>
  573. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/ashley-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/ashley-card.jpg" /></a>
  574. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/nate-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/nate-card2.jpg" /></a>
  575. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chris-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chris-card2.jpg" /></a>
  576. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/chad-card2.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/chad-card2.jpg" /></a>
  577. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/marian-card.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/marian-card.jpg" /></a>
  578. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/anon-card7.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/anon-card7.jpg" /></a>
  579. <a href="#" data-featherlight="http://yvonnemart.com/punch/paunch/yvonne-card4.jpg"><img style="margin:5px;" height="300px" src="http://yvonnemart.com/punch/paunch/yvonne-card4.jpg" /></a>
  580. </p>
  581. </div>
  582. </div>
  583. </div>
  584. </div>
  585. <div class="container">
  586. <hr>
  587. <footer>
  588. <div class="row">
  589.  
  590. <p>Copyright &copy; yvonnemart
  591. <script>
  592. document.write(new Date().getFullYear())
  593.  
  594. </script>
  595. </p>
  596.  
  597. </div>
  598. </footer>
  599. </div></div>
  600.  
  601. <script>
  602. var punches = 1440;
  603.  
  604. for (i = 0; i < punches; i++) {
  605. $('#punchcard').append('<div class="punch"></div>')
  606. }
  607.  
  608. //$(".punch").click(function() {
  609. // $(this).toggleClass("on");
  610. //});
  611.  
  612. </script>
  613. <script src="//code.jquery.com/jquery-latest.js"></script>
  614. <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
  615. <script>
  616.  
  617. let clickdown = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'mousedown';
  618. let clickup = ('ontouchstart' in document.documentElement) ? 'touchend' : 'mouseup';
  619.  
  620. let erasermode = false
  621. let ismousedown = false
  622. $(document).on(clickdown, () => {ismousedown = true})
  623. $(document).on(clickdown, ".punch", function(e) {
  624. console.log(clickdown)
  625. let target = e.target
  626. if ($(target).hasClass("on")) {
  627. erasermode = true
  628. }
  629. else {
  630. erasermode = false
  631. }
  632. $(target).toggleClass("on")
  633. });
  634. $(document).on(clickup, () => {
  635. ismousedown = false
  636. })
  637. $(document).on("mouseover", ".punch", function(e) {
  638. let target = e.target
  639. if (ismousedown) {
  640. if (erasermode) {
  641. $(target).removeClass("on")
  642. $(target).addClass("off")
  643. }
  644. else {
  645. $(target).removeClass("off")
  646. $(target).addClass("on")
  647. }
  648. }
  649. })
  650. </script>
  651. </body>
  652.  
  653. </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!