forked from varia/web-narrowcast
Upload files to ''
This commit is contained in:
parent
f7e648c3c6
commit
47761e6823
BIN
cmunci.eot
Normal file
BIN
cmunci.eot
Normal file
Binary file not shown.
BIN
cmunci.ttf
Normal file
BIN
cmunci.ttf
Normal file
Binary file not shown.
BIN
cmunci.woff
Normal file
BIN
cmunci.woff
Normal file
Binary file not shown.
154
narrowcast-playground.html
Normal file
154
narrowcast-playground.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>NARROWCAST</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="about"><a>back<span> ↗</span><br>↬ stage </a></div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidetop">
|
||||
<a href="">Event Last not Least</a>
|
||||
<a href="">Event Date Before Last</a>
|
||||
<a href="">Event Date Later Later</a>
|
||||
<a href="">Event Date Later</a>
|
||||
<a href="">Event Date Day After</a>
|
||||
<a href="">Event Date Tomorrow</a>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<p>⇈ Will be awesome ↟ </p>
|
||||
<p id="livetitle">LIVE ↝ N↻W ⇶ </p>
|
||||
<p>⇊ Was amazing ↷ </p>
|
||||
</div>
|
||||
<div class="sidebottom">
|
||||
<a href="">Event 000020</a>
|
||||
<a href="">Event 000019</a>
|
||||
<a href="">Event 000018</a>
|
||||
<a href="">Event 000017</a>
|
||||
<a href="">Event 000016</a>
|
||||
<a href="">Event 000015</a>
|
||||
<a href="">Event 000014</a>
|
||||
<a href="">Event 000013</a>
|
||||
<a href="">Event 000012</a>
|
||||
<a href="">Event 000011</a>
|
||||
<a href="">Event 000010</a>
|
||||
<a href="">Event 000009</a>
|
||||
<a href="">Event 000008</a>
|
||||
<a href="">Event 000007</a>
|
||||
<a href="">Event 000006</a>
|
||||
<a href="">Event 000005</a>
|
||||
<a href="">Event 000004</a>
|
||||
<a href="">Event 000003</a>
|
||||
<a href="">Event 000002</a>
|
||||
<a href="">Event 000001</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="live">
|
||||
<video class="resize-drag" autoplay="" loop="">
|
||||
<!-- <source src="https://commons.wikimedia.org/wiki/File:Clear_to_cloudy_hot_Jupiters_(heic1524a).webm"
|
||||
type="video/webm"> type="video/mp4" -->
|
||||
<source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
|
||||
type="video/mp4">
|
||||
</video>
|
||||
|
||||
<iframe class="resize-drag" src="https://archive.org/embed/VJ_Mission_Boundary_Issues" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
|
||||
|
||||
<iframe class="resize-drag" src="https://etherdump.vvvvvvaria.org/"></iframe>
|
||||
|
||||
<audio controls loop="" class="resize-drag" src="https://ia803201.us.archive.org/31/items/md_music_ecco_the_dolphin/08%20-%20Island%20Zone%20-%20Andr%C3%A1s%20Magyari%2C%20Spencer%20Nilsen%2C%20Brian%20Coburn.mp3" type="audio/mp3"></audio>
|
||||
</div>
|
||||
|
||||
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
|
||||
<!-- also found this other options:
|
||||
https://www.webcomponents.org/element/jifalops/drag-resize
|
||||
https://codepen.io/zz85/pen/gbOoVP -->
|
||||
|
||||
<script type="text/javascript">
|
||||
interact('.resize-drag')
|
||||
.resizable({
|
||||
// resize from all edges and corners
|
||||
edges: { left: true, right: true, bottom: true, top: true },
|
||||
|
||||
listeners: {
|
||||
move (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0)
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0)
|
||||
|
||||
// update the element's style
|
||||
target.style.width = event.rect.width + 'px'
|
||||
target.style.height = event.rect.height + 'px'
|
||||
|
||||
// translate when resizing from top or left edges
|
||||
x += event.deltaRect.left
|
||||
y += event.deltaRect.top
|
||||
|
||||
target.style.webkitTransform = target.style.transform =
|
||||
'translate(' + x + 'px,' + y + 'px)'
|
||||
|
||||
target.setAttribute('data-x', x)
|
||||
target.setAttribute('data-y', y)
|
||||
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
|
||||
}
|
||||
},
|
||||
modifiers: [
|
||||
// keep the edges inside the parent
|
||||
interact.modifiers.restrictEdges({
|
||||
outer: 'parent'
|
||||
}),
|
||||
|
||||
// minimum size
|
||||
interact.modifiers.restrictSize({
|
||||
min: { width: 100, height: 50 }
|
||||
})
|
||||
],
|
||||
|
||||
inertia: true
|
||||
})
|
||||
.draggable({
|
||||
listeners: { move: window.dragMoveListener },
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
// keep the dragged position in the data-x/data-y attributes
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
|
||||
// translate the element
|
||||
target.style.webkitTransform =
|
||||
target.style.transform =
|
||||
'translate(' + x + 'px, ' + y + 'px)'
|
||||
|
||||
// update the posiion attributes
|
||||
target.setAttribute('data-x', x)
|
||||
target.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
reset.onclick = () => location.reload()
|
||||
|
||||
window.onunload = () => {
|
||||
interact.debug().interactables.list.filter(i => {
|
||||
try {
|
||||
return document.contains(i.context())
|
||||
} catch (e) {}
|
||||
}).forEach(i => i.unset())
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
155
narrowstyle.css
Normal file
155
narrowstyle.css
Normal file
@ -0,0 +1,155 @@
|
||||
@font-face {
|
||||
font-family: 'Computer Modern Classical Serif Italic';
|
||||
src: url('ClassicalSerifItalic/cmunci.eot');
|
||||
src: url('ClassicalSerifItalic/cmunci.eot?#iefix') format('embedded-opentype'),
|
||||
url('ClassicalSerifItalic/cmunci.woff') format('woff'),
|
||||
url('ClassicalSerifItalic/cmunci.ttf') format('truetype'),
|
||||
url('ClassicalSerifItalic/cmunci.svg#cmunci') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Computer Modern Typewriter Light';
|
||||
src: url('TypewriterLight/cmunbtl.eot');
|
||||
src: url('TypewriterLight/cmunbtl.eot?#iefix') format('embedded-opentype'),
|
||||
url('TypewriterLight/cmunbtl.woff') format('woff'),
|
||||
url('TypewriterLight/cmunbtl.ttf') format('truetype'),
|
||||
url('TypewriterLight/cmunbtl.svg#cmuntt') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Computer Modern Typewriter Light';
|
||||
src: url('TypewriterLight/cmunbto.eot');
|
||||
src: url('TypewriterLight/cmunbto.eot?#iefix') format('embedded-opentype'),
|
||||
url('TypewriterLight/cmunbto.woff') format('woff'),
|
||||
url('TypewriterLight/cmunbto.ttf') format('truetype'),
|
||||
url('TypewriterLight/cmunbto.svg#cmunbto') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
font-size: 14pt;
|
||||
line-height: 16pt;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
-webkit-box-sizing: inherit;
|
||||
-moz-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
body{
|
||||
margin: 0rem;
|
||||
font-family: 'Computer Modern Typewriter Light';
|
||||
background-color: #393c56;
|
||||
color: #ffe4fd;;
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.about {
|
||||
font-family: 'Computer Modern Classical Serif Italic';
|
||||
font-size: 1.6rem;
|
||||
line-height: 0.6rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 1rem;
|
||||
color: #ffffe5;
|
||||
}
|
||||
.about a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 0.2rem -0.2rem 1rem #ffe4fd;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.sidetop, .sidebottom {
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
-ms-overflow-style: none;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
overflow: -ms-autohiding-scrollbar;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidetop {
|
||||
height: 45vh;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.sidetop a {
|
||||
color: #ffe4fd;
|
||||
margin-top: auto;
|
||||
}
|
||||
.middle {
|
||||
height: 10vh;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.middle p{
|
||||
margin: 0px;
|
||||
}
|
||||
#livetitle {
|
||||
font-size: 2rem;
|
||||
animation: glow 1.6s infinite alternate;
|
||||
-webkit-animation: glow 1.6s infinite alternate;
|
||||
}
|
||||
@-webkit-keyframes glow {
|
||||
to {
|
||||
text-shadow: 0 0 8px #ff029c;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes glowbutton {
|
||||
to {
|
||||
box-shadow: 0 0 8px #ff029c;
|
||||
}
|
||||
}
|
||||
.sidebottom {
|
||||
height: 45vh;
|
||||
}
|
||||
.sidebottom a {
|
||||
color: #aec7ea;
|
||||
}
|
||||
.live {
|
||||
margin-left: 300px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.live > *{
|
||||
/* touch-action: none;*/
|
||||
}
|
||||
|
||||
.resize-drag {
|
||||
width: 620px;
|
||||
border-radius: 2rem 0.2rem 2rem 0.6rem;
|
||||
padding: 2rem 0.4rem 0.4rem 2rem;
|
||||
margin: 1rem;
|
||||
touch-action: none;
|
||||
/* This makes things *much* easier */
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd;
|
||||
}
|
||||
.resize-drag::before {
|
||||
content: "◉ ➫ drag";
|
||||
font-size: 2rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: #ff029c;
|
||||
background-color: #ff029c;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user