Skip to content

Commit 35040e0

Browse files
zhuzhuorzhuzhuor
committed
New homepages with donations
1 parent ec68f7c commit 35040e0

File tree

9 files changed

+782
-8
lines changed

9 files changed

+782
-8
lines changed

‎css/style.css

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
2+
3+
@charset "utf-8";
4+
@-webkit-viewport { width: device-width; }
5+
@-moz-viewport { width: device-width; }
6+
@-ms-viewport { width: device-width; }
7+
@-o-viewport { width: device-width; }
8+
@viewport { width: device-width; }
9+
10+
body{
11+
font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
12+
font-weight: 400;
13+
color: #363636;
14+
background: #ededed;
15+
}
16+
17+
#wrapper {
18+
margin-top: 80px;
19+
margin-bottom: 15px;
20+
background: #fff;
21+
max-width: 1024px;
22+
}
23+
24+
#photo-header{
25+
margin-top: -75px;
26+
}
27+
28+
#photo{
29+
width: 140px;
30+
height: 140px;
31+
border-radius: 50%;
32+
overflow: hidden;
33+
padding: 5px;
34+
background: #ededed;
35+
display: inline-block;
36+
}
37+
38+
#photo img{
39+
width: 128px;
40+
height: 128px;
41+
border-radius: 50%;
42+
}
43+
44+
#text-header h1{
45+
margin: 0;
46+
padding: 0;
47+
font-size: 3.6em;
48+
font-weight: 700;
49+
line-height: 1.5em;
50+
}
51+
52+
#i18n-links {
53+
margin: 0;
54+
padding: 0;
55+
font-size: 1.2em;
56+
line-height: 1.5em;
57+
}
58+
59+
.box{
60+
margin-bottom: 15px;
61+
}
62+
63+
.box h2{
64+
color: #EC7263;
65+
font-weight: 700;
66+
}
67+
68+
.box {
69+
font-size: 1.2em;
70+
line-height: 1.5em;
71+
}
72+
73+
.box p {
74+
margin-left: 1em;
75+
margin-right: 1em;
76+
}
77+
78+
.box ul {
79+
margin-left: 1em;
80+
margin-right: 1em;
81+
}
82+
83+
.header:before{
84+
width: 100%;
85+
height: 3px;
86+
background: url(../img/line.png);
87+
margin-top: 15px;
88+
content: '';
89+
display: block;
90+
}
91+
92+
div#donation {
93+
margin-left: 1em;
94+
margin-right: 1em;
95+
}
96+
97+
div#alipay {
98+
margin-top: 10px;
99+
display: none;
100+
}
101+
102+
div#paypal-hidden-div {
103+
display: none;
104+
}
105+
106+
input#custom-amount-input {
107+
width: 3em;
108+
}
109+
110+
div.donation-form {
111+
margin-top: 10px;
112+
}
113+
114+
div.english-form-padding {
115+
padding-left: 1em;
116+
padding-right: 1em;
117+
font-size: 90%;
118+
}
119+
120+
.social-network {
121+
padding-left: 2em;
122+
padding-right: 2em;
123+
}
124+
125+
#weibo-div {
126+
margin-top: -8px;
127+
}
128+
129+
#footer {
130+
padding: 10px;
131+
font-size: 90%;
132+
}

‎favicon.ico

1.12 KB
Binary file not shown.

‎img/alipay.png

48.2 KB
Loading

‎img/icon.png

29 KB
Loading

‎img/line.png

1.05 KB
Loading

‎index.html

