temporary changes, overhaul needed
This commit is contained in:
parent
8a6bf2d2cb
commit
173a620c8a
4 changed files with 237 additions and 5 deletions
|
|
@ -4,7 +4,7 @@
|
|||
{{partial "head" .}}
|
||||
</head>
|
||||
<body>
|
||||
{{partial "header" .}}
|
||||
{{partial "header-item" .}}
|
||||
{{partial "banner-item" .}}
|
||||
<main>
|
||||
<article>
|
||||
|
|
|
|||
37
layouts/partials/header-item.html
Normal file
37
layouts/partials/header-item.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<header>
|
||||
<style>
|
||||
header{
|
||||
background-color: var(--theme-accent);
|
||||
margin-top:0;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header #logo img {
|
||||
max-width:5vh;
|
||||
}
|
||||
header > a {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
header span {
|
||||
font-size:24px;
|
||||
color:var(--theme-color-primary);
|
||||
}
|
||||
header svg {
|
||||
stroke: var(--theme-color-primary);
|
||||
fill: var(--theme-color-primary);
|
||||
}
|
||||
header .icon {
|
||||
width:5vh;
|
||||
height:5vh;
|
||||
}
|
||||
</style>
|
||||
<a id="logo" href="/">
|
||||
<img src="/logo.webp" alt="logo">
|
||||
</a>
|
||||
<a id="logo" href="/">
|
||||
<span><strong>{{.Site.Title}}</strong></span>
|
||||
</a>
|
||||
{{ partial "rss-icon"}}
|
||||
</header>
|
||||
|
|
@ -1,4 +1,199 @@
|
|||
|
||||
<audio preload="none" controls>
|
||||
<source src="{{.Params.audio}}">
|
||||
</audio>
|
||||
<script>
|
||||
function audio_end(event){
|
||||
p = event.target.parentElement;
|
||||
if (!event.target.loop){
|
||||
p.children[1].innerHTML=icons['play'];
|
||||
}
|
||||
}
|
||||
function setup_display(event){
|
||||
el = event.target.children[0];
|
||||
el.style.display="flex";
|
||||
console.log("Display audio")
|
||||
}
|
||||
function setup_audio_metadata(event) {
|
||||
audio=event.target;
|
||||
var seek = audio.parentElement.children[2];
|
||||
seek.min = 0;
|
||||
seek.max = audio.duration;
|
||||
seek.value = audio.currentTime;
|
||||
audio.parentElement.children[3].style.display="block";
|
||||
audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
|
||||
audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
|
||||
}
|
||||
function toggle_loop_audio(event) {
|
||||
audio = event.target.parentElement.children[0];
|
||||
audio.loop = !audio.loop;
|
||||
if (audio.loop){
|
||||
event.target.children[0].classList.add("spin");
|
||||
}
|
||||
else{
|
||||
event.target.children[0].classList.remove("spin");
|
||||
}
|
||||
}
|
||||
function update_audio_time(event) {
|
||||
audio = event.target.parentElement.children[0];
|
||||
audio.currentTime = event.target.value;
|
||||
}
|
||||
function toggle_play_audio(event) {
|
||||
el = event.target;
|
||||
audio = el.parentElement.children[0];
|
||||
speed = el.parentElement.children[3].value;
|
||||
audio.playbackRate = speed;
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
el.children[0].children[0].setAttribute("href","#pause");
|
||||
}
|
||||
else {
|
||||
audio.pause();
|
||||
el.children[0].children[0].setAttribute("href","#play")
|
||||
}
|
||||
}
|
||||
function update_audio_speed(event) {
|
||||
el = event.target;
|
||||
audio = event.target.parentElement.children[0];
|
||||
audio.playbackRate = el.value;
|
||||
|
||||
}
|
||||
function timeToText(t) {
|
||||
hours = 0;
|
||||
minutes = 0;
|
||||
seconds = 0;
|
||||
if (t > 60 * 60) {
|
||||
hours = Math.floor(t / 60 / 60);
|
||||
t = t - hours * 60 * 60;
|
||||
}
|
||||
if (t > 60) {
|
||||
minutes = Math.floor(t / 60);
|
||||
t = t - minutes * 60
|
||||
|
||||
}
|
||||
if (t > 1) {
|
||||
seconds = Math.floor(t);
|
||||
}
|
||||
text = "";
|
||||
if (hours > 0) {
|
||||
text += hours + ":";
|
||||
}
|
||||
if (minutes > 0 || hours > 0) {
|
||||
if (minutes == 0) {
|
||||
minutes = "00"
|
||||
}
|
||||
if (minutes < 10) {
|
||||
text += "0"
|
||||
}
|
||||
text += minutes + ":"
|
||||
}
|
||||
if (seconds == 0 && (minutes > 0 || hours > 0)) {
|
||||
seconds = "00";
|
||||
}
|
||||
if (seconds < 10) {
|
||||
text += "0";
|
||||
}
|
||||
text += seconds
|
||||
return text;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.audio-player {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
width: 100%;
|
||||
}
|
||||
.audio-player>*{
|
||||
margin:2px;
|
||||
margin-right:5px;
|
||||
margin-left:5px;
|
||||
}
|
||||
.audio-player p{
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.media-seek {
|
||||
width: 100%;
|
||||
}
|
||||
.audio-player{
|
||||
border: 0.15rem solid var(--theme-accent);
|
||||
padding:0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
color:var(--theme-accent);
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.audio-player>*{
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
.audio-player select, .audio-player button{
|
||||
background-color: transparent;
|
||||
border-color: var(--theme-accent);
|
||||
color:var(--theme-accent);
|
||||
border-radius: 3px;
|
||||
padding:0.5rem;
|
||||
}
|
||||
|
||||
.icon svg{
|
||||
width:2.25rem;
|
||||
height:2.25rem;
|
||||
z-index: -1;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
.icon path,
|
||||
.icon rect {
|
||||
stroke: var(--theme-accent);
|
||||
fill: var(--theme-accent);
|
||||
}
|
||||
|
||||
.icon svg circle {
|
||||
stroke: var(--theme-accent);
|
||||
fill: transparent;
|
||||
stroke-width: 6;
|
||||
}
|
||||
@keyframes spin-icon {
|
||||
0%{rotate:0;}
|
||||
100%{rotate:360deg;}
|
||||
}
|
||||
.spin{
|
||||
animation:spin-icon 3s linear infinite;
|
||||
}
|
||||
</style>
|
||||
<div class="media-container" style="width:100%;" onload="setup_display(event)">
|
||||
<div class="audio-player">
|
||||
<audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
|
||||
<source src='{{.Params.audio}}'>
|
||||
</audio>
|
||||
<div class="icon" onclick="toggle_play_audio(event)">
|
||||
<svg>
|
||||
<use href="#play"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
|
||||
<select onchange="update_audio_speed(event)" style="display:none;">
|
||||
<option value="1" selected>1x</option>
|
||||
<option value="1.5">1.5x</option>
|
||||
<option value="2">2x</option>
|
||||
<option value="2.5">2.5x</option>
|
||||
<option value="3">3x</option>
|
||||
</select>
|
||||
<div class="audio-preview">
|
||||
</div>
|
||||
<p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
|
||||
<div class="icon" onclick="toggle_loop_audio(event)">
|
||||
<svg>
|
||||
<use href="#loop"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<noscript>
|
||||
<style>
|
||||
.audio-player {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<audio controls preload="false" style="width:100%;min-width:40vw;">
|
||||
<source src='{{.Params.audio}}'>
|
||||
</audio>
|
||||
</noscript>
|
||||
</div>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
|
||||
<div class="listing-text">
|
||||
<a href="{{.Permalink}}" ><h2>{{.Title}}</h2><i>{{.Params.description}}</i></a>
|
||||
<a href="{{.Permalink}}" ><h2>heh{{.Title}}</h2><i>{{.Params.description}}</i></a>
|
||||
|
||||
<span></span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue