mirror of
https://github.com/tiennm99/nntv.git
synced 2026-10-14 22:17:30 +00:00
[Add] Init
This commit is contained in:
tiennm99 committed
1 parent
2dd7aa8cae
commit
bea7d68163
11 files changed
+309
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 578 B |
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 57.947 57.947" style="enable-background:new 0 0 57.947 57.947;" xml:space="preserve">
|
||||
<g>
|
||||
<path style="fill:#E64C3C;" d="M28.947,56.486c15.685-11.277,23.532-21.592,27.222-29.46c4.311-9.193,0.561-20.589-8.845-24.413
|
||||
C36.268-1.88,28.947,8.486,28.947,8.486S21.678-1.907,10.623,2.588C1.217,6.412-2.533,17.808,1.778,27.001
|
||||
C5.468,34.868,13.262,45.21,28.947,56.486z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 893 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||||
<script src="main.js"></script>
|
||||
<title>Mocha ❤️ Latte</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">Xa nhau... bao nhiêu lâu rùi...?</h1>
|
||||
<div class="box">
|
||||
<div class="about">
|
||||
<div class="info">
|
||||
<img src="img/sugercubs_02-160x160.png" class="avatar" />
|
||||
<div class="details">
|
||||
<p class="name">Mocha</p>
|
||||
<p class="born">xx.xx.xxxx</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="heart-box">
|
||||
<img src="img/sugercubs_01-160x160.png" class="heart" />
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<img src="img/sugercubs_03-160x160.png" class="avatar" />
|
||||
<div class="details">
|
||||
<p class="name">Latte</p>
|
||||
<p class="born">yy.yy.yyyy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time">
|
||||
<h2 class="days"><span>00</span> ngày</h2>
|
||||
<p class="sup-time">
|
||||
<span class="hour">00</span> giờ <span class="min">20</span> phút
|
||||
<span class="second"> 00 </span> giây
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="say-thank">Xa Vy, anh nhớ anh đếm từng giây đó hiuhiu...</p>
|
||||
</div>
|
||||
<iframe
|
||||
src="music/silence.mp3"
|
||||
allow="autoplay"
|
||||
id="audio"
|
||||
style="display: none"
|
||||
></iframe>
|
||||
<audio src="music/Alone.m4a" loop="true" autoplay="true"></audio>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
document.addEventListener(
|
||||
"DOMContentLoaded",
|
||||
function () {
|
||||
var days = document.querySelector(".days span");
|
||||
var hour = document.querySelector(".hour");
|
||||
var min = document.querySelector(".min");
|
||||
var second = document.querySelector(".second");
|
||||
|
||||
var startDate = new Date(2021, 4, 19);
|
||||
days.innerText = Math.floor((new Date() - startDate) / 86400000);
|
||||
countTime();
|
||||
|
||||
function countTime() {
|
||||
let today = new Date();
|
||||
let ms = (today - startDate) % 86400000;
|
||||
hour.innerText = Math.floor(ms / 3600000);
|
||||
min.innerText = Math.floor((ms % 3600000) / 60000);
|
||||
second.innerText = Math.floor(((ms % 3600000) % 60000) / 1000);
|
||||
}
|
||||
|
||||
setInterval(countTime, 1000);
|
||||
},
|
||||
false
|
||||
);
|
||||
Binary file not shown.
Binary file not shown.
+188
@@ -0,0 +1,188 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400&subset=vietnamese");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
background-color: #f8f8f8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
color: rgba(0, 0, 0, 0.653);
|
||||
background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
|
||||
text-shadow: 0 0.2px 0.3px rgba(0, 0, 0, 0.353);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: white;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
width: 60%;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info:last-child .avatar {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.info:last-child .details {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 70px;
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.info .details {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.info .details p {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.born {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time h2,
|
||||
.time p {
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.time h2 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.time p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.sup-time {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.say-thank {
|
||||
text-align: center;
|
||||
margin-top: 6rem;
|
||||
font-weight: 100;
|
||||
color: tomato;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
top: calc(50% - 25px);
|
||||
left: calc(50% - 25px);
|
||||
width: 50px;
|
||||
transform-origin: 50% 50%;
|
||||
opacity: 0.8;
|
||||
animation: heartBeat 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes heartBeat {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 997px) {
|
||||
.box {
|
||||
width: 84%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 2rem 0 1rem 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.about {
|
||||
flex-direction: column;
|
||||
/* align-items: flex-start; */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.info p {
|
||||
text-align: center;
|
||||
margin: 10px 0 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info:last-child .avatar {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: relative;
|
||||
margin: 1.4rem 0;
|
||||
}
|
||||
|
||||
.say-thank {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user