A cross browser HTML5 media player for media elements (,
SCSS template for HTML5 media elements progressively enhanced with ES5 plain Javascript with udio / video poster / thumbnail generation.
A cross browser HTML5 media player for media elements (,
SCSS template for HTML5 media elements progressively enhanced with ES5 plain Javascript with udio / video poster / thumbnail generation.
{# Twig URL parser: #} | |
{% set url= 'http://subdomain.domain.tld/some/dir/file.pdf' %} | |
{% set noprotocol = url|split('//')[1] ?: url %} | |
{% set domains = noprotocol|split('/')[0] ?: noprotocol %} | |
{% if domains|split('.')[2] is defined %} | |
{% set subdomain = domains|split('.')[0] %} | |
{% set domain = domains|split('.')[1] %} | |
{% set tld = domains|split('.')[2] %} | |
{% else %} | |
{% set subdomain = '' %} |
<body id="app" role="application" data-scheme="auto"> | |
<!-- Drawer --> | |
<aside id="sidebar" class="drawer shadow"> | |
<div class="drawer-header"> | |
<h4>Profile</h4> | |
<a class="close" href="#!" data-dismiss="drawer">Close</a> | |
</div> | |
<div class="drawer-body"> | |
Body | |
</div> |
<form class="presentation"> | |
<fieldset> | |
<label for="date-calendar">Modal Calendar</label> | |
<input type="text" id="date-calendar" data-datepicker="datetime" data-datepicker-mode="calendar" placeholder="Select date & time" required/> | |
</fieldset> | |
<fieldset> | |
<label for="datetime-local">Datetime-Local Input</label> | |
<input type="datetime-local" id="datetime-local" placeholder="Select date & time" required/> | |
</fieldset> | |
<fieldset> |
<body data-theme="dark"> | |
<form lang="en" spellcheck="false" class="form"> | |
<legend class="legend">Leave a message</legend> | |
<fieldset class="fieldset"> | |
<input type="text" id="msg-name" placeholder="Type your name" accesskey="n" minlength="2" autocomplete="name" required/> | |
<label for="msg-name">Name</label> | |
</fieldset> | |
<fieldset class="fieldset"> | |
<input type="email" id="msg-email" placeholder="name@domain.tld" accesskey="e" autocomplete="email" required/> | |
<label for="msg-email">E-Mail</label> |
<body data-theme="dark"> | |
<form lang="en" spellcheck="false" class="form"> | |
<legend class="legend">Leave a message</legend> | |
<fieldset class="fieldset"> | |
<input type="text" id="msg-name" placeholder="Type your name" accesskey="n" minlength="2" autocomplete="name" required/> | |
<label for="msg-name">Name</label> | |
</fieldset> | |
<fieldset class="fieldset"> | |
<input type="email" id="msg-email" placeholder="name@domain.tld" accesskey="e" autocomplete="email" required/> | |
<label for="msg-email">E-Mail</label> |
<!-- Loadind Splash Screen --> | |
<script> | |
var html = document.getElementsByTagName('html')[0]; | |
html.setAttribute('loading', ''); | |
document.addEventListener('DOMContentLoaded', function(e) { | |
var img = html.querySelector('#logo svg').cloneNode(true); | |
img.id = 'loading-logo'; | |
html.querySelector('body').appendChild(img); | |
}, false); | |
window.addEventListener('load', function(e) { |