Skip to content

Instantly share code, notes, and snippets.

@fanfare

fanfare/gist:1e5025e9e91f5ac8d01a5a9424f37062

Created March 14, 2019 04:56
Show Gist options
  • Save fanfare/1e5025e9e91f5ac8d01a5a9424f37062 to your computer and use it in GitHub Desktop.
Save fanfare/1e5025e9e91f5ac8d01a5a9424f37062 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!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 &copy; 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