first stream page prototype
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
3896b97098
commit
c0c70b803a
|
|
@ -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