Created
March 14, 2019 04:56
-
-
Save fanfare/1e5025e9e91f5ac8d01a5a9424f37062 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Punch Stream II</title> | |
| <script src="http://wrasse.pw/~joel/tools/html2canvas.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> | |
| <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.css" type="text/css" rel="stylesheet" /> | |
| <script> | |
| (function(i, s, o, g, r, a, m) { | |
| i['GoogleAnalyticsObject'] = r; | |
| i[r] = i[r] || function() { | |
| (i[r].q = i[r].q || []).push(arguments) | |
| }, i[r].l = 1 * new Date(); | |
| a = s.createElement(o), | |
| m = s.getElementsByTagName(o)[0]; | |
| a.async = 1; | |
| a.src = g; | |
| m.parentNode.insertBefore(a, m) | |
| })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); | |
| ga('create', 'UA-16398615-1', 'auto'); | |
| ga('send', 'pageview'); | |
| </script> | |
| <script> | |
| var canvasIMG; | |
| function initUpload() { | |
| var canvas2 = document.getElementById('punchcanvas'); | |
| var xhr = new XMLHttpRequest(); | |
| var formData = new FormData(); | |
| var dataURI = canvas2.toDataURL(); | |
| var blob = dataURItoBlob(dataURI); | |
| var timename = Date.now(); | |
| var filename = timename + '.png'; | |
| formData.append(filename, blob); | |
| xhr.open('POST', 'http://wrasse.pw:3000/upload', true); | |
| xhr.onload = function(e) { | |
| console.log('success'); | |
| }; | |
| xhr.send(formData); | |
| } | |
| function dataURItoBlob(dataURI) { | |
| var byteString = atob(dataURI.split(',')[1]); | |
| var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; | |
| var ab = new ArrayBuffer(byteString.length); | |
| var dw = new DataView(ab); | |
| for (var i = 0; i < byteString.length; i++) { | |
| dw.setUint8(i, byteString.charCodeAt(i)); | |
| } | |
| return new Blob([ab], { | |
| type: mimeString | |
| }); | |
| } | |
| function explode() { | |
| $('.card-container').addClass('off'); | |
| $('.expander').addClass('on'); | |
| $('#form-name').append($('#name').val()); | |
| $('#form-email').append($('#email').val()); | |
| $('#form-stream').append($('#stream').is(":checked")); | |
| window.scrollTo(0, 0); | |
| canvasme(); | |
| } | |
| function canvasme() { | |
| html2canvas($('#punchcard'), { | |
| onrendered: function(canvas) { | |
| $('.container.page-elem').addClass('off'); | |
| canvas.id = "punchcanvas"; | |
| canvasIMG = canvas.toDataURL('image/png'); | |
| document.body.appendChild(canvas); | |
| $('.expander').addClass('on'); | |
| initUpload(); | |
| } | |
| }); | |
| } | |
| </script> | |
| <link rel="icon" href="http://yvonnemart.com/portfolio/img/ico.gif" /> | |
| <style> | |
| #form-name, | |
| #form-email, | |
| #form-stream { | |
| width: 100%; | |
| } | |
| #punchcanvas { | |
| display: none; | |
| } | |
| .card-container { | |
| border-top: 3px solid black; | |
| border-bottom: 3px solid black; | |
| border-left: 3px solid black; | |
| display: flex; | |
| flex-wrap: wrap; | |
| width: 100%; | |
| margin-top: 100px; | |
| } | |
| .card-container.off { | |
| border: 0; | |
| } | |
| .card-text { | |
| margin-top: 100px; | |
| } | |
| .punch { | |
| flex-basis: 4.16%; | |
| height: 14px; | |
| box-shadow: 0px 0px 1px #aaa; | |
| user-select: none!important | |
| } | |
| .punch:hover { | |
| background: #aaa; | |
| } | |
| .punch.on { | |
| background: #000; | |
| } | |
| .punch:nth-child(6n+3) { | |
| border-right: 3px solid #ccc; | |
| } | |
| .punch:nth-child(12n+3) { | |
| border-right: 3px solid #000; | |
| } | |
| .punch:nth-child(n+148):nth-child(-n+171) { | |
| border-top: 3px solid #ccc; | |
| } | |
| .punch:nth-child(n+292):nth-child(-n+315) { | |
| border-top: 3px solid #ccc; | |
| } | |
| .punch:nth-child(n+436):nth-child(-n+459) { | |
| border-top: 3px solid #ccc; | |
| } | |
| .punch:nth-child(n+580):nth-child(-n+603) { | |
| border-top: 3px solid #ccc; | |
| } | |
| .punch:nth-child(n+724):nth-child(-n+747) { | |
| border-top: 3px solid #000; | |
| } | |
| .punch:nth-child(n+868):nth-child(-n+891) { | |
| border-top: 3px solid #ccc; | |
| } | |
| .punch:nth-child(n+1012):nth-child(-n+1035) { | |
| border-top: 3px solid #ccc; | |
| } | |
| .punch:nth-child(n+1156):nth-child(-n+1179) { | |
| border-top: 3px solid #ccc; | |
| } | |
| .punch:nth-child(n+1300):nth-child(-n+1323) { | |
| border-top: 3px solid #ccc; | |
| } | |
| #punch-container { | |
| position: relative; | |
| } | |
| .container.page-elem.off { | |
| display: none; | |
| } | |
| .expander { | |
| display: none; | |
| opacity: 0; | |
| transition: 2s; | |
| } | |
| .expander.on { | |
| position: absolute; | |
| background: #fff; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1000; | |
| padding: 20% 0 0 0; | |
| text-align: center; | |
| display: block; | |
| opacity: 1; | |
| } | |
| .success-title { | |
| font-size: 3em; | |
| padding: 0 0 1em 0; | |
| } | |
| .success-reload button { | |
| padding: 0.6em 1.4em; | |
| font-size: 1.2em; | |
| border-radius: 0.7em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="/">Home</a> | |
| </div> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <ul class="nav navbar-nav"> | |
| <li> | |
| <a href="/about.html">About</a> | |
| </li> | |
| <li> | |
| <a href="/contact.html">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav>--> | |
| <div class="container"> | |
| <div class="col-md-2 hidden-sm hidden-xs"> | |
| <ul class="nav flex-column"> | |
| <h2>Yvonne Mart</h2> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/punch/">Punch Stream</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/textiledesign.html">Textiles</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/illustration.html">Illustration</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/gifgenerator.html">Gif Generator</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/flash.html">Flash Corner</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/about.html">About</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="hidden-md hidden-lg"> | |
| <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="/">Yvonne Mart</a> | |
| </div> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <ul class="nav navbar-nav"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/puncher/">Punch Stream</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/textiledesign.html">Textiles</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/illustration.html">Illustration</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/gifgenerator.html">Gif Generator</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/flash.html">Flash Corner</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="http://yvonnemart.com/about.html">About</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| <div class="col-md-10"> | |
| <div class="expander"> | |
| <div class="success-title">Thanks !!</div> | |
| <div class="success-reload"> | |
| <button onClick="window.location.reload()">Start Over</button> | |
| </div> | |
| </div> | |
| <div class="container page-elem"> | |
| <div class="row"> | |
| <div class="col-lg-5" style="margin-top:-20px"> | |
| <div class="visible-xs-block visible-md-block"> | |
| <div class="card-text"> | |
| <h1>Punch Stream II</h1> | |
| <p class="lead">Design a punch card for me and watch me knit it live!</p> | |
| <img width="100%" src="http://yvonnemart.com/punch/paunch/sheen2.gif" /> | |
| <p style="margin-top:10px;"><strong>How to do it:</strong></p> | |
| <ol> | |
| <li>Click in the grid below to make a design.</li> | |
| <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> | |
| <li>Press submit, and then leave the rest to me!</li> | |
| </ol> | |
| <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> | |
| <p>Want to work offline? <a href="http://yvonnemart.com/punch/paunch/Punchcard-Chart.jpg" target="_blank">Download a sample grid.</a></p> | |
| <p><i><strong>Note:</strong> This site is optimized for desktop computers. Landscape mode is recommended for mobile devices.</i></p> | |
| </div> | |
| </div> | |
| <div class="visible-xs-block visible-md-block" style="margin-bottom:-60px;"></div> | |
| <div id="punch-container"> | |
| <div class="expander"></div> | |
| <div id="punchcard" class="card-container"> | |
| <div id="form-name"></div> | |
| <div id="form-email"></div> | |
| <div id="form-stream"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-5"> | |
| <div class="hidden-xs hidden-md"> | |
| <div class="card-text"> | |
| <h1>Punch Stream II</h1> | |
| <p class="lead">Design a punch card for me and watch me knit it live!</p> | |
| <img width="100%" src="http://yvonnemart.com/portfolio/img/puncher.gif" /> | |
| <p style="margin-top:10px;"><strong>How to do it:</strong></p> | |
| <ol> | |
| <li>Click in the grid to the left to make a design.</li> | |
| <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> | |
| <li>Press submit, and then leave the rest to me!</li> | |
| </ol> | |
| <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> | |
| <p>Want to work offline? <a href="http://yvonnemart.com/punch/paunch/Punch-Template.jpg" target="_blank">Download a sample grid.</a></p> | |
| <h4>Rather do this through the mail? Sign up <a href="http://www.yvonnemart.com/punch">HERE</a>!</h4> | |
| </div> | |
| </div> | |
| <div class="visible-xs-block visible-md-block" style="height:20px;"></div> | |
| <div class="form-group"> | |
| <label for="name">Name:</label> | |
| <input type="name" class="form-control" id="name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email address:</label> | |
| <input type="email" class="form-control" id="email"> | |
| </div> | |
| <div class="checkbox"> | |
| <label> | |
| <input type="checkbox" id="stream"> I want to be notified when my design is going to be streamed on Twitch!</label> | |
| </div> | |
| <button type="submit" class="btn btn-default" onclick="explode()">Submit</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-lg-10"> | |
| <h3>Punch Stream season I gallery</h3> | |
| <p> | |
| <a href="#" data-featherlight="https://i.imgur.com/rrLYIiz.png"><img style="margin:5px;" height="300px" src="https://i.imgur.com/rrLYIiz.png" /></a> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <hr> | |
| <footer> | |
| <div class="row"> | |
| <div class="col-lg-12"> | |
| <p>Copyright © yvonnemart | |
| <script> | |
| document.write(new Date().getFullYear()) | |
| </script> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div></div> | |
| <script> | |
| var punches = 1440; | |
| for (i = 0; i < punches; i++) { | |
| $('#punchcard').append('<div class="punch"></div>') | |
| } | |
| //$(".punch").click(function() { | |
| // $(this).toggleClass("on"); | |
| //}); | |
| </script> | |
| <script src="//code.jquery.com/jquery-latest.js"></script> | |
| <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script> | |
| let ismousedown = false | |
| $(document).on("mousedown", () => {ismousedown = true}) | |
| $(document).on("mouseup", () => {ismousedown = false}) | |
| $(".punch").on("mouseover", function() { | |
| if (ismousedown) { | |
| $(this).addClass("on") | |
| } | |
| }); | |
| $(".punch").on("mousedown", function() { | |
| $(this).toggleClass("on") | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment