155 lines
3.8 KiB
HTML
155 lines
3.8 KiB
HTML
<!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> |