From a39bdb833c5e14e2f876873c75932197ce529355 Mon Sep 17 00:00:00 2001 From: Deeptanu2005 Date: Sun, 2 Jun 2024 18:46:39 +0530 Subject: [PATCH] update --- appFunctions.js | 50 ++++++++ index.html | 14 ++- script.js | 6 +- styles.css | 328 +++++++++++++++++++++++++++++++++--------------- 4 files changed, 293 insertions(+), 105 deletions(-) create mode 100644 appFunctions.js diff --git a/appFunctions.js b/appFunctions.js new file mode 100644 index 0000000..218d572 --- /dev/null +++ b/appFunctions.js @@ -0,0 +1,50 @@ +const tutorialButton = document.getElementById("tutorial-button"); +const videoOverlay = document.getElementById("video-overlay"); + + +// Function to show video overlay +function showVideo() { + tutorialButton.style.display = "none"; + videoOverlay.style.display = "flex"; +} + +// Function to close video overlay +function closeVideo() { + tutorialButton.style.display = "block"; + videoOverlay.style.display = "none"; +} + +// Show the video overlay on the first visit +document.addEventListener("DOMContentLoaded", function() { + const alreadyVisited = localStorage.getItem("visited"); + if (!alreadyVisited) { + showVideo(); + localStorage.setItem("visited", true); + } +}); + +// Get input fields and the "Add Link" button +const newLinkInput = document.getElementById("new-link"); +const newNameInput = document.getElementById("new-name"); +const newCategoryInput = document.getElementById("new-category"); +const addButton = document.getElementById("add-button"); + +// Add input event listeners to check when all fields are filled +newLinkInput.addEventListener("input", checkFields); +newNameInput.addEventListener("input", checkFields); +newCategoryInput.addEventListener("input", checkFields); + +// Function to check if all fields are filled and apply glow effect to the "Add Link" button +function checkFields() { + if (newLinkInput.value.trim() !== "" && newNameInput.value.trim() !== "" && newCategoryInput.value.trim() !== "") { + addButton.classList.add("glow"); + } else { + addButton.classList.remove("glow"); + } +} + +addButton.addEventListener("click", function() { + addButton.classList.remove("glow"); +}); + + diff --git a/index.html b/index.html index 6845e89..d0f6160 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,9 @@
+ + +

Your Pinned Links

@@ -85,7 +88,7 @@

Your Pinned Links

- +
@@ -107,6 +110,15 @@

Professional Websites

Developed by Deeptanu Sen

GitHub Repository: Pinned Links Manager

