first stream page prototype
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
3896b97098
commit
c0c70b803a
155
lumbung.space/stream.html
Normal file
155
lumbung.space/stream.html
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user