varia/web-narrowcast
14
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity

added ReadRepair HTML elements + style

Browse Source 
also did a bit cleaning on the CSS
This commit is contained in:
JoanaChicau 2021-03-27 14:28:07 +01:00
parent a4966595bf
commit 14372fad10
2 changed files with 93 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
index.html
View File

@ -53,8 +53,9 @@
<!-- AFTER EVENTS PLACEHOLDER --> <!-- AFTER EVENTS PLACEHOLDER -->
<!-- uncomment after the event to display the iframe below --> <!-- 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 <!-- essay frame
@ -89,18 +90,51 @@
</div> </div>
--> -->
<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 --> <!-- AUDIO NEW CODE -->
<span class="stream"> <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><br> <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>
Press play (best listened in FireFox). It might take a minute to load. <p>
<div> Press play (best listened in FireFox). It might take a minute to load.</p>
<button class="stream-button" onclick="document.getElementById('player').play()">Play</button> <div class="audio-buttons">
<button class="stream-button" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button> <button class="stream-button b-narrow" onclick="document.getElementById('player').play()">Play</button>
<button class="stream-button" onclick="document.getElementById('player').volume += 0.1">Vol +</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" 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>
<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</div> </div>
</span> </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 <!-- lil face
<div class="lil-face loading"> <div class="lil-face loading">
<a href="https://silviolorusso.com" target="_blank"> <a href="https://silviolorusso.com" target="_blank">

106
narrowstyle.css
View File

@ -88,6 +88,7 @@ button {
font-size: 1rem; font-size: 1rem;
color: #ffffe5; color: #ffffe5;
text-decoration: none; text-decoration: none;
text-shadow: 0.1rem 0.01rem 0.05rem #393c56;
} }
#side { #side {
@ -254,6 +255,9 @@ button.minimize:hover {
padding: 0rem 0rem 2rem 0rem; padding: 0rem 0rem 2rem 0rem;
} }
.live-flex a {
word-wrap: break-word;
}
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe { .fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
width: 100%; width: 100%;
@ -264,7 +268,7 @@ button.minimize:hover {
.halfscreen { .halfscreen {
margin: 1%; margin: 1%;
width: 46%; width: 44.5%;
} }
.halfscreen > * { .halfscreen > * {
@ -348,7 +352,7 @@ button.minimize:hover {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -357,6 +361,19 @@ button.minimize:hover {
margin: 0% 2rem 0% 2rem; 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 { button.b-narrow {
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd; box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
border: 0.03rem solid #393c56; border: 0.03rem solid #393c56;
@ -375,6 +392,11 @@ button.b-narrow:hover {
background-color: #393c56; background-color: #393c56;
color: #ffe4fd; color: #ffe4fd;
} }
button.vol {
border-radius: 5rem 0.5rem 5rem 5rem;
}
.b-play::before { .b-play::before {
content: 'PLAY'; content: 'PLAY';
} }
@ -383,41 +405,36 @@ content: 'PLAY';
content: 'PAUSE'; content: 'PAUSE';
} }
/* SILVIO */ .img-gallery {
display: flex;
.essay { flex-direction: row;
width: 55%; flex-wrap: wrap;
} justify-content: space-between;
.essay iframe {
width: 100%; width: 100%;
height: 80vh; padding: 1rem;
} }
.chat { .img-gallery-title {
margin: 0% 2% 0% 1%;
width: 42%;
}
.chat iframe {
width: 100%; width: 100%;
height: 80vh; margin: 0rem 1rem;
padding-top: 3rem;
} }
.audio { .img-gallery figure {
width: 50%; width: 20%;
right: 12%; margin: 0.5rem;
position: absolute;
bottom: 60px;
} }
.lil-face{ .img-gallery img {
position: absolute; width: 100%;
bottom: 50px; border-radius: 1rem 0.5rem 1rem 0.5rem;
right: 38px;
} }
/* ehterpad — maybe remove?
#editorcontainerbox {
margin-bottom: 39px;
}*/
/* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */ /* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */
@ -442,40 +459,9 @@ content: 'PAUSE';
margin: 4rem 0% 2rem 0%; margin: 4rem 0% 2rem 0%;
} }
/* SILVIO MOBILE*/ .img-gallery figure {
width: 98%;
.essay {
width: 85%;
} }
.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;
}
} }