Add files via upload

hanqi/assets/countdown/jquery.countdown.css

@@ -0,0 +1,83 @@
+.countdownHolder{
+	width:450px;
+	margin:0 auto;
+	font: 40px/1.5 'Open Sans Condensed',sans-serif;
+	text-align:center;
+	letter-spacing:-3px;
+}
+
+.position{
+	display: inline-block;
+	height: 1.6em;
+	overflow: hidden;
+	position: relative;
+	width: 1.05em;
+}
+
+.digit{
+	position:absolute;
+	display:block;
+	width:1em;
+	background-color:#444;
+	border-radius:0.2em;
+	text-align:center;
+	color:#fff;
+	letter-spacing:-1px;
+}
+
+.digit.static{
+	box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
+
+	background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
+	background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
+	background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
+	background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
+	background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
+
+	background-image: -webkit-gradient(
+		linear,
+		left bottom,
+		left top,
+		color-stop(0.5, #3A3A3A),
+		color-stop(0.5, #444444)
+	);
+}
+
+/**
+ * You can use these classes to hide parts
+ * of the countdown that you don't need.
+ */
+
+.countDays{ /* display:none !important;*/ }
+.countDiv0{ /* display:none !important;*/ }
+.countHours{}
+.countDiv1{}
+.countMinutes{}
+.countDiv2{}
+.countSeconds{}
+
+
+.countDiv{
+	display:inline-block;
+	width:16px;
+	height:1.6em;
+	position:relative;
+}
+
+.countDiv:before,
+.countDiv:after{
+	position:absolute;
+	width:5px;
+	height:5px;
+	background-color:#444;
+	border-radius:50%;
+	left:50%;
+	margin-left:-3px;
+	top:0.5em;
+	box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
+	content:'';
+}
+
+.countDiv:after{
+	top:0.9em;
+}

hanqi/assets/countdown/jquery.countdown.js

@@ -0,0 +1,142 @@
+/**
+ * @name		jQuery Countdown Plugin
+ * @author		Martin Angelov
+ * @version 	1.0
+ * @url			http://tutorialzine.com/2011/12/countdown-jquery/
+ * @license		MIT License
+ */
+
+(function($){
+
+	// Number of seconds in every time division
+	var days	= 24*60*60,
+		hours	= 60*60,
+		minutes	= 60;
+
+	// Creating the plugin
+	$.fn.countdown = function(prop){
+
+		var options = $.extend({
+			callback	: function(){},
+			timestamp	: 0
+		},prop);
+
+		var left, d, h, m, s, positions;
+
+		// Initialize the plugin
+		init(this, options);
+
+		positions = this.find('.position');
+
+		(function tick(){
+
+			// Time left
+			left = Math.floor(((new Date()) - options.timestamp) / 1000);
+
+			if(left < 0){
+				left = 0;
+			}
+
+			// Number of days left
+			d = Math.floor(left / days);
+			updateDay(d);
+			left -= d*days;
+
+			// Number of hours left
+			h = Math.floor(left / hours);
+			updateDuo(3, 4, h);
+			left -= h*hours;
+
+			// Number of minutes left
+			m = Math.floor(left / minutes);
+			updateDuo(5, 6, m);
+			left -= m*minutes;
+
+			// Number of seconds left
+			s = left;
+			updateDuo(7, 8, s);
+
+			// Calling an optional user supplied callback
+			options.callback(d, h, m, s);
+
+			// Scheduling another call of this function in 1s
+			setTimeout(tick, 1000);
+		})();
+
+		// This function updates two digit positions at once
+		function updateDuo(minor,major,value){
+			switchDigit(positions.eq(minor),Math.floor(value/10)%10);
+			switchDigit(positions.eq(major),value%10);
+		}
+
+         // This function updates two digit positions at once
+         function updateDay(value){
+            switchDigit(positions.eq(0),Math.floor(value/100)%10);
+            switchDigit(positions.eq(1),Math.floor(value/10)%10);
+            switchDigit(positions.eq(2),value%10);
+         }
+
+		return this;
+	};
+
+
+	function init(elem, options){
+		elem.addClass('countdownHolder');
+
+		// Creating the markup inside the container
+		$.each(['Days','Hours','Minutes','Seconds'],function(i){
+               var htmlStr = '<span class="position"><span class="digit static">0</span></span><span class="position"><span class="digit static">0</span></span>';
+               if (this == "Days")htmlStr += '<span class="position"><span class="digit static">0</span></span>';
+			$('<span class="count'+this+'">').html(
+				htmlStr
+			).appendTo(elem);
+
+			if(this!="Seconds"){
+				elem.append('<span class="countDiv countDiv'+i+'"></span>');
+			}
+		});
+
+	}
+
+	// Creates an animated transition between the two numbers
+	function switchDigit(position,number){
+
+		var digit = position.find('.digit')
+
+		if(digit.is(':animated')){
+			return false;
+		}
+
+		if(position.data('digit') == number){
+			// We are already showing this number
+			return false;
+		}
+
+		position.data('digit', number);
+
+		var replacement = $('<span>',{
+			'class':'digit',
+			css:{
+				top:'-2.1em',
+				opacity:0
+			},
+			html:number
+		});
+
+		// The .static class is added when the animation
+		// completes. This makes it run smoother.
+
+		digit
+			.before(replacement)
+			.removeClass('static')
+			.animate({top:'2.5em',opacity:0},'fast',function(){
+				digit.remove();
+			})
+
+		replacement
+			.delay(100)
+			.animate({top:0,opacity:1},'fast',function(){
+				replacement.addClass('static');
+			});
+	}
+})(jQuery);

hanqi/assets/css/styles.css

@@ -0,0 +1,109 @@
+/*-------------------------
+	Simple reset
+--------------------------*/
+
+
+*{
+	margin:0;
+	padding:0;
+}
+
+
+/*-------------------------
+	General Styles
+--------------------------*/
+
+
+html{
+	background:url('../img/tile_bg.jpg') #b0b0b0;
+	position:relative;
+}
+
+body{
+	background:url('../img/page_bg_center.jpg') no-repeat center center;
+	min-height: 600px;
+    padding: 200px 0 0;
+	font:14px/1.3 'Segoe UI',Arial, sans-serif;
+}
+
+a, a:visited {
+	text-decoration:none;
+	outline:none;
+	color:#54a6de;
+}
+
+a:hover{
+	text-decoration:underline;
+}
+
+section, footer{
+	display: block;
+}
+
+
+/*----------------------------
+	Main Section
+-----------------------------*/
+
+#note{
+	color: #666666;
+	font-size: 12px;
+	margin: 0 auto;
+	padding: 4px;
+	text-align: center;
+	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+	width: 400px;
+}
+
+
+/*----------------------------
+	The Footer
+-----------------------------*/
+
+
+footer{
+	background-color: #111111;
+	bottom: 0;
+	box-shadow: 0 -1px 2px #111111;
+	height: 45px;
+	left: 0;
+	position: fixed;
+	width: 100%;
+	z-index: 100000;
+}
+
+footer h2{
+	color: #EEEEEE;
+	font-size: 14px;
+	font-weight: normal;
+	left: 50%;
+	margin-left: -400px;
+	padding: 13px 0 0;
+	position: absolute;
+	width: 540px;
+}
+
+footer h2 i{
+	font-style:normal;
+	color:#888;
+}
+
+footer a.tzine,a.tzine:visited{
+	color: #999999;
+	font-size: 12px;
+	left: 50%;
+	margin: 16px 0 0 110px;
+	position: absolute;
+	text-decoration: none;
+	top: 0;
+}
+
+footer a i{
+	color:#ccc;
+	font-style: normal;
+}
+
+footer a i b{
+	color:#c92020;
+	font-weight: normal;
+}

hanqi/assets/js/script.js

@@ -0,0 +1,24 @@
+$(function(){
+
+	var note = $('#note'),
+		ts = new Date(2019, 4, 13),
+		newYear = true;
+
+	$('#countdown').countdown({
+		timestamp	: ts,
+		callback	: function(days, hours, minutes, seconds){
+
+			var message = "";
+			message += "hanqi 心动后已经 ";
+			message += days + " day" + ( days==1 ? '':'s' ) + ", ";
+			message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
+			message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
+			message += seconds + " second" + ( seconds==1 ? '':'s' ) 
+			message += " 没有take action了";
+			message += " <br />";
+
+			note.html(message);
+		}
+	});
+
+});

hanqi/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>韩旗今天行动了吗</title>
+
+        <!-- Our CSS stylesheet file -->
+        <link rel="stylesheet" href="assets/css/styles.css" />
+        <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" />
+
+    </head>
+
+    <body>
+
+        <div id="head" align="center">韩旗今天行动了吗 -- 没有</div>
+		<div id="countdown"></div>
+
+		<p id="note"></p>
+
+        <!-- JavaScript includes -->
+		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+		<script src="assets/countdown/jquery.countdown.js"></script>
+		<script src="assets/js/script.js"></script>
+
+    </body>
+</html>
+