Created
March 29, 2022 22:27
-
-
Save phunksbot/139ba9efc1d2c26e80b2109005d450e4 to your computer and use it in GitHub Desktop.
CryptoPhunk viewer
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
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> --> | |
<template> | |
<div id="app"> | |
<h1>CryptoPhunk Viewer</h1> | |
<img :src="punkUrl" :style="{ background: background }" /> | |
<input v-model="number" type="number" min="0" max="9999" /> | |
<div class="background-choices"> | |
<div | |
v-for="(background, index) in backgrounds" | |
:key="index" | |
:style="{ background: background }" | |
@click="setBackground(background)" | |
class="background-choice" | |
></div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
computed: { | |
punkUrl() { | |
return `https://phunks.s3.us-east-2.amazonaws.com/images/phunk${this.punkNumber}.png`; | |
} | |
}, | |
data() { | |
return { | |
punkNumber: "000", | |
number: 0, | |
backgrounds: [ | |
"#638596", | |
"#000000", | |
"#565656", | |
"#9e9e9e", | |
"#9857B7", | |
"#FF2800", | |
"#00FF00", | |
"#E5B80B", | |
"#FFF01F", | |
"#F7F7F7", | |
"#F0A4BB", | |
"#FDAC7E", | |
"#95554F", | |
"#A64E49", | |
"#9CF6FB", | |
"#318DFD", | |
"#373e98", | |
"#16123f", | |
"#4cbfa6", | |
"#32064A", | |
"#603084", | |
"#FE019A", | |
"#FF6700", | |
"#fba92c" | |
], | |
background: "" | |
}; | |
}, | |
watch: { | |
number(newValue) { | |
setTimeout(() => { | |
if (this.number === newValue) this.view(); | |
}, 800); | |
} | |
}, | |
methods: { | |
view() { | |
if ((this.number < 0 || this.number > 9999) && this.number != "") { | |
alert("Invalid punk number."); | |
} else { | |
this.punkNumber = this.number.toString().padStart(3, "0"); | |
} | |
}, | |
setBackground(bg) { | |
this.background = bg; | |
} | |
} | |
}; | |
</script> | |
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> --> | |
<style> | |
#app { | |
font-family: Avenir, Helvetica, Arial, sans-serif; | |
text-align: center; | |
color: #2c3e50; | |
margin: 60px 0; | |
} | |
a, | |
button, | |
input { | |
color: #4fc08d; | |
} | |
button { | |
background: none; | |
border: solid 1px; | |
border-radius: 2em; | |
font: inherit; | |
padding: 0.75em 2em; | |
} | |
button:hover { | |
cursor: pointer; | |
} | |
input, | |
button { | |
display: block; | |
margin: 0 auto; | |
margin-top: 24px; | |
} | |
input { | |
height: 40px; | |
padding: 0 16px; | |
width: 600px; | |
border: 1px solid; | |
} | |
img { | |
height: 600px; | |
width: 600px; | |
image-rendering: pixelated; | |
transition: all 1500ms; | |
} | |
.background-choices { | |
display: flex; | |
margin: 0 auto; | |
margin-top: 24px; | |
justify-content: center; | |
} | |
.background-choice { | |
width: 40px; | |
height: 40px; | |
cursor: pointer; | |
margin-right: 16px; | |
border: 2px solid transparent; | |
} | |
.background-choice:hover { | |
border: 2px solid black; | |
} | |
@media only screen and (max-width: 480px) { | |
img { | |
width: 480px; | |
height: 480px; | |
} | |
input { | |
width: 480px; | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment