Permalink
Browse files

Version 1.0 for 1st anniversary, use jQuery and FlowerPower's code. I…

… think it is a good way for developers to express love.
  • Loading branch information...
0 parents commit 884ae6c4a4372080651835544bf6ff6f573b1852 hackerzhou committed Nov 1, 2011
Showing with 703 additions and 0 deletions.
  1. +1 −0 css/default.css
  2. +115 −0 css/default_dev.css
  3. BIN digital-7_mono.ttf
  4. +102 −0 index.html
  5. +1 −0 js/functions.js
  6. +130 −0 js/functions_dev.js
  7. +1 −0 js/garden.js
  8. +199 −0 js/garden_dev.js
  9. +154 −0 js/jquery.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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 not shown.
@@ -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>

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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);
+}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 884ae6c

Please sign in to comment.