Skip to content

Commit

Permalink
one up
Browse files Browse the repository at this point in the history
  • Loading branch information
@al1103
al1103 committed Aug 3, 2022
0 parents commit 672bccd
Show file tree
Hide file tree
Showing 17 changed files with 3,161 additions and 0 deletions.
192 changes: 192 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zilong</title>
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<body>
<header>
<div class="head">

<div class="directional">
<div class="show_navbar">
<i class="fa-solid fa-bars"></i>
</div>
<div class="history">
<ul>
<li id="back"><i class="fa-solid fa-chevron-left"></i></li>
<li id="forward"><i class="fa-solid fa-chevron-right"></i></li>
</ul>
</div>
<div class="nav-left" id="nav-left">
<ul>
<li><a href=""> Premium</a></li>
<li><a href="">Hỗ Trợ</a></li>
<li><a href=""> Tải Xuống</a></li>
</ul>
</div>

<div class="search">
<input type="search" placeholder="search" id="search" value="" />
<div><button class="btn-search"><i class="fa-solid fa-magnifying-glass"></i></butto></div>


</div>
<div class="nav-right">
<ul class="nav-right-sign">
<li><a href="../sign_up/signUp.html"> Đăng Kí</a></li>
<li>
<div><a href="../login/login.html">Đăng Nhập</a></div>
</li>
</ul>
</div>
</div>
</div>
</header>
<nav class="navs">
<div class="nav">
<div class="logo">
<img
src="https://i.pinimg.com/564x/a8/8b/9a/a88b9ae22e2bc04ca221a2a15ae1447b.jpg"
alt=""
/>
</div>
<div class="bar">
<i class="fa-solid fa-xmark"></i>
</div>
<div class="fillter" ></div>
<div class="nav-link">
<ul>
<li id="item" class="active"><a href=""><i class="fa-solid fa-house"></i><span> Trang chủ</span></a></li>
<li id="item"><a href=""><i class="fa-solid fa-magnifying-glass"></i><span> Tìm Kiếm</span></a></li>
<li id="item"><a href=""><i class="fa-solid fa-bookmark"></i><span> Thư Viện</span></a></li>
</ul>
</div>
<div class="nav-link">
<ul>
<li id="item"><a href=""><i class="fa-solid fa-house"></i><span>Tạo playlist</span></a> </li>
<li id="item"><a href=""> <i class="fa-solid fa-magnifying-glass"></i><span>Bài hát yêu thích</span> </a>

</li>
</ul>
</div>
</nav>
<article>
<div class="list">
<a href="./playMusic/Home.html">
<div class="item">
<div class="name-category">
</div>
<div class="content-item">
<div class="image">
<img src="" alt="">
<span><i class="fa-solid fa-play"></i></span>
</div>
<div class="item-footer">
<div class="name-song">${name}</div>
<div class="name-author">q</div>
<div class="date">q</div>
</div>
</div>
</div>
</a>
<a href="./playMusic/Home.html">
<div class="item">
<div class="name-category">
</div>
<div class="content-item">
<div class="image">
<img src="" alt="">
<span><i class="fa-solid fa-play"></i></span>
</div>
<div class="item-footer">
<div class="name-song">${name}</div>
<div class="name-author">q</div>
<div class="date">q</div>
</div>
</div>
</div>
</a>
<a href="./playMusic/Home.html">
<div class="item">
<div class="name-category">
</div>
<div class="content-item">
<div class="image">
<img src="" alt="">
<span><i class="fa-solid fa-play"></i></span>
</div>
<div class="item-footer">
<div class="name-song">${name}</div>
<div class="name-author">q</div>
<div class="date">q</div>
</div>
</div>
</div>
</a>
<a href="./playMusic/Home.html">
<div class="item">
<div class="name-category">
</div>
<div class="content-item">
<div class="image">
<img src="" alt="">
<span><i class="fa-solid fa-play"></i></span>
</div>
<div class="item-footer">
<div class="name-song">${name}</div>
<div class="name-author">q</div>
<div class="date">q</div>
</div>
</div>
</div>
</a>
<a href="./playMusic/Home.html">
<div class="item">
<div class="name-category">
</div>
<div class="content-item">
<div class="image">
<img src="" alt="">
<span><i class="fa-solid fa-play"></i></span>
</div>
<div class="item-footer">
<div class="name-song">${name}</div>
<div class="name-author">q</div>
<div class="date">q</div>
</div>
</div>
</div>
</a>
<a href="./playMusic/Home.html">
<div class="item">
<div class="name-category">
</div>
<div class="content-item">
<div class="image">
<img src="" alt="">
<span><i class="fa-solid fa-play"></i></span>
</div>
<div class="item-footer">
<div class="name-song">${name}</div>
<div class="name-author">q</div>
<div class="date">q</div>
</div>
</div>
</div>
</a>
</div>
</article>
<div class="line"></div>
<footer>
<div class="login">

