344 lines
No EOL
10 KiB
HTML
344 lines
No EOL
10 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=.75, maximum-scale=.75, width=device-width">
|
|
<!-- Primary Meta Tags -->
|
|
<title>Elizabeth Warren Meme Generator</title>
|
|
<meta name="title" content="Elizabeth Warren Meme Generator">
|
|
<meta name="description" content="Pander to everyone with the click of a button!">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://warren.wearvol.com/">
|
|
<meta property="og:title" content="Elizabeth Warren Meme Generator">
|
|
<meta property="og:description" content="Pander to everyone with the click of a button!">
|
|
<meta property="og:image" content="https://warren.wearvol.com/social.png">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://warren.wearvol.com/">
|
|
<meta property="twitter:title" content="Elizabeth Warren Meme Generator">
|
|
<meta property="twitter:description" content="Pander to everyone with the click of a button!">
|
|
<meta property="twitter:image" content="https://warren.wearvol.com/social.png">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section>
|
|
<div id="dom">
|
|
<div id="content"></div>
|
|
<div class="tag">@wearvol</div>
|
|
</div>
|
|
</section>
|
|
<div id="img"></div>
|
|
<button id="click"><div>hit me again</div><div class='icon'></div></button>
|
|
<a href="https://wearvol.com">(or buy a t-shirt)</a></main>
|
|
<script src="https://unpkg.com/dom-to-image@2.6.0/src/dom-to-image.js"></script><script>
|
|
|
|
let domElement = document.getElementById('dom');
|
|
let contentElement = document.getElementById('content');
|
|
let buttonElement = document.getElementById('click');
|
|
let imageElement = document.getElementById('img');
|
|
|
|
let adjectives = [
|
|
'Chinese',
|
|
'Mexican',
|
|
'African American',
|
|
'Black',
|
|
'Brown',
|
|
'Mongolian',
|
|
'Turkish',
|
|
'Peruvian',
|
|
'Australian',
|
|
'Jewish',
|
|
'Muslim',
|
|
'Dutch',
|
|
'Morroccan',
|
|
'Nigerian',
|
|
'Spanish',
|
|
'Hispanic',
|
|
'Latina',
|
|
'Latino',
|
|
'Latinx',
|
|
'Differently-Abled',
|
|
'lower class',
|
|
'working class',
|
|
'Persian',
|
|
'Bolivian',
|
|
'Puerto Rican',
|
|
'Asian American',
|
|
'Pakistani',
|
|
'Iraqi',
|
|
'Czech',
|
|
'Eskimo',
|
|
'Cherokee',
|
|
'Apache',
|
|
'Navajo',
|
|
'Cheyenne Indian',
|
|
'Dakota Sioux',
|
|
'Aboriginal',
|
|
'Dominican'
|
|
];
|
|
let locations = [
|
|
'in West Philadelphia',
|
|
'in South Boston',
|
|
'in Podunk, Iowa',
|
|
'in a NYC soup kitchen',
|
|
'in Slumdog Millionaire',
|
|
'in Anacostia',
|
|
'handcuffed to a radiator',
|
|
'in South Detroit',
|
|
'in the hood',
|
|
'in the bario',
|
|
'in the projects',
|
|
'on the New Jersey Turnpike',
|
|
'in a van down by the river',
|
|
'in the basement of a Hooters',
|
|
'in Paterson, NJ',
|
|
'on the mean streets',
|
|
'in Harlem',
|
|
'in Spanish Harlem',
|
|
'on the wrong side of the tracks',
|
|
'in the Bronx',
|
|
'in Hells Kitchen',
|
|
'on a dirt farm',
|
|
'in a mud hut',
|
|
'in the backwoods of Georgia',
|
|
'under an overpass',
|
|
'in the hills of Tennessee'
|
|
];
|
|
let genders = [
|
|
'Boy',
|
|
'Grrl',
|
|
'Man',
|
|
'Boy',
|
|
'Androgynous',
|
|
'Bi-gender',
|
|
'Gender Fluid',
|
|
'Gender Nonconforming',
|
|
'Genderqueer',
|
|
'Intersex',
|
|
'Non-binary',
|
|
'Pangender',
|
|
'Trans Man',
|
|
'Trans Person',
|
|
'Trans Woman',
|
|
'Transfeminine',
|
|
'Transgender',
|
|
'Transmasculine',
|
|
'Two-Spirit',
|
|
'Benjamin Button',
|
|
'Old Chinese Dude',
|
|
'Otherkin',
|
|
'Dragonkin',
|
|
'Reptilian',
|
|
'Attack Helicopter',
|
|
'Lady-boy',
|
|
'Crack baby',
|
|
'Drag Queen',
|
|
];
|
|
let otherAdjectives = [
|
|
'as Tiny Tim',
|
|
'as Little Orphan Annie',
|
|
'with crippling dylexia',
|
|
'with crippling lupus',
|
|
'with crippling diptheria',
|
|
'with polio',
|
|
'with Super-AIDS',
|
|
'with cat scratch fever',
|
|
'as a sex worker',
|
|
'as a subsistance farmer',
|
|
'as a member of the Proletariat',
|
|
'with sickle cell anemia',
|
|
'with feline leukemia',
|
|
'as a meth addict',
|
|
'as a nyquil addict',
|
|
'on speed and cough syrup',
|
|
'on DMT',
|
|
'with blood in my stool',
|
|
'on smack',
|
|
'with coronavirus',
|
|
'with SIDS'
|
|
];
|
|
|
|
function getFirstAdj(){
|
|
|
|
var combo = adjectives.concat(otherAdjectives);
|
|
|
|
var index = Math.floor(Math.random()*combo.length);
|
|
return combo[index];
|
|
|
|
}
|
|
|
|
function getLocation(){
|
|
|
|
var index = Math.floor(Math.random()*locations.length);
|
|
return locations[index];
|
|
|
|
}
|
|
|
|
function getSecondAdj(){
|
|
|
|
var index = Math.floor(Math.random()*adjectives.length);
|
|
var adjective = adjectives[index];
|
|
var article = ['a','e','i','o','u'].includes(adjective.toLowerCase().charAt(0)) ? 'an' : 'a';
|
|
return article + ' ' + adjective;
|
|
|
|
}
|
|
|
|
function getThirdAdjective(){
|
|
|
|
var index = Math.floor(Math.random()*adjectives.length);
|
|
return adjectives[index];
|
|
|
|
}
|
|
function getGender(){
|
|
|
|
var index = Math.floor(Math.random()*genders.length);
|
|
return genders[index];
|
|
|
|
}
|
|
|
|
function generateText(){
|
|
|
|
var text = "Growing up " + getFirstAdj() + " " + getLocation() + ", I struggled as " + getSecondAdj() + " " + getThirdAdjective() + " " + getGender() + ".";
|
|
return text;
|
|
|
|
}
|
|
|
|
function generateDom(){
|
|
|
|
contentElement.innerHTML = generateText();
|
|
var imageNumber = Math.ceil(Math.random()*15);
|
|
domElement.style.backgroundImage = "url('"+imageNumber+".jpg'";
|
|
generateImage();
|
|
|
|
}
|
|
|
|
buttonElement.onclick = function() {generateDom()};
|
|
|
|
function generateImage(){
|
|
|
|
domtoimage.toPng(domElement)
|
|
.then(function (dataUrl) {
|
|
var img = new Image();
|
|
img.src = dataUrl;
|
|
imageElement.innerHTML = '';
|
|
imageElement.appendChild(img);
|
|
})
|
|
.catch(function (error) {
|
|
console.error('oops, something went wrong!', error);
|
|
});
|
|
|
|
};
|
|
|
|
function docReady(fn) {
|
|
// see if DOM is already available
|
|
if (document.readyState === "complete" || document.readyState === "interactive") {
|
|
// call on next available tick
|
|
setTimeout(fn, 1);
|
|
} else {
|
|
document.addEventListener("DOMContentLoaded", fn);
|
|
}
|
|
}
|
|
Usage:
|
|
|
|
docReady(function() {
|
|
generateDom();
|
|
});
|
|
|
|
</script>
|
|
<style type="text/css">@font-face{
|
|
font-family: 'Bebas';
|
|
src: url('Bebas.woff') format('woff');
|
|
}
|
|
main{
|
|
text-align: center;
|
|
}
|
|
section{
|
|
position: fixed;
|
|
top:-5000px;
|
|
}
|
|
#dom{
|
|
width:500px;
|
|
height: 500px;
|
|
position: relative;
|
|
background-size:cover;
|
|
background-repeat: no-repeat;
|
|
background-position-x: center;
|
|
background-position-y: bottom;
|
|
}
|
|
#content{
|
|
font-family: 'Bebas';
|
|
position: absolute;
|
|
left:20px;
|
|
right:20px;
|
|
bottom:20px;
|
|
text-align:center;
|
|
color:white;
|
|
font-size: 38px;
|
|
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
|
|
letter-spacing: -3px;
|
|
word-spacing: 20px;
|
|
line-height: 1.1;
|
|
}
|
|
.tag{
|
|
font-family: sans-serif;
|
|
position: absolute;
|
|
right:6px;
|
|
bottom:6px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color:rgba(255,255,255,.85);
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
|
|
}
|
|
#img{
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
button{
|
|
margin-top:20px;
|
|
width:500px;
|
|
border:0;
|
|
outline: 0;
|
|
background:#ddd;
|
|
font-family: sans-serif;
|
|
font-size: 50px;
|
|
padding:15px;
|
|
color:white;
|
|
text-transform: uppercase;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all .3s;
|
|
}
|
|
button:hover{
|
|
background-color: gold;
|
|
}
|
|
button:active{
|
|
background-color: red;
|
|
}
|
|
button:hover .icon{
|
|
|
|
animation: spin .3s linear 1;
|
|
}
|
|
a{
|
|
display:block;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotateZ(0deg) rotateY(180deg);
|
|
}
|
|
100% {
|
|
transform: rotateZ(180deg) rotateY(180deg);
|
|
}
|
|
}
|
|
button .icon{
|
|
background-image: url('1F504.svg');
|
|
background-repeat: no-repeat;
|
|
height:50px;
|
|
width:50px;
|
|
display: inline-block;
|
|
transform: rotateY(180deg);
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |