kashire/lainchan
4
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity
a3b9c4405c
lainchan/templates/themes/donate/donate.html

209 lines
8.3 KiB
HTML
Raw Normal View History

Add donate page
2014-09-28 15:43:09 -04:00
{% filter remove_whitespace %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>{{ settings.title }}</title>
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" media="screen" href="/stylesheets/style.css"/>
<link rel="stylesheet" media="screen" href="/stylesheets/dark.css"/>
Update templates for new stylesheets
2015-02-14 00:12:54 -05:00
{% if config.font_awesome %}<link rel="stylesheet" href="{{ config.root }}{{ config.font_awesome_css }}">{% endif %}
Added donation progress bar to donate theme
2016-09-24 07:19:08 -04:00
<style>
/*---------------------------*/
.container {
margin: auto;
width : 50%;
}
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
position: relative;
margin: 70px 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 100%;
background-color: #777;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.blue span {
background-color: #34c2e3;
}
.red span {
background-color: #f42323;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f42323), to(#ff0000));
background-image: -webkit-linear-gradient(top, #f42323, #ff0000);
background-image: -moz-linear-gradient(top, #f42323, #ff0000);
background-image: -ms-linear-gradient(top, #f42323, #ff0000);
background-image: -o-linear-gradient(top, #f42323, #ff0000);
background-image: linear-gradient(top, #f42323, #ff0000);
}
.green span {
background-color: #a5df41;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
background-image: -o-linear-gradient(top, #a5df41, #4ca916);
background-image: linear-gradient(top, #a5df41, #4ca916);
}
/*---------------------------*/
.stripes span {
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
}
@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
@-moz-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
/*---------------------------*/
.shine span {
position: relative;
}
.shine span::after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-animation: animate-shine 2s ease-out infinite;
-moz-animation: animate-shine 2s ease-out infinite;
}
@-webkit-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}
@-moz-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}
.glow span {
-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-webkit-animation: animate-glow 1s ease-out infinite;
-moz-animation: animate-glow 1s ease-out infinite;
}
@-webkit-keyframes animate-glow {
0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}
@-moz-keyframes animate-glow {
0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}
</style>
Add donate page
2014-09-28 15:43:09 -04:00
</head>
<body>
Change topbar display
2014-12-17 00:14:26 -05:00
<div class="bar top">{{ boardlist.top }}</div>
Add donate page
2014-09-28 15:43:09 -04:00
<header>
<h1>{{ settings.title }}</h1>
<div class="subtitle">{{ settings.subtitle }}</div>
</header>
Update donate page
2016-09-23 09:39:21 -04:00
<center>
Add boardlist to donate
2014-11-12 19:31:31 -05:00
<img alt="mascot" src="/static/lain_is_cute_datass_small.png"/>
Update donate page
2016-09-23 09:39:21 -04:00
</center>
<div class="ban">
Change donate page
2015-09-12 16:25:06 -04:00
<h2>Thanks for donating</h2>
Added donation progress bar to donate theme
2016-09-24 07:19:08 -04:00
<p>The server costs $55 per month. If you buy stickers we get about 45-55% of whatever you spend. Historical donation records to the former owner are ForeverN2Dust is the top donator, giving about $3000. FOOFDOOF is #2 with $1000 and lots of cheap Chinese shit. Please specify what you'd like your money to go towards. If you don't want to buy stickers, but want to donate something else please either ask in /q/ or contact the Lainchan administration on IRC at #lainchan on Freenode.
Change donate page
2015-09-12 16:25:06 -04:00
</p>
Added donation progress bar to donate theme
2016-09-24 07:19:08 -04:00
<p><a href="https://www.stickermule.com/marketplace/tags/lainchan"> Buy stickers here</a>
</p>
<p>Monthly Funding Progress Bar</p>
<p>Cost per month $55</p>
<p>Funds from stickers $37.75</p>
<div class="container">
<div class="progress-bar red glow">
<span style="width:14%;position:relative;left:36%;
"> </span>
</div>
<div id="value" style="position:relative;left:135px;top:-45px">$-19.25</div>
</div>
Change donate page
2015-09-12 16:25:06 -04:00
Add donate page
2014-09-28 15:43:09 -04:00
</div>
Update donate page
2016-09-23 09:39:21 -04:00
Add donate page
2014-09-28 15:43:09 -04:00
</body>
</html>
{% endfilter %}
Reference in New Issue Copy Permalink