|
|
<!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>
|