89 lines
3.1 KiB
HTML
89 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<!-- libraries -->
|
|
<link type="text/css" rel="stylesheet" href="./lib/tachyons-4.9.1.min.css" />
|
|
<link type="text/css" rel="stylesheet" href="./lib/colors-2.2.0.min.css" />
|
|
<link type="text/css" rel="stylesheet" href="./lib/loading-animation.css" />
|
|
<script type="text/javascript" src="./lib/jquery-3.2.1.min.js"></script>
|
|
<script type="text/javascript" src="./lib/paper-full-v0.11.5.min.js"></script>
|
|
<script type="text/javascript" src="./lib/Tone-reserved.min.js"></script>
|
|
<script type="text/javascript" src="./lib/p5.min-v0.6.1.js"></script>
|
|
<script type="text/javascript" src="./lib/p5.sound.min-v0.3.7.js"></script>
|
|
<script type="text/javascript" src="./lib/socket.io-v2.1.1.slim.js"></script>
|
|
<script type="text/javascript" src="./lib/hammer-v2.0.8.min.js"></script>
|
|
<script type="text/javascript" src="./lib/lodash-full-v4.17.10.min.js"></script>
|
|
<script type="text/javascript" src="./lib/util.js"></script>
|
|
<!-- code -->
|
|
<script type="text/paperscript" src="./index.js" canvas="screen"></script>
|
|
<style>
|
|
canvas {
|
|
/* eliminating the gap between 2 canvases --> https://stackoverflow.com/a/8600771 */
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
/* https://stackoverflow.com/a/47709903 */
|
|
/* overscroll-behavior: contain; */
|
|
}
|
|
|
|
body {
|
|
/* https://stackoverflow.com/a/41480220 */
|
|
/* https://github.com/hammerjs/hammer.js/issues/1050#issuecomment-267595556 */
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
/* touch-action: none !important; */
|
|
}
|
|
|
|
canvas#screen {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
/* buttermilk */
|
|
background-color: #3333ff;
|
|
}
|
|
|
|
.objstring {
|
|
position: fixed;
|
|
top: 2.5em;
|
|
left: 4em;
|
|
/* non-clickable element (pass-through) */
|
|
pointer-events:none;
|
|
}
|
|
|
|
/* #objstring {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
hyphens: none;
|
|
} */
|
|
</style>
|
|
</head>
|
|
|
|
<body class="">
|
|
<!-- full page layout : page loading screen -->
|
|
<div class="vh-100 w-100 absolute top-0 left-0 bg-light-blue" id="page-loading" style="z-index:2">
|
|
<div class="cf w-100 top-0">
|
|
<div class="dt vh-100 w-100 absolute top-0 left-0 animationStripes">
|
|
<div class="dtc v-mid tc white monaco">
|
|
<h1 class="f3 f1-ns">
|
|
Loading..........!?
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="screen" resize style="z-index:0"></canvas>
|
|
<div id="objstring1" class="objstring fw7 courier f3 white" style="z-index:1">들리는 상처들의 믹스</div>
|
|
<div id="objstring3" class="objstring fw7 courier f3 white" style="z-index:-1">연결 확인</div>
|
|
<div id="objstring4" class="objstring fw7 courier f3 white" style="z-index:-1">믹스</div>
|
|
</body>
|
|
|
|
</html>
|