+ + + + + + diff --git a/script.js b/script.js index bd491df..b43e684 100644 --- a/script.js +++ b/script.js @@ -77,7 +77,6 @@ function createLinkHTML(link) { favoriteButton.classList.add("favorite-button"); favoriteButton.style.marginLeft = "10px"; - removeLinkButton.style.padding = "8px"; removeLinkButton.style.backgroundColor = "transparent"; removeLinkButton.style.border = "none"; @@ -97,7 +96,7 @@ function createLinkHTML(link) { if (favorites.some((fav) => fav.url === link.url)) { favoriteButton.style.display = "none"; favoriteButton.classList.add("active"); - + removeLinkButton.style.marginLeft = "auto"; } else { favoriteButton.textContent = "Add to Favorites"; @@ -134,6 +133,8 @@ function addLink() { newNameInput.value = ""; newCategoryInput.value = ""; renderLinks(); + + } else { alert("Please fill all fields: URL, Name, and Category."); } @@ -176,4 +177,3 @@ document.getElementById("search").addEventListener("input", function () { }); renderLinks(); - diff --git a/styles.css b/styles.css index cb9d29e..177b74c 100644 --- a/styles.css +++ b/styles.css @@ -1,170 +1,276 @@ -html, body { - font-family: 'Arial', sans-serif; - background: #f0f0f0; - margin: 0; - padding: 0; - min-height: 100%; /* Ensure body stretches to at least full height */ +html, +body { + font-family: "Arial", sans-serif; + background: #f0f0f0; + margin: 0; + padding: 0; + min-height: 100%; /* Ensure body stretches to at least full height */ } .container { - width: 90%; /* Adjust container width */ - max-width: 1200px; - margin: auto; - padding: 20px; + width: 90%; /* Adjust container width */ + max-width: 1200px; + margin: auto; + padding: 20px; } header { - text-align: center; - margin-bottom: 40px; + text-align: center; + margin-bottom: 40px; } h1 { - font-size: 2.5em; - color: #333; + font-size: 2.5em; + color: #333; } .search-bar { - margin-top: 20px; + margin-top: 20px; } .search-bar input { - padding: 10px; - font-size: 1.2em; - width: 80%; - max-width: 500px; - border: 2px solid #333; - border-radius: 5px; + padding: 10px; + font-size: 1.2em; + width: 80%; + max-width: 500px; + border: 2px solid #333; + border-radius: 5px; } +#search:focus { + outline: none; + border-color: #007bff; +} .add-link { - margin-top: 20px; + margin-top: 20px; } .add-link input { - margin-top: 8px; - padding: 10px; - font-size: 1.2em; - width: 70%; - max-width: 400px; - border: 2px solid #333; - border-radius: 5px; + margin-top: 8px; + padding: 10px; + font-size: 1.2em; + width: 70%; + max-width: 400px; + border: 2px solid #333; + border-radius: 5px; } .add-link button { - margin-top: 8px; - padding: 12px; - font-size: 1.2em; - border: none; - background: #000000; - color: white; - border-radius: 5px; - cursor: pointer; + margin-top: 8px; + padding: 12px; + font-size: 1.2em; + border: none; + background: #000000; + color: white; + border-radius: 5px; + cursor: pointer; } -.add-link button:hover { - background: hsl(109, 77%, 24%); -} +/* .add-link button:hover { + background: hsl(109, 77%, 24%); +} */ main { - flex: 1; - text-align: center; - overflow-y: auto; /* Allow main content to scroll */ - margin-bottom: 200px; + flex: 1; + text-align: center; + overflow-y: auto; /* Allow main content to scroll */ + margin-bottom: 200px; } .links { - display: flex; - flex-wrap: wrap; - justify-content: center; + display: flex; + flex-wrap: wrap; + justify-content: center; } .link-item { - background: #fff; - color: #333; - padding: 20px; - margin: 10px; - text-decoration: none; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; - display: flex; - align-items: center; + background: #fff; + color: #333; + padding: 20px; + margin: 10px; + text-decoration: none; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + display: flex; + align-items: center; } .link-item img { - width: 30px; - height: 30px; - margin-right: 10px; + width: 30px; + height: 30px; + margin-right: 10px; } .link-item:hover { - background: #000000; - color: #fff; - transform: translateY(-5px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + background: #000000; + color: #fff; + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .link-item:hover a { - color: #fff; - text-decoration: underline; - transition: all 0.3s ease; + color: #fff; + text-decoration: underline; + transition: all 0.3s ease; } .link-item a { - color: black; - text-decoration: none; + color: black; + text-decoration: none; } .favorite-button { - margin-left: auto; - padding: 5px; - background: #ffcc00; - border: none; - cursor: pointer; + margin-left: auto; + padding: 5px; + background: #ffcc00; + border: none; + cursor: pointer; } @media (max-width: 600px) { - .link-item { - width: 100%; - text-align: center; - } + .link-item { + width: 100%; + text-align: center; + } +} + +#new-link:focus { + outline: none; + border-color: #007bff; +} + +#new-name:focus { + outline: none; + border-color: #007bff; } #new-category { - margin-top: 8px; - padding: 14px 35px 11px 10px; - font-size: 1em; - border: 2px solid #333; - border-radius: 5px; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - background: #fff url('images/Down\ Arrow.png') no-repeat left 12px center; - background-size: 20px; - background-position-x: calc(100% - 15px); - cursor: pointer; + margin-top: 8px; + padding: 14px 35px 11px 10px; + font-size: 1em; + border: 2px solid #333; + border-radius: 5px; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background: #fff url("images/Down\ Arrow.png") no-repeat left 12px center; + background-size: 20px; + background-position-x: calc(100% - 15px); + cursor: pointer; } #new-category:hover { - background: #fff url('images/Down\ Arrow.gif') no-repeat left 12px center; - background-size: 20px; - background-position-x: calc(100% - 15px); + background: #fff url("images/Down\ Arrow.gif") no-repeat left 12px center; + background-size: 20px; + background-position-x: calc(100% - 15px); } #new-category:focus { - outline: none; - border-color: #007BFF; + outline: none; + border-color: #007bff; } #new-category option { - background-color: #fff; - color: #333; + background-color: #fff; + color: #333; } footer { + /*updated footer*/ + position: fixed; + bottom: 0; + left: 0; + right: 0; + flex-shrink: 0; /* Prevent footer from growing */ + background-color: #000; + color: #fff; + text-align: center; + padding: 10px 0; +} + +footer a { + color: #5f7fff; +} + +footer a:hover { + color: #a0b2fd; +} + +/* Styles for the overlay */ +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.close-button { + position: absolute; + top: 20px; + right: 20px; + background: none; + border: none; + font-size: 30px; + color: white; + cursor: pointer; +} + +/* Styles for the tutorial button */ +#tutorial-button { + position: absolute; + top: 10px; + left: 10px; + padding: 10px 20px; + font-size: 16px; + background-color: #5f7fff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + z-index: 2000; + transition: 0.3s ease; +} + +#tutorial-button:hover { + padding: 12px 22px; + border-radius: 10px; + background-color: #465db6; +} + +#tutorial-video { + width: 70vw; + height: calc(70vw * 9 / 16); /* Maintain 16:9 aspect ratio */ + max-width: 100%; + max-height: 100%; +} + +@media (max-width: 600px) { + #tutorial-button { + font-size: 14px; + padding: 8px 16px; + } + #tutorial-video { + width: 90vw; + height: calc(90vw * 9 / 16); /* Maintain 16:9 aspect ratio */ + } + + #tutorial-button:hover { + padding: 8px 16px; + border-radius: 5px; + background-color: #5f7fff; + } + + footer { /*updated footer*/ position: fixed; - bottom: 0; + bottom: 0; left: 0; right: 0; flex-shrink: 0; /* Prevent footer from growing */ @@ -172,9 +278,29 @@ footer { color: #fff; text-align: center; padding: 10px 0; + } } +/* Add styles for glowing effect */ +.glow { + animation: glowing 1500ms infinite; +} -footer a { - color: #b4dae7; -} \ No newline at end of file +@keyframes glowing { + 0% { + background-color: #000000; + box-shadow: 0 0 10px #5f7fff; + text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff; + } + 50% { + background-color: #000000; + box-shadow: 0 0 20px #5386ff; + text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff; + } + + 100% { + background-color: #000000; + box-shadow: 0 0 10px #5f7fff; + text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff; + } +}