Skip to content

Commit

Permalink
Add Premium UI
Browse files Browse the repository at this point in the history
  • Loading branch information
adhirajpandey committed Mar 21, 2024
1 parent 7072756 commit b7dd11a
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 14 deletions.
10 changes: 7 additions & 3 deletions public/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="icon" type="image/x-icon" href="../images/clipper.png" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="../js/index.js"></script>
<script src="../js/utils.js"></script>
</head>
<body class="bg-slate-900 text-white">
<div class="fixed top-0 left-0 w-full z-50 bg-slate-900">
Expand All @@ -19,7 +20,9 @@
src="../images/clipper.png"
/>
</a>
<div class="text-3xl m-2 font-extrabold text-center">
<div
class="text-3xl m-2 font-extrabold text-center text-white"
>
Clipper
</div>
</div>
Expand All @@ -28,12 +31,13 @@
class="flex-shrink-0 flex py-3 items-center space-x-2 sm:space-x-6"
>
<a
class="text-black bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
href="/login"
id="login-btn"
class="text-black cursor-pointer bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
>
Login
</a>
<a
id="signup-btn"
class="text-black bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
href="/signup"
>Create Account
Expand Down
12 changes: 7 additions & 5 deletions public/html/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="icon" type="image/x-icon" href="../images/clipper.png" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="../js/login.js"></script>
<script src="../js/utils.js"></script>
</head>
<body>
<div class="fixed top-0 left-0 w-full z-50 bg-slate-900">
Expand All @@ -20,7 +21,7 @@
/>
</a>
<div
class="text-3xl m-2 font-extrabold text-white text-center"
class="text-3xl m-2 font-extrabold text-center text-white"
>
Clipper
</div>
Expand All @@ -29,13 +30,14 @@
<div
class="flex-shrink-0 flex py-3 items-center space-x-2 sm:space-x-6"
>
<a
class="text-black bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
href="/login"
<button
id="login-btn"
class="text-black cursor-pointer bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
>
Login
</a>
</button>
<a
id="signup-btn"
class="text-black bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
href="/signup"
>Create Account
Expand Down
44 changes: 42 additions & 2 deletions public/html/premium.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,51 @@
<link rel="icon" type="image/x-icon" href="../images/clipper.png" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="../js/premium.js"></script>
<script src="../js/utils.js"></script>
</head>
<body class="bg-slate-900 text-white">
<h2 class="text-4xl m-2 font-bold text-center">Clipper Premium</h2>
<div class="fixed top-0 left-0 w-full z-50 bg-slate-900">
<div class="mx-auto max-w px-2 md:px-6">
<div class="relative flex h-16 justify-between items-center">
<div class="flex flex-1 items-stretch justify-start">
<a class="flex flex-shrink-0 items-center" href="/">
<img
class="block h-10 w-auto"
src="../images/clipper.png"
/>
</a>
<div
class="text-3xl m-2 font-extrabold text-center text-white"
>
Clipper
</div>
</div>

<div class="container mx-auto p-2 flex flex-col md:flex-row text-white">
<div
class="flex-shrink-0 flex py-3 items-center space-x-2 sm:space-x-6"
>
<button
id="login-btn"
class="text-black cursor-pointer bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
>
Login
</button>
<a
id="signup-btn"
class="text-black bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
href="/signup"
>Create Account
</a>
</div>
</div>
</div>
</div>
<div class="text-2xl mt-20 font-extrabold text-white text-center">
Premium Clipper: Save Your Clip
</div>
<div
class="container mx-auto mt-2 p-2 flex flex-col md:flex-row text-white"
>
<!-- First Half -->
<div class="p-2 text-center order-2">
<h2 class="text-2xl font-bold mb-1">Clip Controls</h2>
Expand Down
10 changes: 6 additions & 4 deletions public/html/signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="icon" type="image/x-icon" href="../images/clipper.png" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="../js/signup.js"></script>
<script src="../js/utils.js"></script>
</head>
<body>
<div class="fixed top-0 left-0 w-full z-50 bg-slate-900">
Expand All @@ -20,7 +21,7 @@
/>
</a>
<div
class="text-3xl m-2 font-extrabold text-white text-center"
class="text-3xl m-2 font-extrabold text-center text-white"
>
Clipper
</div>
Expand All @@ -30,12 +31,13 @@
class="flex-shrink-0 flex py-3 items-center space-x-2 sm:space-x-6"
>
<a
class="text-black bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
href="/login"
id="login-btn"
class="text-black cursor-pointer bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
>
Login
</a>
<a
id="signup-btn"
class="text-black bg-indigo-100 hover:bg-indigo-200 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md shadow-sm"
href="/signup"
>Create Account
Expand Down Expand Up @@ -112,7 +114,7 @@ <h1 class="text-xl xl:text-3xl font-bold">
placeholder="Password"
/>
<button
onclick="loginUser()"
onclick="signupUser()"
id="login-btn"
class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
>
Expand Down
51 changes: 51 additions & 0 deletions public/js/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
function checkLoggedIn() {
if (document.cookie.indexOf("token") !== -1) {
return true
} else {
return false
}
}

function logout() {
document.cookie = "token=;expires=" + new Date(0).toGMTString()
window.location.href = "/"
}

function buttonChange() {
loginBtn = document.getElementById("login-btn")
signupBtn = document.getElementById("signup-btn")

if (checkLoggedIn()) {
loginBtn.classList.remove("bg-indigo-100")
loginBtn.classList.remove("text-black")
loginBtn.classList.remove("hover:bg-indigo-200")
loginBtn.classList.add("bg-red-800")
loginBtn.classList.add("hover:bg-red-600")
loginBtn.classList.add("text-white")
loginBtn.innerHTML = "Logout"

signupBtn.classList.add("hidden")
} else {
loginBtn.classList.remove("bg-red-800")
loginBtn.classList.remove("hover:bg-red-600")
loginBtn.classList.remove("text-white")
loginBtn.classList.add("bg-indigo-100")
loginBtn.classList.add("text-black")
loginBtn.classList.add("hover:bg-indigo-200")
loginBtn.innerHTML = "Login"

signupBtn.classList.remove("hidden")
}
}

document.addEventListener("DOMContentLoaded", function () {
buttonChange()
document.getElementById("login-btn").addEventListener("click", function () {
if (checkLoggedIn()) {
logout()
buttonChange()
} else {
window.location.href = "/login"
}
})
})

0 comments on commit b7dd11a

Please sign in to comment.