ruangrupa/lumbung.space-archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first stream page prototype
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
rra 2021-05-23 18:09:03 +02:00
parent 3896b97098
commit c0c70b803a
1 changed files with 155 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
lumbung.space/stream.html Normal file
View File

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>lumbung[dot]space streams</title>
<meta name="description" content="Page description">
<meta property="og:title" content="Unique page title - My Site">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://www.mywebsite.com/image.jpg">
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://www.mywebsite.com/page">
<link rel="canonical" href="https://www.mywebsite.com/page">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
<style type="text/css">
body {font-size:1.3rem;font-family: sans-serif;}
.wrapper {
width: 50%;
margin: auto;
}
.box{
border:2px solid #0e0e22;
max-width:800px;
margin:auto;
box-shadow:1em 1em 0 #d2d1c8;
margin-bottom: 2em;
background-color: #fff09d;
}
.bar{
border:2px solid #0e0e22;
box-shadow:0.6em 0.6em 0 #d2d1c8;
margin-bottom: 2em;
margin-top:3em;
display: inline-block;
background-color: #fff09d;
}
.title{
margin-top:1em;
border-top: 2px solid #0e0e22;
padding:0.5em;
font-weight:700;
font-size:1.3rem;
transform: rotate(-7deg);
}
.footer{
margin-top:0;
border-top: 2px solid #0e0e22;
display: flex;
justify-content: space-between;
}
.controls {
display: flex;
justify-content: space-between;
transform: rotate(2deg);
max-height: 2em;
}
#playtoggle {
border-right: 2px solid black;
padding: 0.5em;
}
#duration {
padding: 0.5em;
}
#volume{
border-left: 2px solid black;
padding: 0.5em;
}
.metadata {
font-size: 0.9rem;
max-width: 60ch;
}
.metadata-header{
display: flex;
justify-content: space-between;
border-bottom: 2px solid black;
}
#close{
padding: 0.5em;
border-left: 2px solid black;
}
#about{
padding: 0.5em;
border-right: 2px solid black;
font-weight:700;
}
#description {
padding:1em;
}
.something {
display: flex;
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='title bar'> STREAM TITLE </div>
<div class='video box'>
<iframe width="800" height="450" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/b4aafef4-892f-4036-a4bc-2e09027e2b4b" frameborder="0" allowfullscreen></iframe>
</div>
<div class='something'>
<div class='controls bar'>
<span id='playtoggle'> ▶ </span>
<span id='duration'> 14:02 - ??? </span>
<span id='volume'>70% + - mute </span>
</div>
<div class='metadata box'>
<div class='metadata-header'><span id='about'>about</span><span id='close'>x</span></div>
<div id='description'>
Radio Alhara is a radio station based in Bethlehem, Ramallah and Amman. Launched during a global lockdown crisis in March 2020, it encompasses the idea of a public space. The radio hosts musical sets, conversations, recordings, discussions, and its main aim is to blend the limits between producers and listeners. Radio Alhara have together with a group of sound platforms and sound artists started The Sonic Liberation Front in order to create one sound for Palestine.
Radio Alhara is in the ecosystem of Question of Funding.
</div>
<div>
</div>
</div>
</div>
</div>
</body>
</html>