CommunityOfCoders · pranavk-10 · Mar 16, 2025 · Mar 16, 2025 · Mar 16, 2025 · Mar 16, 2025
diff --git a/Easy/Task - 4 Pranav/index.html b/Easy/Task - 4 Pranav/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PrydeGPT</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="initial">
+    <div id="name">
+        <button id="menu-btn">
+            <img src="menu_9710579.png" alt="menu" height="30px" width="30px">
+        </button>
+        <span>PrydeGPT</span>
+    </div>
+  <div id="container">
+    <h1>What Can I Do For You?</h1>
+    <div class="input-container">
+        <input type="text" placeholder="Enter your thoughts">
+        <button id="send-btn">
+            <!-- Send Icon (SVG) -->
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="black"/>
+            </svg>
+        </button>
+    </div>
+    <div id="logos">
+        <button class="logos"><a href="https://www.midjourney.com/" target="_blank">Create Image</a></button>
+        <button class="logos"><a href="https://www.blackbox.ai/" target="_blank">Code</a></button>
+        <button class="logos"><a href="https://chatgpt.com/" target="_blank">Get Advice</a></button>
+        <button class="logos"><a href="https://quillbot.com/summarize" target="_blank">Summarize Text</a></button>
+        <button class="logos"><a href="https://chatgpt.com/" target="_blank">Brainstorm</a></button>
+        <button class="logos"><a href="https://github.com/pranavk-10/Web-Genesis" target="_blank">More</a></button>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/Easy/Task - 4 Pranav/menu_9710579.png b/Easy/Task - 4 Pranav/menu_9710579.png
diff --git a/Easy/Task - 4 Pranav/styles.css b/Easy/Task - 4 Pranav/styles.css
@@ -0,0 +1,111 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+* {
+    background-color: rgb(203, 238, 235);
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+#initial {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Name and Button */
+#menu-btn {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#name {
+    position: absolute;
+    top: 20px;
+    font-family: Poppins, sans-serif;
+    font-weight: 500;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+/* Centered White Box */
+#container {
+    background-color: transparent;
+    width: 50vw;
+    height: 50vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#container h1{
+    font-family: Poppins;
+
+}
+
+input {
+    margin-top: 6px;
+    width: 500px;
+    padding: 10px;
+    border: 0.5px solid black;
+    border-radius: 70px;
+    font-size: 16px;
+    outline: none;
+}
+
+#send-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+#send-btn svg {
+    fill: black;
+    transition: 0.3s;
+}
+
+#send-btn:hover svg {
+    fill: gray;
+}
+
+.input-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#logos{
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+}
+.logos{
+    display: flex;
+    justify-content: space-between;
+    font-family: Poppins;
+    margin: 7px;
+    padding: 3px;
+    border-radius: 50px;
+    border: 0.5px;
+}
+
+.logos a{
+    text-decoration: none;
+    color: black;
+}
diff --git a/Easy/Task - 5 Pranav/index.html b/Easy/Task - 5 Pranav/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Features Page</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <button id="darkModeToggle">Toggle Dark Mode</button>
+        <h1>Our Features</h1>
+    </header>
+
+    <main class="features-container">
+        <div class="card">
+            <div class="card-inner">
+                <div class="card-front">
+                    <h2>Feature 1</h2>
+                </div>
+                <div class="card-back">
+                    <p>Detail about Feature 1</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-inner">
+                <div class="card-front">
+                    <h2>Feature 2</h2>
+                </div>
+                <div class="card-back">
+                    <p>Detail about Feature 2</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-inner">
+                <div class="card-front">
+                    <h2>Feature 3</h2>
+                </div>
+                <div class="card-back">
+                    <p>Detail about Feature 3</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Easy/Task - 5 Pranav/script.js b/Easy/Task - 5 Pranav/script.js
@@ -0,0 +1,5 @@
+// Dark Mode Toggle
+const darkModeToggle = document.getElementById("darkModeToggle");
+darkModeToggle.addEventListener("click", () => {
+    document.body.classList.toggle("dark-mode");
+});
diff --git a/Easy/Task - 5 Pranav/styles.css b/Easy/Task - 5 Pranav/styles.css
@@ -0,0 +1,82 @@
+
+@import url('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');
+
+/* General Styles */
+body {
+    font-family: Poppins, sans-serif;
+    text-align: center;
+    background-color: #f5f5f5;
+    color: #333;
+    transition: background 0.3s, color 0.3s;
+}
+
+/* Dark Mode */
+.dark-mode {
+    background-color: #222;
+    color: #fff;
+}
+
+/* Header */
+header {
+    margin: 20px;
+}
+
+button {
+    border-radius: 40px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+/* Features Container */
+.features-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 50px;
+}
+
+/* Flip Card Styles */
+.card {
+    width: 200px;
+    height: 250px;
+    perspective: 1000px;
+}
+
+.card-inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.card:hover .card-inner {
+    transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    backface-visibility: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Card Front */
+.card-front {
+    background: #b8b8b9;
+    color: rgb(0, 0, 0);
+}
+
+/* Card Back */
+.card-back {
+    background: #b8b8b9;
+    color: rgb(0, 0, 0);
+    transform: rotateY(180deg);
+}
diff --git a/Easy/Task - 6 Pranav/image.png b/Easy/Task - 6 Pranav/image.png
diff --git a/Easy/Task - 6 Pranav/index.html b/Easy/Task - 6 Pranav/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>To Do List</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="button_div">
+        <div id="menu-container">
+        <button id="click" ><img src="image.png" alt="" height="30px" width="30px"></button><br>
+        <h2 id="menu">Menu: </h2>
+        </div>
+        <input type="search" name="Search" id="search" placeholder="Enter your Thoughts">
+        <div id="div-task">
+            <h3>Tasks</h3>
+            <span class="span"><a href="">Upcoming</span></a><br>
+            <span class="span"><a href="">Today</span></a><br>
+            <span class="span"><a href="">Calender</span></a><br>
+            <span class="span"><a href="">Sticky Walls</span></a><br>
+        </div>
+        <div id="div-list">
+            <h3>Lists</h3>
+            <span class="span"><a href="">Personal</span></a><br>
+            <span class="span"><a href="">Work</span></a><br>
+            <span class="span"><a href="">List 1</span></a><br>
+            <span class="span"><a href="">+ Add Your List</span></a><br>
+        </div>
+        <nav class="nav">
+            <ul><a href="">Settings</a></ul>
+            <ul><a href="">Sign Out</a></ul>
+        </nav>
+    </div>
+    <div id="front">
+        <h1 id="h1">Today</h1>
+        <div id="add">+ Add New Task</div>
+        <div id="task-list">
+            <div class="task">
+                <input type="checkbox" class="task-checkbox">
+                <span class="task-text">Complete the UI/UX assignment</span>
+            </div>
+            <div class="task">
+                <input type="checkbox" class="task-checkbox">
+                <span class="task-text">Water The plants</span>
+            </div>
+            <div class="task">
+                <input type="checkbox" class="task-checkbox">
+                <span class="task-text">Watch Invincible</span>
+            </div>
+            <div class="task">
+                <input type="checkbox" class="task-checkbox">
+                <span class="task-text">Complete Web Genesis Task 6</span>
+            </div>
+        </div>
+        <div class="save-box">
+            <button class="delete-btn">Delete Task</button>
+            <button class="save-btn">Save Changes</button>
+        </div>
+    </div>
+    <div id="div_task">
+        <h2>Task: </h2><br>
+        <div class="create1">Create Today's Youtube Video</div>
+       <input type="text" id="create1" placeholder="Description">
+
+       <div class="task-section">
+        <div class="task-row">
+            <label for="list">List</label>
+            <select id="list" class="dropdown">
+                <option>Personal</option>
+                <option>Work</option>
+            </select>
+        </div>
+
+        <div class="task-row">
+            <label for="due-date">Due date</label>
+            <input type="date" id="due-date" class="date-input">
+        </div>
+
+        <div class="task-row">
+            <label>Tags</label>
+            <span class="tag">Tag 1</span>
+            <button class="add-tag">+ Add Tag</button>
+        </div>
+
+        <h3 class="subtasks-title">Subtasks:</h3>
+
+        <div class="subtask-row">
+            <button class="add-subtask">+ Add New Subtask</button>
+        </div>
+
+        <div class="subtask-item">
+            <input type="checkbox" id="subtask1">
+            <label for="subtask1">Subtask</label>
+        </div>
+    </div>
+ </div>
+</body>
+</html>
diff --git a/Easy/Task - 6 Pranav/script.js b/Easy/Task - 6 Pranav/script.js