Skip to content

Commit

Permalink
Version 1.0 for 1st anniversary, use jQuery and FlowerPower's code. I…
Browse files Browse the repository at this point in the history 
… think it is a good way for developers to express love.
  • Loading branch information
hackerzhou committed Nov 1, 2011
0 parents commit 884ae6c
Show file tree
Hide file tree
Showing 9 changed files with 703 additions and 0 deletions.
1 change: 1 addition & 0 deletions css/default.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

115 changes: 115 additions & 0 deletions css/default_dev.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
body {
margin: 0;
padding: 0;
background: #FFFFEE;
font-size: 12px;
overflow: auto;
}

#mainDiv{
width: 100%;
height: 100%;
}

#loveHeart {
float: left;
width:670px;
height:625px;
}

#garden {
width: 100%;
height: 100%;
}

#elapseClock {
text-align: right;
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
}

#words {
font-family: "sans-serif";
width: 500px;
font-size: 24px;
color:#666;
}

#messages{
display: none;
}

#elapseClock .digit{
font-family: "digit";
font-size: 36px;
}

#loveu{
padding: 5px;
font-size: 22px;
margin-top: 80px;
margin-right: 120px;
text-align: right;
display: none;
}

#loveu .signature{
margin-top: 10px;
font-size: 20px;
font-style: italic;
}

#clickSound{
display:none;
}

#code {
float: left;
width: 440px;
height: 400px;
color: #333;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
font-size: 12px;
}

#code .string{
color: #2a36ff;
}

#code .keyword{
color: #7f0055;
font-weight:bold;
}

#code .placeholder{
margin-left:15px;
}

#code .space{
margin-left:7px;
}

#code .comments{
color: #3f7f5f;
}

#copyright{
margin-top: 10px;
text-align: center;
width:100%;
color:#666;
}

#errorMsg{
width: 100%;
text-align: center;
font-size: 24px;
position: absolute;
top: 100px;
left:0px;
}

#copyright a{
color:#666;
}
Binary file added digital-7_mono.ttf
Binary file not shown.
102 changes: 102 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Our Love Story</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
</style>
<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>

<body>
<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">* We are both Fudan SSers and programmers,</span><br />
<span class="space"/><span class="comments">* so I write some code to celebrate our 1st anniversary.</span><br />
<span class="space"/><span class="comments">*/</span><br />
Boy i = <span class="keyword">new</span> Boy(<span class="string">"hackerzhou"</span>);<br />
Girl u = <span class="keyword">new</span> Girl(<span class="string">"MaryNee"</span>);<br />
<span class="comments">// Nov 2, 2010, I told you I love you. </span><br />
i.love(u);<br />
<span class="comments">// Luckily, you accepted and became my girlfriend eversince.</span><br />
u.accepted();<br />
<span class="comments">// Since then, I miss u every day.</span><br />
i.miss(u);<br />
<span class="comments">// And take care of u and our love.</span><br />
i.takeCareOf(u);<br />
<span class="comments">// You say that you won't be so easy to marry me.</span><br />
<span class="comments">// So I keep waiting and I have confidence that you will.</span><br />
<span class="keyword">boolean</span> isHesitate = <span class="keyword">true</span>;<br />
<span class="keyword">while</span> (isHesitate) {<br />
<span class="placeholder"/>i.waitFor(u);<br />
<span class="placeholder"/><span class="comments">// I think it is an important decision</span><br />
<span class="placeholder"/><span class="comments">// and you should think it over.</span><br />
<span class="placeholder"/>isHesitate = u.thinkOver();<br />
}<br />
<span class="comments">// After a romantic wedding, we will live happily ever after.</span><br />
i.marry(u);<br />
i.liveHappilyWith(u);<br />
</div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
Minyue, I have fallen in love with you for
<div id="elapseClock"></div>
</div>
<div id="loveu">
Love u forever and ever.<br/>
<div class="signature">- hackerzhou</div>
</div>
</div>
</div>
</div>
<div id="copyright">
Inspired by <a href="http://www.openrise.com/lab/FlowerPower/">FlowerPower</a> project.<br />
Copyright © 2011 <a href='http://hackerzhou.me'>hackerzhou.me</a> 2009-2011
</div>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2010, 10, 2);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefix 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);

timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);

adjustCodePosition();
$("#code").typewriter();
}
</script>
</body>
</html>
1 change: 1 addition & 0 deletions js/functions.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

130 changes: 130 additions & 0 deletions js/functions_dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
// variables
var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;

$(function () {
// setup garden
$loveHeart = $("#loveHeart");
var offsetX = $loveHeart.width() / 2;
var offsetY = $loveHeart.height() / 2 - 55;
$garden = $("#garden");
gardenCanvas = $garden[0];
gardenCanvas.width = $("#loveHeart").width();
gardenCanvas.height = $("#loveHeart").height()
gardenCtx = gardenCanvas.getContext("2d");
gardenCtx.globalCompositeOperation = "lighter";
garden = new Garden(gardenCtx, gardenCanvas);

$("#content").css("width", $loveHeart.width() + $("#code").width());
$("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));
$("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));
$("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));

// renderLoop
setInterval(function () {
garden.render();
}, Garden.options.growSpeed);
});

$(window).resize(function() {
location.replace(location);
});

function getHeartPoint(angle) {
var t = angle / Math.PI;
var x = 19.5 * (16 * Math.pow(Math.sin(t), 3));
var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
return new Array(offsetX + x, offsetY + y);
}

function startHeartAnimation() {
var interval = 50;
var angle = 10;
var heart = new Array();
var animationTimer = setInterval(function () {
var bloom = getHeartPoint(angle);
var draw = true;
for (var i = 0; i < heart.length; i++) {
var p = heart[i];
var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));
if (distance < Garden.options.bloomRadius.max * 1.3) {
draw = false;
break;
}
}
if (draw) {
heart.push(bloom);
garden.createRandomBloom(bloom[0], bloom[1]);
}
if (angle >= 30) {
clearInterval(animationTimer);
showMessages();
} else {
angle += 0.2;
}
}, interval);
}

(function($) {
$.fn.typewriter = function() {
this.each(function() {
var $ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
var timer = setInterval(function() {
var current = str.substr(progress, 1);
if (current == '<') {
progress = str.indexOf('>', progress) + 1;
} else {
progress++;
}
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
if (progress >= str.length) {
clearInterval(timer);
}
}, 75);
});
return this;
};
})(jQuery);

function timeElapse(date){
var current = Date();
var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
var days = Math.floor(seconds / (3600 * 24));
seconds = seconds % (3600 * 24);
var hours = Math.floor(seconds / 3600);
if (hours < 10) {
hours = "0" + hours;
}
seconds = seconds % 3600;
var minutes = Math.floor(seconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = seconds % 60;
if (seconds < 10) {
seconds = "0" + seconds;
}
var result = "<span class=\"digit\">" + days + "</span> days <span class=\"digit\">" + hours + "</span> hours <span class=\"digit\">" + minutes + "</span> minutes <span class=\"digit\">" + seconds + "</span> seconds";
$("#elapseClock").html(result);
}

function showMessages() {
adjustWordsPosition();
$('#messages').fadeIn(5000, function() {
showLoveU();
});
}

function adjustWordsPosition() {
$('#words').css("position", "absolute");
$('#words').css("top", $("#garden").position().top + 195);
$('#words').css("left", $("#garden").position().left + 70);
}

function adjustCodePosition() {
$('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);
}

function showLoveU() {
$('#loveu').fadeIn(3000);
}
1 change: 1 addition & 0 deletions js/garden.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 884ae6c

Please sign in to comment.