+203-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,203 @@
1-
<html>
2-
<head>
3-
<title>Unblock Youku official website</title>
4-
</head>
5-
<body>
6-
Hello
7-
</body>
8-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head xmlns:wb="http://open.weibo.com/wb">
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Unblock Youku Official Homepage</title>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
<body>
12+
<div class="container-fluid" id="wrapper">
13+
<div class="row">
14+
<div class="col-xs-12">
15+
<div id="photo-header" class="text-center">
16+
<div id="photo">
17+
<img src="img/icon.png" alt="avatar">
18+
</div>
19+
<div id="text-header">
20+
<h1>Unblock Youku</h1>
21+
</div>
22+
<div id="i18n-links">
23+
<a href="index_zhs.html">[中文简体]</a>
24+
<a href="index_zht.html">[中文繁體]</a>
25+
<a href="index.html">[English Version]</a>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<div class="row header">
32+
<div class="col-xs-12 box text-justify">
33+
<h2>
34+
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
35+
Thank you for supporting Unblock Youku for the last 4 years
36+
</h2>
37+
<p>Do you know that Unblock Youku has always been <a href="https://github.com/Unblocker/Unblock-Youku" target="_blank">a free and open-sourced personal project</a>? Although I built it for my personal interest 4 years ago, Unblock Youku has grown into a big project that serves <a href="https://chrome.google.com/webstore/detail/unblock-youku/pdnfnkhpgegpcingjbfihlkjeighnddk/" target="_blank">over 3 million active users</a>. It is the 3 million users' trust that gives me the courage and strength to overcome many difficulties and to keep going.</p>
38+
<p>However, since late 2015, the Unblock Youku servers have been <a href="https://en.wikipedia.org/wiki/Denial-of-service_attack" target="_blank">DDoS attacked</a> for several times, which made the Unblock Youku service unusable for a lot of users. <abbr title="UnblockCN -- See more info at http://uku.im/unblockcn">At the same time of the attacks, a software company was spreading the malicious rumor that Unblock Youku has changed its name to a product of that company</abbr>.</p>
39+
<p>While fighting against the attacks and rumors, I have deeply realized that my personal capability is very limited. In order to make Unblock Youku run stably and freely for the long term, I need to seek for helps.
40+
</p>
41+
<ul>
42+
<li>If you are interested in software development, please join the open-source project to serve 3 million users better.</li>
43+
<li>Please donate to support the server expenses, such that we can add more servers to defend against attacks.</li>
44+
<li>Please help us clarify the rumors when you see them. No more users shall be fooled.</li>
45+
</ul>
46+
<p>
47+
My sincerest appreciation goes to anyone of you.
48+
</p>
49+
<p>
50+
- zhuzhuor, Jan 31, 2016.
51+
</p>
52+
</div>
53+
</div>
54+
55+
<div class="row header">
56+
<div class="col-xs-12 box">
57+
<h2>
58+
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
59+
Every $2 will help our servers run for another 1 hour
60+
</h2>
61+
</div>
62+
<div class="box" id="donation">
63+
<div class="row english-form-padding">
64+
<div class="col-xs-1 text-right">
65+
Method:
66+
</div>
67+
<div class="col-xs-11">
68+
<div class="btn-group" data-toggle="buttons">
69+
<label class="btn btn-default active">
70+
<input type="radio" name="options" id="select-paypal" checked> PayPal or Credit Card
71+
</label>
72+
<label class="btn btn-default">
73+
<input type="radio" name="options" id="select-alipay"> Alipay
74+
</label>
75+
</div>
76+
</div>
77+
</div>
78+
<div>
79+
<div id="paypal">
80+
<div class="donation-form">
81+
<div class="row english-form-padding">
82+
<div class="col-xs-1">
83+
Currency:
84+
</div>
85+
<div class="col-xs-11">
86+
<div class="btn-group" data-toggle="buttons">
87+
<label class="btn btn-default active">
88+
<input type="radio" name="options" id="select-usd" checked> USD
89+
</label>
90+
<label class="btn btn-default">
91+
<input type="radio" name="options" id="select-cad"> CAD
92+
</label>
93+
<label class="btn btn-default">
94+
<input type="radio" name="options" id="select-twd"> TWD
95+
</label>
96+
<label class="btn btn-default">
97+
<input type="radio" name="options" id="select-hkd"> HKD
98+
</label>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
104+
<div class="donation-form">
105+
<div class="row english-form-padding">
106+
<div class="col-xs-1 text-right">
107+
Amount:
108+
</div>
109+
<div class="col-xs-11">
110+
<label class="radio-inline">
111+
<input type="radio" name="amount-options" id="amount-2" value="2" checked> <span id="amount-2-text">$2</span>
112+
</label>
113+
<label class="radio-inline">
114+
<input type="radio" name="amount-options" id="amount-5" value="5"> <span id="amount-5-text">$5</span>
115+
</label>
116+
<label class="radio-inline">
117+
<input type="radio" name="amount-options" id="amount-10" value="10"> <span id="amount-10-text">$10</span>
118+
</label>
119+
<label class="radio-inline">
120+
<input type="radio" name="amount-options" id="amount-custom" value="custom"> Custom
121+
</label>
122+
<input type="number" id="custom-amount-input" value="20">
123+
</div>
124+
</div>
125+
</div>
126+
<div class="text-center donation-form">
127+
<button class="btn btn-lg btn-primary" id="paypal-donation-button" data-loading-text="Please wait...">Click here to donate</button>
128+
<div class="text-small"><small>You can donate by credit cards without a PayPal account.</small></div>
129+
</div>
130+
131+
<div id="paypal-hidden-div">
132+
<form id="paypal-hidden-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
133+
<input type="hidden" name="cmd" value="_xclick">
134+
<input type="hidden" name="business" value="[email protected]">
135+
<input type="hidden" name="item_name" value="Unblock Youku">
136+
<input type="hidden" name="currency_code" id="hidden-form-currency" value="USD">
137+
<input type="hidden" name="amount" id="hidden-form-amount" value="2">
138+
</form>
139+
</div>
140+
</div>
141+
142+
<div class="text-center" id="alipay">
143+
<p>Please use the Alipay app to scan the QR code:</p>
144+
<img src="img/alipay.png" alt="Alipay QR code">
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<div class="row header">
151+
<div class="col-xs-12 box">
152+
<h2><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
153+
Please follow us to receive the latest official news</h2>
154+
</div>
155+
156+
<div class="col-xs-12 box social-network">
157+
<div class="fb-like" data-href="https://www.facebook.com/uku.im/" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
158+
</div>
159+
160+
<div class="col-xs-12 box social-network">
161+
<a href="https://twitter.com/Unblock_Youku" class="twitter-follow-button" data-show-count="true" data-dnt="true">@Unblock_Youku</a>
162+
</div>
163+
164+
<div class="col-xs-12 box social-network" id="weibo-div">
165+
<wb:follow-button uid="5666348267" type="gray_3" width="100%" height="24" ></wb:follow-button>
166+
</div>
167+
</div>
168+
</div>
169+
170+
<div class="container-fluid text-center box" id="footer">
171+
<p><a href="https://www.uku.im">https://www.uku.im</a></p>
172+
<p>&copy; 2016</p>
173+
</div>
174+
175+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
176+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
177+
<script src="js/script.js"></script>
178+
179+
<div id="fb-root"></div>
180+
<script>(function(d, s, id) {
181+
var js, fjs = d.getElementsByTagName(s)[0];
182+
if (d.getElementById(id)) return;
183+
js = d.createElement(s); js.id = id;
184+
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=1456856884526437";
185+
fjs.parentNode.insertBefore(js, fjs);
186+
}(document, 'script', 'facebook-jssdk'));</script>
187+
188+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
189+
190+
<script data-url="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
191+
192+
<script>
193+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
194+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
195+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
196+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
197+
198+
ga('create', 'UA-30726750-13', 'auto');
199+
ga('send', 'pageview');
200+
</script>
201+
202+
</body>
203+
</html>

0 commit comments

Comments
 (0)