XPUB
/
project.xpub.nl
65
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1701cb1daa'
${ noResults }
project.xpub.nl/2019/postergenerator/index.html

454 lines
12 KiB
HTML
Raw Normal View History Unescape Escape

added postergenerator
5 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
@font-face {
font-family: 'Bandeins Strange';
src: url('BandeinsStrangeVariableGX.ttf') format("truetype-variations");
font-weight: 1 999;
}
#mainframe{
position:absolute;
top:30px;
left:30px;
bottom:30px;
right:30px;
margin:0;
padding:10px;
/*border:2px dashed #ff0066;*/
/* border:2px solid #703EC1; */
background: #B008E0; purple
-webkit-box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1);
-moz-box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1);
box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1);
}
/* input, button, textarea {
border: 2px solid rgba(0, 0, 0, 0.6);
background-image:none;
background-color: #dadad3;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 5px;} */
body{
margin:0;
padding:0;
width:100%;
height:100vh;
overflow: hidden;
/* background: #F34146;
color: #F34146; red*/
background: #F34146;
color: black;
background-image: linear-gradient(rgba(0, 0, 0, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 1) 1px, transparent 1px);
background-size: 2em 2em;
/* background-size: 30px; */
/* background-image: url('https://d7hftxdivxxvm.cloudfront.net/?resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2RNK1P0BYVrSCZEy_Sd1Ew%252F3417757448_4a6bdf36ce_o.jpg&width=1200&quality=80'); */
}
h1{
font-family:"Bandeins Strange";
font-size:8vw;
font-variation-settings:"wght" 800, "wdth" 421;
margin:0;
padding:0;
word-wrap: break-word;
margin-top: -1%;
margin-left: 0px;
line-height: 7vw;
/* -webkit-transform: rotate(-100deg) skew(0, -10deg);
-moz-transform: rotate(-100deg) skew(0, -10deg);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0); */
transform: rotate(10deg) skew(-10deg, 0deg);
color: #FFEED0;
}
h2{
font-family:"Bandeins Strange";
font-size:8vw;
font-variation-settings:"wght" 600, "wdth" 421;
margin:0;
padding:0;
}
h3{
font-family:"Bandeins Strange";
font-size:3vw;
font-variation-settings:"wght" 400, "wdth" 221;
margin:0;
padding:0;
color: #FFEED0;
}
h5{
font-family:"Bandeins Strange";
font-size:2vw;
font-variation-settings:"wght" 400, "wdth" 121;
margin:0;
padding:0;
color: #FFEED0;
}
h5{
list-style: none;
}
#fontslider{
margin-top: 10px;
z-index: 999999;
}
/*margins*/
#m1{
display:block;
position:absolute;
top: 5px;
left: 50%;
width:50px;
margin-left:-25px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
z-index: 999;
}
#m2{
display:block;
position:absolute;
top: 50%;
left: -15px;
width:50px;
margin-top:-25px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
z-index: 999;
}
#m3{
display:block;
position:absolute;
top: 50%;
right: -15px;
width:50px;
margin-top:-25px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index: 999;
}
#m4{
display:block;
position:absolute;
bottom: 5px;
left: 50%;
width:50px;
margin-left:-25px;
z-index: 999;
}
#asciibox{
display:block;
position:absolute;
bottom:15px;
right: 10px;
line-height: 13px;
}
input[type="number"]{
border: 1px solid black;
/* border: none; */
padding: 3px;
font-family:"Bandeins Strange";
background-color: lightgrey;
}
#place{
position: absolute;
right: 15px;
font-size: 20px;
top: 60%;
}
#place2{
position: absolute;
right: 15px;
font-size: 20px;
top: 65%;
}
#place3{
position: absolute;
right: 15px;
font-size: 20px;
top: 70%;
}
input[type="checkbox"] {
transform: scale(1);
margin: -1px;
}
@media only screen and (max-width: 900px) {
input[type="checkbox"]{
transform: scale(0.8);
margin: -2px;
}
#asciibox{
line-height: 12px;
}
select{
transform: scale(0.7);
margin: -50px;
}
h1{
font-size:12vw;
line-height: 10vw;
}
}
</style>
</head>
<body>
<!--margin settings dials -->
<input type="number" name="m1" id="m1" step="10" value="100">
<input type="number" name="m2" id="m2" step="10" value="100">
<input type="number" name="m3" id="m3" step="10" value="40">
<input type="number" name="m4" id="m4" step="10" value="40">
<!--div class="quantity">
<input type="number" min="1" max="9" step="1" value="1">
</div-->
<div id="mainframe">
<h1>UPSETTING SETTINGS</h1>
<input type="range" min="0" max="100" value="40" class="slider" id="fontslider">
<input type="range" min="0" max="10" value="3" class="slider" id="fontslider2">
<h3>Graduation Show, Piet Zwart Institute, <br>Experimental Publishing</h3>
<br>
<br>
<h5>
<input type="radio" name="" value="Settings" checked> Natasha Berting<br>
<input type="radio" name="" value="Settings" checked> Angeliki Diakrousi<br>
<input type="radio" name="" value="Settings" checked> Joca van der Horst<br>
<input type="radio" name="" value="Settings" checked> Alexander Roidl<br>
<input type="radio" name="" value="Settings" checked> Alice Strete<br>
<input type="radio" name="" value="Settings" checked> Zalán Szakács<br>
</h5>
<br>
<select id="place" name="selection">
<option value="1">July 12–13, 2019</option>
<option value="2">UBIK + SLASH GALLERY</option>
<option value="3">Boomgaardsstraat 69, Rotterdam</option>
</select>
<select id="place2" name="selection">
<option value="1">July 12–13, 2019</option>
<option value="2" selected>UBIK + SLASH GALLERY</option>
<option value="3">Boomgaardsstraat 69, Rotterdam</option>
</select>
<select id="place3" name="selection">
<option value="1">July 12–13, 2019</option>
<option value="2">UBIK + SLASH GALLERY</option>
<option value="3" selected>Boomgaardsstraat 69, Rotterdam</option>
</select>
<!--textarea name="message" rows="10" cols="30">
July 12–13, 2019
UBIK + SLASH GALLERY
Boomgaardsstraat 69, Rotterdam
</textarea-->
<span id="asciibox">
<input type="checkbox" name="" value="" checked id="colorchanger">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<br>
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<br>
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<br>
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<br>
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<br>
</span>
</div>
</body>
<script>
$( document ).ready(function() {
var newvalue = $("#m1").val() + "px"
$("#mainframe").css("top",newvalue)
var newvalue = $("#m2").val() + "px"
$("#mainframe").css("left",newvalue)
var newvalue = $("#m3").val() + "px"
$("#mainframe").css("right",newvalue)
var newvalue = $("#m4").val() + "px"
$("#mainframe").css("bottom",newvalue)
var newvalue = $("#fontslider").val()
$("h1").css("font-variation-settings", "'wght' 800, 'wdth' "+newvalue*10)
var newvalue = $("#fontslider2").val()
$("h1").css("transform", "rotate("+newvalue*1.3 +"deg) skew("+newvalue*-6+"deg, 0deg)")
});
$("#m1,#m2,#m3,#m4").change(function(){
var newvalue = $(this).val() + "px"
console.log(newvalue)
if($(this).attr('id') == "m1" ) $("#mainframe").css("top",newvalue)
if($(this).attr('id') == "m2" ) $("#mainframe").css("left",newvalue)
if($(this).attr('id') == "m3" ) $("#mainframe").css("right",newvalue)
if($(this).attr('id') == "m4" ) $("#mainframe").css("bottom",newvalue)
}
)
$("#fontslider").change(function(){
var newvalue = $(this).val()
$("h1").css("font-variation-settings", "'wght' 800, 'wdth' "+newvalue*10)
})
$("#fontslider2").change(function(){
var newvalue = $(this).val()
$("h1").css("transform", "rotate("+newvalue*1.3 +"deg) skew("+newvalue*-6+"deg, 0deg)")
})
$("#colorchanger").change(function(){
if($(this).is(":checked")) {
$("#mainframe").css("background","#B008E0")
$("body").css("background-color","#F34146")
$("h3,h5").css("color","#FFEED0")
$("h1").css("color","#FFEED0")
}
else{
$("#mainframe").css("background","lightgrey")
$("body").css("background-color","white")
$("h3,h5").css("color","black")
$("h1").css("color","black")
}
})
//transform: rotate(10deg) skew(-10deg, 0deg);
// jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
// jQuery('.quantity').each(function() {
// var spinner = jQuery(this),
// input = spinner.find('input[type="number"]'),
// btnUp = spinner.find('.quantity-up'),
// btnDown = spinner.find('.quantity-down'),
// min = input.attr('min'),
// max = input.attr('max');
//
// btnUp.click(function() {
// var oldValue = parseFloat(input.val());
// if (oldValue >= max) {
// var newVal = oldValue;
// } else {
// var newVal = oldValue + 1;
// }
// spinner.find("input").val(newVal);
// spinner.find("input").trigger("change");
// });
//
// btnDown.click(function() {
// var oldValue = parseFloat(input.val());
// if (oldValue <= min) {
// var newVal = oldValue;
// } else {
// var newVal = oldValue - 1;
// }
// spinner.find("input").val(newVal);
// spinner.find("input").trigger("change");
// });
//
// });
</script>
</html>