Merge pull request #379 from dnyanesh99borse/main

SUCCESSFULLY EHANCE THE USER INTERFACE OF THE PASSWORD GENERATOR APPL…
iamrahulmahato · Oct 5, 2024 · 7ecd7cf · 7ecd7cf
2 parents 7a2d43b + 9181503
commit 7ecd7cf
Show file tree

Hide file tree

Showing 12 changed files with 1,219 additions and 82 deletions.
diff --git a/assets/image/contact form image.svg b/assets/image/contact form image.svg
diff --git a/assets/image/password generator main.svg b/assets/image/password generator main.svg
diff --git a/community/frontend/contact.css b/community/frontend/contact.css
@@ -0,0 +1,120 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', sans-serif;
+}
+
+body {
+    background-color: #f3f4f6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 20px;
+}
+
+.contact-container {
+    display: flex;
+    background-color: #fff;
+    max-width: 900px;
+    width: 100%;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.contact-left, .contact-right {
+    flex: 1;
+    padding: 30px;
+}
+
+.contact-left {
+    background-color: #e0e0ff;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.contact-left h2 {
+    color: #6b5b95;
+    margin-bottom: 20px;
+}
+
+.contact-left img {
+    max-width: 100%;
+    margin-bottom: 20px;
+}
+
+.contact-left p {
+    font-size: 16px;
+    color: #6b5b95;
+}
+
+.social-icons a {
+    margin: 0 10px;
+    color: #6b5b95;
+    font-size: 24px;
+}
+
+.contact-right h3 {
+    color: #6b5b95;
+    margin-bottom: 20px;
+}
+
+.input-container {
+    position: relative;
+    margin-bottom: 15px;
+}
+
+.input-container i {
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #6b5b95;
+}
+
+.input-container input, .input-container textarea {
+    width: 100%;
+    padding: 12px 12px 12px 40px;
+    border: 2px solid #ddd;
+    border-radius: 6px;
+    font-size: 16px;
+}
+
+.textarea-container textarea {
+    padding-top: 12px;
+}
+
+.contact-form button {
+    width: 100%;
+    padding: 12px;
+    background-color: #6b5b95;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+}
+
+.contact-form button:hover {
+    background-color: #59497f;
+}
+
+@media (max-width: 768px) {
+    .contact-container {
+        flex-direction: column;
+    }
+
+    .contact-left, .contact-right {
+        padding: 20px;
+    }
+
+    .contact-left img {
+        max-width: 80%;
+        margin: 0 auto 20px;
+    }
+}
diff --git a/community/frontend/contact.html b/community/frontend/contact.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Responsive Contact Form</title>
+    <link rel="stylesheet" href="/community/frontend/contact.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+</head>
+<body>
+    <div class="contact-container">
+        <div class="contact-left">
+            <h2>Let's Get In Touch</h2>
+            <img src="/assets/image/contact form image.svg" alt="Contact Image">
+            <p>Connect with us:</p>
+            <div class="social-icons">
+                <a href="#"><i class="fab fa-facebook"></i></a>
+                <a href="#"><i class="fab fa-twitter"></i></a>
+                <a href="#"><i class="fab fa-youtube"></i></a>
+                <a href="#"><i class="fab fa-linkedin"></i></a>
+            </div>
+        </div>
+        <div class="contact-right">
+            <h3>Contact Us</h3>
+            <form action="#" method="POST" class="contact-form">
+                <div class="input-container">
+                    <i class="fas fa-user"></i>
+                    <input type="text" name="name" placeholder="Name" required>
+                </div>
+                <div class="input-container">
+                    <i class="fas fa-envelope"></i>
+                    <input type="email" name="email" placeholder="Email" required>
+                </div>
+                <div class="input-container">
+                    <i class="fas fa-phone"></i>
+                    <input type="tel" name="phone" placeholder="Phone" required>
+                </div>
+                <div class="input-container textarea-container">
+                    <i class="fas fa-comment"></i>
+                    <textarea name="message" rows="5" placeholder="Message" required></textarea>
+                </div>
+                <button type="submit">Submit</button>
+            </form>
+        </div>
+    </div>
+
+
+
+
+    <script src="/community/frontend/contact.js"></script>
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/community/frontend/contact.js b/community/frontend/contact.js
@@ -0,0 +1,15 @@
+// Optional form validation
+document.querySelector('.contact-form').addEventListener('submit', function(event) {
+    const name = document.querySelector('input[name="name"]').value;
+    const email = document.querySelector('input[name="email"]').value;
+    const phone = document.querySelector('input[name="phone"]').value;
+    const message = document.querySelector('textarea[name="message"]').value;
+
+    if (name === "" || email === "" || phone === "" || message === "") {
+        alert("All fields are required!");
+        event.preventDefault();
+    }
+});
+
+
+
diff --git a/community/frontend/style.css b/community/frontend/style.css
@@ -155,4 +155,5 @@ body {
 
 #toggle-mode-btn svg {
     fill: #fff;
-}
+}
+
diff --git a/css/style.css b/css/style.css
@@ -200,6 +200,34 @@ img.weather-img{
     transform: translateY(-10px); 
 }
 
+/*cotact us button styling*/
+.icon {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 30px;
+}
+
+.icon button{
+    background-color: transparent;
+    padding: 5px;
+    margin: 5px;
+    color: #ffffff;
+    border-radius: 5px;
+    font-size: 15px;
+    font-weight: 500;
+    transition:cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    cursor:pointer;
+}
+
+.icon button:hover{
+    border: 1px solid whitesmoke;
+    color: #f43f5e;
+}
+
+
 @keyframes float {
     0%, 100% {
         transform: translateY(0); 

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./css/style.css" />
+    <link rel="stylesheet" href="/css/style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
@@ -18,6 +18,8 @@
 
 <body>
     <div class="icon">
+        <button onclick="redirectToContact()">Contact Us</button>
+
         <div class="icon2">
             <button id="toggle-mode-btn">
                 <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 20 20" fill="currentColor">
@@ -458,7 +460,7 @@ <h3 class="card-heading">GeoQuest</h3>
     </section>
     <!-- ====================== Scroll to top ======================== -->
     <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
-    <script src="./js/app.js"></script>
+    <script src="/js/app.js"></script>
 </body>
 
 </html>
diff --git a/js/app.js b/js/app.js
@@ -49,3 +49,9 @@ function scrollFunction() {
 scrollToTopBtn.onclick = function() {
     window.scrollTo({ top: 0, behavior: "smooth" });
 };
+
+// function for the contact button to redirect
+function redirectToContact() {
+  window.location.href = '/community/frontend/contact.html';
+}
+
diff --git a/projects/Password Generator/index.html b/projects/Password Generator/index.html
@@ -1,24 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
-    <script src="script.js" defer></script>
+    <link rel="stylesheet" href="/projects/Password Generator/style.css">
+    <script src="/projects/Password Generator/script.js" defer></script>
     <title>Password Generator</title>
 </head>
+
 <body>
-    <main>
-        <h1>Click to generate a random password!</h1>
-        <input type="text" id="password">
-        <input type="range" id="passwordLength" min="1" max="50" value="8" oninput="updateLengthDisplay()">
-        <label for="passwordLength">Password length: <span id="lengthDisplay">8</span></label>
-        <div>
-            <button id="create">Create</button>
-            <button id="copy">Copy</button>
-            <button id="clear">Clear</button>
+    <div class="heading">
+        <p class="tag"><span>SecurePass:</span> The Ultimate Password Generator</p>
+        <h3>Generate strong, random passwords to protect your digital world in just one click</h3>
+    </div>
+
+    <div class="home">
+
+        <main>
+            <h1>Password Generator</h1>
+
+            <div class="password-controls">
+                <label for="password-length">Password Length: </label>
+                <input type="number" id="password-length" min="8" max="" value="12">
+            </div>
+
+            <input type="text" id="password" placeholder="Generated password" readonly>
+
+            <div class="buttons">
+                <button id="create">Generate</button><br>
+                <button id="copy">Copy</button><br>
+                <button id="clear">Clear</button><br>
+            </div>
+        </main>
+
+        <div class="image">
+            <img src="/assets/image/password generator main.svg" alt="Password Generator Image">
         </div>
-    </main>
+    </div>
+
+    <!-- Section: What Makes a Strong Password -->
+    <section class="strong-password-section">
+        <!-- Title -->
+        <h1 class="section-title">What makes a password strong?</h1>
+
+        <!-- Subtext -->
+        <p class="section-subtext">Learn the characteristics of a strong and secure password to protect your online accounts.</p>
+
+        <!-- Flex Container for Boxes -->
+        <div class="box-container">
+            <!-- Box 1: Long -->
+            <div class="box">
+                <div class="icon-container">
+                    <img src="https://img.icons8.com/ios-filled/50/ff6a00/key.png" alt="Long Password Icon">
+                </div>
+                <h3 class="box-title">Long</h3>
+                <p class="box-description">The longer a password, the more secure it is. A strong password should be at least 10 characters long.</p>
+            </div>
+
+            <!-- Box 2: Complex -->
+            <div class="box">
+                <div class="icon-container" id="mid">
+                    <img src="https://img.icons8.com/ios-filled/50/ff6a00/security-configuration.png" alt="Complex Password Icon">
+                </div>
+                <h3 class="box-title">Complex</h3>
+                <p class="box-description">Strong passwords use a combination of letters, numbers, cases, and symbols to form an unpredictable string.</p>
+            </div>
+
+            <!-- Box 3: Unique -->
+            <div class="box">
+                <div class="icon-container">
+                    <img src="https://img.icons8.com/ios-filled/50/ff6a00/fingerprint-scan.png" alt="Unique Password Icon">
+                </div>
+                <h3 class="box-title">Unique</h3>
+                <p class="box-description">A strong password should be unique to each account to reduce vulnerability in the event of a hack.</p>
+            </div>
+        </div>
+    </section>
 </body>
+
 </html>