Skip to content

Instantly share code, notes, and snippets.

View toomanyredirects's full-sized avatar
💭
I may be slow to respond.

Codebreaker toomanyredirects

💭
I may be slow to respond.
0 followers · 2 following
View GitHub Profile
@toomanyredirects
toomanyredirects / index.html
Created December 6, 2021 09:26
Responsive & Accessible App UI/UX Framework
<!-- 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) {
@toomanyredirects
toomanyredirects / index.html
Created April 21, 2021 07:05
Leave a Mp3 Audio Message / File Upload Contact Form
<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>
@toomanyredirects
toomanyredirects / index.html
Created November 29, 2020 05:21
Leave a WebAudio / FileReader API Message Contact Form
<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>
@toomanyredirects
toomanyredirects / index.html
Created June 23, 2020 12:04
Lightweight Vanilla Date Time Picker Calendar
<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>
@toomanyredirects
toomanyredirects / index.html
Created May 15, 2020 15:50
Replace Native UI Alert, Prompt & Confirm Dialogs
<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>
@toomanyredirects
toomanyredirects / twig-url-parser.twig
Last active September 9, 2019 14:59 — forked from olets/domain-from-url.twig
get the domain from a url
{# 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 = '' %}
@toomanyredirects
toomanyredirects / html5-drag-drop-file-input.markdown
Created July 13, 2019 09:12
HTML5 Drag & Drop File Input
@toomanyredirects
toomanyredirects / cross-browser-html5-range-input-progressively-enhanced-with-javascript-scss.markdown
Created July 13, 2019 08:34
Cross Browser HTML5 Range Input (Progressively Enhanced with Javascript & SCSS)

Cross Browser HTML5 Range Input (Progressively Enhanced with Javascript & SCSS)

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 Pen by Dan on CodePen.

License.