Love Stories

commit 860d5d351d03716b81ff2aca0002437d9e68f97d Author: gitea Date: Fri Jun 16 09:39:28 2023 +0800 [init] initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..a6d18e0 --- /dev/null +++ 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源码 diff --git a/css/format.css b/css/format.css new file mode 100644 index 0000000..58b6e8c --- /dev/null +++ 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; +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..3055f21 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1391e65 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + Love Stories + + + + + +

+ +

We have been together

+ Days + Hours + Minutes + Seconds +

+ +

+
+ +

+ +

+
+ + +

+ +

+ + + + + + + + + diff --git a/js/date.js b/js/date.js new file mode 100644 index 0000000..f5a6c93 --- /dev/null +++ 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) diff --git a/js/playImg.js b/js/playImg.js new file mode 100644 index 0000000..3cdeafe --- /dev/null +++ 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(); + + + diff --git a/js/stars.js b/js/stars.js new file mode 100644 index 0000000..ee38732 --- /dev/null +++ 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() diff --git a/js/typeWriter.js b/js/typeWriter.js new file mode 100644 index 0000000..c1a296d --- /dev/null +++ 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); +//}; diff --git a/music/music.mp3 b/music/music.mp3 new file mode 100644 index 0000000..9c2e4dd Binary files /dev/null and b/music/music.mp3 differ diff --git a/pic/love.png b/pic/love.png new file mode 100644 index 0000000..011f756 Binary files /dev/null and b/pic/love.png differ diff --git a/pic/pic1.jpg b/pic/pic1.jpg new file mode 100644 index 0000000..f9727f2 Binary files /dev/null and b/pic/pic1.jpg differ diff --git a/pic/pic2.jpg b/pic/pic2.jpg new file mode 100644 index 0000000..9ae9671 Binary files /dev/null and b/pic/pic2.jpg differ diff --git a/pic/pic3.jpg b/pic/pic3.jpg new file mode 100644 index 0000000..ce3c5a4 Binary files /dev/null and b/pic/pic3.jpg differ