97 lines
3.9 KiB
PHP
97 lines
3.9 KiB
PHP
|
@extends('base')
|
||
|
|
@section('body')
|
||
|
|
<main>
|
||
|
|
<div id="video" data-urn="{{ $mediacomposition['chapterUrn'] }}">
|
||
|
|
<video-js id="my-player" class="pillarbox-js" controls></video-js>
|
||
|
|
</div>
|
||
|
|
<div id="tabs">
|
||
|
|
<div class="tablist">
|
||
|
|
<h1 class="visually-hidden">
|
||
|
|
Analysen (Tab-Liste)
|
||
|
|
</h1>
|
||
|
|
<p class="visually-hidden">
|
||
|
|
Hilfe zur Tablistensteuerung: Über die Tablistensteuerung kann die Sichtbarkeit der jeweiligen
|
||
|
|
Tabinhalte umgeschaltet werden, welche sich unterhalb der Tablistensteuerung befinden.
|
||
|
|
</p>
|
||
|
|
<fieldset class="controls">
|
||
|
|
<legend class="visually-hidden">Tablistensteuerung</legend>
|
||
|
|
<div class="control">
|
||
|
|
<input checked class="visually-hidden" id="tablist_panel_episode" name="tablist" type="radio" />
|
||
|
|
<label for="tablist_panel_episode"><span class="visually-hidden">Zeige Tabinhalt
|
||
|
|
</span>Episode</label>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<input class="visually-hidden" id="tablist_panel_transcript" name="tablist" type="radio" />
|
||
|
|
<label for="tablist_panel_transcript"><span class="visually-hidden">Zeige Tabinhalt
|
||
|
|
</span>Transkript</label>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<input class="visually-hidden" id="tablist_panel_terms" name="tablist" type="radio"
|
||
|
|
/><label for="tablist_panel_terms"><span
|
||
|
|
class="visually-hidden">Zeige Tabinhalt
|
||
|
|
</span>Dokumentbegriffe</label>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
<div class="panel" id="tablist_panel_episode_panel">
|
||
|
|
<h2 class="visually-hidden">
|
||
|
|
Episode (Inhalt)
|
||
|
|
</h2>
|
||
|
|
<dl>
|
||
|
|
<dt>Titel</dt>
|
||
|
|
<dd>{{ $title }}</dd>
|
||
|
|
<dt>Lead</dt>
|
||
|
|
<dd>{{ $mediacomposition['episode']['lead'] }}</dd>
|
||
|
|
<dt>Publikationsdatum</dt>
|
||
|
|
<dd>{{ date('d.m.Y H:i', strtotime($mediacomposition['episode']['publishedDate'])) }}</dd>
|
||
|
|
</dl>
|
||
|
|
</div>
|
||
|
|
<div class="panel" id="tablist_panel_transcript_panel" hidden>
|
||
|
|
<h2 class="visually-hidden">
|
||
|
|
Transkript (Inhalt)
|
||
|
|
</h2>
|
||
|
|
<p>TRANSCRIPT</p>
|
||
|
|
</div>
|
||
|
|
<div class="panel" id="tablist_panel_terms_panel" hidden>
|
||
|
|
<h2 class="visually-hidden">
|
||
|
|
Begriffe (Tabinhalt)
|
||
|
|
</h2>
|
||
|
|
<h3>
|
||
|
|
Some info about terms
|
||
|
|
</h3>
|
||
|
|
<p>
|
||
|
|
Bla bla bla... all about terms...
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<img alt="A beautiful terms" src="..." />
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
A link to a page with <a href="#">more infos about terms</a>!
|
||
|
|
</p>
|
||
|
|
<h3>
|
||
|
|
More elements can come here related to terms
|
||
|
|
</h3>
|
||
|
|
<p>
|
||
|
|
Maybe even some form element where you can enter a name for your terms: <input type="text" />
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div id="timeline">
|
||
|
|
<div id="timeline-bar">
|
||
|
|
<div id="timeline-bar-ctrl"></div>
|
||
|
|
</div>
|
||
|
|
<div id="tracks">
|
||
|
|
<div class="track">
|
||
|
|
<div class="track-ctrl"></div>
|
||
|
|
<div class="track-viz"></div>
|
||
|
|
</div>
|
||
|
|
<div class="track"></div>
|
||
|
|
<div class="track"></div>
|
||
|
|
<div class="track"></div>
|
||
|
|
<div class="track"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
@endsection
|