Skip to content

Fix #7: Enhancing the website with effects to the front-end side #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
papali1305 wants to merge 1 commit into
base: Master
Choose a base branch
from
Open

Fix #7: Enhancing the website with effects to the front-end side #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
76 changes: 66 additions & 10 deletions templates/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,71 @@
{%extends 'base.html' %} {%block content%}
{% extends 'base.html' %}
{% block content %}

<div class="p-20 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900">
<h1 class="text-7xl font-bold text-center">{%block title%}404{%endblock%}</h1>
<p>
<div class="p-20 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900 futuristic-bg shadow-lg transition-shadow duration-300 ease-in-out">
<h1 class="text-7xl font-bold text-center futuristic-title">{% block title %}404{% endblock %}</h1>
<p class="text-lg text-gray-300">
Error! Page not found. Go back to
<a class="text-blue-700 underline" href="/">Home</a>
<a class="text-blue-700 underline futuristic-link hover:text-blue-500 transition-colors duration-200" href="/">Home</a>
</p>
</div>
<p class="text-blue-200"><a href="https://github.com/averageblank/urlshortener" class="underline"
target="_blank">Github</a>. Developed By
<a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and <a
href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>

<p class="text-blue-200 text-center mt-4">
<a href="https://github.com/averageblank/urlshortener" class="underline futuristic-link hover:text-blue-300 transition-colors duration-200" target="_blank">Github</a>. Developed By
<a href="https://github.com/AverageBlank" target="_blank" class="underline futuristic-link hover:text-blue-300 transition-colors duration-200">AverageBlank</a> and
<a href="https://github.com/AalokeCode" target="_blank" class="underline futuristic-link hover:text-blue-300 transition-colors duration-200">AalokeCode</a>
</p>
{%endblock%}

{% endblock %}

{% block script %}
<style>
/* Futuristic Background */
.futuristic-bg {
background: radial-gradient(circle at center, #1c1c3c, #2f2f55);
box-shadow: 0px 0px 20px rgba(0, 150, 255, 0.3), inset 0px 0px 15px rgba(0, 150, 255, 0.2);
animation: bg-pulse 8s ease-in-out infinite alternate;
}

@keyframes bg-pulse {
0% { box-shadow: 0 0 15px rgba(0, 150, 255, 0.3), inset 0 0 10px rgba(0, 150, 255, 0.2); }
100% { box-shadow: 0 0 25px rgba(0, 150, 255, 0.4), inset 0 0 20px rgba(0, 150, 255, 0.3); }
}

/* Title Glow Effect */
.futuristic-title {
color: #e5e7eb;
text-shadow: 0 0 8px rgba(0, 150, 255, 0.6), 0 0 12px rgba(0, 150, 255, 0.4);
animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
from { text-shadow: 0 0 8px rgba(0, 150, 255, 0.5), 0 0 10px rgba(0, 150, 255, 0.3); }
to { text-shadow: 0 0 15px rgba(0, 150, 255, 0.8), 0 0 20px rgba(0, 150, 255, 0.5); }
}

/* Futuristic Link Hover Effect */
.futuristic-link {
color: #3b82f6;
text-shadow: 0 0 6px rgba(0, 150, 255, 0.4);
position: relative;
}

.futuristic-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: rgba(0, 150, 255, 0.5);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease-in-out;
}

.futuristic-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
</style>
{% endblock %}
53 changes: 49 additions & 4 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/static/favicon.svg" />
<title>{%block title %} {% endblock %} - trim.lol</title>
<title>{% block title %} {% endblock %} - trim.lol</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Expand All @@ -20,16 +20,61 @@
.errorTrue {
display: block !important;
}

