291 lines
9.5 KiB
HTML
291 lines
9.5 KiB
HTML
|
<!doctype HTML>
|
||
|
|
<head>
|
||
|
|
<title>Rendezvous | Linky IO</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<link rel="icon" type="image/png" href="/rendezvous-icon.png" />
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
video {
|
||
|
|
display: block;
|
||
|
|
xopacity: 0.3;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
xborder-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview video {transform: rotateY(180deg);}
|
||
|
|
|
||
|
|
.display .video-wrapper {
|
||
|
|
xbackground: rgba(0,0,0,0.97);
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
xpadding: 3px;
|
||
|
|
xborder-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display .status-prompt {
|
||
|
|
font-size: 18px;
|
||
|
|
display: grid; justify-content: center; opacity: 0.65;
|
||
|
|
grid-row-gap: 25px;
|
||
|
|
justify-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display .status-prompt svg {height: 22px; animation: rotate 7s infinite; animation-timing-function: linear;}
|
||
|
|
|
||
|
|
|
||
|
|
.display .text-log {
|
||
|
|
margin-left: 25px;
|
||
|
|
filter: drop-shadow(0.5px 0.5px 0.75px #000000aa);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
body.has-peer-video .display .text-log {
|
||
|
|
position: absolute; z-index: 900; top:150px; left:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-log .from-me {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display .text-log .item {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.display .text-log .item .meta {
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: bold;
|
||
|
|
opacity: 0.53;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg)
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.preview .video-wrapper {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: solid 2px rgba(0,0,0,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
body .video-wrapper-4 {
|
||
|
|
max-width: 25vw;
|
||
|
|
max-height: 25vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
body .video-wrapper-8 {
|
||
|
|
max-width: 12.5vw;
|
||
|
|
max-height: 12.5vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 25px;
|
||
|
|
right: 25px;
|
||
|
|
width: 15vw;
|
||
|
|
height: 15vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
height: 24px;
|
||
|
|
filter: drop-shadow(0.5px 0.5px 1.25px #00000077);
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {position: fixed; bottom: 0; left: 0; right: 0;}
|
||
|
|
footer .status {padding: 5px; display:flex; justify-content: center; column-gap:5px; font-size: 12px; align-items: center;}
|
||
|
|
footer .status svg {height: 16px;}
|
||
|
|
|
||
|
|
footer .input {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-left: 50px;
|
||
|
|
margin-right: 50px;
|
||
|
|
margin-bottom: 7px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
footer .input input {background: none; outline: none; border: none; color: #fafafaEE; font-size: 16px; width: 100%;
|
||
|
|
|
||
|
|
filter: drop-shadow(0.5px 0.5px 1.00px #000000CC);
|
||
|
|
}
|
||
|
|
|
||
|
|
header .display .peers .x, header .display .peers .peer-count { /* or? */
|
||
|
|
filter: drop-shadow(0.5px 0.5px 1.25px #00000077);
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font: normal 16px arial;
|
||
|
|
background-color: #7c156b;
|
||
|
|
color: #d5d5d5;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
body:not(.has-peers) {background-color: #37062f;}
|
||
|
|
|
||
|
|
|
||
|
|
header {
|
||
|
|
position: relative;
|
||
|
|
padding: 15px;
|
||
|
|
z-index: 100;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr auto;
|
||
|
|
opacity: 0.95;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header .input {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header .button.highlight-me {
|
||
|
|
border-bottom: solid 3px #cccccc33;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.cam-on header .cam.button {border-bottom-color: #ccccccCC;}
|
||
|
|
body.mic-on header .mic.button {border-bottom-color: #ccccccCC;}
|
||
|
|
|
||
|
|
body.cam-on header .mic.button {border-bottom-color: #cccccc00;}
|
||
|
|
body.mic-on header .cam.button {border-bottom-color: #cccccc00;}
|
||
|
|
|
||
|
|
body > .display {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px; right:0px; bottom:0px; left: 0px;
|
||
|
|
xborder: solid 3px yellow;
|
||
|
|
xbackground: #333;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
xjustg: 23;
|
||
|
|
align-content: center;
|
||
|
|
xflex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body > .display > * {
|
||
|
|
flex-grow: 1;
|
||
|
|
xflex-shrink: 1;
|
||
|
|
xmin-height: 0;
|
||
|
|
xmin-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log {display: none;}
|
||
|
|
|
||
|
|
.button {cursor: pointer;}
|
||
|
|
|
||
|
|
|
||
|
|
.hide-always {display: none;}
|
||
|
|
|
||
|
|
body.has-interacted .hide-when-interacted {display: none;}
|
||
|
|
body.is-muted .hide-when-muted {display: none;}
|
||
|
|
body:not(.is-muted) .hide-when-not-muted {display: none;}
|
||
|
|
|
||
|
|
body:not(.wakelock-active) .hide-when-not-wakelock-active {display: none;}
|
||
|
|
|
||
|
|
body:not(.wakelock-not-supported) .hide-when-wakelock-is-supported {display: none;}
|
||
|
|
|
||
|
|
body.audio-is-live .hide-when-mic-is-on {display: none;}
|
||
|
|
body:not(.audio-is-live) .hide-when-mic-is-off {display: none;}
|
||
|
|
|
||
|
|
body.video-is-live .hide-when-cam-is-on {display: none;}
|
||
|
|
body:not(.video-is-live) .hide-when-cam-is-off {display: none;}
|
||
|
|
|
||
|
|
body.has-peers .hide-if-has-peers {display: none;}
|
||
|
|
body:not(.has-peers) .hide-if-has-no-peers {display: none;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class='is-muted'>
|
||
|
|
<header>
|
||
|
|
|
||
|
|
<div class='input'>
|
||
|
|
<div class='mic button highlight-me'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic hide-when-mic-is-off"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic-off hide-when-mic-is-on"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class='cam button highlight-me'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video hide-when-cam-is-off"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
|
||
|
|
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video-off hide-when-cam-is-on"><path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class='display'>
|
||
|
|
<div class='peers button'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> <span class='x'>x</span> <span class='peer-count'>1</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</header>
|
||
|
|
<main class='display'>
|
||
|
|
<div class='debug' style='xwhite-space: pre; width:100vw; display: none;'></div>
|
||
|
|
<div class='text-log hide-if-has-no-peers'></div>
|
||
|
|
<div class='status-prompt hide-if-has-peers'>
|
||
|
|
<!-- Waiting for others --><!-- to join -->
|
||
|
|
Peering..
|
||
|
|
<div class='reload-button button'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<div class='preview'>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
upg: show live or preview -- tap to toggle live and/or?
|
||
|
|
<div class='live'>Live</div>
|
||
|
|
<div class='video'></div>
|
||
|
|
-->
|
||
|
|
</div>
|
||
|
|
<div class='log'></div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<div class='input'>
|
||
|
|
<input>
|
||
|
|
</div>
|
||
|
|
<div class='status'>
|
||
|
|
<div class='indicator hide-when-not-wakelock-active'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class='indicator hide-when-wakelock-is-supported'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class='mute button'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x hide-when-interacted"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2 hide-always xhide-when-muted"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class='version'></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<script type='module' src='./main.js'></script>
|
||
|
|
</body>
|