Skip to content

Instantly share code, notes, and snippets.

@dannycjones

dannycjones/tumblr-redirect.html

Created October 16, 2014 17:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dannycjones/883bc49a825994796ebf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dannycjones/883bc49a825994796ebf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tumblr-redirect.html
<!DOCTYPE html>
<html>
<head>
{MobileAppHeaders}
<meta charset="utf-8">
<title>{Title}</title>
{block:Description}
<meta name="description" content="{MetaDescription}"/>
{/block:Description}
<meta name="if:Instant Redirect" content="1"/>
<meta name="if:Debug" content="0"/>
<meta name="if:Use Background Image" content="1"/>
<meta name="text:Redirect URL" content="consulting-feminist.tumblr.com"/>
<meta name="select:Redirect Delay" content="0" title="No Delay (Instant)">
<meta name="select:Redirect Delay" content="2" title="2 Seconds">
<meta name="select:Redirect Delay" content="5" title="5 Seconds">
<meta name="select:Redirect Delay" content="10" title="10 Seconds">
<meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
<style>
html {
{block:IfUseBackgroundImage}background: url('{HeaderImage}') no-repeat center center fixed;{/block:IfUseBackgroundImage}
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-color: {BackgroundColor};
font-family: {font:Body}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
color: {TitleColor};
}
section.main_section {
width: 80%;
max-width: 800px;
position: relative;
transform: translateY(15%);
padding: 20px;
border-radius: 10px;
background: {BackgroundColor};
margin:0 auto;
border:solid 5px;
}
a {
color:{AccentColor};
text-decoration: none;
}
h1 {
font-size: 50px;
font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
font-weight: {TitleFontWeight};
margin:10px;
}
h1 a, .description {
color: {TitleColor};
}
.center {
text-align: center;
}
.user-avatar {
display: inline-block;
background-color: {AccentColor};
border: solid 6px;
border-color: {AccentColor};
border-radius: 6px;
height:128px;
width:128px;
}
.user-avatar img {
border-radius: 3px;
}
.user-avatar.avatar-style-circle, .user-avatar.avatar-style-circle img {
border-radius: 50%;
}
a.user-avatar {
position: relative;
top:-230px;
}
.blogURL {
font-size: calc(14px * 1.4);
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 156px;
height: 306px;
background: {BackgroundColor};
border-radius: 306px 0 0 306px;
top: -3px;
left: -3px;
-webkit-transform-origin: 156px 153px;
transform-origin: 156px 153px;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader {
font-size: 11px;
text-indent: -99999em;
margin: 10px auto; /* Was 125px */
position: relative;
width: 300px;
height: 300px;
box-shadow: inset 0 0 0 30px {AccentColor};
}
.loader:after {
width: 156px;
height: 306px;
background: {BackgroundColor};
border-radius: 0 306px 306px 0;
top: -3px;
left: 153px;
-webkit-transform-origin: 0px 153px;
transform-origin: 0px 153px;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body class="center">
<section class="main_section">
<!-- Title -->
{block:ShowTitle}
<h1><a href="/">{Title}</a></h1>
{/block:ShowTitle}
<!-- Icon with progress -->
<div style="height:300px;">
<div class="loader">Loading...</div>
<a href="/" class="user-avatar avatar-style-{AvatarShape}"><img src="http://api.tumblr.com/v2/blog/{text:Redirect URL}/avatar/128"></a>
</div>
<!-- Description Paragraph -->
{block:ShowDescription}
<p class="description">
{Description}
</p>
{/block:ShowDescription}
<span><a id="fromBlogURL" class="blogURL" href="">{BlogURL}</a> is now at <a class="blogURL to" href="http://{text:Redirect URL}/">{text:Redirect URL}</a></span>
<!-- URL Redirect Info -->
</section>
<script>
console.info(window.location.pathname);
var newURL = "{text:Redirect URL}";
console.info("Redirect URL: '" + newURL + "'");
function redirect(){
console.info("Executing redirect() procedure.")
// Gets directory after domain.
var path = window.location.pathname;
// Redirects
{block:IfNotDebug}
window.location = "http://" + newURL + path;
{/block:IfNotDebug}
}
var fromBlogURL = {JSBlogURL};
fromBlogURL = fromBlogURL.replace("http://","")
fromBlogURL = fromBlogURL.replace("/","");
console.info("fromBlogURL: " + fromBlogURL);
var fromBlogURLElement = document.getElementById("fromBlogURL");
fromBlogURLElement.innerHTML = fromBlogURL
fromBlogURLElement.setAttribute("href", "{BlogURL}")
{block:IfInstantRedirect}
console.info("Instant Redirect: Enabled");
redirect();
{/block:IfInstantRedirect}
{block:IfNotInstantRedirect}
console.info("Instant Redirect: Disabled");
setTimeout(redirect, 5000);
{/block:IfNotInstantRedirect}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment