From 90cf044fae59fc74ab2e1243aaea10c2696296b5 Mon Sep 17 00:00:00 2001 From: PRIYESH SINGH Date: Wed, 12 Feb 2025 12:13:41 +0530 Subject: [PATCH] adding files into the folder --- navbar.css | 177 +++++++ pages/Blog.html | 405 ++++++++++++++++ pages/Security.html | 825 ++++++++++++++++++++++++++++++++ pages/SignUp.html | 149 ++++++ pages/code360bycn.css | 615 ++++++++++++++++++++++++ pages/code360bycn.html | 706 ++++++++++++++++++++++++++++ pages/code360bycn.js | 148 ++++++ pages/codechef.css | 613 ++++++++++++++++++++++++ pages/codechef.js | 149 ++++++ pages/codechef3.html | 706 ++++++++++++++++++++++++++++ pages/codeforces.html | 308 ++++++++++++ pages/contributors.html | 980 +++++++++++++++++++++++++++++++++++++++ pages/geekforgeek.css | 444 ++++++++++++++++++ pages/geekforgeek.js | 262 +++++++++++ pages/geeksforgeeks.html | 321 +++++++++++++ pages/hacker.css | 410 ++++++++++++++++ pages/hacker.js | 124 +++++ pages/hackerrank.html | 325 +++++++++++++ pages/leetcode.css | 421 +++++++++++++++++ pages/leetcode.html | 306 ++++++++++++ pages/leetcode.js | 262 +++++++++++ pages/leetcode1.html | 265 +++++++++++ pages/privacy.html | 661 ++++++++++++++++++++++++++ pages/script.js | 43 ++ pages/scroll.css | 58 +++ pages/scroll.js | 29 ++ pages/terms.html | 871 ++++++++++++++++++++++++++++++++++ pages/testimonial.html | 814 ++++++++++++++++++++++++++++++++ pages/vanilla-tilt.js | 501 ++++++++++++++++++++ pages/work.html | 795 +++++++++++++++++++++++++++++++ styles.css | 759 ++++++++++++++++++++++++++++++ 31 files changed, 13452 insertions(+) create mode 100644 navbar.css create mode 100644 pages/Blog.html create mode 100644 pages/Security.html create mode 100644 pages/SignUp.html create mode 100644 pages/code360bycn.css create mode 100644 pages/code360bycn.html create mode 100644 pages/code360bycn.js create mode 100644 pages/codechef.css create mode 100644 pages/codechef.js create mode 100644 pages/codechef3.html create mode 100644 pages/codeforces.html create mode 100644 pages/contributors.html create mode 100644 pages/geekforgeek.css create mode 100644 pages/geekforgeek.js create mode 100644 pages/geeksforgeeks.html create mode 100644 pages/hacker.css create mode 100644 pages/hacker.js create mode 100644 pages/hackerrank.html create mode 100644 pages/leetcode.css create mode 100644 pages/leetcode.html create mode 100644 pages/leetcode.js create mode 100644 pages/leetcode1.html create mode 100644 pages/privacy.html create mode 100644 pages/script.js create mode 100644 pages/scroll.css create mode 100644 pages/scroll.js create mode 100644 pages/terms.html create mode 100644 pages/testimonial.html create mode 100644 pages/vanilla-tilt.js create mode 100644 pages/work.html create mode 100644 styles.css diff --git a/navbar.css b/navbar.css new file mode 100644 index 00000000..299aee0c --- /dev/null +++ b/navbar.css @@ -0,0 +1,177 @@ +/* Navbar Styles */ +.navbar { + background: #2F2441; + padding: 1rem 1rem; + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 10px #100C08; + z-index: 1000; + backdrop-filter: blur(10px); + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + border: 5px rgb(144 174 172 / 0%) solid; +} + + + .logo { + display: flex; + align-items: center; + } + + .logo img { + height: 40px; + width: 5rem; + transition: transform 0.3s ease; + } + + .logo img:hover { + transform: scale(1.05); + } + + .logo { + padding-top: 8px; + } + + .nav-links { + display: flex; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; + } + + .nav-links li { + position: relative; + } + + .nav-links li a { + /* color: #000; */ + color: #000; + font-weight: bold; + text-decoration: none; + padding: 8px 12px; + transition: background-color 0.3s ease-in-out; + font-size: 18px; + } + + .nav-links a { + color: #333; + text-decoration: none; + font-weight: 500; + font-size: 1rem; + padding: 0.5rem 0; + transition: color 0.3s ease; + } + + .nav-links a:hover { + color: #007bff; + } + + /* Underline animation for nav links */ + .nav-links a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: #007bff; + transition: width 0.3s ease; + } + + .nav-links a:hover::after { + width: 100%; + } + + /* Active link style */ + .nav-links a.active { + color: #007bff; + } + + .nav-links a.active::after { + width: 100%; + } + + /* Mobile menu button - Hidden by default */ + .mobile-menu-btn { + color: #000; + display: none; + background: none; + border: none; + padding: 0.5rem; + cursor: pointer; + } + + /* Responsive Design */ + @media (max-width: 768px) { + .navbar { + padding: 1rem; + } + + .mobile-menu-btn { + display: block; + } + + .nav-links { + display: none; + /* Hide by default on mobile */ + position: absolute; + top: 100%; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.98); + flex-direction: column; + padding: 1rem; + gap: 1rem; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + } + + /* Show menu when active */ + .nav-links.active { + display: flex; + } + + .nav-links li { + width: 100%; + text-align: center; + } + + .nav-links a { + display: block; + padding: 0.75rem 0; + } + + .nav-links a::after { + display: none; + /* Remove hover animation on mobile */ + } + } + + /* Dark mode support */ + @media (prefers-color-scheme: dark) { + + .nav-links a { + color: #f9fafd; + } + + .nav-links a:hover { + color: #60a5fa; + } + + .nav-links a::after { + background-color: #60a5fa; + } + + @media (max-width: 768px) { + .nav-links { + background: rgba(174, 237, 158, 0.98); + } + } + } + + diff --git a/pages/Blog.html b/pages/Blog.html new file mode 100644 index 00000000..47761ed9 --- /dev/null +++ b/pages/Blog.html @@ -0,0 +1,405 @@ + + + + + + + + + + + + + DSA Blog + + + + + + + + + +
+ +
+ + +
+
+

DSA Insights & Updates

+

Stay updated with the latest DSA trends, tips, and coding challenges.

+
+ + +
+
+
+ + +
+
+

Categories

+ +
+
+ + +
+
+ Blog Post 1 +
+

Top 10 DSA Problems for Beginners

+

By John Doe | January 10, 2025

+

Explore essential problems that every beginner should solve to build a strong foundation in Data Structures and Algorithms.

+ + Read More +
+
+ +
+ Blog Post 2 +
+

Mastering Sorting Algorithms

+

By Alia Smith | January 8, 2025

+

Sorting algorithms are key in DSA. Learn about different types and how to optimize their performance in real-world applications.

+ + Read More +
+
+ +
+ Blog Post 3 +
+

Coding Interview Preparation Tips

+

By Tracy Brown | January 5, 2025

+

Crack your coding interviews with these expert tips and must-solve problems from leading platforms.

+ + Read More +
+
+
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/Security.html b/pages/Security.html new file mode 100644 index 00000000..c6754592 --- /dev/null +++ b/pages/Security.html @@ -0,0 +1,825 @@ + + + + + + + + + + + + + + DSA Problem Solutions + + + + + + + + + + + + +
+ + +
+

Our Commitment to Security

+

+ At DSA Problem Solutions, the security of our users is + of utmost importance. We continuously implement advanced measures to + protect your data and ensure a safe environment for coding enthusiasts. +

+ +

1. Data Encryption

+

+ We use industry-standard encryption protocols (SSL/TLS) to protect all + communications and ensure your data remains secure while being + transmitted over the internet. +

+ +

2. Account Protection

+ + +

3. Regular Security Audits

+

+ Our team conducts periodic security assessments and audits to identify + vulnerabilities and maintain the highest level of security for our + platform. +

+ +

4. User Guidelines for Security

+ + +

5. Reporting Security Issues

+

+ If you discover any security vulnerabilities or suspect unauthorized + activity, please contact us immediately at + security@dsasolutionplatform.com. +

+ +

6. Compliance with Standards

+

+ We comply with industry standards and data protection regulations to + ensure your information is handled responsibly and securely. +

+ +

7. Continuous Improvements

+

+ Our security measures evolve with new technologies and emerging threats + to ensure our platform remains secure and reliable for all users. +

+
+ +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/pages/SignUp.html b/pages/SignUp.html new file mode 100644 index 00000000..a5d882e5 --- /dev/null +++ b/pages/SignUp.html @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + SIGN UP + + + + + + + +
+
+
+

Create an account

+

Sign up to get started

+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ Or continue with +
+ + + +
+ Already have an account? + Sign In +
+
+
+
+ + diff --git a/pages/code360bycn.css b/pages/code360bycn.css new file mode 100644 index 00000000..b74b2dcb --- /dev/null +++ b/pages/code360bycn.css @@ -0,0 +1,615 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #f4f7fc; + color: #333; + display: flex; + flex-direction: column; + min-height: 100vh; +} +.logo { + display: flex; + align-items: center; +} + +.logo img { + height: 40px; + width: 5rem; + transition: transform 0.3s ease; +} + +.logo img:hover { + transform: scale(1.05); +} + +.logo{ + padding-top: 8px; +} + +header { + background-color: #24292e; + color: #fff; + margin: 100px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: center; + padding-right:400px; + flex-direction: row; + align-self: center; + width: 100%; + height: 35vh; +} + +header h1 { + margin-left: 30rem; + font-size: 2.5rem; + font-weight: 600; + display: flex; + justify-content: center; + align-items: center; + align-self: center; + + +} + +.container { + display: flex; + flex: 1; + height: calc(100vh - 60px); +} + +.problems-list { + width: 50%; + padding: 20px; + overflow-y: auto; +} + +.solution-display { + width: 50%; + padding: 20px; + background-color: #f0f0f0; + overflow-y: auto; +} + +.card { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +.card-header { + padding: 15px 20px; + border-bottom: 1px solid #e0e0e0; +} + +.card-title { + font-size: 1.2rem; + font-weight: 600; +} + +.card-content { + padding: 15px 20px; +} + +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 15px; +} + +.button { + padding: 8px 16px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 0.9rem; + display: flex; + align-items: center; + transition: background-color 0.3s; +} + +.button:not(:last-child) { + margin-right: 10px; +} + +.button-primary { + background-color: #2acb1e; + color: white; +} + +.button:hover { + opacity: 0.9; +} + +.icon { + margin-right: 5px; +} + +.progress-card { +margin-top: 0.6rem; +padding: 1.5rem; +} + +.progress-card h2 { +margin-bottom:0.6rem; +font-size: 1.5rem; +} + +.progress-card .button { +margin-top: 0.6rem; +border: none; +padding: 8px 16px; +transition: background-color 0.3s ease; +} + +#username { +padding: 0.5rem; +border: 1px solid #827d7d; +} + +#stats { +margin-top: 20px; +} +#stats p { +font-size: 16px; +color: #444; +margin: 10px 0; +} +#stats span { +font-weight: bold; +color: #ff7e67; +} + +header h1{ +margin-left: 28rem; +} + + +/* Question Form Styles */ +.ques-form { + max-width: 600px; + margin: 2rem auto; + padding: 2rem; + background: #ffffff; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); + border-radius: 12px; +} + +.ques-form h3 { + color: #2d3748; + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid #e2e8f0; +} + +.ques-form form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.ques-form label { + color: #4a5568; + font-weight: 500; + font-size: 0.9rem; + margin-bottom: 0.5rem; + display: block; +} + +.ques-form input, +.ques-form select, +.ques-form textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1.5px solid #e2e8f0; + border-radius: 8px; + font-size: 1rem; + color: #2d3748; + background-color: #f8fafc; + transition: all 0.3s ease; +} + +.ques-form input:focus, +.ques-form select:focus, +.ques-form textarea:focus { + outline: none; + border-color: #4299e1; + box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15); + background-color: #ffffff; +} + +.ques-form select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1em; + padding-right: 2.5rem; +} + +.ques-form textarea { + min-height: 120px; + resize: vertical; + font-family: 'Courier New', Courier, monospace; + line-height: 1.5; +} + +.ques-form button[type="submit"] { + background: linear-gradient(to right, #1f5d25, #29b200); + color: white; + font-weight: 600; + padding: 0.875rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 0.5rem; +} + +.ques-form button[type="submit"]:hover { + background: linear-gradient(to right, #076e18, #0ab40a); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25); +} + +.ques-form button[type="submit"]:active { + transform: translateY(0); + box-shadow: none; +} + +/* Error states */ +.ques-form input:invalid:not(:placeholder-shown), +.ques-form textarea:invalid:not(:placeholder-shown) { + border-color: #fc8181; +} + +.ques-form input:invalid:not(:placeholder-shown):focus, +.ques-form textarea:invalid:not(:placeholder-shown):focus { + box-shadow: 0 0 0 3px rgba(252, 129, 129, 0.15); +} + +/* Responsive adjustments */ +@media (max-width: 640px) { + .ques-form { + padding: 1.5rem; + margin: 1rem; + } + + .ques-form h3 { + font-size: 1.25rem; + } + + .ques-form button[type="submit"] { + width: 100%; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + .ques-form { + background: #d6d6d6; + } + + .ques-form h3 { + color: #5a5b5c; + border-bottom-color: #2d3748; + } + + .ques-form label { + color: #0f0f0f; + } + + .ques-form input, + .ques-form select, + .ques-form textarea { + background-color: white; + border-color: #4a5568; + color: #e2e8f0; + } + + .ques-form input:focus, + .ques-form select:focus, + .ques-form textarea:focus { + background-color: #2d3748; + border-color: #4299e1; + } + + .ques-form select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + } +} + +#cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + +/* question display */ +.card-content p:first-of-type { +font-family: "Segoe UI", Tahoma, Geneva, sans-serif; +background: linear-gradient(145deg, #f0f4f7, #d8e0e5); +color: #333; +padding: 20px; +border: 1px solid #ddd; +border-radius: 8px; +box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +white-space: pre-wrap; +word-wrap: break-word; +font-size: 1rem; +line-height: 1.6; +margin-bottom: 20px; +position: relative; +transition: all 0.3s ease; +} + +/* Hover effect */ +.card-content p:first-of-type:hover { +background: linear-gradient(145deg, #e1ecf4, #c0d3e2); +border-color: #a0b9cc; +box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +/* Adding a subtle transition to smooth the effect */ +.card-content p:first-of-type { +transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; +} + +/* ======================== + Footer Section + ======================== */ + .main-footer { + background-color: linear-gradient(to right, #11cb2a, #19be50);; + padding: 4rem 5%; + color: #333; + font-family: 'Arial', sans-serif; + /*border-top: 3px solid #aaffaf;*/ + box-shadow: 0 2px 10px rgb(0 0 0); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + margin-top: 50px; + } + + .footer-content { + display: grid; + margin-bottom: 2rem; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + max-width: 1200px; + margin: auto; + padding: 20px; + } + + .footer-section h3 { + font-size: 2rem; + margin-bottom: 1rem; + color: #000; + } + + .footer-section h4 { + font-size: 1.2rem; + margin-bottom: 1rem; + color: #000; + } + + .footer-section p { + line-height: 1.6; + margin-bottom: 1rem; + letter-spacing: 0.2px; + } + + .footer-section ul { + list-style: none; + padding: 0; + } + + .footer-section ul li { + margin-bottom: 0.8rem; + } + + .footer-section ul li a { + color: #333; + text-decoration: none; + transition: color 0.3s ease; + } + + .footer-section ul li a:hover { + color: #E5A186; + } + + .social-links { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 20px; + margin-top: 1rem; + } + + .social-links a { + color: #f7f5f5; + font-size: 1.5rem; + text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + } + + .social-links a[aria-label="Facebook"]:hover { + color: #3b5998; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + } + + .social-links a[aria-label="Twitter"]:hover { + color: #1da1f2; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + } + .social-links a[aria-label="Instagram"]:hover { + color: #e4405f; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + } + + .social-links a[aria-label="YouTube"]:hover { + color: #ff0000; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + } + + .social-links a[aria-label="Linkedin"]:hover { + color: #0077b5; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + } + + .contact-info li { + display: flex; + align-items: center; + transition: all 0.3s ease; + gap: 0.6rem; + } + + .contact-info li span { + margin-left: 0.3rem; + transition: all 0.3s ease; + } + + .contact-info li span:hover { + color: #E5A186; + } + + .footer-bottom { + text-align: center; + margin-top: 20px; + padding-top: 20px; + font-size: 14px; + } + + #cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + } + + form { + padding-bottom: 199px; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; /* Add relative positioning to the form */ + margin-bottom: 1px; + } + + form::before { + content: ""; + position: absolute; + bottom: 0; + left: 0%; /* Adjust this value to control the starting point of the border */ + width: 92%; /* Adjust this value to control the length of the border */ + border-bottom: 1px solid #fafafa; /* Your border color */ + } + + form input{ + width:80%; + padding: 10px; + background: transparent; + color: #CCC; + border: 0; + outline: none; + } + form button{ + background: transparent; + border: 0; + outline: none; + cursor: pointer; + } + form button .fas{ + font-size: 16px; + padding: 10px 20px; + color: #fafafa; + } + + + .main-footer .footer-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + } + + .main-footer .footer-section { + flex: 1 1 18%; /* This ensures each section takes up an equal width, you can adjust percentage as needed */ + padding: 10px; + } + + .main-footer .footer-section h4 { + margin-bottom: 10px; + } + + .main-footer .footer-section ul, + .main-footer .footer-section form { + margin: 0; + padding: 0; + list-style: none; + } + + .main-footer .footer-section form input { + margin-right: 10px; + } + + h4 { + position: relative; /* Add relative positioning to the

element */ + } + + .underline { + width: 50%; /* Adjusted to make the red line shorter */ + height: 3px; + background: linear-gradient(to right, #1b5d37, #29b429, #347e0e); + border-radius: 3px; + position: absolute; + bottom: -8px; /* Adjusted to position the underline correctly below the text */ + left: 10%; /* Centers the underline horizontally */ + transform: translateX(-20%); /* This ensures that the underline is centered */ + overflow: hidden; + } + + .underline span { + width: 15px; + height: 100%; + background: #fff; + border-radius: 3px; + position: absolute; + top: 0; + left: -15px; /* Starting off-screen to the left */ + animation: moving 2s linear infinite; + } + + @keyframes moving { + 0% { + left: -20px; /* Start animation off-screen */ + } + 100% { + left: 100%; /* Move the span across to the right */ + } + } + \ No newline at end of file diff --git a/pages/code360bycn.html b/pages/code360bycn.html new file mode 100644 index 00000000..db5a1709 --- /dev/null +++ b/pages/code360bycn.html @@ -0,0 +1,706 @@ + + + + + + + + + + + + + + + Code 360 by Coding Ninjas Problems - DSA Problem Solutions + + + + + + + + + + + + + + + + + + + + +
+ +

Code 360 by Coding Ninjas Problems

+
+ + +
+
+

Problems

+
+
+

Two Sum

+
+
+

Difficulty: Easy

+
+ +
+
+
+
+
+

Reverse Linked List

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Binary Tree Level Order Traversal

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Solution

+
+

Select a problem to view its solution.

+
+
+ + +
+

Check Your Progress

+ + + +
+

✨ Easy: 0

+

⚡ Medium: 0

+

🔥 Hard: 0

+
+
+
+ + + + + +
+
+

Problems

+ +
+ + +
+

Add a New Question

+
+ + + + + + + +
+
+
+ + + + + + + + + + + + + + diff --git a/pages/code360bycn.js b/pages/code360bycn.js new file mode 100644 index 00000000..56558cbb --- /dev/null +++ b/pages/code360bycn.js @@ -0,0 +1,148 @@ +// Toggle progress popup +const progressButton = document.getElementById("progressButton"); +const progressPopup = document.getElementById("progressPopup"); +const popupOverlay = document.getElementById("popupOverlay"); +const closePopup = document.getElementById("closePopup"); + +progressButton.addEventListener("click", () => { + progressPopup.classList.add("active"); + popupOverlay.classList.add("active"); +}); + +closePopup.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); +}); + +popupOverlay.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); +}); + +function handleViewSolution(problemTitle) { + const solutionContent = document.getElementById('solution-content'); + + let solutionText = ""; + + + if (problemTitle === "Two Sum") { + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given an array of integers, return the indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + } else if (problemTitle === "Reverse Linked List") { + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the head of a singly linked list, reverse the list and return its head.

+
+

Time Complexity: O(n)

+

Space Complexity: O(1)

+
+
+ `; + } else if (problemTitle === "Binary Tree Level Order Traversal") { + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the root of a binary tree, return the level order traversal of its nodes' values.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + } else { + solutionText = ` +
+
+

Solution

+
+
+

No solution available for this problem.

+
+
+ `; + } + + + solutionContent.innerHTML = solutionText; + + + if (problemTitle === "Two Sum") { + var editor = ace.edit("ace-editor-two-sum"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function twoSum(nums, target) { + let map = new Map(); + for (let i = 0; i < nums.length; i++) { + let complement = target - nums[i]; + if (map.has(complement)) { + return [map.get(complement), i]; + } + map.set(nums[i], i); + } +}`); + } else if (problemTitle === "Reverse Linked List") { + var editor = ace.edit("ace-editor-reverse-list"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function reverseList(head) { + let prev = null; + let curr = head; + while (curr !== null) { + let nextTemp = curr.next; + curr.next = prev; + prev = curr; + curr = nextTemp; + } + return prev; +}`); + } else if (problemTitle === "Binary Tree Level Order Traversal") { + var editor = ace.edit("ace-editor-level-order"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function levelOrder(root) { + if (!root) return []; + let result = []; + let queue = [root]; + while (queue.length > 0) { + let levelSize = queue.length; + let level = []; + for (let i = 0; i < levelSize; i++) { + let node = queue.shift(); + level.push(node.val); + if (node.left) queue.push(node.left); + if (node.right) queue.push(node.right); + } + result.push(level); + } + return result; +}`); + } +} + +const cursor = document.querySelector("#cursor"); +const body = document.querySelector("body"); + +body.addEventListener("mousemove", function (e) { + gsap.to(cursor, { + x: e.x, + y: e.y + }) +}) diff --git a/pages/codechef.css b/pages/codechef.css new file mode 100644 index 00000000..d446bc50 --- /dev/null +++ b/pages/codechef.css @@ -0,0 +1,613 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #f4f7fc; + color: #333; + display: flex; + flex-direction: column; + min-height: 100vh; +} +.logo { + display: flex; + align-items: center; +} + +.logo img { + height: 40px; + width: 5rem; + transition: transform 0.3s ease; +} + +.logo img:hover { + transform: scale(1.05); +} + +.logo{ + padding-top: 8px; +} + +header { + background-color: #24292e; + color: #fff; + margin: 100px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: center; + padding-right:400px; + flex-direction: row; + align-self: center; + width: 100%; + height: 18vh; +} + +header h1 { + margin-left: 30rem; + font-size: 2.5rem; + font-weight: 600; + display: flex; + justify-content: center; + align-items: center; + align-self: center; + +} + +.container { + display: flex; + flex: 1; + height: calc(100vh - 60px); +} + +.problems-list { + width: 50%; + padding: 20px; + overflow-y: auto; +} + +.solution-display { + width: 50%; + padding: 20px; + background-color: #f0f0f0; + overflow-y: auto; +} + +.card { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +.card-header { + padding: 15px 20px; + border-bottom: 1px solid #e0e0e0; +} + +.card-title { + font-size: 1.2rem; + font-weight: 600; +} + +.card-content { + padding: 15px 20px; +} + +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 15px; +} + +.button { + padding: 8px 16px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 0.9rem; + display: flex; + align-items: center; + transition: background-color 0.3s; +} + +.button:not(:last-child) { + margin-right: 10px; +} + +.button-primary { + background-color: #2acb1e; + color: white; +} + +.button:hover { + opacity: 0.9; +} + +.icon { + margin-right: 5px; +} + +.progress-card { +margin-top: 0.6rem; +padding: 1.5rem; +} + +.progress-card h2 { +margin-bottom:0.6rem; +font-size: 1.5rem; +} + +.progress-card .button { +margin-top: 0.6rem; +border: none; +padding: 8px 16px; +transition: background-color 0.3s ease; +} + +#username { +padding: 0.5rem; +border: 1px solid #827d7d; +} + +#stats { +margin-top: 20px; +} +#stats p { +font-size: 16px; +color: #444; +margin: 10px 0; +} +#stats span { +font-weight: bold; +color: #ff7e67; +} + +header h1{ +margin-left: 28rem; +} + + +/* Question Form Styles */ +.ques-form { + max-width: 600px; + margin: 2rem auto; + padding: 2rem; + background: #ffffff; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); + border-radius: 12px; +} + +.ques-form h3 { + color: #2d3748; + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid #e2e8f0; +} + +.ques-form form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.ques-form label { + color: #4a5568; + font-weight: 500; + font-size: 0.9rem; + margin-bottom: 0.5rem; + display: block; +} + +.ques-form input, +.ques-form select, +.ques-form textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1.5px solid #e2e8f0; + border-radius: 8px; + font-size: 1rem; + color: #2d3748; + background-color: #f8fafc; + transition: all 0.3s ease; +} + +.ques-form input:focus, +.ques-form select:focus, +.ques-form textarea:focus { + outline: none; + border-color: #4299e1; + box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15); + background-color: #ffffff; +} + +.ques-form select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1em; + padding-right: 2.5rem; +} + +.ques-form textarea { + min-height: 120px; + resize: vertical; + font-family: 'Courier New', Courier, monospace; + line-height: 1.5; +} + +.ques-form button[type="submit"] { + background: linear-gradient(to right, #1f5d25, #29b200); + color: white; + font-weight: 600; + padding: 0.875rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 0.5rem; +} + +.ques-form button[type="submit"]:hover { + background: linear-gradient(to right, #076e18, #0ab40a); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25); +} + +.ques-form button[type="submit"]:active { + transform: translateY(0); + box-shadow: none; +} + +/* Error states */ +.ques-form input:invalid:not(:placeholder-shown), +.ques-form textarea:invalid:not(:placeholder-shown) { + border-color: #fc8181; +} + +.ques-form input:invalid:not(:placeholder-shown):focus, +.ques-form textarea:invalid:not(:placeholder-shown):focus { + box-shadow: 0 0 0 3px rgba(252, 129, 129, 0.15); +} + +/* Responsive adjustments */ +@media (max-width: 640px) { + .ques-form { + padding: 1.5rem; + margin: 1rem; + } + + .ques-form h3 { + font-size: 1.25rem; + } + + .ques-form button[type="submit"] { + width: 100%; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + .ques-form { + background: #d6d6d6; + } + + .ques-form h3 { + color: #5a5b5c; + border-bottom-color: #2d3748; + } + + .ques-form label { + color: #0f0f0f; + } + + .ques-form input, + .ques-form select, + .ques-form textarea { + background-color: white; + border-color: #4a5568; + color: #e2e8f0; + } + + .ques-form input:focus, + .ques-form select:focus, + .ques-form textarea:focus { + background-color: #2d3748; + border-color: #4299e1; + } + + .ques-form select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + } +} + +#cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + +/* question display */ +.card-content p:first-of-type { +font-family: "Segoe UI", Tahoma, Geneva, sans-serif; +background: linear-gradient(145deg, #f0f4f7, #d8e0e5); +color: #333; +padding: 20px; +border: 1px solid #ddd; +border-radius: 8px; +box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +white-space: pre-wrap; +word-wrap: break-word; +font-size: 1rem; +line-height: 1.6; +margin-bottom: 20px; +position: relative; +transition: all 0.3s ease; +} + +/* Hover effect */ +.card-content p:first-of-type:hover { +background: linear-gradient(145deg, #e1ecf4, #c0d3e2); +border-color: #a0b9cc; +box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +/* Adding a subtle transition to smooth the effect */ +.card-content p:first-of-type { +transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; +} + +/* ======================== + Footer Section + ======================== */ +.main-footer { +background-color: linear-gradient(to right, #11cb2a, #19be50);; +padding: 4rem 5%; +color: #333; +font-family: 'Arial', sans-serif; +/*border-top: 3px solid #aaffaf;*/ +box-shadow: 0 2px 10px rgb(0 0 0); +border-top-left-radius: 30px; +border-top-right-radius: 30px; +margin-top: 50px; +} + +.footer-content { +display: grid; +margin-bottom: 2rem; +grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +gap: 20px; +max-width: 1200px; +margin: auto; +padding: 20px; +} + +.footer-section h3 { +font-size: 2rem; +margin-bottom: 1rem; +color: #000; +} + +.footer-section h4 { +font-size: 1.2rem; +margin-bottom: 1rem; +color: #000; +} + +.footer-section p { +line-height: 1.6; +margin-bottom: 1rem; +letter-spacing: 0.2px; +} + +.footer-section ul { +list-style: none; +padding: 0; +} + +.footer-section ul li { +margin-bottom: 0.8rem; +} + +.footer-section ul li a { +color: #333; +text-decoration: none; +transition: color 0.3s ease; +} + +.footer-section ul li a:hover { +color: #E5A186; +} + +.social-links { +display: flex; +justify-content: flex-start; +align-items: center; +gap: 20px; +margin-top: 1rem; +} + +.social-links a { +color: #f7f5f5; +font-size: 1.5rem; +text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +transition: all 0.3s ease; +} + +.social-links a[aria-label="Facebook"]:hover { +color: #3b5998; +text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.social-links a[aria-label="Twitter"]:hover { +color: #1da1f2; +text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} +.social-links a[aria-label="Instagram"]:hover { +color: #e4405f; +text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.social-links a[aria-label="YouTube"]:hover { +color: #ff0000; +text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.social-links a[aria-label="Linkedin"]:hover { +color: #0077b5; +text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.contact-info li { +display: flex; +align-items: center; +transition: all 0.3s ease; +gap: 0.6rem; +} + +.contact-info li span { +margin-left: 0.3rem; +transition: all 0.3s ease; +} + +.contact-info li span:hover { +color: #E5A186; +} + +.footer-bottom { +text-align: center; +margin-top: 20px; +padding-top: 20px; +font-size: 14px; +} + +#cursor{ +height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + +form { + padding-bottom: 199px; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; /* Add relative positioning to the form */ + margin-bottom: 1px; +} + +form::before { + content: ""; + position: absolute; + bottom: 0; + left: 0%; /* Adjust this value to control the starting point of the border */ + width: 92%; /* Adjust this value to control the length of the border */ + border-bottom: 1px solid #fafafa; /* Your border color */ +} + +form input{ + width:80%; + padding: 10px; + background: transparent; + color: #CCC; + border: 0; + outline: none; +} +form button{ + background: transparent; + border: 0; + outline: none; + cursor: pointer; +} +form button .fas{ +font-size: 16px; +padding: 10px 20px; +color: #fafafa; +} + + +.main-footer .footer-content { +display: flex; +justify-content: space-between; +align-items: flex-start; +flex-wrap: wrap; +} + +.main-footer .footer-section { +flex: 1 1 18%; /* This ensures each section takes up an equal width, you can adjust percentage as needed */ +padding: 10px; +} + +.main-footer .footer-section h4 { +margin-bottom: 10px; +} + +.main-footer .footer-section ul, +.main-footer .footer-section form { +margin: 0; +padding: 0; +list-style: none; +} + +.main-footer .footer-section form input { +margin-right: 10px; +} + +h4 { +position: relative; /* Add relative positioning to the

element */ +} + +.underline { +width: 50%; /* Adjusted to make the red line shorter */ +height: 3px; +background: linear-gradient(to right, #1b5d37, #29b429, #347e0e); +border-radius: 3px; +position: absolute; +bottom: -8px; /* Adjusted to position the underline correctly below the text */ +left: 10%; /* Centers the underline horizontally */ +transform: translateX(-20%); /* This ensures that the underline is centered */ +overflow: hidden; +} + +.underline span { +width: 15px; +height: 100%; +background: #fff; +border-radius: 3px; +position: absolute; +top: 0; +left: -15px; /* Starting off-screen to the left */ +animation: moving 2s linear infinite; +} + +@keyframes moving { +0% { + left: -20px; /* Start animation off-screen */ +} +100% { + left: 100%; /* Move the span across to the right */ +} +} diff --git a/pages/codechef.js b/pages/codechef.js new file mode 100644 index 00000000..b0d93932 --- /dev/null +++ b/pages/codechef.js @@ -0,0 +1,149 @@ +// Toggle progress popup +const progressButton = document.getElementById("progressButton"); +const progressPopup = document.getElementById("progressPopup"); +const popupOverlay = document.getElementById("popupOverlay"); +const closePopup = document.getElementById("closePopup"); + +progressButton.addEventListener("click", () => { + progressPopup.classList.add("active"); + popupOverlay.classList.add("active"); +}); + +closePopup.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); +}); + +popupOverlay.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); +}); + +function handleViewSolution(problemTitle) { + const solutionContent = document.getElementById('solution-content'); + + let solutionText = ""; + + + if (problemTitle === "Two Sum") { + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given an array of integers, return the indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + } else if (problemTitle === "Reverse Linked List") { + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the head of a singly linked list, reverse the list and return its head.

+
+

Time Complexity: O(n)

+

Space Complexity: O(1)

+
+
+ `; + } else if (problemTitle === "Binary Tree Level Order Traversal") { + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the root of a binary tree, return the level order traversal of its nodes' values.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + } else { + solutionText = ` +
+
+

Solution

+
+
+

No solution available for this problem.

+
+
+ `; + } + + + solutionContent.innerHTML = solutionText; + + + if (problemTitle === "Two Sum") { + var editor = ace.edit("ace-editor-two-sum"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function twoSum(nums, target) { + let map = new Map(); + for (let i = 0; i < nums.length; i++) { + let complement = target - nums[i]; + if (map.has(complement)) { + return [map.get(complement), i]; + } + map.set(nums[i], i); + } +}`); + } else if (problemTitle === "Reverse Linked List") { + var editor = ace.edit("ace-editor-reverse-list"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function reverseList(head) { + let prev = null; + let curr = head; + while (curr !== null) { + let nextTemp = curr.next; + curr.next = prev; + prev = curr; + curr = nextTemp; + } + return prev; +}`); + } else if (problemTitle === "Binary Tree Level Order Traversal") { + var editor = ace.edit("ace-editor-level-order"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function levelOrder(root) { + if (!root) return []; + let result = []; + let queue = [root]; + while (queue.length > 0) { + let levelSize = queue.length; + let level = []; + for (let i = 0; i < levelSize; i++) { + let node = queue.shift(); + level.push(node.val); + if (node.left) queue.push(node.left); + if (node.right) queue.push(node.right); + } + result.push(level); + } + return result; +}`); + } +} + + +const cursor = document.querySelector("#cursor"); +const body = document.querySelector("body"); + +body.addEventListener("mousemove", function (e) { + gsap.to(cursor, { + x: e.x, + y: e.y + }) +}) \ No newline at end of file diff --git a/pages/codechef3.html b/pages/codechef3.html new file mode 100644 index 00000000..3155745a --- /dev/null +++ b/pages/codechef3.html @@ -0,0 +1,706 @@ + + + + + + + + + + + + + + + CodeChef Problems - DSA Problem Solutions + + + + + + + + + + + + + + + + + + + + +
+ +

+

+ + +
+
+

Problems

+
+
+

Two Sum

+
+
+

Difficulty: Easy

+
+ +
+
+
+
+
+

Reverse Linked List

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Binary Tree Level Order Traversal

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Solution

+
+

Select a problem to view its solution.

+
+
+ + +
+

Check Your Progress

+ + + +
+

✨ Easy: 0

+

⚡ Medium: 0

+

🔥 Hard: 0

+
+
+
+ + + + + +
+
+

Problems

+ +
+ + +
+

Add a New Question

+
+ + + + + + + +
+
+
+ + + + + + + + + + + + + + diff --git a/pages/codeforces.html b/pages/codeforces.html new file mode 100644 index 00000000..838677bc --- /dev/null +++ b/pages/codeforces.html @@ -0,0 +1,308 @@ + + + + + + + + + + + + + + + Codeforces Problems - DSA Problem Solutions + + + + + + + + + +
+ +
+ +

Codeforces Problems

+ +
+ +
+
+

Problems

+
+
+

Two Sum

+
+
+

Difficulty: Easy

+
+ +
+
+
+
+
+

Reverse Linked List

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Binary Tree Level Order Traversal

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Solution

+
+

Select a problem to view its solution.

+
+
+
+ + + + + + +
+
+

Problems

+ +
+ + +
+

Add a New Question

+
+ + + + + + + + +
+
+
+ + + + + + + + + + + diff --git a/pages/contributors.html b/pages/contributors.html new file mode 100644 index 00000000..b7343b7c --- /dev/null +++ b/pages/contributors.html @@ -0,0 +1,980 @@ + + + + + + + + + + + + + + Our Contributors- DSA Problem Solutions + + + + + + + + + + +
+
+

+ Our Contributors +

+
+ +
+
+ +
+ +
+ +
+ + + +

+ DSA problem solutions involve step-by-step methods to solve data + structure and algorithm challenges efficiently. They include + understanding the problem, selecting the right approach, + implementing optimized code, and analyzing time and space complexity + for performance. +

+
+ + +
+

+ Quick Links +

+ +
+
+

+ DSA Problem Solutions +

+ +
+ + +
+

+ Learn More +

+ +
+
+ + +
+

+ Stay Updated +

+

+ Subscribe to our newsletter for the latest updates and tips on + mastering data structures and algorithms. +

+
+ + +
+
+ + + + + +
+

+ © DSA Problem Solutions. All + rights reserved. +

+
+
+ + + + + + + + + + + + + + + + + + + + diff --git a/pages/geekforgeek.css b/pages/geekforgeek.css new file mode 100644 index 00000000..bc390145 --- /dev/null +++ b/pages/geekforgeek.css @@ -0,0 +1,444 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #f4f7fc; + color: #333; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header { + margin-top: 90px; + background-color: #24292e; + color: #fff; + padding: 20px; + text-align: center; + display: flex; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + + + + +header h1 { + margin-left: 22rem; + font-size: 2.5rem; + font-weight: 600; +} + +.container { + display: flex; + flex: 1; + height: calc(100vh - 60px); /* Adjust based on your header height */ +} + +.problems-list { + width: 100%; + padding: 20px; + overflow-y: auto; + display: grid +; + grid-template-columns: repeat(3, 1fr); + column-gap: 2rem; + margin-top: 2rem; + margin-left: -6rem; +} + +.solution-display { + width: 50%; + padding: 20px; + background-color: #f0f0f0; + overflow-y: auto; + display: none; +} + +.card { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +.card-header { + padding: 15px 20px; + border-bottom: 1px solid #e0e0e0; +} + +.card-title { + font-size: 1.2rem; + font-weight: 600; +} + +.card-content { + padding: 15px 20px; +} + +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 15px; +} + +.button { + padding: 8px 16px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 0.9rem; + display: flex; + align-items: center; + transition: background-color 0.3s; +} + +.button:not(:last-child) { + margin-right: 10px; +} + +.button-primary { + background-color: #2acb1e; + color: white; +} + +.button:hover { + opacity: 0.9; +} + +.icon { + margin-right: 5px; +} + +/* Additional styles for the pop-up card */ +.popup-card { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + max-width: 700px; + background: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + padding: 20px; + border-radius: 8px; + z-index: 1000; + } + .popup-card.active { + display: block; + } + .popup-card h2 { + margin-bottom: 15px; + } + .popup-card button.close-popup { + background: #f44336; + color: white; + border: none; + padding: 8px 12px; + border-radius: 5px; + cursor: pointer; + float: right; + } + .popup-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + } + .popup-overlay.active { + display: block; + } + +/* Question Form Styles */ +.ques-form { + max-width: 600px; + margin: 2rem auto; + padding: 2rem; + background: #ffffff; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); + border-radius: 12px; +} + +.ques-form h3 { + color: #2d3748; + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid #e2e8f0; +} + +.ques-form form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.ques-form label { + color: #4a5568; + font-weight: 500; + font-size: 0.9rem; + margin-bottom: 0.5rem; + display: block; +} + +.ques-form input, +.ques-form select, +.ques-form textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1.5px solid #e2e8f0; + border-radius: 8px; + font-size: 1rem; + color: #2d3748; + background-color: #f8fafc; + transition: all 0.3s ease; +} + +.ques-form input:focus, +.ques-form select:focus, +.ques-form textarea:focus { + outline: none; + border-color: #4299e1; + box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15); + background-color: #ffffff; +} + +.ques-form select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1em; + padding-right: 2.5rem; +} + +.ques-form textarea { + min-height: 120px; + resize: vertical; + font-family: 'Courier New', Courier, monospace; + line-height: 1.5; +} + +.ques-form button[type="submit"] { + background: linear-gradient(to right, #1f5d25, #29b200); + color: white; + font-weight: 600; + padding: 0.875rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 0.5rem; +} + +.ques-form button[type="submit"]:hover { + background: linear-gradient(to right, #076e18, #0ab40a); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25); +} + +.ques-form button[type="submit"]:active { + transform: translateY(0); + box-shadow: none; +} + +/* Error states */ +.ques-form input:invalid:not(:placeholder-shown), +.ques-form textarea:invalid:not(:placeholder-shown) { + border-color: #fc8181; +} + +.ques-form input:invalid:not(:placeholder-shown):focus, +.ques-form textarea:invalid:not(:placeholder-shown):focus { + box-shadow: 0 0 0 3px rgba(252, 129, 129, 0.15); +} + +/* Responsive adjustments */ +@media (max-width: 640px) { + .ques-form { + padding: 1.5rem; + margin: 1rem; + } + + .ques-form h3 { + font-size: 1.25rem; + } + + .ques-form button[type="submit"] { + width: 100%; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + .ques-form { + background: #d6d6d6; + width: 35rem; + margin-left: 25rem; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-end; + justify-content: flex-end; + align-items: stretch; + } + + + .ques-form h3 { + color: #5a5b5c; + border-bottom-color: #2d3748; + } + + .ques-form label { + color: #0f0f0f; + } + + .ques-form input, + .ques-form select, + .ques-form textarea { + background-color: #7e7e7e; + border-color: #4a5568; + color: #e2e8f0; + } + + .ques-form input:focus, + .ques-form select:focus, + .ques-form textarea:focus { + background-color: #2d3748; + border-color: #4299e1; + } + + .ques-form select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + } +} + +.logo { + display: flex; + align-items: center; + } + + .logo img { + height: 40px; + width: 5rem; + transition: transform 0.3s ease; + } + + .logo img:hover { + transform: scale(1.05); + } + + .logo{ + padding-top: 8px; + } + + #cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + } + + /* question display */ + .card-content p:first-of-type { + font-family: "Segoe UI", Tahoma, Geneva, sans-serif; + background: linear-gradient(145deg, #f0f4f7, #d8e0e5); + color: #333; + padding: 20px; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + white-space: pre-wrap; + word-wrap: break-word; + font-size: 1rem; + line-height: 1.6; + margin-bottom: 20px; + position: relative; + transition: all 0.3s ease; +} + +/* Hover effect */ +.card-content p:first-of-type:hover { + background: linear-gradient(145deg, #e1ecf4, #c0d3e2); + border-color: #a0b9cc; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +/* Adding a subtle transition to smooth the effect */ +.card-content p:first-of-type { + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; +} + +/* Scroll to Top Button */ +#scrollButton { + position: fixed; + bottom: 120px; + right: 25px; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; + opacity: 0; /* Initially hidden */ + pointer-events: none; /* Prevent interaction when hidden */ + transition: opacity 0.5s ease; /* Smooth fade-in effect */ +} + + +#scrollButton.visible { + opacity: 1; /* Fully visible */ + pointer-events: auto; /* Enable interaction */ +} + +.outer-circle { + position: relative; + width: 100%; + height: 100%; + border-radius: 50%; + background: conic-gradient( + #1ad140 0deg, + #03730c var(--scroll-progress, 0deg), + #1e65d900 var(--scroll-progress, 0deg), + #d5e7ec00 360deg + ); + transform: rotate(-90deg); /* Start animation from top */ + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; +} + +.inner-circle { + width: 45px; + height: 45px; + background: #becdbb; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 6px rgb(0 0 0); +} + +.arrow { + font-size: 20px; + color: #075728; + font-weight: bold; + transform: rotate(90deg); /* Fixed direction to the right */ +} diff --git a/pages/geekforgeek.js b/pages/geekforgeek.js new file mode 100644 index 00000000..ae459422 --- /dev/null +++ b/pages/geekforgeek.js @@ -0,0 +1,262 @@ +// Toggle progress popup +const progressButton = document.getElementById("progressButton"); +const progressPopup = document.getElementById("progressPopup"); +const popupOverlay = document.getElementById("popupOverlay"); +const closePopup = document.getElementById("closePopup"); + +if (progressButton) { + progressButton.addEventListener("click", () => { + progressPopup.classList.add("active"); + popupOverlay.classList.add("active"); + }); +} + +if (closePopup) { + closePopup.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); + }); +} + +if (popupOverlay) { + popupOverlay.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); + }); +} + +function handleViewSolution(problemTitle) { + const solutionContent = document.getElementById('solution-content'); + const solutionDisplay = document.querySelector('.solution-display'); + + solutionDisplay.style.display = 'block'; // Show the solution container when a solution is selected + + let solutionText = ""; + + switch (problemTitle) { + case "Two Sum": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given an array of integers, return the indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + break; + case "Reverse Linked List": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the head of a singly linked list, reverse the list and return its head.

+
+

Time Complexity: O(n)

+

Space Complexity: O(1)

+
+
+ `; + break; + case "Binary Tree Level Order Traversal": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the root of a binary tree, return the level order traversal of its nodes' values.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + break; + case "ascll Function": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

ascll Function

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + break; + default: + solutionText = ` +
+
+

Solution

+
+
+

No solution available for this problem.

+
+
+ `; + } + + solutionContent.innerHTML = solutionText; + + // Initialize ACE editor based on the problem title + let editor; + switch (problemTitle) { + case "Two Sum": + editor = ace.edit("ace-editor-two-sum"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function twoSum(nums, target) { + let map = new Map(); + for (let i = 0; i < nums.length; i++) { + let complement = target - nums[i]; + if (map.has(complement)) { + return [map.get(complement), i]; + } + map.set(nums[i], i); + } +}`); + break; + case "Reverse Linked List": + editor = ace.edit("ace-editor-reverse-linked-list"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function reverseList(head) { + let prev = null; + let curr = head; + while (curr !== null) { + let nextTemp = curr.next; + curr.next = prev; + prev = curr; + curr = nextTemp; + } + return prev; +}`); + break; + case "Binary Tree Level Order Traversal": + editor = ace.edit("ace-editor-binary-tree"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function levelOrder(root) { + if (!root) return []; + let result = []; + let queue = [root]; + while (queue.length > 0) { + let levelSize = queue.length; + let level = []; + for (let i = 0; i < levelSize; i++) { + let node = queue.shift(); + level.push(node.val); + if (node.left) queue.push(node.left); + if (node.right) queue.push(node.right); + } + result.push(level); + } + return result; +}`); + break; + case "ascll Function": + editor = ace.edit("ace-editor-ascll-Function"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/c_cpp"); + editor.setValue(`#include +#include + +typedef struct node { + int data; + struct node *next; +} node; + +void createnode(node **head) { + int data; + node* newnode = (node*)malloc(sizeof(node)); + + printf("Enter value: "); + scanf("%d", &data); + newnode->data = data; + newnode->next = NULL; + + if (*head == NULL) { + *head = newnode; + } else { + newnode->next = *head; + *head = newnode; + } +} +void ascll(node **head) { + if (*head == NULL) { + printf("Empty list\n"); + return; + } + + node *p = *head; + node *q = NULL; + int temp; + + // Bubble sort for linked list (Improved swapping logic) + while (p != NULL) { + q = p->next; + while (q != NULL) { + if (p->data > q->data) { + // Swap data between p and q + temp = p->data; + p->data = q->data; + q->data = temp; + } + q = q->next; + } + p = p->next; + } +} + +void printll(node *head) { + if (head == NULL) { + printf("Empty list\n"); + } else { + while (head != NULL) { + printf("%d ", head->data); + head = head->next; + } + printf("\n"); + } +} + + +int main() { + int num = 1; + node *head = NULL; + + while (num) { + createnode(&head); + printf("Want to insert more? Type 1 for yes, 0 for no: "); + scanf("%d", &num); + } + + ascll(&head); + printll(head); + + return 0; +} +`); + } +} + +const cursor = document.querySelector("#cursor"); +const body = document.querySelector("body"); + +body.addEventListener("mousemove", function (e) { + gsap.to(cursor, { + x: e.x, + y: e.y + }) +}) \ No newline at end of file diff --git a/pages/geeksforgeeks.html b/pages/geeksforgeeks.html new file mode 100644 index 00000000..cf696ce0 --- /dev/null +++ b/pages/geeksforgeeks.html @@ -0,0 +1,321 @@ + + + + + + + + + + + + + + + GeeksforGeeks Problems - DSA Problem Solutions + + + + + + + + +
+
+ +
+

GeeksforGeeks Problems

+ + + +
+

Problems

+
+ +
+
+

Two Sum

+
+
+

Difficulty: Easy

+
+ +
+
+
+
+
+

Reverse Linked List

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Binary Tree Level Order Traversal

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

ascll Function

+
+
+

Difficulty: Easy

+
+ +
+
+
+
+ +
+

Solution

+
+

Select a problem to view its solution.

+
+
+
+ + + + + + +
+
+ + + + + +
+

Add a New Question

+
+ + + + + + + + +
+
+
+ + + + + + + + + + + + + diff --git a/pages/hacker.css b/pages/hacker.css new file mode 100644 index 00000000..e5f632dc --- /dev/null +++ b/pages/hacker.css @@ -0,0 +1,410 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #f4f7fc; + color: #333; + display: flex; + flex-direction: column; + min-height: 100vh; +} + + +/* Underline animation for nav links */ +.nav-links a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: #007bff; + transition: width 0.3s ease; +} + + + + + +header { + margin-top: 90px; + background-color: #24292e; + color: #fff; + padding: 20px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: flex; +} + + +.container { + display: flex; + flex: 1; + height: calc(100vh - 60px); /* Adjust based on your header height */ +} + +.problems-list { + width: 100%; + height:50%; + padding: 20px; + overflow-y: auto; + display: grid +; + grid-template-columns: repeat(3, 1fr); + column-gap: 2rem; + margin-top: 2rem; + margin-left: -6rem; +} + +.solution-display { + width: 50%; + padding: 20px; + background-color: #f0f0f0; + overflow-y: auto; + display: none; +} + + + +.card { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +.card-header { + padding: 15px 20px; + border-bottom: 1px solid #e0e0e0; +} + +.card-title { + font-size: 1.2rem; + font-weight: 600; +} + +.card-content { + padding: 15px 20px; +} + +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 15px; +} + +.button { + padding: 8px 16px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 0.9rem; + display: flex; + align-items: center; + transition: background-color 0.3s; +} + +.button:not(:last-child) { + margin-right: 10px; +} + +.button-primary { + background-color: #2acb1e; + color: white; +} + +.button:hover { + opacity: 0.9; +} + +.icon { + margin-right: 5px; +} + +/* Additional styles for the pop-up card */ +.popup-card { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + max-width: 700px; + background: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + padding: 20px; + border-radius: 8px; + z-index: 1000; +} +.popup-card.active { + display: block; +} +.popup-card h2 { + margin-bottom: 15px; +} +.popup-card button.close-popup { + background: #f44336; + color: white; + border: none; + padding: 8px 12px; + border-radius: 5px; + cursor: pointer; + float: right; +} +.popup-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 999; +} +.popup-overlay.active { + display: block; +} + + +/* Question Form Styles */ +.ques-form { + max-width: 600px; + margin: 2rem auto; + padding: 2rem; + background: #ffffff; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); + border-radius: 12px; + } + + .ques-form h3 { + color: #2d3748; + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid #e2e8f0; + } + + .ques-form form { + display: flex; + flex-direction: column; + gap: 1.25rem; + } + + .ques-form label { + color: #4a5568; + font-weight: 500; + font-size: 0.9rem; + margin-bottom: 0.5rem; + display: block; + } + + .ques-form input, + .ques-form select, + .ques-form textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1.5px solid #e2e8f0; + border-radius: 8px; + font-size: 1rem; + color: #2d3748; + background-color: #f8fafc; + transition: all 0.3s ease; + } + + .ques-form input:focus, + .ques-form select:focus, + .ques-form textarea:focus { + outline: none; + border-color: #4299e1; + box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15); + background-color: #ffffff; + } + + .ques-form select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1em; + padding-right: 2.5rem; + } + + .ques-form textarea { + min-height: 120px; + resize: vertical; + font-family: 'Courier New', Courier, monospace; + line-height: 1.5; + } + + .ques-form button[type="submit"] { + background: linear-gradient(to right, #1f5d25, #29b200); + color: white; + font-weight: 600; + padding: 0.875rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 0.5rem; + } + + .ques-form button[type="submit"]:hover { + background: linear-gradient(to right, #076e18, #0ab40a); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25); + } + + .ques-form button[type="submit"]:active { + transform: translateY(0); + box-shadow: none; + } + + /* Error states */ + .ques-form input:invalid:not(:placeholder-shown), + .ques-form textarea:invalid:not(:placeholder-shown) { + border-color: #fc8181; + } + + .ques-form input:invalid:not(:placeholder-shown):focus, + .ques-form textarea:invalid:not(:placeholder-shown):focus { + box-shadow: 0 0 0 3px rgba(252, 129, 129, 0.15); + } + + /* Responsive adjustments */ + @media (max-width: 640px) { + .ques-form { + padding: 1.5rem; + margin: 1rem; + } + + .ques-form h3 { + font-size: 1.25rem; + } + + .ques-form button[type="submit"] { + width: 100%; + } + } + + /* Dark mode support */ + + @media (prefers-color-scheme: dark) { + .ques-form { + background: #d6d6d6; + width: 35rem; + margin-left: 25rem; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-end; + justify-content: flex-end; + align-items: stretch; + } + + + .ques-form h3 { + color: #5a5b5c; + border-bottom-color: #2d3748; + } + + .ques-form label { + color: #0f0f0f; + } + + .ques-form input, + .ques-form select, + .ques-form textarea { + background-color: #7e7e7e; + border-color: #4a5568; + color: #e2e8f0; + } + + .ques-form input:focus, + .ques-form select:focus, + .ques-form textarea:focus { + background-color: #2d3748; + border-color: #4299e1; + } + + .ques-form select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + } + } + + + #cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + } + +/* Scroll to Top Button */ +#scrollButton { + position: fixed; + bottom: 120px; + right: 25px; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; + opacity: 0; /* Initially hidden */ + pointer-events: none; /* Prevent interaction when hidden */ + transition: opacity 0.5s ease; /* Smooth fade-in effect */ +} + + +#scrollButton.visible { + opacity: 1; /* Fully visible */ + pointer-events: auto; /* Enable interaction */ +} + +.outer-circle { + position: relative; + width: 100%; + height: 100%; + border-radius: 50%; + background: conic-gradient( + #1ad140 0deg, + #03730c var(--scroll-progress, 0deg), + #1e65d900 var(--scroll-progress, 0deg), + #d5e7ec00 360deg + ); + transform: rotate(-90deg); /* Start animation from top */ + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; +} + +.inner-circle { + width: 45px; + height: 45px; + background: #becdbb; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 6px rgb(0 0 0); +} + +.arrow { + font-size: 20px; + color: #075728; + font-weight: bold; + transform: rotate(90deg); /* Fixed direction to the right */ +} diff --git a/pages/hacker.js b/pages/hacker.js new file mode 100644 index 00000000..3992a380 --- /dev/null +++ b/pages/hacker.js @@ -0,0 +1,124 @@ +// Toggle progress popup +const progressButton = document.getElementById("progressButton"); +const progressPopup = document.getElementById("progressPopup"); +const popupOverlay = document.getElementById("popupOverlay"); +const closePopup = document.getElementById("closePopup"); + +if (progressButton) { + progressButton.addEventListener("click", () => { + progressPopup.classList.add("active"); + popupOverlay.classList.add("active"); + }); +} + +if (closePopup) { + closePopup.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); + }); +} + +if (popupOverlay) { + popupOverlay.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); + }); +} + +function handleViewSolution(problemTitle) { + const solutionContent = document.getElementById('solution-content'); + const solutionDisplay = document.querySelector('.solution-display'); + + solutionDisplay.style.display = 'block'; // Show the solution container when a solution is selected + + let solutionText = ""; + + switch (problemTitle) { + case "Two Sum": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given an array of integers, return the indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + break; + case "Reverse Linked List": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the head of a singly linked list, reverse the list and return its head.

+
+

Time Complexity: O(n)

+

Space Complexity: O(1)

+
+
+ `; + break; + case "Strings Reversal": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Write a function that reverses a string input.

+
+

Time Complexity: O(n)

+

Space Complexity: O(1)

+
+
+ `; + break; + default: + solutionText = ` +
+
+

Solution

+
+
+

No solution available for this problem.

+
+
+ `; + } + + solutionContent.innerHTML = solutionText; + + // Initialize ACE editor based on the problem title + let editor; + switch (problemTitle) { + case "Two Sum": + editor = ace.edit("ace-editor-two-sum"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function twoSum(nums, target) { + let map = new Map(); + for (let i = 0; i < nums.length; i++) { + let complement = target - nums[i]; + if (map.has(complement)) { + return [map.get(complement), i]; + } + map.set(nums[i], i); + } +}`); + break; + case "Strings Reversal": + editor = ace.edit("ace-editor-strings-reversal"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function reverseString(str) { + return str.split('').reverse().join(''); +}`); + break; + } +} diff --git a/pages/hackerrank.html b/pages/hackerrank.html new file mode 100644 index 00000000..911c7042 --- /dev/null +++ b/pages/hackerrank.html @@ -0,0 +1,325 @@ + + + + + + + + + + + + + + + HackerRank - DSA Problem Solutions + + + + + + + + + +
+
+ + +
+

HackerRank Problems

+ + +
+

Problems

+
+ +
+
+

Two Sum

+
+
+

Difficulty: Easy

+
+ +
+
+
+ + +
+
+

Reverse Linked List

+
+
+

Difficulty: Medium

+
+ +
+
+
+ + +
+
+

Strings Reversal

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+ + + +
+ + + + + + + +
+
+ + + + + +
+

Add a New Question

+
+ + + + + + + + +
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/leetcode.css b/pages/leetcode.css new file mode 100644 index 00000000..83aa79c0 --- /dev/null +++ b/pages/leetcode.css @@ -0,0 +1,421 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #f4f7fc; + color: #333; + display: flex; + flex-direction: column; + min-height: 100vh; +} + + + + + +header { + margin-top: 90px; + background-color: #24292e; + color: #fff; + padding: 20px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: flex; +} + +header h1 { + font-size: 25rem; + font-size: 2.5rem; + font-weight: 600; +} + +.container { + display: flex; + flex: 1; + height: calc(100vh - 60px); /* Adjust based on your header height */ +} + +.problems-list { + width: 100%; + padding: 20px; + overflow-y: auto; + display: grid +; + grid-template-columns: repeat(3, 1fr); + column-gap: 2rem; + margin-top: 2rem; + margin-left: -6rem; +} +.solution-display { + width: 50%; + padding: 20px; + background-color: #f0f0f0; + overflow-y: auto; + display: none; +} + +.card { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +.card-header { + padding: 15px 20px; + border-bottom: 1px solid #e0e0e0; +} + +.card-title { + font-size: 1.2rem; + font-weight: 600; +} + +.card-content { + padding: 15px 20px; +} + +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 15px; +} + +.button { + padding: 8px 16px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 0.9rem; + display: flex; + align-items: center; + transition: background-color 0.3s; +} + +.button-primary { + background-color: #2acb1e; + color: white; +} + +.button:hover { + opacity: 0.9; +} + +.icon { + margin-right: 5px; +} + +/* Additional styles for the pop-up card */ +.popup-card { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + max-width: 700px; + background: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + padding: 20px; + border-radius: 8px; + z-index: 1000; +} +.popup-card.active { + display: block; +} +.popup-card h2 { + margin-bottom: 15px; +} +.popup-card button.close-popup { + background: #f44336; + color: white; + border: none; + padding: 8px 12px; + border-radius: 5px; + cursor: pointer; + float: right; +} +.popup-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 999; +} +.popup-overlay.active { + display: block; +} + +/* Question Form Styles */ +.ques-form { + max-width: 600px; + margin: 2rem auto; + padding: 2rem; + background: #ffffff; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); + border-radius: 12px; +} + +.ques-form h3 { + color: #2d3748; + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid #e2e8f0; +} + +.ques-form form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.ques-form label { + color: #4a5568; + font-weight: 500; + font-size: 0.9rem; + margin-bottom: 0.5rem; + display: block; +} + +.ques-form input, +.ques-form select, +.ques-form textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1.5px solid #e2e8f0; + border-radius: 8px; + font-size: 1rem; + color: #2d3748; + background-color: #f8fafc; + transition: all 0.3s ease; +} + +.ques-form input:focus, +.ques-form select:focus, +.ques-form textarea:focus { + outline: none; + border-color: #4299e1; + box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15); + background-color: #ffffff; +} + +.ques-form select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1em; + padding-right: 2.5rem; +} + +.ques-form textarea { + min-height: 120px; + resize: vertical; + font-family: 'Courier New', Courier, monospace; + line-height: 1.5; +} + +.ques-form button[type="submit"] { + background: linear-gradient(to right, #1f5d25, #29b200); + color: white; + font-weight: 600; + padding: 0.875rem 1.5rem; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 0.5rem; +} + +.ques-form button[type="submit"]:hover { + background: linear-gradient(to right, #076e18, #0ab40a); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25); +} + +.ques-form button[type="submit"]:active { + transform: translateY(0); + box-shadow: none; +} + +/* Error states */ +.ques-form input:invalid:not(:placeholder-shown), +.ques-form textarea:invalid:not(:placeholder-shown) { + border-color: #fc8181; +} + +.ques-form input:invalid:not(:placeholder-shown):focus, +.ques-form textarea:invalid:not(:placeholder-shown):focus { + box-shadow: 0 0 0 3px rgba(252, 129, 129, 0.15); +} + +/* Responsive adjustments */ +@media (max-width: 640px) { + .ques-form { + padding: 1.5rem; + margin: 1rem; + } + + .ques-form h3 { + font-size: 1.25rem; + } + + .ques-form button[type="submit"] { + width: 100%; + } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + .ques-form { + background: #d6d6d6; + width: 35rem; + margin-left: 25rem; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-end; + justify-content: flex-end; + align-items: stretch; + } + + .ques-form h3 { + color: #5a5b5c; + border-bottom-color: #2d3748; + } + + .ques-form label { + color: #0f0f0f; + } + + .ques-form input, + .ques-form select, + .ques-form textarea { + background-color: #7e7e7e; + border-color: #4a5568; + color: #e2e8f0; + } + + .ques-form input:focus, + .ques-form select:focus, + .ques-form textarea:focus { + background-color: #2d3748; + border-color: #4299e1; + } + + .ques-form select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); + } +} + + +#cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + +/* question display */ +.card-content p:first-of-type { + font-family: "Segoe UI", Tahoma, Geneva, sans-serif; + background: linear-gradient(145deg, #f0f4f7, #d8e0e5); + color: #333; + padding: 20px; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + white-space: pre-wrap; + word-wrap: break-word; + font-size: 1rem; + line-height: 1.6; + margin-bottom: 20px; + position: relative; + transition: all 0.3s ease; +} + +/* Hover effect */ +.card-content p:first-of-type:hover { + background: linear-gradient(145deg, #e1ecf4, #c0d3e2); + border-color: #a0b9cc; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +/* Adding a subtle transition to smooth the effect */ +.card-content p:first-of-type { + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; +} + +/* Scroll to Top Button */ +#scrollButton { + position: fixed; + bottom: 120px; + right: 25px; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; + opacity: 0; /* Initially hidden */ + pointer-events: none; /* Prevent interaction when hidden */ + transition: opacity 0.5s ease; /* Smooth fade-in effect */ +} + + +#scrollButton.visible { + opacity: 1; /* Fully visible */ + pointer-events: auto; /* Enable interaction */ +} + +.outer-circle { + position: relative; + width: 100%; + height: 100%; + border-radius: 50%; + background: conic-gradient( + #1ad140 0deg, + #03730c var(--scroll-progress, 0deg), + #1e65d900 var(--scroll-progress, 0deg), + #d5e7ec00 360deg + ); + transform: rotate(-90deg); /* Start animation from top */ + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; +} + +.inner-circle { + width: 45px; + height: 45px; + background: #becdbb; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 6px rgb(0 0 0); +} + +.arrow { + font-size: 20px; + color: #075728; + font-weight: bold; + transform: rotate(90deg); /* Fixed direction to the right */ +} diff --git a/pages/leetcode.html b/pages/leetcode.html new file mode 100644 index 00000000..d27413fa --- /dev/null +++ b/pages/leetcode.html @@ -0,0 +1,306 @@ + + + + + + + + + + + + + + + LeetCode Problems - DSA Problem Solutions + + + + + + + + + +
+
+ +

LeetCode Problems

+ +
+ +
+

Problems

+
+ +
+
+

Two Sum

+
+
+

Difficulty: Easy

+
+ +
+
+
+
+
+

Reverse Linked List

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Binary Tree Level Order Traversal

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+ +
+

Solution

+
+

Select a problem to view its solution.

+
+
+
+ + + + + + +
+
+ + + + + +
+

Add a New Question

+
+ + + + + + + + +
+
+
+ + + + + + + + + + + + + diff --git a/pages/leetcode.js b/pages/leetcode.js new file mode 100644 index 00000000..ae459422 --- /dev/null +++ b/pages/leetcode.js @@ -0,0 +1,262 @@ +// Toggle progress popup +const progressButton = document.getElementById("progressButton"); +const progressPopup = document.getElementById("progressPopup"); +const popupOverlay = document.getElementById("popupOverlay"); +const closePopup = document.getElementById("closePopup"); + +if (progressButton) { + progressButton.addEventListener("click", () => { + progressPopup.classList.add("active"); + popupOverlay.classList.add("active"); + }); +} + +if (closePopup) { + closePopup.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); + }); +} + +if (popupOverlay) { + popupOverlay.addEventListener("click", () => { + progressPopup.classList.remove("active"); + popupOverlay.classList.remove("active"); + }); +} + +function handleViewSolution(problemTitle) { + const solutionContent = document.getElementById('solution-content'); + const solutionDisplay = document.querySelector('.solution-display'); + + solutionDisplay.style.display = 'block'; // Show the solution container when a solution is selected + + let solutionText = ""; + + switch (problemTitle) { + case "Two Sum": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given an array of integers, return the indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + break; + case "Reverse Linked List": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the head of a singly linked list, reverse the list and return its head.

+
+

Time Complexity: O(n)

+

Space Complexity: O(1)

+
+
+ `; + break; + case "Binary Tree Level Order Traversal": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

Given the root of a binary tree, return the level order traversal of its nodes' values.

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + break; + case "ascll Function": + solutionText = ` +
+
+

${problemTitle} Solution

+
+
+

ascll Function

+
+

Time Complexity: O(n)

+

Space Complexity: O(n)

+
+
+ `; + break; + default: + solutionText = ` +
+
+

Solution

+
+
+

No solution available for this problem.

+
+
+ `; + } + + solutionContent.innerHTML = solutionText; + + // Initialize ACE editor based on the problem title + let editor; + switch (problemTitle) { + case "Two Sum": + editor = ace.edit("ace-editor-two-sum"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function twoSum(nums, target) { + let map = new Map(); + for (let i = 0; i < nums.length; i++) { + let complement = target - nums[i]; + if (map.has(complement)) { + return [map.get(complement), i]; + } + map.set(nums[i], i); + } +}`); + break; + case "Reverse Linked List": + editor = ace.edit("ace-editor-reverse-linked-list"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function reverseList(head) { + let prev = null; + let curr = head; + while (curr !== null) { + let nextTemp = curr.next; + curr.next = prev; + prev = curr; + curr = nextTemp; + } + return prev; +}`); + break; + case "Binary Tree Level Order Traversal": + editor = ace.edit("ace-editor-binary-tree"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/javascript"); + editor.setValue(`function levelOrder(root) { + if (!root) return []; + let result = []; + let queue = [root]; + while (queue.length > 0) { + let levelSize = queue.length; + let level = []; + for (let i = 0; i < levelSize; i++) { + let node = queue.shift(); + level.push(node.val); + if (node.left) queue.push(node.left); + if (node.right) queue.push(node.right); + } + result.push(level); + } + return result; +}`); + break; + case "ascll Function": + editor = ace.edit("ace-editor-ascll-Function"); + editor.setTheme("ace/theme/monokai"); + editor.session.setMode("ace/mode/c_cpp"); + editor.setValue(`#include +#include + +typedef struct node { + int data; + struct node *next; +} node; + +void createnode(node **head) { + int data; + node* newnode = (node*)malloc(sizeof(node)); + + printf("Enter value: "); + scanf("%d", &data); + newnode->data = data; + newnode->next = NULL; + + if (*head == NULL) { + *head = newnode; + } else { + newnode->next = *head; + *head = newnode; + } +} +void ascll(node **head) { + if (*head == NULL) { + printf("Empty list\n"); + return; + } + + node *p = *head; + node *q = NULL; + int temp; + + // Bubble sort for linked list (Improved swapping logic) + while (p != NULL) { + q = p->next; + while (q != NULL) { + if (p->data > q->data) { + // Swap data between p and q + temp = p->data; + p->data = q->data; + q->data = temp; + } + q = q->next; + } + p = p->next; + } +} + +void printll(node *head) { + if (head == NULL) { + printf("Empty list\n"); + } else { + while (head != NULL) { + printf("%d ", head->data); + head = head->next; + } + printf("\n"); + } +} + + +int main() { + int num = 1; + node *head = NULL; + + while (num) { + createnode(&head); + printf("Want to insert more? Type 1 for yes, 0 for no: "); + scanf("%d", &num); + } + + ascll(&head); + printll(head); + + return 0; +} +`); + } +} + +const cursor = document.querySelector("#cursor"); +const body = document.querySelector("body"); + +body.addEventListener("mousemove", function (e) { + gsap.to(cursor, { + x: e.x, + y: e.y + }) +}) \ No newline at end of file diff --git a/pages/leetcode1.html b/pages/leetcode1.html new file mode 100644 index 00000000..31111327 --- /dev/null +++ b/pages/leetcode1.html @@ -0,0 +1,265 @@ + + + + + + + + + + + + + + + LeetCode Problems - DSA Problem Solutions + + + + + + + +
+
+ +

LeetCode Problems

+
+ +
+
+

Problems

+
+
+

Two Sum

+
+
+

Difficulty: Easy

+
+ +
+
+
+
+
+

Reverse Linked List

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+
+

Binary Tree Level Order Traversal

+
+
+

Difficulty: Medium

+
+ +
+
+
+
+ +
+

Solution

+
+

Select a problem to view its solution.

+
+
+ + +
+

Check Your Progress

+ + + +
+

✨ Easy: 0

+

⚡ Medium: 0

+

🔥 Hard: 0

+
+
+ +
+ + +
+
+

Problems

+ +
+ + +
+

Add a New Question

+
+ + + + + + + + +
+
+
+ + + + + + + + + diff --git a/pages/privacy.html b/pages/privacy.html new file mode 100644 index 00000000..5f2e477c --- /dev/null +++ b/pages/privacy.html @@ -0,0 +1,661 @@ + + + + + + + + + + + + + + DSA Problem Solutions + + + + + + + + + + + + + + + + + + +
+ +
+ + + +
+

Privacy Policy

+ + +
+

+ Welcome to DSA_SOLUTION_PLATFORM. Your privacy is + important to us. This Privacy Policy explains how we collect, use, and + protect your personal information when you use our website. +

+ +

Information We Collect

+

We may collect the following types of information:

+
    +
  • + Personal identification information (Name, email address, phone + number, etc.) +
    • +
  • Usage data (IP address, browser type, pages visited, etc.)
    • +
  • Cookies and similar technologies
    • +
+ +

How We Use Your Information

+

We use the information we collect for the following purposes:

+
    +
  • To provide and maintain our services
    • +
  • To improve user experience
    • +
  • + To communicate with you, including responding to inquiries and + providing updates +
    • +
  • To analyze website traffic and usage
    • +
  • To comply with legal obligations
    • +
+ +

Sharing Your Information

+

+ We do not sell or share your personal information with third parties, + except in the following cases: +

+
    +
  • With your consent
    • +
  • To comply with legal requirements
    • +
  • To protect our rights and property
    • +
+ +

User Responsibilities

+

As a user of this platform, you agree to:

+
    +
  • + Provide accurate and truthful information when registering or + submitting content. +
    • +
  • + Not engage in unlawful, harmful, or disruptive activities on the + platform. +
    • +
  • + Respect the intellectual property rights of the platform and other + users. +
    • +
+ +

Your Rights

+

You have the right to:

+
    +
  • Access, update, or delete your personal data
    • +
  • Opt-out of certain data collection practices
    • +
  • Request clarification on our data practices
    • +
+ +

Cookies

+

+ We use cookies to enhance your browsing experience. You can adjust your + browser settings to refuse cookies if you prefer. +

+ +

Changes to This Policy

+

+ We may update this Privacy Policy from time to time. We encourage you to + review this page periodically for any changes. +

+ +

Contact Us

+

+ If you have any questions or concerns about this Privacy Policy, please + contact us at + support@DSAsolutionpaltform.com. +

+
+ + + + + + + + + + + + + + diff --git a/pages/script.js b/pages/script.js new file mode 100644 index 00000000..7fcbe9fc --- /dev/null +++ b/pages/script.js @@ -0,0 +1,43 @@ +const tl2 = gsap.timeline(); +tl2.from(".logo", { + y: -30, + opacity: 0, + duration: 1, + delay: 0.5 +}) + +tl2.from(".nav-links li", { + y: -30, + opacity: 0, + stagger: 0.25, + duration: 1 +}) + +var tl = gsap.timeline() +tl.from("h1", { + y: -20, + opacity: 0, + delay: 0.5, + duration: 1 +}) +tl.from(".content-wrapper p", { + y: -20, + opacity: 0, + delay: 0.5, + duration: 1 +}) +tl.from(".hero-buttons a", { + y: 30, + duration: 1, + opacity: 0, + stagger: 0.25 +}) + +const cursor = document.querySelector("#cursor"); +const body = document.querySelector("body") + +body.addEventListener("mousemove", function (e) { + gsap.to(cursor, { + x: e.x, y: e.y + }) +}) diff --git a/pages/scroll.css b/pages/scroll.css new file mode 100644 index 00000000..366b79f0 --- /dev/null +++ b/pages/scroll.css @@ -0,0 +1,58 @@ +/* Scroll to Top Button */ +#scrollButton { + position: fixed; + bottom: 120px; + right: 25px; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; + opacity: 0; /* Initially hidden */ + pointer-events: none; /* Prevent interaction when hidden */ + transition: opacity 0.5s ease; /* Smooth fade-in effect */ +} + + +#scrollButton.visible { + opacity: 1; /* Fully visible */ + pointer-events: auto; /* Enable interaction */ +} + +.outer-circle { + position: relative; + width: 100%; + height: 100%; + border-radius: 50%; + background: conic-gradient( + #1ad140 0deg, + #03730c var(--scroll-progress, 0deg), + #1e65d900 var(--scroll-progress, 0deg), + #d5e7ec00 360deg + ); + transform: rotate(-90deg); /* Start animation from top */ + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; +} + +.inner-circle { + width: 45px; + height: 45px; + background: #becdbb; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 6px rgb(0 0 0); +} + +.arrow { + font-size: 20px; + color: #075728; + font-weight: bold; + transform: rotate(90deg); /* Fixed direction to the right */ +} diff --git a/pages/scroll.js b/pages/scroll.js new file mode 100644 index 00000000..cbb8dd88 --- /dev/null +++ b/pages/scroll.js @@ -0,0 +1,29 @@ + +const scrollButton = document.getElementById("scrollButton"); +const outerCircle = document.querySelector(".outer-circle"); +const arrow = document.querySelector(".arrow"); + +// Function to handle scroll behavior +window.addEventListener("scroll", () => { + const scrollTop = window.scrollY; + const scrollHeight = + document.documentElement.scrollHeight - window.innerHeight; + const scrollProgress = (scrollTop / scrollHeight) * 360; + // Show button after scrolling 7-8 lines (~100px) + if (scrollTop > 100) { + scrollButton.classList.add("visible"); + } else { + scrollButton.classList.remove("visible"); + } + + // Update the circular progress + outerCircle.style.setProperty( + "--scroll-progress", + `${scrollProgress}deg` + ); + }); + +// Scroll-to-top functionality +scrollButton.addEventListener("click", () => { + window.scrollTo({ top: 0, behavior: "smooth" }); + }); diff --git a/pages/terms.html b/pages/terms.html new file mode 100644 index 00000000..370c40fb --- /dev/null +++ b/pages/terms.html @@ -0,0 +1,871 @@ + + + + + + + + + + + + + + Terms of Service- DSA Problem Solutions + + + + + + + + + + +
+ + + +

Terms of services

+
+ +
+

+ Welcome to DSA_SOLUTION_PLATFORM. By accessing or using + our website, you agree to comply with these Terms and Service. Please + read them carefully to understand your rights and responsibilities. +

+ +

1. Acceptance of Terms

+

+ By using this platform, you agree to these Terms and Service. If you do + not agree to any part of these terms, please discontinue use of the + website. +

+ +

2. Use of the Platform

+

+ We grant you a limited, non-exclusive, and non-transferable license to + use our platform for personal, non-commercial purposes. Any unauthorized + use of the platform is strictly prohibited. +

+ +

3. Intellectual Property

+

+ All content on DSA_SOLUTION_PLATFORM, including text, + images, logos, and designs, is the property of the platform and + protected by copyright laws. You may not reproduce, distribute, or + create derivative works without prior written consent. +

+ +

4. User Responsibilities

+

As a user of this platform, you agree to:

+
    +
  • + Provide accurate and truthful information when registering or + submitting content. +
    • +
  • + Not engage in unlawful, harmful, or disruptive activities on the + platform. +
    • +
  • + Respect the intellectual property rights of the platform and other + users. +
    • +
+ +

5. Limitation of Liability

+

+ DSA_SOLUTION_PLATFORM is not responsible for any + indirect, incidental, or consequential damages arising from your use of + the platform. All services are provided "as is" without warranties of + any kind. +

+ +

6. Modifications to Terms

+

+ We reserve the right to modify these Terms and Service at any time. + Updates will be posted on this page, and continued use of the platform + signifies your acceptance of the revised terms. +

+ +

7. Termination

+

+ We reserve the right to suspend or terminate your access to the platform + at our sole discretion, without prior notice, for any violation of these + Terms. +

+ +

8. Contact Us

+

+ If you have any questions about these Terms and Service, please contact + us at + contact@dsasolutionplatform.com. +

+
+ + + + +
+ +
+ +
+ + + +

+ DSA problem solutions involve step-by-step methods to solve data + structure and algorithm challenges efficiently. They include + understanding the problem, selecting the right approach, + implementing optimized code, and analyzing time and space complexity + for performance. +

+
+ + +
+

+ Quick Links +

+ +
+ +
+

+ DSA Problem Solutions +

+ +
+ + +
+

+ Learn More +

+ +
+
+ + +
+

+ Stay Updated +

+

+ Subscribe to our newsletter for the latest updates and tips on + mastering data structures and algorithms. +

+
+ + +
+
+ + + + + +
+

+ © DSA Problem Solutions. All + rights reserved. +

+
+
+ + + + + + + + + + + diff --git a/pages/testimonial.html b/pages/testimonial.html new file mode 100644 index 00000000..84af7246 --- /dev/null +++ b/pages/testimonial.html @@ -0,0 +1,814 @@ + + + + + + + + + + + + + + DSA Problem Solutions + + + + + + + + + + + + + +
+ + +
+ +
+ +
+
+ +
+
+
+
+

Our happy clients say about us

+
+ +
+ Check all 2,157 reviews +
+ +
+
+ +
+
+
+
+ + + + + + + + + + + + + + +
+ +

+

“You made it so simple. My new site is so much faster and easier to work with than my old site. I just choose the page, make the change.”

+

+
+ +
+ Leslie Alexander +
+

Leslie Alexander

+

Freelance React Developer

+
+
+
+ +
+
+
+ + + + + + + + + + + + + + +
+ +

+

“Simply the best. Better than all the rest. I’d recommend this product to beginners and advanced users.”

+

+
+ +
+ Leslie Alexander +
+

Jacob Jones

+

Digital Marketer

+
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + +
+ +

+

“I cannot believe that I have got a brand new landing page after getting Omega. It was super easy to edit and publish.”

+

+
+
+ Leslie Alexander +
+

Jenny Wilson

+

Graphic Designer

+
+
+
+
+
+ + + + + + + + + + + + diff --git a/pages/vanilla-tilt.js b/pages/vanilla-tilt.js new file mode 100644 index 00000000..6e195859 --- /dev/null +++ b/pages/vanilla-tilt.js @@ -0,0 +1,501 @@ +var VanillaTilt = (function () { +'use strict'; + +/** + * Created by Sergiu Șandor (micku7zu) on 1/27/2017. + * Original idea: https://github.com/gijsroge/tilt.js + * MIT License. + * Version 1.8.1 + */ + +class VanillaTilt { + constructor(element, settings = {}) { + if (!(element instanceof Node)) { + throw ("Can't initialize VanillaTilt because " + element + " is not a Node."); + } + + this.width = null; + this.height = null; + this.clientWidth = null; + this.clientHeight = null; + this.left = null; + this.top = null; + + // for Gyroscope sampling + this.gammazero = null; + this.betazero = null; + this.lastgammazero = null; + this.lastbetazero = null; + + this.transitionTimeout = null; + this.updateCall = null; + this.event = null; + + this.updateBind = this.update.bind(this); + this.resetBind = this.reset.bind(this); + + this.element = element; + this.settings = this.extendSettings(settings); + + this.reverse = this.settings.reverse ? -1 : 1; + this.resetToStart = VanillaTilt.isSettingTrue(this.settings["reset-to-start"]); + this.glare = VanillaTilt.isSettingTrue(this.settings.glare); + this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]); + this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]); + this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope); + this.gyroscopeSamples = this.settings.gyroscopeSamples; + + this.elementListener = this.getElementListener(); + + if (this.glare) { + this.prepareGlare(); + } + + if (this.fullPageListening) { + this.updateClientSize(); + } + + this.addEventListeners(); + this.reset(); + + if (this.resetToStart === false) { + this.settings.startX = 0; + this.settings.startY = 0; + } + } + + static isSettingTrue(setting) { + return setting === "" || setting === true || setting === 1; + } + + /** + * Method returns element what will be listen mouse events + * @return {Node} + */ + getElementListener() { + if (this.fullPageListening) { + return window.document; + } + + if (typeof this.settings["mouse-event-element"] === "string") { + const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]); + + if (mouseEventElement) { + return mouseEventElement; + } + } + + if (this.settings["mouse-event-element"] instanceof Node) { + return this.settings["mouse-event-element"]; + } + + return this.element; + } + + /** + * Method set listen methods for this.elementListener + * @return {Node} + */ + addEventListeners() { + this.onMouseEnterBind = this.onMouseEnter.bind(this); + this.onMouseMoveBind = this.onMouseMove.bind(this); + this.onMouseLeaveBind = this.onMouseLeave.bind(this); + this.onWindowResizeBind = this.onWindowResize.bind(this); + this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this); + + this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind); + this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind); + this.elementListener.addEventListener("mousemove", this.onMouseMoveBind); + + if (this.glare || this.fullPageListening) { + window.addEventListener("resize", this.onWindowResizeBind); + } + + if (this.gyroscope) { + window.addEventListener("deviceorientation", this.onDeviceOrientationBind); + } + } + + /** + * Method remove event listeners from current this.elementListener + */ + removeEventListeners() { + this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind); + this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind); + this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind); + + if (this.gyroscope) { + window.removeEventListener("deviceorientation", this.onDeviceOrientationBind); + } + + if (this.glare || this.fullPageListening) { + window.removeEventListener("resize", this.onWindowResizeBind); + } + } + + destroy() { + clearTimeout(this.transitionTimeout); + if (this.updateCall !== null) { + cancelAnimationFrame(this.updateCall); + } + + this.element.style.willChange = ""; + this.element.style.transition = ""; + this.element.style.transform = ""; + this.resetGlare(); + + this.removeEventListeners(); + this.element.vanillaTilt = null; + delete this.element.vanillaTilt; + + this.element = null; + } + + onDeviceOrientation(event) { + if (event.gamma === null || event.beta === null) { + return; + } + + this.updateElementPosition(); + + if (this.gyroscopeSamples > 0) { + this.lastgammazero = this.gammazero; + this.lastbetazero = this.betazero; + + if (this.gammazero === null) { + this.gammazero = event.gamma; + this.betazero = event.beta; + } else { + this.gammazero = (event.gamma + this.lastgammazero) / 2; + this.betazero = (event.beta + this.lastbetazero) / 2; + } + + this.gyroscopeSamples -= 1; + } + + const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX; + const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY; + + const degreesPerPixelX = totalAngleX / this.width; + const degreesPerPixelY = totalAngleY / this.height; + + const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero); + const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero); + + const posX = angleX / degreesPerPixelX; + const posY = angleY / degreesPerPixelY; + + if (this.updateCall !== null) { + cancelAnimationFrame(this.updateCall); + } + + this.event = { + clientX: posX + this.left, + clientY: posY + this.top, + }; + + this.updateCall = requestAnimationFrame(this.updateBind); + } + + onMouseEnter() { + this.updateElementPosition(); + this.element.style.willChange = "transform"; + this.setTransition(); + } + + onMouseMove(event) { + if (this.updateCall !== null) { + cancelAnimationFrame(this.updateCall); + } + + this.event = event; + this.updateCall = requestAnimationFrame(this.updateBind); + } + + onMouseLeave() { + this.setTransition(); + + if (this.settings.reset) { + requestAnimationFrame(this.resetBind); + } + } + + reset() { + this.onMouseEnter(); + + if (this.fullPageListening) { + this.event = { + clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth, + clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight + }; + } else { + this.event = { + clientX: this.left + ((this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.width), + clientY: this.top + ((this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.height) + }; + } + + let backupScale = this.settings.scale; + this.settings.scale = 1; + this.update(); + this.settings.scale = backupScale; + this.resetGlare(); + } + + resetGlare() { + if (this.glare) { + this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)"; + this.glareElement.style.opacity = "0"; + } + } + + getValues() { + let x, y; + + if (this.fullPageListening) { + x = this.event.clientX / this.clientWidth; + y = this.event.clientY / this.clientHeight; + } else { + x = (this.event.clientX - this.left) / this.width; + y = (this.event.clientY - this.top) / this.height; + } + + x = Math.min(Math.max(x, 0), 1); + y = Math.min(Math.max(y, 0), 1); + + let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2); + let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2); + let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI); + + return { + tiltX: tiltX, + tiltY: tiltY, + percentageX: x * 100, + percentageY: y * 100, + angle: angle + }; + } + + updateElementPosition() { + let rect = this.element.getBoundingClientRect(); + + this.width = this.element.offsetWidth; + this.height = this.element.offsetHeight; + this.left = rect.left; + this.top = rect.top; + } + + update() { + let values = this.getValues(); + + this.element.style.transform = "perspective(" + this.settings.perspective + "px) " + + "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " + + "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " + + "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")"; + + if (this.glare) { + this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`; + this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`; + } + + this.element.dispatchEvent(new CustomEvent("tiltChange", { + "detail": values + })); + + this.updateCall = null; + } + + /** + * Appends the glare element (if glarePrerender equals false) + * and sets the default style + */ + prepareGlare() { + // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. + if (!this.glarePrerender) { + // Create glare element + const jsTiltGlare = document.createElement("div"); + jsTiltGlare.classList.add("js-tilt-glare"); + + const jsTiltGlareInner = document.createElement("div"); + jsTiltGlareInner.classList.add("js-tilt-glare-inner"); + + jsTiltGlare.appendChild(jsTiltGlareInner); + this.element.appendChild(jsTiltGlare); + } + + this.glareElementWrapper = this.element.querySelector(".js-tilt-glare"); + this.glareElement = this.element.querySelector(".js-tilt-glare-inner"); + + if (this.glarePrerender) { + return; + } + + Object.assign(this.glareElementWrapper.style, { + "position": "absolute", + "top": "0", + "left": "0", + "width": "100%", + "height": "100%", + "overflow": "hidden", + "pointer-events": "none", + "border-radius": "inherit" + }); + + Object.assign(this.glareElement.style, { + "position": "absolute", + "top": "50%", + "left": "50%", + "pointer-events": "none", + "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`, + "transform": "rotate(180deg) translate(-50%, -50%)", + "transform-origin": "0% 0%", + "opacity": "0" + }); + + this.updateGlareSize(); + } + + updateGlareSize() { + if (this.glare) { + const glareSize = (this.element.offsetWidth > this.element.offsetHeight ? this.element.offsetWidth : this.element.offsetHeight) * 2; + + Object.assign(this.glareElement.style, { + "width": `${glareSize}px`, + "height": `${glareSize}px`, + }); + } + } + + updateClientSize() { + this.clientWidth = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth; + + this.clientHeight = window.innerHeight + || document.documentElement.clientHeight + || document.body.clientHeight; + } + + onWindowResize() { + this.updateGlareSize(); + this.updateClientSize(); + } + + setTransition() { + clearTimeout(this.transitionTimeout); + this.element.style.transition = this.settings.speed + "ms " + this.settings.easing; + if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`; + + this.transitionTimeout = setTimeout(() => { + this.element.style.transition = ""; + if (this.glare) { + this.glareElement.style.transition = ""; + } + }, this.settings.speed); + + } + + /** + * Method return patched settings of instance + * @param {boolean} settings.reverse - reverse the tilt direction + * @param {number} settings.max - max tilt rotation (degrees) + * @param {startX} settings.startX - the starting tilt on the X axis, in degrees. Default: 0 + * @param {startY} settings.startY - the starting tilt on the Y axis, in degrees. Default: 0 + * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets + * @param {string} settings.easing - Easing on enter/exit + * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc.. + * @param {number} settings.speed - Speed of the enter/exit transition + * @param {boolean} settings.transition - Set a transition on enter/exit + * @param {string|null} settings.axis - What axis should be enabled. Can be "x" or "y" + * @param {boolean} settings.glare - if it should have a "glare" effect + * @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%) + * @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise + * @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element + * @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events + * @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit + * @param {boolean} settings.reset-to-start - true = On reset event (mouse leave) will return to initial start angle (if startX or startY is set) + * @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events + * @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc.. + * @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position. + */ + extendSettings(settings) { + let defaultSettings = { + reverse: false, + max: 15, + startX: 0, + startY: 0, + perspective: 1000, + easing: "cubic-bezier(.03,.98,.52,.99)", + scale: 1, + speed: 300, + transition: true, + axis: null, + glare: false, + "max-glare": 1, + "glare-prerender": false, + "full-page-listening": false, + "mouse-event-element": null, + reset: true, + "reset-to-start": true, + gyroscope: true, + gyroscopeMinAngleX: -45, + gyroscopeMaxAngleX: 45, + gyroscopeMinAngleY: -45, + gyroscopeMaxAngleY: 45, + gyroscopeSamples: 10 + }; + + let newSettings = {}; + for (var property in defaultSettings) { + if (property in settings) { + newSettings[property] = settings[property]; + } else if (this.element.hasAttribute("data-tilt-" + property)) { + let attribute = this.element.getAttribute("data-tilt-" + property); + try { + newSettings[property] = JSON.parse(attribute); + } catch (e) { + newSettings[property] = attribute; + } + + } else { + newSettings[property] = defaultSettings[property]; + } + } + + return newSettings; + } + + static init(elements, settings) { + if (elements instanceof Node) { + elements = [elements]; + } + + if (elements instanceof NodeList) { + elements = [].slice.call(elements); + } + + if (!(elements instanceof Array)) { + return; + } + + elements.forEach((element) => { + if (!("vanillaTilt" in element)) { + element.vanillaTilt = new VanillaTilt(element, settings); + } + }); + } +} + +if (typeof document !== "undefined") { + /* expose the class to window */ + window.VanillaTilt = VanillaTilt; + + /** + * Auto load + */ + VanillaTilt.init(document.querySelectorAll("[data-tilt]")); +} + +return VanillaTilt; + +}()); diff --git a/pages/work.html b/pages/work.html new file mode 100644 index 00000000..4de70152 --- /dev/null +++ b/pages/work.html @@ -0,0 +1,795 @@ + + + + + + + + + + + + + + + + + + + Work With Us - DSA Problem Solutions + + + + +
+ +
+ +
+
+
+

Join Our Team

+

+ We’re looking for passionate individuals to help us make an impact + on data structure and algorithm learning. +

+
+
+ +
+
+

Why Work With Us?

+

+ At DSA Problem Solutions, we believe in fostering an environment + where creativity, collaboration, and continuous learning thrive. Our + team is made up of talented individuals from diverse backgrounds who + are dedicated to creating a platform that helps learners master data + structures and algorithms. +

+

+ Join us to work on exciting projects, contribute to open-source + initiatives, and make a real difference in the tech community. +

+
+ +
+

Current Job Openings

+
+

Frontend Developer

+

Location: Remote | Full-time

+

+ We are looking for a passionate Frontend Developer with experience + in modern web technologies like HTML5, CSS3, JavaScript, and + frameworks such as React or Vue.js. You’ll be building user + interfaces that are engaging and scalable. +

+ Apply Now +
+
+

Backend Developer

+

Location: Remote | Full-time

+

+ Looking for a Backend Developer with expertise in building robust + APIs using Node.js, Python, or Ruby. You’ll work on our + server-side architecture to ensure smooth data processing and + integration. +

+ Apply Now +
+
+

Content Writer

+

Location: Remote | Part-time

+

+ We need a Content Writer who can create high-quality technical + content related to DSA, tutorials, blogs, and articles that help + our community stay updated and engaged. +

+ Apply Now +
+
+ +
+

Interested? Get in Touch!

+

+ If you're excited about the opportunity to work with us and make an + impact, feel free to reach out. You can connect with us through the + form below or directly email us at + careers@dsa-solutions.com. +

+
+ + + + +
+
+
+
+ +
+ +
+ +
+ + + +

+ DSA problem solutions involve step-by-step methods to solve data + structure and algorithm challenges efficiently. They include + understanding the problem, selecting the right approach, + implementing optimized code, and analyzing time and space complexity + for performance. +

+
+ + +
+

+ Quick Links +

+ +
+
+

+ DSA Problem Solutions +

+ +
+ + +
+

+ Learn More +

+ +
+
+ + +
+

+ Stay Updated +

+

+ Subscribe to our newsletter for the latest updates and tips on + mastering data structures and algorithms. +

+
+ + +
+
+ + + + + +
+

+ © 2025 DSA Problem Solutions. All rights reserved. +

+
+
+ + + + + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..f9658cde --- /dev/null +++ b/styles.css @@ -0,0 +1,759 @@ +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); + +body { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + background-color: #f4f4f4; +} +/* Navbar Styles */ +.navbar { + background: #2F2441; + padding: 1rem 1rem; + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 10px #100C08; + z-index: 1000; + backdrop-filter: blur(10px); + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + border: 5px rgb(144 174 172 / 0%) solid; +} + +/* .logo { + display: flex; + align-items: center; +} */ + +.logo img { + height: 40px; + width: 8rem; + transition: transform 0.3s ease; + border-radius: 6px; +} + +.logo img:hover { + transform: scale(1.05); +} + +.logo{ + padding-top: 8px; +} +.nav-links { + display: flex; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-links li { + position: relative; +} + +.nav-links li a { + color: #ffffff; + font-weight: bold; + text-decoration: none; + padding: 8px 12px; + transition: background-color 0.3s ease-in-out; + font-size: 18px; +} + + + +.nav-links a:hover { + color: #17ff00; +} + +/* Underline animation for nav links */ +.nav-links a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: #ffffff; + transition: width 0.3s ease; +} + +.nav-links a:hover::after { + width: 100%; +} + +/* Active link style */ +.nav-links a.active { + color: #ffffff; +} + +.nav-links a.active::after { + width: 100%; +} + +/* Mobile menu button - Hidden by default */ +.mobile-menu-btn { + color:#000; + display: none; + background: none; + border: none; + padding: 0.5rem; + cursor: pointer; +} + +/* Hero Section Styles */ +.hero-section { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4rem; + /* margin: -20px; */ + background: linear-gradient(to right, #2f2441, #2f2441); + color: #ffffff; + font-family: 'Roboto', sans-serif; +} + +.hero-content { + max-width: 70%; + /* margin-left: -3rem; */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero-title { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1.5rem; +} + +.hero-subtitle { + font-size: 1.5rem; + width: 70%; + margin-bottom: 30px; + +} + +.hero-buttons { + /* margin-left: 4rem; */ + display: flex; + flex-wrap: wrap; + gap: 15px; + justify-content:center; +} + + +.platform-btn { +width: max-content; + background-color: #fff; + color: #2575fc; + padding: 10px 20px; + font-size: 1rem; + font-weight: 600; + border: none; + border-radius: 5px; + cursor: pointer; + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.platform-btn:hover { + transform: scale(1.1); + background-color: #625ee1fa; + color: #fff; +} + +.hero-image img { + max-width: 400px; + height: auto; + border-radius: 20px; +} + + +.footer-title{ + margin: 40px; text-align: justify; +} + +.footer-logo{ + width: 100px; + margin-top: 20px; +} + +.follow-us{ + font-size: 18px; margin-bottom: 10px; transition: color 0.3s ease; +} + +.services{ +flex: 1; + min-width: 150px; + margin: 10px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .navbar { + padding: 1rem; + } + + .mobile-menu-btn { + display: block; + } + + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + + .nav-links a { + color: #e5e7eb; + } + + .nav-links a:hover { + color: #60a5fa; + } + + .nav-links a::after { + background-color: #60a5fa; + } + + @media (max-width: 768px) { + .nav-links { + background: rgba(174, 237, 158, 0.98); + } + } +} + + .nav-links { + display: none; /* Hide by default on mobile */ + position: absolute; + top: 100%; + left: 0; + right: 0; + background: rgb(0 0 0 / 98%); + flex-direction: column; + padding: 1rem; + gap: 1rem; + box-shadow: 0 2px 10px rgb(24 1 255); + } + + /* Show menu when active */ + .nav-links.active { + display: flex; + } + + .nav-links li { + width: 100%; + text-align: center; + } + + .nav-links a { + display: block; + padding: 0.75rem 0; + } + + .nav-links a::after { + display: none; /* Remove hover animation on mobile */ + } +} + + +/* Responsive Design */ +@media screen and (max-width: 768px) { + .nav-links { + flex-direction: column; + align-items: center; + } + + .nav-links li { + width: 100%; + } + + .nav-links li a { + text-align: center; + } + + .social-icons{ + display: flex;justify-content: center; + align-items: center; + } + + .follow-us{ + text-align: center; + } +} + +.content-wrapper { + height: 100%; + width: 100%; +} +header { + top: 9px; + position: relative; + /* z-index: 1; */ + text-align: center; + padding: 40px 0; + background-color: #333; + color: #fff; + width: 100%; + box-sizing: border-box; + margin: 0; +} +header h1 { + margin: 0; + font-size: 2.5em; +} +header p { + margin: 10px 0 0; + font-size: 1.2em; +} +.container { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 20px; + margin-top:2.8rem; + width: 100%; +} + +.platform-card { + background-color: #2f2441; + border-radius: 20px; + box-shadow: 0 6px 14px rgb(16 12 8); + margin: 10px; + padding: 30px; + text-align: center; + flex: 1 1 calc(33.33% - 40px); + max-width: 360px; + transition: transform 0.3s, box-shadow 0.3s; +} + +.platform-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 24px rgb(16 12 8); +} + +.platform-card img { + width: 100px; + height: 100px; + margin-bottom: 15px; + object-fit: contain; + border-radius: 10px; + border: none; + outline: none; + box-shadow: none; +} + +.platform-card h2 { + margin: 15px 0; + font-size: 1.6em; + color: #f9a828; +} + +.platform-card a { + display: inline-block; + margin-top: 15px; + padding: 12px 25px; + background-color: #f9a828; + color: #fff; + text-decoration: none; + border-radius: 8px; + transition: background-color 0.3s; +} + +.platform-card a:hover { + background-color: #07670a; +} + +@media(max-width:1025px) { + .footer-section p { + margin: 12px + } + + .footer-logo{ + width: 65px; + margin-top: 17px; + } +} + +@media (max-width:426px) { + .services{ + margin-left: 34px; + } +} + +@media (max-width:376px) { + .services{ + text-align: center; + margin-bottom: 0; + } + + .learn-more{ + text-align: center; + margin-top: 0; + } +} + +@media(max-width: 321px) { + .footer-section{ + width: 290px; + margin: 0; + } + + .nav-links li a { + color: white; + } +} + +/* Footer Animations */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInLeft { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +#cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + + +/* ======================== + Footer Section + ======================== */ +.main-footer { + background-color: linear-gradient(to right, #2f2441, #2f2441); + padding: 4rem 5%; + color: #333; + font-family: 'Arial', sans-serif; + /*border-top: 3px solid #aaffaf;*/ + box-shadow: 0 2px 10px rgb(0 0 0); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + margin-top: 50px; +} + +.footer-content { + display: grid; + margin-bottom: 2rem; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + max-width: 1200px; + margin: auto; + padding: 20px; +} + +.footer-section h3 { + font-size: 2rem; + margin-bottom: 1rem; + color: #000; +} + +.footer-section h4 { + font-size: 1.2rem; + margin-bottom: 1rem; + color: #000; +} + +.footer-section p { + line-height: 1.6; + margin-bottom: 1rem; + letter-spacing: 0.2px; +} + +.footer-section ul { + list-style: none; + padding: 0; +} + +.footer-section ul li { + margin-bottom: 0.8rem; +} + +.footer-section ul li a { + color: #333; + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section ul li a:hover { + color: #E5A186; +} + +.social-links { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 20px; + margin-top: 1rem; +} + +.social-links a { + color: #f7f5f5; + font-size: 1.5rem; + text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.social-links a[aria-label="Facebook"]:hover { + color: #3b5998; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.social-links a[aria-label="Twitter"]:hover { + color: #1da1f2; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} +.social-links a[aria-label="Instagram"]:hover { + color: #e4405f; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.social-links a[aria-label="YouTube"]:hover { + color: #ff0000; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.social-links a[aria-label="Linkedin"]:hover { + color: #0077b5; + text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); +} + +.contact-info li { + display: flex; + align-items: center; + transition: all 0.3s ease; + gap: 0.6rem; +} + +.contact-info li span { + margin-left: 0.3rem; + transition: all 0.3s ease; +} + +.contact-info li span:hover { + color: #E5A186; +} + +.footer-bottom { + text-align: center; + margin-top: 20px; + padding-top: 20px; + font-size: 14px; +} + +#cursor{ + height: 20px; + width:20px; + background-color: rgb(125, 239, 11,0.5); + border-radius: 50%; + position: fixed; + font-size: 7px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} + +form { + padding-bottom: 199px; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; /* Add relative positioning to the form */ + margin-bottom: 1px; +} + +form::before { + content: ""; + position: absolute; + bottom: 0; + left: 0%; /* Adjust this value to control the starting point of the border */ + width: 92%; /* Adjust this value to control the length of the border */ + border-bottom: 1px solid #fafafa; /* Your border color */ +} + +form input{ + width:80%; + padding: 10px; + background: transparent; + color: #CCC; + border: 0; + outline: none; +} +form button{ + background: transparent; + border: 0; + outline: none; + cursor: pointer; +} +form button .fas{ + font-size: 16px; + padding: 10px 20px; + color: #fafafa; +} + + +.main-footer .footer-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; +} + +.main-footer .footer-section { + flex: 1 1 18%; /* This ensures each section takes up an equal width, you can adjust percentage as needed */ + padding: 10px; +} + +.main-footer .footer-section h4 { + margin-bottom: 10px; +} + +.main-footer .footer-section ul, +.main-footer .footer-section form { + margin: 0; + padding: 0; + list-style: none; +} + +.main-footer .footer-section form input { + margin-right: 10px; +} + +h4 { + position: relative; /* Add relative positioning to the

element */ +} + +.underline { + width: 50%; /* Adjusted to make the red line shorter */ + height: 3px; + background: linear-gradient(to right, #1b5d37, #29b429, #347e0e); + border-radius: 3px; + position: absolute; + bottom: -8px; /* Adjusted to position the underline correctly below the text */ + left: 10%; /* Centers the underline horizontally */ + transform: translateX(-20%); /* This ensures that the underline is centered */ + overflow: hidden; +} + +.underline span { + width: 15px; + height: 100%; + background: #fff; + border-radius: 3px; + position: absolute; + top: 0; + left: -15px; /* Starting off-screen to the left */ + animation: moving 2s linear infinite; +} + +@keyframes moving { + 0% { + left: -20px; /* Start animation off-screen */ + } + 100% { + left: 100%; /* Move the span across to the right */ + } +} + + +/* Scroll to Top Button */ +#scrollButton { + position: fixed; + bottom: 120px; + right: 25px; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; + opacity: 0; /* Initially hidden */ + pointer-events: none; /* Prevent interaction when hidden */ + transition: opacity 0.5s ease; /* Smooth fade-in effect */ +} + + +#scrollButton.visible { + opacity: 1; /* Fully visible */ + pointer-events: auto; /* Enable interaction */ +} + +.outer-circle { + position: relative; + width: 100%; + height: 100%; + border-radius: 50%; + background: conic-gradient( + #1ad140 0deg, + #03730c var(--scroll-progress, 0deg), + #1e65d900 var(--scroll-progress, 0deg), + #d5e7ec00 360deg + ); + transform: rotate(-90deg); /* Start animation from top */ + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; +} + +.inner-circle { + width: 45px; + height: 45px; + background: #becdbb; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 6px rgb(0 0 0); +} + +.arrow { + font-size: 20px; + color: #075728; + font-weight: bold; + transform: rotate(90deg); /* Fixed direction to the right */ +}