Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu
hteumeuleu / firefox-relay-test.html
Last active August 24, 2021 13:51
Firefox Relay Test
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<title>Firefox Relay</title>
<style>
* {
box-sizing: border-box;
}
@hteumeuleu
hteumeuleu / gmail-animation.html
Created April 26, 2018 13:49
The new Gmail loading animation is just HTML and CSS.
<style>
body{margin:0;width:100%;height:100%} body,td,input,textarea,select{font-family:arial,sans-serif} input,textarea,select{font-size:100%} #loading{position:absolute;width:100%;height:100%;z-index:1000;background-color:#fff} .msg{ color: #757575; font: 20px/20px Arial, sans-serif; letter-spacing: .2px; text-align: center } #nlpt{ animation: a-s .5s 2.5s 1 forwards; background-color: #f1f1f1; height: 4px; margin: 56px auto 20px; opacity: 0; overflow: hidden; position: relative; width: 300px } #nlpt::before{ animation: a-lb 20s 3s linear forwards; background-color: #db4437; content: ''; display: block; height: 100%; position: absolute; transform: translateX(-300px); width: 100% } @keyframes a-lb{ 0%{transform:translateX(-300px)}5%{transform:translateX(-240px)}15%{transform:translateX(-30px)}25%{transform:translateX(-30px)}30%{transform:translateX(-20px)}45%{transform:translateX(-20px)}50%{transform:translateX(-15px)}65%{transform:translateX(-15px)}70%{transform:translateX(-10px)}95%{transform:translateX(-1
@hteumeuleu
hteumeuleu / mona-lisa-vml.html
Created January 8, 2020 08:56
Mona Lisa in VML
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:w="urn:schemas-microsoft-com:office:wordml"
xmlns:wx="urn:schemas-microsoft-com:office:auxHint">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Preview</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
@hteumeuleu
hteumeuleu / lego.html
Created May 3, 2021 09:01
LEGO City Undercover - Pixel art under images
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
@hteumeuleu
hteumeuleu / ios-blockquotes.html
Created January 28, 2021 08:30
Testing blockquotes style resets in Apple Mail iOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS blockquote</title>
</head>
<body>
<h1>Blockquotes</h1>
<blockquote>Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Ab magni, qui quidem repellendus beatae rem amet veniam a ullam similique eius velit, exercitationem facere maxime praesentium voluptatum minus quae corrupti?</blockquote>
@hteumeuleu
hteumeuleu / fortnite.html
Created November 25, 2020 09:09
Fornite email on 2020/11/25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fortnite</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<link href="https://fonts.google.com/specimen/Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
@hteumeuleu
hteumeuleu / pokeloop.sh
Created July 7, 2020 15:47
Bash script to get all pattern images from Pokémon shirts
for i in {1..250}
do
url="https://pokemon.originalstitch.com/en/img/pattern_all/$i.jpg"
curl $url > pokemon/$i.jpg
done
@hteumeuleu
hteumeuleu / 000webhost-gmail-dark-mode.html
Created May 11, 2020 12:47
000webhost cute email that turns horrible in Gmail's dark mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<style>
.ReadMsgBody {
width: 100%;
background-color: #FFFFFF;
}
@hteumeuleu
hteumeuleu / s_.html
Last active May 9, 2020 07:16
com.google.android.apk Files
<!DOCTYPE html>
<!--
Arguments for this template:
1. Body HTML String
2. Signature
3. Elided text HTML String
4. Hint text String
5. Hint text color String
6. padding-top of the body in px
7. padding-bottom of the body in px
@hteumeuleu
hteumeuleu / background-blend-mode-demo.html
Created February 26, 2020 14:57
Demo of using background-blend-mode to attenuate background images in dark mode in Outlook.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-blend-mode</title>
<style>
@media only screen and (min-width:650px) {
.demo-object { display:block!important; }
}
</style>