[init] initial commit

2023-06-16 09:39:28 +08:00 · 2023-06-16 09:39:28 +08:00 · 860d5d351d
commit 860d5d351d
13 changed files with 605 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,13 @@
+## A website for my girlfriend to memorize our first anniversary of love.
+
+demo：[https://ain-crad.github.io/First-Anniversary-of-Love](https://ain-crad.github.io/First-Anniversary-of-Love)
+
+文件目录：   
+* css：css源码      
+* js/date.js：显示恋爱时长  
+* js/playImg.js：循环播放照片  
+* js/stars.js：背景部分  
+* js/typeWriter.js：模拟打字效果  
+* music：背景音乐  
+* pic：图片  
+* index.html：html源码
--- a/css/format.css
+++ b/css/format.css
@ -0,0 +1,140 @@
+#typeDiv {
+	position: absolute;
+	top: 45%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: 100%;
+	height: 20%;
+	text-align: center;
+}
+
+#txt1 {
+	font-size: 24px;
+	text-align: center;
+	color: white;
+}
+#txt2 {
+	font-size: 24px;
+	text-align: center;
+	color: white;
+}
+
+#content{
+	position: absolute;
+	top: 1%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: 100%;
+	height: 20%;
+}
+
+#together{
+	font-size: 32px;
+	text-align: center;
+	color: white;
+}
+
+#timer{
+	text-align: center;
+	color: white;
+}
+
+#d{
+	font-size: 24px;
+}
+
+#h{
+	font-size: 24px;
+}
+
+#m{
+	font-size: 24px;
+}
+
+#s{
+	font-size: 24px;
+}
+
+#heartTxt{
+	position: absolute;
+	display: table;
+	vertical-align: middle;
+	top: 80%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: 10%;
+	height: 8%;
+}
+
+#clickMe{
+	display: inline-block;
+	font-size: 16px;
+	width: 100%;
+	text-align: center;
+	color: white;
+}
+
+#heart{
+	width: 100%;
+	height: 100%;
+}
+
+#button{
+	background-image: url("../pic/love.png");
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-color: transparent;
+	border: none;
+	outline: none;
+	background-position: center;
+	transition: 0.1s;
+	width: 100%;
+	height: 100%;
+
+}
+
+#button:active {
+	width: 92%;
+	height: 92%;
+}
+
+#imgTxt{
+	position: absolute;
+	display: table;
+	vertical-align: middle;
+	top: 20%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: 100%;
+	height: 50%;
+}
+
+#img{
+	display: block;
+	top: 30%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: auto;
+	height: auto;
+}
+
+#Txt{
+	display: inline-block;
+	font-size: 17px;
+	width: 100%;
+	text-align: center;
+	color: white;
+}
+
+#tmp{
+	display: inline-block;
+	font-size: 17px;
+	width: 100%;
+	text-align: center;
+	color: white;
+}
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html lang="en" style="overflow:hidden;">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+		<meta charset="UTF-8">
+		<title>Love Stories</title>
+		<link rel="stylesheet" type="text/css" href="css/format.css">
+	</head>
+
+	<body style="margin:0px">
+        <!--
+		<audio autoplay loop>
+			<source src="music/music.mp3" type="audio/mpeg">
+			Your browser does not support the audio.
+		</audio>
+            controls="controls"
+            type="audio/mpeg"
+        <a href='music.html'>Music</a>
+        -->
+        <audio autoplay="autoplay" loop="" preload="auto">
+            <source src="music/music.mp3">
+			Your browser does not support the audio.
+        </audio>
+
+		<canvas></canvas>
+		<div id="content">
+			<h2 id="together">We have been together</h2>
+			<div id="timer">
+				<b id="d"></b> Days 
+				<b id="h"></b> Hours
+				<b id="m"></b> Minutes
+				<b id="s"></b> Seconds
+			</div>
+		</div>
+
+    	<div id = "typeDiv">
+        	<span id="txt1"></span> <br />
+        	<span id="txt2"></span>
+    	</div>		
+
+		<div id="imgTxt">
+			<span id="Txt"></span> <br />
+			<span id="tmp"></span>
+			<img id="img" src="">
+		</div>
+
+		<div id="heartTxt">
+			<span id="clickMe"></span>
+			<div id="heart">
+				<button id="button" onclick="play()"></button>
+			</div>
+		</div>
+
+		<script >
+			var ok = 0;
+			var flag = 1;
+			var myImage = document.getElementById("img");
+			var myTxt = document.getElementById("Txt");
+			var imageArray = [
+			    "pic/pic1.jpg", 
+			    "pic/pic2.jpg",
+			    "pic/pic3.jpg"
+			];
+			var imageIndex = 0;
+			var txtArray = [
+			    "2023年1月24日 - 你好哇，小可爱~", 
+				"2023年1月28日 - 情侣头像上线啦，真好看！",
+				"2023年2月2日 - 你下班的时候被车撞到了，手机也摔的不开机了，我好担心，第一次感到非常的无力。"
+			];
+			 var len = imageArray.length;
+			var t = 0;
+		</script>
+		
+		<script type="text/javascript" src="js/stars.js"></script>
+		<script type="text/javascript" src="js/typeWriter.js"></script>
+		<script type="text/javascript" src="js/date.js"></script>
+		<script type="text/javascript" src="js/playImg.js"></script>
+	</body>
+</html>
--- a/js/date.js
+++ b/js/date.js
@ -0,0 +1,51 @@
+
+var dv = document.getElementById("content");
+dv.style.opacity = 0;
+var val = 0;
+
+function timer(){
+	var start = new Date(2023, 0, 24, 19, 20, 00);
+	var t = new Date() - start;
+	var d = Math.floor(t / 1000 / 60 / 60 / 24);
+	var h = Math.floor(t / 1000 / 60 / 60 % 24);
+	if(h < 10){
+		h = "0" + h;
+	}
+	var m = Math.floor(t / 1000 / 60 % 60);
+	if(m < 10){
+		m = "0" + m;
+	}
+	var s = Math.floor(t / 1000 % 60);
+	if(s < 10){
+		s = "0" + s;
+	}
+	document.getElementById("d").innerHTML = d;
+	document.getElementById("h").innerHTML = h;
+	document.getElementById("m").innerHTML = m;
+	document.getElementById("s").innerHTML = s;
+}
+
+function fadein(){
+	if(val < 1){
+		val += 0.025;
+		dv.style.opacity = val;
+	}
+	else{
+		clearInterval(fadeinInterval);
+		if(ok == 2){
+			ok += 1;
+		}
+	}
+}
+
+var fadeInterval;
+var fadeinInterval;
+
+timer();
+setInterval(timer, 1000);
+fadeInterval = setInterval(function(){
+	if(ok == 2){
+		clearInterval(fadeInterval);
+		fadeinInterval = setInterval(fadein, 50);
+	}
+}, 50)
--- a/js/playImg.js
+++ b/js/playImg.js
@ -0,0 +1,77 @@
+
+var btn = document.getElementById("heartTxt");
+btn.style.opacity = 0;
+var btnVal = 0;
+
+function showImage(){
+	//document.getElementById("imgTxt").style.opacity = 0;
+	myImage.setAttribute("src", imageArray[imageIndex]);
+	myTxt.innerHTML = txtArray[imageIndex];
+	//document.getElementById("imgTxt").style.opacity = 1 - flag;
+	imageIndex++;
+	if(imageIndex >= len){
+		imageIndex = 0;
+	}
+}
+
+function play(){
+	if(t == 0){
+		myImage.setAttribute("src", "");
+		myTxt.innerHTML = "";
+		imageIndex = 0;
+		clearInterval(showImageInterval);
+	}
+	flag = 1 - flag;
+	document.getElementById("typeDiv").style.opacity = flag;
+	document.getElementById("imgTxt").style.opacity = 1 - flag;
+	if(t == 0){
+		//setTimeout(showImage, 1000);
+		setInterval(showImage, 7000);
+	}
+	t++;
+}
+
+function preshowImage(){
+	document.getElementById("imgTxt").style.opacity = 0;
+	myImage.setAttribute("src", imageArray[imageIndex]);
+	myTxt.innerHTML = txtArray[imageIndex];
+	imageIndex++;
+	if(imageIndex >= len){
+		imageIndex = 0;
+	}
+}
+
+function buttonFadeIn(){
+	if(btnVal < 1){
+		btnVal += 0.025;
+		btn.style.opacity = btnVal;
+	}
+	else{
+		clearInterval(buttonInterval);
+		if(ok == 3){
+			ok += 1;
+		}
+	}
+}
+
+
+function event(){
+
+	showImageInterval = setInterval(preshowImage, 300);
+
+	imgInterval = setInterval(function (){
+		if(ok == 3){
+			setTimeout(function(){buttonInterval = setInterval(buttonFadeIn, 90);}, 1500);
+			clearInterval(imgInterval);
+		}
+	}, 50);
+}
+
+var showImageInterval;
+var imgInterval;
+var buttonInterval;
+
+event();
+
+
+
--- a/js/stars.js
+++ b/js/stars.js
@ -0,0 +1,209 @@
+//import utils from "./utils"
+
+const canvas = document.querySelector('canvas')
+const c = canvas.getContext('2d')
+
+canvas.width = innerWidth
+canvas.height = innerHeight
+
+window.addEventListener("resize", function() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    init()
+});
+
+/*
+const mouse = {
+    x: innerWidth / 2,
+    y: innerHeight / 2
+}
+
+
+// Event Listeners
+addEventListener('mousemove', event => {
+    mouse.x = event.clientX
+    mouse.y = event.clientY
+})
+*/
+
+// Objects
+function Star(x, y, radius, color) {
+    this.x = x
+    this.y = y
+    this.radius = radius
+    this.color = color
+    this.velocity = {
+        x: (Math.random() - 0.5) * 8,
+        y: 3
+    }
+    this.friction = 0.8
+    this.gravity = 1
+}
+
+Star.prototype.draw = function() {
+    c.save()
+    c.beginPath()
+    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
+    c.fillStyle = this.color
+    c.shadowColor = '#E3EAEF'
+    c.shadowBlur = 20
+    c.fill()
+    c.closePath()
+    c.restore()
+}
+
+Star.prototype.update = function() {
+    this.draw()
+
+    //When ball hits bottom of screen
+    if(this.y + this.radius + this.velocity.y > canvas.height - groundHeight){
+        this.velocity.y = -this.velocity.y * this.friction
+        this.shatter()
+    }
+    else{
+        this.velocity.y += this.gravity
+    }
+
+    //Hits side of screen
+    if(this.x + this.radius + this.velocity.x > canvas.width || this.x - this.radius <= 0){
+        this.velocity.x = -this.velocity.x * this.friction
+        this.shatter()
+    }
+
+    this.x += this.velocity.x
+    this.y += this.velocity.y
+
+}
+
+Star.prototype.shatter = function(){
+    this.radius -= 3
+    for(let i = 0; i < 8; i++){
+        miniStars.push(new MiniStar(this.x, this.y, 2))
+    }
+
+}
+
+function MiniStar(x, y, radius, color){
+    Star.call(this, x, y, radius, color)
+    this.velocity = {
+        x: (Math.random() - 0.5) * 10,
+        y: (Math.random() - 0.5) * 30
+    }
+    this.friction = 0.8
+    this.gravity = 0.1
+    this.ttl = 100
+    this.opacity = 1
+}
+
+MiniStar.prototype.draw = function() {
+    c.save()
+    c.beginPath()
+    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
+    c.fillStyle = `rgba(227,234, 239, ${this.opacity})`
+    c.shadowColor = '#E3EAEF'
+    c.shadowBlur = 20
+    c.fill()
+    c.closePath()
+    c.restore()
+}
+
+MiniStar.prototype.update = function() {
+    this.draw()
+
+    if(this.y + this.radius + this.velocity.y > canvas.height - groundHeight){
+        this.velocity.y = -this.velocity.y * this.friction
+    }
+    else{
+        this.velocity.y += this.gravity
+    }
+
+    this.x += this.velocity.x
+    this.y += this.velocity.y
+    this.ttl -= 1
+    this.opacity -= 0.0001 * this.ttl
+}
+
+function creatMountainRange(mountainAmount, height, color){
+    for(let i = 0; i < mountainAmount; i++){
+        const mountainWidth = canvas.width / mountainAmount
+        c.beginPath()
+        c.moveTo(i * mountainWidth, canvas.height)
+        c.lineTo(i * mountainWidth + mountainWidth + 0.2*canvas.height, canvas.height)
+        c.lineTo(i * mountainWidth + mountainWidth / 2, canvas.height - height)
+        c.lineTo(i * mountainWidth - 0.2*canvas.height, canvas.height)
+        c.fillStyle = color
+        c.fill()
+        c.closePath()
+    }
+}
+
+// Implementation
+const backgroundGradient = c.createLinearGradient(0, 0, canvas.width, canvas.height)
+backgroundGradient.addColorStop(0, '#171e26')
+backgroundGradient.addColorStop(1, '#3f586b')
+
+let stars
+let miniStars
+let backgroundStars
+let ticker = 0
+let randomSpawnRate = 75
+const groundHeight = 0.06 * canvas.height
+let inf = 1e9
+function init() {
+    stars = []
+    miniStars = []
+    backgroundStars = []
+
+    for(let i = 0; i < 200; i++){
+        const x = Math.random() * canvas.width
+        const y = Math.random() * canvas.height
+        const radius = Math.random() * 3
+        backgroundStars.push(new Star(x, y, radius, 'white'))
+    }
+}
+
+// Animation Loop
+function animate() {
+    c.clearRect(0, 0, 0, canvas.height)
+    c.fillStyle = backgroundGradient
+    c.fillRect(0, 0, canvas.width, canvas.height)
+
+    backgroundStars.forEach(backgroundStar => {
+        backgroundStar.draw()
+    })
+
+    if(flag) creatMountainRange(1, canvas.height * 0.7, '#384551')
+    if(flag) creatMountainRange(2, canvas.height * 0.6, '#2B3843')
+    if(flag) creatMountainRange(3, canvas.height * 0.4, '#26333E')
+    c.fillStyle = '#182028'
+    c.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight)
+    stars.forEach((star, index) => {
+        star.update();
+        if(star.radius == 0){
+            stars.splice(index, 1)
+        }
+    });
+
+    miniStars.forEach((miniStar, index) => {
+        miniStar.update();
+        if(miniStar.ttl == 0){
+            miniStars.splice(index, 1)
+        }
+    });
+
+    ticker++
+    if(ticker >= inf){
+        ticker = 0
+    }
+    if(ticker % randomSpawnRate == 0){
+        const radius = 9
+        const x = Math.max(radius, Math.random() * canvas.width - radius)
+        stars.push(new Star(x, -100, 9, '#E3EAEF'))
+        randomSpawnRate = Math.floor(Math.random() * (200 - 125 + 1) + 125)
+    }
+
+    requestAnimationFrame(animate)
+}
+
+init()
+animate()
--- a/js/typeWriter.js
+++ b/js/typeWriter.js
@ -0,0 +1,36 @@
+
+let i = 0;
+let text1 = "你好啊，小扈同学，很高兴认识你！";
+let text2 = "愿我们每一天都是值得纪念的，也是值得怀念的。"
+let speed = 100;
+
+function typeWriter(text, para){
+	if(ok == 2){
+		clearInterval(typeInterval);
+	}
+	if(i < text.length){
+		document.getElementById(para).innerHTML += text.charAt(i);
+		i++;
+		speed = Math.random() * 50 + 100;
+	}
+	else{
+		if(ok == 0){
+			i = 0;
+		}
+		ok += 1;
+	}
+}
+
+var typeInterval;
+
+//window.onload = function() {
+//	window.onload = function(){};
+   	typeInterval = setInterval(function(){
+		if(ok == 0){
+			typeWriter(text1, "txt1");
+		}
+		else if(ok == 1){
+			typeWriter(text2, "txt2");
+		}
+	}, 300);
+//};
--- a/music/music.mp3
+++ b/music/music.mp3
--- a/pic/love.png
+++ b/pic/love.png
--- a/pic/pic1.jpg
+++ b/pic/pic1.jpg
--- a/pic/pic2.jpg
+++ b/pic/pic2.jpg
--- a/pic/pic3.jpg
+++ b/pic/pic3.jpg