mirror of
https://github.com/tiennm99/20200411.git
synced 2026-08-04 23:01:58 +00:00
194 lines
5.8 KiB
HTML
194 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scala=1.0" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="description" content="Quà kỉ niệm 1 năm quen nhau" />
|
|
<link rel="shortcut icon" type="image/x-icon" href="icon/favicon.ico" />
|
|
<link rel="stylesheet" href="css/style.css" type="text/css" media=" screen" />
|
|
<title>Tien ❤️ Vy</title>
|
|
<script src="js/main.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
function hasClassName(inElement, inClassName) {
|
|
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
|
|
return regExp.test(inElement.className);
|
|
}
|
|
|
|
function addClassName(inElement, inClassName) {
|
|
if (!hasClassName(inElement, inClassName))
|
|
inElement.className = [inElement.className, inClassName].join(' ');
|
|
}
|
|
|
|
function removeClassName(inElement, inClassName) {
|
|
if (hasClassName(inElement, inClassName)) {
|
|
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
|
|
var curClasses = inElement.className;
|
|
inElement.className = curClasses.replace(regExp, ' ');
|
|
}
|
|
}
|
|
|
|
function toggleClassName(inElement, inClassName) {
|
|
if (hasClassName(inElement, inClassName))
|
|
removeClassName(inElement, inClassName);
|
|
else
|
|
addClassName(inElement, inClassName);
|
|
}
|
|
|
|
function toggleShape() {
|
|
var shape = document.getElementById('shape');
|
|
if (hasClassName(shape, 'cube') || hasClassName(shape, 'autoLoad')) {
|
|
if (hasClassName(shape, 'cube')) {
|
|
removeClassName(shape, 'cube');
|
|
}
|
|
if (hasClassName(shape, 'autoLoad')) {
|
|
removeClassName(shape, 'autoLoad');
|
|
}
|
|
addClassName(shape, 'ring');
|
|
} else {
|
|
removeClassName(shape, 'ring');
|
|
addClassName(shape, 'cube');
|
|
}
|
|
|
|
var stage = document.getElementById('stage');
|
|
if (hasClassName(shape, 'ring'))
|
|
stage.style.webkitTransform = 'translateZ(-200px)';
|
|
else
|
|
stage.style.webkitTransform = '';
|
|
}
|
|
|
|
function downloadLink() {
|
|
location.href = 'https://www.facebook.com/Tien.NM99';
|
|
}
|
|
|
|
var count = 0;
|
|
var num_bg = 1;
|
|
var next_bg = 0;
|
|
var preLoadbg;
|
|
|
|
function timedCount() {
|
|
if (count >= 8) {
|
|
count = 0;
|
|
autoLoad();
|
|
} else {
|
|
count = count + 1;
|
|
}
|
|
if (next_bg >= 15) {
|
|
num_bg = num_bg + 1;
|
|
if (num_bg > 10) {
|
|
num_bg = 1;
|
|
}
|
|
document.body.style.backgroundImage = "url(css/bg/" + num_bg + ".jpg)";
|
|
preLoadbg = new Image();
|
|
if (num_bg == 10) {
|
|
preLoadbg.src = "css/bg/1.jpg";
|
|
} else {
|
|
preLoadbg.src = "css/bg/" + (num_bg + 1) + ".jpg";
|
|
}
|
|
next_bg = 0;
|
|
} else {
|
|
next_bg = next_bg + 1;
|
|
}
|
|
setTimeout(timedCount, 1000);
|
|
}
|
|
|
|
function autoLoad() {
|
|
var shapeTest = document.getElementById('shape');
|
|
if (hasClassName(shapeTest, 'cube')) {
|
|
removeClassName(shapeTest, 'cube');
|
|
addClassName(shapeTest, 'autoLoad');
|
|
} else {
|
|
toggleShape();
|
|
}
|
|
}
|
|
</script>
|
|
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="js/snow.js"></script>
|
|
</head>
|
|
|
|
<body onload="timedCount()">
|
|
<h1 class="title">Been Together</h1>
|
|
<div class="box">
|
|
<div class="about">
|
|
<div class="info">
|
|
<img src="img/Tien.jpg" class="avatar" />
|
|
<div class="details">
|
|
<p class="name">Nguyễn Minh Tiến</p>
|
|
<p class="born">26.10.1999</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="heart-box">
|
|
<img src="img/hearts.svg" class="heart" onclick="javascript:window.open('index2.html');" />
|
|
</div>
|
|
|
|
<div class="info">
|
|
<img src="img/Vy.jpg" class="avatar" />
|
|
<div class="details">
|
|
<p class="name">Nguyễn Ngọc Tường Vy</p>
|
|
<p class="born">12.02.1999</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="time">
|
|
<h2 class="days"><span>00</span> DAYS</h2>
|
|
</div>
|
|
<div id="container">
|
|
<div id="stage">
|
|
<div id="shape" class="cube backfaces">
|
|
<div class="plane one"></div>
|
|
<div class="plane two"></div>
|
|
<div class="plane three"></div>
|
|
<div class="plane four"></div>
|
|
<div class="plane five"></div>
|
|
<div class="plane six"></div>
|
|
<div class="plane seven"></div>
|
|
<div class="plane eight"></div>
|
|
<div class="plane nine"></div>
|
|
<div class="plane ten"></div>
|
|
<div class="plane eleven"></div>
|
|
<div class="plane twelve"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>(Chạm vào tim để nhận lời nhắn của anh nha Vy!!^^)</p>
|
|
|
|
<audio id="player" class="audio" controls="controls">
|
|
<source type="audio/mpeg" src="music/What-Makes-You-Beautiful-One-Direction.mp3">
|
|
</audio>
|
|
|
|
<div class="author">
|
|
<button onclick="downloadLink()">miti99</button>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var audios = [
|
|
"music/A-Little-Love-Phung-Hy-Du.mp3",
|
|
"music/I-Do-911.mp3",
|
|
"music/That-Girl-Olly-Murs.mp3",
|
|
"music/What-Makes-You-Beautiful-One-Direction.mp3"
|
|
];
|
|
var music = document.getElementById("player");
|
|
var getSrc = document.getElementsByTagName("source");
|
|
getSrc[0].src = audios[Math.floor(Math.random() * 10)];
|
|
music.load();
|
|
var index = audios.indexOf(getSrc[0].src);
|
|
music.addEventListener('ended', function () {
|
|
if (index == -1 || index >= 9) {
|
|
index = 0;
|
|
} else {
|
|
index = index + 1;
|
|
}
|
|
getSrc[0].src = audios[index];
|
|
music.load();
|
|
music.play();
|
|
});
|
|
var firstPreload = new Image();
|
|
firstPreload.src = "css/bg/2.jpg";
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|