forked from varia/web-narrowcast
added ReadRepair HTML elements + style
also did a bit cleaning on the CSS
This commit is contained in:
parent
a4966595bf
commit
14372fad10
60
index.html
60
index.html
@ -53,8 +53,9 @@
|
||||
|
||||
<!-- AFTER EVENTS PLACEHOLDER -->
|
||||
<!-- uncomment after the event to display the iframe below -->
|
||||
<iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
||||
</iframe>
|
||||
|
||||
<!-- <iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
||||
</iframe> -->
|
||||
|
||||
|
||||
<!-- essay frame
|
||||
@ -89,17 +90,50 @@
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- AUDIO NEW CODE -->
|
||||
<span class="stream">
|
||||
<audio id="player" preload="none" src="https://vvvvvvaria.org/archive/2020-04-18-we-hope-this-email-finds-you-well/we-hope-this-email-finds-you-well.wav"> </audio><br>
|
||||
Press play (best listened in FireFox). It might take a minute to load.
|
||||
<div>
|
||||
<button class="stream-button" onclick="document.getElementById('player').play()">Play</button>
|
||||
<button class="stream-button" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
|
||||
<button class="stream-button" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
|
||||
<button class="stream-button" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<div class="halfscreen">
|
||||
<iframe src="https://pad.vvvvvvaria.org/read_repair_supreme_connections"></iframe><br> ↝
|
||||
<a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections" target="_blank"> pad.vvvvvvaria.org/read_repair_supreme_connections</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="halfscreen">
|
||||
<iframe src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"></iframe><br> ↬
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf" target="_blank">theusercondition.computer</a>
|
||||
</div>
|
||||
|
||||
<!-- AUDIO NEW CODE -->
|
||||
<span class="audio-stream">
|
||||
<audio id="player" preload="none" src="https://vvvvvvaria.org/archive/2020-04-18-we-hope-this-email-finds-you-well/we-hope-this-email-finds-you-well.wav"> </audio>
|
||||
<p>
|
||||
Press play (best listened in FireFox). It might take a minute to load.</p>
|
||||
<div class="audio-buttons">
|
||||
<button class="stream-button b-narrow" onclick="document.getElementById('player').play()">Play</button>
|
||||
<button class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
|
||||
<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
|
||||
<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
|
||||
<div class="img-gallery">
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg" target="_blank">read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png" target="_blank">read_supreme_connections_anger</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png" target="_blank">read_supreme_connections_happiness.png</a>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg">
|
||||
<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg" target="_blank">read_supreme_connections_the_blonde_composer.jpg</a>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!-- lil face
|
||||
<div class="lil-face loading">
|
||||
|
||||
106
narrowstyle.css
106
narrowstyle.css
@ -88,6 +88,7 @@ button {
|
||||
font-size: 1rem;
|
||||
color: #ffffe5;
|
||||
text-decoration: none;
|
||||
text-shadow: 0.1rem 0.01rem 0.05rem #393c56;
|
||||
}
|
||||
|
||||
#side {
|
||||
@ -254,6 +255,9 @@ button.minimize:hover {
|
||||
padding: 0rem 0rem 2rem 0rem;
|
||||
}
|
||||
|
||||
.live-flex a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
|
||||
width: 100%;
|
||||
@ -264,7 +268,7 @@ button.minimize:hover {
|
||||
|
||||
.halfscreen {
|
||||
margin: 1%;
|
||||
width: 46%;
|
||||
width: 44.5%;
|
||||
}
|
||||
|
||||
.halfscreen > * {
|
||||
@ -348,7 +352,7 @@ button.minimize:hover {
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -357,6 +361,19 @@ button.minimize:hover {
|
||||
margin: 0% 2rem 0% 2rem;
|
||||
}
|
||||
|
||||
.audio-stream button {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
.audio-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
width: 80%;
|
||||
margin: 0rem 1rem;
|
||||
}
|
||||
|
||||
button.b-narrow {
|
||||
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
|
||||
border: 0.03rem solid #393c56;
|
||||
@ -375,6 +392,11 @@ button.b-narrow:hover {
|
||||
background-color: #393c56;
|
||||
color: #ffe4fd;
|
||||
}
|
||||
|
||||
button.vol {
|
||||
border-radius: 5rem 0.5rem 5rem 5rem;
|
||||
}
|
||||
|
||||
.b-play::before {
|
||||
content: 'PLAY';
|
||||
}
|
||||
@ -383,41 +405,36 @@ content: 'PLAY';
|
||||
content: 'PAUSE';
|
||||
}
|
||||
|
||||
/* SILVIO */
|
||||
|
||||
.essay {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.essay iframe {
|
||||
.img-gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.chat {
|
||||
margin: 0% 2% 0% 1%;
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
.chat iframe {
|
||||
.img-gallery-title {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
padding-top: 3rem;
|
||||
margin: 0rem 1rem;
|
||||
|
||||
}
|
||||
|
||||
.audio {
|
||||
width: 50%;
|
||||
right: 12%;
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
.img-gallery figure {
|
||||
width: 20%;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.lil-face{
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: 38px;
|
||||
.img-gallery img {
|
||||
width: 100%;
|
||||
border-radius: 1rem 0.5rem 1rem 0.5rem;
|
||||
}
|
||||
|
||||
/* ehterpad — maybe remove?
|
||||
#editorcontainerbox {
|
||||
margin-bottom: 39px;
|
||||
}*/
|
||||
|
||||
/* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */
|
||||
|
||||
|
||||
@ -442,40 +459,9 @@ content: 'PAUSE';
|
||||
margin: 4rem 0% 2rem 0%;
|
||||
}
|
||||
|
||||
/* SILVIO MOBILE*/
|
||||
|
||||
.essay {
|
||||
width: 85%;
|
||||
.img-gallery figure {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.essay iframe {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.chat {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.chat iframe {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.audio {
|
||||
width: 80%;
|
||||
position: relative;
|
||||
margin: 6rem 0% 0% 6rem;
|
||||
}
|
||||
|
||||
.audio-link{
|
||||
margin: 2rem 0% 0% 0%;
|
||||
}
|
||||
|
||||
.lil-face{
|
||||
position: relative;
|
||||
margin: 0% 0% 2rem 1rem;
|
||||
bottom: inherit;
|
||||
right: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user