/* Futuristic Background Animation */
.futuristic-bg {
background: radial-gradient(circle at center, #1c1c3c, #2f2f55);
box-shadow: 0px 0px 15px rgba(0, 150, 255, 0.4), inset 0px 0px 10px rgba(0, 150, 255, 0.2);
animation: bg-pulse 8s infinite alternate;
}

@keyframes bg-pulse {
from {
background: radial-gradient(circle at center, #1c1c3c, #2f2f55);
}
to {
background: radial-gradient(circle at center, #1a1a36, #2b2b50);
}
}

/* Glowing Logo Effect */
.futuristic-logo {
filter: drop-shadow(0px 0px 8px rgba(0, 150, 255, 0.6));
transition: filter 0.3s ease-in-out;
}

.futuristic-logo:hover {
filter: drop-shadow(0px 0px 12px rgba(0, 150, 255, 0.8));
}

/* Title Glow Effect */
.futuristic-title {
color: #e5e7eb;
text-shadow: 0 0 8px rgba(0, 150, 255, 0.6), 0 0 12px rgba(0, 150, 255, 0.4);
animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
from {
text-shadow: 0 0 5px rgba(0, 150, 255, 0.5), 0 0 10px rgba(0, 150, 255, 0.3);
}
to {
text-shadow: 0 0 12px rgba(0, 150, 255, 0.8), 0 0 15px rgba(0, 150, 255, 0.5);
}
}
</style>
</head>

<body class="h-full w-full bg-zinc-950">
<body class="h-full w-full bg-zinc-950 futuristic-bg">
<div
class="flex justify-center items-center gap-3 md:gap-7 2xl:gap-10 flex-col w-full h-full bg-[url('static/bg-gradient.png')] bg-top text-white">
<a href="/"><img src="static/logo.svg" class="w-56 pb-3" /></a>
<a href="/">
<img src="static/logo.svg" class="w-56 pb-3 futuristic-logo" />
</a>
<h1 class="text-4xl futuristic-title">{% block title %}</h1>
{% block content %} {% endblock %}
</div>
{% block script %} {% endblock %}
</body>

</html>
</html>
177 changes: 95 additions & 82 deletions templates/generateurl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,42 @@
{% extends 'base.html' %} {%block content %}
{% extends 'base.html' %}

{% block content %}
<div
class="p-8 px-10 md:p-10 2xl:p-16 m-3 rounded-xl w-11/12 md:3/4 lg:w-1/2 2xl:w-2/5 flex items-center flex-col gap-3 bg-zinc-900">
class="p-8 px-10 md:p-10 2xl:p-16 m-3 rounded-xl w-11/12 md:3/4 lg:w-1/2 2xl:w-2/5 flex items-center flex-col gap-3 bg-zinc-900 futuristic-bg">
<div class="flex gap-3 justify-between items-center w-full">
<h1 class="text-2xl font-bold">{%block title%}Generate URL{%endblock%}</h1>
<h1 class="text-2xl font-bold futuristic-title">{% block title %}Generate URL{% endblock %}</h1>
<a href="/stats"
class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">Check
Statistics</a>
class="text-center bg-blue-700 hover:bg-blue-800 futuristic-button transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">
Check Statistics
</a>
</div>
<hr class="w-full border-t-2 opacity-25 mb-3 border-zinc-400" />
<form method="post" action class="flex items-center flex-col w-full" id="generateURLForm">
<div class="mb-3 w-full">
<label>Original URL</label><br />
<label class="futuristic-label">Original URL</label><br />
<input type="text" name="long_url" id="url" placeholder="Enter URL to be shortened"
class="rounded-lg p-2 w-full bg-zinc-800" value="{{old_url}}" />
<p class="text-sm text-red-500 hidden {{error_url}}">
{{error_url_statement}}
class="rounded-lg p-2 w-full bg-zinc-800 futuristic-input" value="{{ old_url }}" />
<p class="text-sm text-red-500 hidden {{ error_url }}">
{{ error_url_statement }}
</p>
</div>
<div class="mb-3 xl:w-4/5 w-11/12">
<label>Custom URL</label>
<input name="custom_url" type="text" id="custom_url" class="rounded-lg p-2 bg-zinc-800 w-full"
placeholder="Enter Custom URL (optional)" value="{{custom_url}}" />
<p class="text-sm text-red-500 hidden {{error_custom_url}}">
{{error_custom_url_statement}}
<label class="futuristic-label">Custom URL</label>
<input name="custom_url" type="text" id="custom_url" class="rounded-lg p-2 bg-zinc-800 w-full futuristic-input"
placeholder="Enter Custom URL (optional)" value="{{ custom_url }}" />
<p class="text-sm text-red-500 hidden {{ error_custom_url }}">
{{ error_custom_url_statement }}
</p>
</div>
<button type="submit" value="submit" id="shorten"
class="text-center bg-blue-700 hover:bg-blue-800 cursor-pointer mb-5 w-3/4 xl:w-1/2 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">
class="text-center bg-blue-700 hover:bg-blue-800 futuristic-button cursor-pointer mb-5 w-3/4 xl:w-1/2 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">
Shorten URL 🔗
</button>
<hr class="border-top border-zinc-700 w-full p-2" />
<h1 class="text-xl mb-3 font-bold">Copy your custom URL</h1>
<div class="mb-3 rounded-lg w-11/12 xl:w-3/4 p-2 pl-4 bg-zinc-800 flex justify-between">
<h1 class="text-xl mb-3 font-bold futuristic-subtitle">Copy your custom URL</h1>
<div class="mb-3 rounded-lg w-11/12 xl:w-3/4 p-2 pl-4 bg-zinc-800 flex justify-between futuristic-input">
<input type="url" id="output" disabled placeholder="Returns your new shortened URL"
class="bg-transparent cursor-not-allowed w-3/4" value="{{new_url}}" />
class="bg-transparent cursor-not-allowed w-3/4" value="{{ new_url }}" />
<button type="button" onclick="return copyContent()" id="copyButton"
class="hover:bg-zinc-700 p-2 transition ease-in-out duration-200 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="fill-white" viewBox="0 0 256 256">
Expand All @@ -47,83 +50,93 @@ <h1 class="text-xl mb-3 font-bold">Copy your custom URL</h1>
</div>
<div class="flex flex-col justify-center items-center">
<a href="/logout"
class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
<path
d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z">
</path>
</svg>Logout</a>
</svg>Logout
</a>
<p class="text-blue-200 text-center px-2"><a href="https://github.com/averageblank/urlshortener" class="underline"
target="_blank">Github</a>. Developed By
<a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and <a
href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
</p>
</div>
{%endblock%} {%block script %}
<script>
// sleep function
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
event.preventDefault();
{% endblock %}

{% block script %}
<style>
/* Futuristic Background */
.futuristic-bg {
background: radial-gradient(circle at center, #1c1c3c, #2f2f55);
box-shadow: 0px 0px 15px rgba(0, 150, 255, 0.4), inset 0px 0px 10px rgba(0, 150, 255, 0.2);
animation: bg-pulse 6s infinite alternate;
}

@keyframes bg-pulse {
from {
background: radial-gradient(circle at center, #1c1c3c, #2f2f55);
}
to {
background: radial-gradient(circle at center, #1a1a36, #2b2b50);
}
}

/* Futuristic Title and Subtitle Glow */
.futuristic-title, .futuristic-subtitle {
color: #e5e7eb;
text-shadow: 0 0 8px rgba(0, 150, 255, 0.6), 0 0 12px rgba(0, 150, 255, 0.4);
animation: glow 1.5s ease-in-out infinite alternate;
}
let text = document.getElementById("output");
let button = document.getElementById("copyButton").innerHTML;

// copy button
const copyContent = async () => {
event.preventDefault();
try {
await navigator.clipboard.writeText(text.value);
copyButton.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
await sleep(2500);
copyButton.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"> <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path></svg>';
console.log("Content copied to clipboard");
} catch (err) {
console.error("Failed to copy: ", err);
@keyframes glow {
from {
text-shadow: 0 0 5px rgba(0, 150, 255, 0.5), 0 0 10px rgba(0, 150, 255, 0.3);
}
};
to {
text-shadow: 0 0 12px rgba(0, 150, 255, 0.8), 0 0 15px rgba(0, 150, 255, 0.5);
}
}

// clear forms when refreshed
window.onload = function () {
document.getElementById("generateURLForm").reset();
};
if ("{{clearForms}}" == "True") {
document.getElementById("generateURLForm").reset();
/* Input Field Styling */
.futuristic-input {
box-shadow: inset 0px 0px 8px rgba(0, 150, 255, 0.3);
color: #d1d5db;
border: 1px solid rgba(0, 150, 255, 0.5);
}

// disable url shortening after you fill in the form
document.addEventListener("DOMContentLoaded", function (event) {
if ("{{completed}}" == "True") {
const button = document.getElementById("shorten");
const custom_url = document.getElementById("custom_url");
const long_url = document.getElementById("url");
button.disabled = true;
custom_url.disabled = true;
long_url.disabled = true;
button.classList.remove("bg-blue-700");
button.classList.remove("cursor-pointer");
button.classList.remove("hover:bg-blue-800");
button.classList.add("bg-gray-500");
button.classList.add("cursor-not-allowed");
custom_url.classList.add("cursor-not-allowed");
long_url.classList.add("cursor-not-allowed");
} else {
const button = document.getElementById("shorten");
const custom_url = document.getElementById("custom_url");
const long_url = document.getElementById("url");
button.disabled = false;
custom_url.disabled = false;
long_url.disabled = false;
button.classList.remove("bg-gray-500");
button.classlist.remove("cursor-not-allowed");
button.classList.add("bg-blue-700");
button.classList.add("cursor-pointer");
button.classList.add("hover:bg-blue-800");
custom_url.classList.remove("cursor-not-allowed");
long_url.classList.remove("cursor-not-allowed");
/* Button Animation */
.futuristic-button {
background: linear-gradient(135deg, #2563eb, #3b82f6);
transition: transform 0.2s ease-in-out;
animation: button-glow 2s ease-in-out infinite alternate;
}

.futuristic-button:hover {
transform: scale(1.05);
box-shadow: 0 0 8px rgba(0, 150, 255, 0.5), 0 0 12px rgba(0, 150, 255, 0.3);
}

@keyframes button-glow {
from {
box-shadow: 0 0 8px rgba(0, 150, 255, 0.5), 0 0 12px rgba(0, 150, 255, 0.3);
}
to {
box-shadow: 0 0 12px rgba(0, 150, 255, 0.8), 0 0 16px rgba(0, 150, 255, 0.6);
}
});
</script>
{%endblock%}
}

/* Label Styling */
.futuristic-label {
color: #93c5fd;
font-weight: 600;
letter-spacing: 0.5px;
transition: color 0.3s ease-in-out;
}

.futuristic-label:hover {
color: #60a5fa;
}
</style>
{% endblock %}
Loading