</div>
</footer>
</body>
<script src="main.js"></script>
</html>
83 changes: 83 additions & 0 deletions login/login.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zilong</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="./styleLogin.css" />
</head>
<body>
<div class="container">
<div class="left">
<div><h3>Zilong</h3></div>
</div>
<div class="right">
<div class="notmember">
<p>Not a member?<a href="../sign_up/signUp.html">Sign up now</a></p>
</div>
<div class="top">
<div class="cycrie">
<h3>Sign in ti Zilong</h3>
<div class="item-logo">
<div class="google"><i class="fa-brands fa-google"></i></div>
<div class="twitter"><i class="fa-brands fa-twitter"></i></div>
</div>
<hr />
<div class="button">
<form
action="../playMusic/Home.html"
method="get"
onsubmit=" return true"
>
<fieldset>
<label for="name">Username or Email Address</label>
<input name="name" type="text" id="name" />
</fieldset>
<fieldset>
<label id="passwords" for="password"
>Password <a href="">Forgot password? </a></label
>

<input type="text" id="password" name="password" />
</fieldset>
<input id="submit" type="submit" value="Sign In" />
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./styleLogin.js"></script>
<!-- <script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDouac5yOPBGTAqnVNp6hZ5SN0JIPgMv2k",
authDomain: "zilong-344001.firebaseapp.com",
projectId: "zilong-344001",
storageBucket: "zilong-344001.appspot.com",
messagingSenderId: "615159455943",
appId: "1:615159455943:web:54625da38c498dd4075ee2",
measurementId: "G-25CLFET1RV",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script> -->
</html>
107 changes: 107 additions & 0 deletions login/styleLogin.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
width: 100%;
height: 95vh;
display: flex;
justify-content: space-between;
flex-direction: row;
margin: 0;
}
.left {
flex: 36%;
background-color: aquamarine;
height: 100vh;
max-width: 550px;
}
.left > div > h3 {
font-size: 40px;
font-family: "Courier New", Courier, monospace;
display: flex;
justify-content: center;
}
.right {
flex: calc(100% - 36%);
flex-grow: 1;
display: flex;
justify-content: space-evenly;
flex-direction: column;
padding-left: 20px;
overflow: hidden;
}
fieldset {
border: 0;
}
fieldset label {
display: block;
}
.cycrie {
width: 50%;
height: 100%;
position: relative;
transform: translate(-50%, -50%);
left: 50%;
max-width: 450px;
top: 50%;
}
hr {
overflow: visible;
text-align: center;
position: relative;
color: #6e6d7a;
}
hr::after {
position: absolute;
z-index: 2;
content: "Or";
left: 50%;
bottom: -7px;
transform: translateX(-50%);
padding: 0 16px;
background-color: #ffffff;
}
.item-logo {
display: flex;
width: 100%;
justify-content: space-evenly;
flex-direction: row;
}
input {
width: 100%;
height: 40px;
border: none;
background-color: rgb(247, 241, 234);
padding-left: 15px;
margin: 20px 0 30px 0;
border-radius: 5px;
}
.item-logo {
margin-bottom: 40px;
}
.cycrie h3 {
text-align: center;
}
input[type="submit"] {
width: 40%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 1px solid rgb(204, 188, 188);
border-radius: 2rem;
}
#passwords {
display: block;
}
#passwords a {
float: right;
}
.notmember p {
display: block;
float: right;
padding-right: 20px;
}
Loading

0 comments on commit 672bccd

Please sign in to comment.