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.
137 lines
5.2 KiB
HTML
137 lines
5.2 KiB
HTML
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Wor(l)ds for the Future</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="scripts/plain-draggable.min.js"></script>
|
|
<script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
|
|
<script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<!-- <map name="image-map">
|
|
<area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
|
|
<area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
|
|
<area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
|
|
</map> -->
|
|
|
|
|
|
<div id="container">
|
|
|
|
<p id="atata">Atata</p><p id="symbolA">A</p><br><br><br>
|
|
|
|
<p id="Liquid">Liquid</p><p id="symbolL">L</p><br><br><br>
|
|
|
|
<p id="Otherness">Otherness<p id="symbolO">O</p><br><br><br>
|
|
|
|
<p id="Eco">Eco-Swaraj<p id="symbolE">E</p><br><br><br>
|
|
|
|
<p id="M">!?<p id="symbolM">M</p><br><br><br>
|
|
|
|
<p id="Tense">Tense<p id="symbolT">T</p><br><br><br>
|
|
|
|
<p id="Hope">Hope<p id="symbolH">H</p><br><br><br>
|
|
|
|
<p id="Practical">Practical Vision<p id="symbolP">P</p><br><br><br>
|
|
|
|
<p id="Resurgence1">Resurgence<p id="symbolR">R</p><br><br><br>
|
|
|
|
<p id="Undecidability">Undecidability<p id="symbolU">U</p><br><br><br><br>
|
|
|
|
|
|
|
|
|
|
<!--<img id="Resurgence" src="grab.png"><br><br>
|
|
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png"><br><br>
|
|
<br><br>
|
|
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png"><br><br>
|
|
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png"><br><br>
|
|
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png"><br><br>-->
|
|
|
|
</div>
|
|
|
|
|
|
<div class="intro">
|
|
<p>
|
|
<button class="enter"><b>ENTER</b></button>
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<button class="about" onclick=""><b>About</b></button>
|
|
|
|
<div class="container">
|
|
<b><span class="close">
|
|
<button id="close"> ×</button>
|
|
</span>WOR(L)DS FOR A FUTURE</b>
|
|
<p>is a re-publishing project compiled by the first year students and mentoring team of the Master programme Experimental Publishing (XPUB) of the Piet Zwart Institute, Willem de Kooning Academy, as part of the Special Issue project #13.<br><br> The project aims to explore the re-publishing of the publication series Words for the Future through the students' discursive and artistic responses to the original collection. In the process, attention is given to make the content publicly accessible and usable both online and offline.</p>
|
|
</div>
|
|
|
|
<button class="colophon"><b>Colophon</b></button><br>
|
|
|
|
<div class="container2"><span class="close2"><button id="close"> ×</button></span>THIS IS THE COLOPHON</div>
|
|
|
|
<button class="licenses" onclick=""><b>Licenses</b></button>
|
|
|
|
<div class="container3"><span class="close3"><button id="close"> ×</button></span>THIS IS THE LICENSES</div>
|
|
|
|
|
|
<div class="palette">
|
|
|
|
<input type="color" id="color"/>
|
|
<label for="color"><span>Color Stroke</span></label>
|
|
<br>
|
|
<input type="number" id="weight" min="2" max="200" value="3"/>
|
|
<label for="weight">Stroke</label>
|
|
<br>
|
|
<input type="color" id="colorFill"/>
|
|
<label for="color">Color Fill</label>
|
|
<br>
|
|
|
|
|
|
<input type="checkbox" id="fill" name="fill" value="fill">
|
|
<label for="fill">Fill Shape</label>
|
|
<br>
|
|
<input type="checkbox" id="lines" name="lines" value="lines">
|
|
<label for="lines">Lines</label>
|
|
<br>
|
|
<input type="checkbox" id="dots" name="dots" value="dots">
|
|
<label for="dots"><span>Dots</span></label>
|
|
<br>
|
|
<input type="checkbox" id="rects" name="rects" value="rects">
|
|
<label for="rects">Rectangles</label>
|
|
<br>
|
|
<input type="number" id="fontSize" min="10" max="200" value="20"/>
|
|
<label for="fontSize">Font Size</label>
|
|
<br>
|
|
<input placeholder="Text Here" type="text" id="inn" name="inn">
|
|
<button id="clear" onclick="ClearData()">Clear</button>
|
|
<br>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="scripts/script.js"></script>
|
|
<script src="scripts/sketch.js"></script>
|
|
<script src="scripts/dragdrop.js"></script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|