-
-
Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Loading...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/Liquid Loader/script.js b/Liquid Loader/script.js
new file mode 100644
index 0000000..1af42e4
--- /dev/null
+++ b/Liquid Loader/script.js
@@ -0,0 +1,6 @@
+// Optional JS - currently no interaction is required.
+// This sets CSS variables dynamically if desired.
+document.querySelectorAll(".drop").forEach((drop, index) => {
+ drop.style.setProperty("--i", index);
+ });
+
\ No newline at end of file
diff --git a/Liquid Loader/style.css b/Liquid Loader/style.css
index cb3b0ad..20023b1 100644
--- a/Liquid Loader/style.css
+++ b/Liquid Loader/style.css
@@ -1,104 +1,86 @@
-@import url("https://fonts.googleapis.com/css?family=Poppins");
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
-
padding: 0;
-
box-sizing: border-box;
+}
- font-family: "Poppins";
-
+body {
+ font-family: "Poppins", sans-serif;
font-size: 10px;
+ background: linear-gradient(45deg, #006bc6, #1ecafc);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
}
.container {
- width: 100%;
-
- min-height: 100vh;
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
- background: linear-gradient(45deg, #006bc6, #1ecafc);
+ position: relative;
}
.loader {
position: relative;
-
display: flex;
-
justify-content: center;
-
align-items: center;
}
.loader h2 {
position: absolute;
-
color: #fff;
-
font-size: 2.5rem;
-
font-weight: 500;
-
animation: animateText 5s ease-in-out infinite;
}
-.loader .drops {
+.drops {
position: relative;
-
width: 300px;
-
height: 300px;
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
filter: url(#Gooey);
}
-.loader .drops span {
+.drop {
position: absolute;
-
left: 0;
-
- transform-origin: 150px;
-
width: 100px;
-
height: 100px;
-
background: #fff;
-
border-radius: 50%;
-
+ transform-origin: 150px;
animation: animateDrops 5s ease-in-out infinite;
-
- animation-delay: calc(0.15s * var(--i));
}
+.drop[data-index="0"] { animation-delay: calc(0.15s * 0); }
+.drop[data-index="1"] { animation-delay: calc(0.15s * 1); }
+.drop[data-index="2"] { animation-delay: calc(0.15s * 2); }
+.drop[data-index="3"] { animation-delay: calc(0.15s * 3); }
+.drop[data-index="4"] { animation-delay: calc(0.15s * 4); }
+.drop[data-index="5"] { animation-delay: calc(0.15s * 5); }
+.drop[data-index="6"] { animation-delay: calc(0.15s * 6); }
+.drop[data-index="7"] { animation-delay: calc(0.15s * 7); }
+
@keyframes animateDrops {
0% {
width: 100px;
height: 100px;
transform: rotate(0deg) translateX(120px);
}
- 40%,
- 70% {
+ 40%, 70% {
width: 40px;
height: 40px;
transform: rotate(calc(360deg / 8 * var(--i)));
box-shadow: 0 0 0 10px #fff;
}
- 90%,
- 100% {
+ 90%, 100% {
width: 100px;
height: 100px;
transform: rotate(0deg) translateX(120px);
@@ -109,12 +91,10 @@
0% {
opacity: 0;
}
- 40%,
- 70% {
+ 40%, 70% {
opacity: 1;
}
- 90%,
- 100% {
+ 90%, 100% {
opacity: 0;
}
}
@@ -122,4 +102,4 @@
svg {
width: 0;
height: 0;
-}
\ No newline at end of file
+}
diff --git a/Magic Indicator Menu/dist/index.html b/Magic Indicator Menu/dist/index.html
index 8a8135e..3836269 100644
--- a/Magic Indicator Menu/dist/index.html
+++ b/Magic Indicator Menu/dist/index.html
@@ -2,27 +2,26 @@
+
CodePen - Magic Indicator 2
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Magic Navigation Menu/dist/index.html b/Magic Navigation Menu/dist/index.html
index 034545c..a7759d9 100644
--- a/Magic Navigation Menu/dist/index.html
+++ b/Magic Navigation Menu/dist/index.html
@@ -1,10 +1,10 @@
-
+
-
-
CodePen - Magic Navigation Menu Indicator
-
-
+
+
+
CodePen - Magic Navigation Menu Indicator
+
diff --git a/Ninja Calculator/dist/script.js b/Ninja Calculator/dist/script.js
index 9ffaaf6..a320147 100644
--- a/Ninja Calculator/dist/script.js
+++ b/Ninja Calculator/dist/script.js
@@ -8,7 +8,7 @@ const calculate = (btnValue) => {
display.focus();
if (btnValue === "=" && output !== "") {
//If output has '%', replace with '/100' before evaluating.
- output = eval(output.replace("%", "/100"));
+ output = eval(output.replace(/%/g, "/100"));
} else if (btnValue === "AC") {
output = "";
} else if (btnValue === "DEL") {
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..034e848
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,21 @@
+# Security Policy
+
+## Supported Versions
+
+Use this section to tell people about which versions of your project are
+currently being supported with security updates.
+
+| Version | Supported |
+| ------- | ------------------ |
+| 5.1.x | :white_check_mark: |
+| 5.0.x | :x: |
+| 4.0.x | :white_check_mark: |
+| < 4.0 | :x: |
+
+## Reporting a Vulnerability
+
+Use this section to tell people how to report a vulnerability.
+
+Tell them where to go, how often they can expect to get an update on a
+reported vulnerability, what to expect if the vulnerability is accepted or
+declined, etc.
diff --git a/Theme Digital Clock/dist/style.css b/Theme Digital Clock/dist/style.css
index c602814..be42f12 100644
--- a/Theme Digital Clock/dist/style.css
+++ b/Theme Digital Clock/dist/style.css
@@ -21,7 +21,7 @@ section.dark{
}
section .container{
display: flex;
- align-items center;
+ align-items: center;
justify-content: center;
height: 220px;
max-width: 560px;
diff --git a/scroll to top/index.html b/scroll to top/index.html
index 0e84e1f..36174e3 100644
--- a/scroll to top/index.html
+++ b/scroll to top/index.html
@@ -1,4 +1,41 @@
+
+
+
+
+
+
+
Scroll to Top Demo
+
+
+
+
+
+
+
+
+
+ Scroll
+ Back to Top Button
+ Scroll down the page
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, ac tincidunt nisi nisl eu nunc.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -101,4 +138,4 @@
Scroll down the page
-
\ No newline at end of file
+ -->
diff --git a/scroll to top/script.js b/scroll to top/script.js
new file mode 100644
index 0000000..ad58b42
--- /dev/null
+++ b/scroll to top/script.js
@@ -0,0 +1,16 @@
+// Pure JavaScript version, no jQuery required
+document.addEventListener("DOMContentLoaded", function() {
+ const btn = document.getElementById('scrollTopBtn');
+ window.addEventListener('scroll', function() {
+ if (window.scrollY > 300) {
+ btn.classList.add('show');
+ } else {
+ btn.classList.remove('show');
+ }
+ });
+
+ btn.addEventListener('click', function(e) {
+ e.preventDefault();
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ });
+});
diff --git a/scroll to top/style.css b/scroll to top/style.css
index 8f409c0..6aaf3c0 100644
--- a/scroll to top/style.css
+++ b/scroll to top/style.css
@@ -1,4 +1,24 @@
- @import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
+#scrollTopBtn {
+ display: none;
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ z-index: 1050;
+ width: 48px;
+ height: 48px;
+ font-size: 1.25rem;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Show button when active */
+#scrollTopBtn.show {
+ display: flex;
+}
+
+/* old version
+
+@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
body{background-color: #1f2029 !important;
margin:0;
@@ -39,7 +59,7 @@
}
/* Styles for the content section */
-
+/*
.content {
width: 77%;
margin: 50px auto;
@@ -84,45 +104,4 @@ h1{
p{
color:#b5b5b5;
font-size:16px;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+} */