frontend updates

ActualProjectCode/DjangoProject/static/styles.css

-/* Reset some default styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
+/* Global Styles */
 body {
     font-family: Arial, sans-serif;
-    background-color: #f4f7f6;
-    color: #333;
-    padding: 20px;
-}
-
-h1, h2 {
-    color: #2c3e50;
-    margin-bottom: 20px;
-}
-
-/* Navbar Styles */
-nav {
-    background-color: #2c3e50;
-    padding: 10px;
-    margin-bottom: 30px;
-    border-radius: 5px;
-}
-
-nav ul {
-    list-style-type: none;
-    text-align: right;
-}
-
-nav ul li {
-    display: inline;
-    margin-left: 20px;
-}
-
-nav ul li a {
-    color: #ecf0f1;
-    text-decoration: none;
-    font-weight: bold;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
 }
 
-nav ul li a:hover {
-    text-decoration: underline;
+/* Navigation Styles */
+header {
+    background-color: #333;
+    padding: 10px 0;
 }
 
-/* Form Styles */
-form {
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.nav-container {
+    max-width: 1200px;
     margin: 0 auto;
-    max-width: 400px;
-}
-
-input[type="text"], input[type="password"], input[type="email"], select {
-    width: 100%;
-    padding: 12px;
-    margin: 10px 0 20px 0;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    box-sizing: border-box;
-}
-
-button {
-    background-color: #3498db;
-    color: white;
-    border: none;
-    padding: 15px 20px;
-    width: 100%;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-}
-
-button:hover {
-    background-color: #2980b9;
-}
-
-/* Error message */
-.error-message {
-    color: red;
-    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
 }
 
-/* Profile Page Styles */
-.profile-container {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: white;
-    border-radius: 5px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.logo h1 {
+    color: #fff;
+    margin: 0;
+    font-size: 24px;
 }
 
-.profile-header {
+.auth-links {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
 }
 
-.profile-header h1 {
-    font-size: 28px;
+.auth-links a {
+    color: #fff;
+    background-color: #007BFF;
+    padding: 10px 20px;
+    margin-left: 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
 }
 
-.profile-header a {
-    color: #3498db;
-    text-decoration: none;
+.auth-links a:hover {
+    background-color: #0056b3;
 }
 
-.profile-header a:hover {
-    text-decoration: underline;
+/* Main Section (Centered Content) */
+main {
+    text-align: center;
+    padding: 50px 20px;
 }
 
-.profile-info {
-    margin-bottom: 30px;
+.intro h1 {
+    font-size: 36px;
+    color: #333;
 }
 
-.profile-info p {
+.intro p {
     font-size: 18px;
-    margin: 10px 0;
+    color: #666;
 }
 
-button.logout {
-    width: auto;
-    padding: 10px 20px;
-    margin-top: 20px;
-    background-color: #e74c3c;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
+/* Footer Styles */
+footer {
+    text-align: center;
+    padding: 10px 0;
+    background-color: #333;
+    color: #fff;
 }
 
-button.logout:hover {
-    background-color: #c0392b;
-}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nav-container {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 
-/* Dashboard specific */
-.dashboard-section {
-    padding: 20px;
-    background-color: #ecf0f1;
-    border-radius: 5px;
-    margin-bottom: 20px;
-}
+    .logo h1 {
+        margin-bottom: 10px;
+    }
 
-.dashboard-section h2 {
-    font-size: 24px;
-    margin-bottom: 15px;
-}
+    .auth-links {
+        margin-top: 10px;
+        align-self: flex-end;
+    }
 
-.dashboard-section p {
-    font-size: 16px;
-    line-height: 1.5;
-}
+    .auth-links a {
+        margin-left: 0;
+        margin-right: 10px;
+    }
 
-.dashboard-section .button-container {
-    display: flex;
-    justify-content: flex-start;
-    gap: 15px;
-}
+    main {
+        padding: 30px 20px;
+    }
 
-.dashboard-section .button-container button {
-    width: auto;
-    padding: 10px 20px;
-    font-size: 16px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
+    .intro h1 {
+        font-size: 28px;
+    }
 
-.dashboard-section .button-container button:hover {
-    background-color: #2980b9;
+    .intro p {
+        font-size: 16px;
+    }
 }

ActualProjectCode/DjangoProject/templates/index.html

@@ -6,14 +6,30 @@
     <link rel="stylesheet" href="{% static 'styles.css' %}">
 </head>
 <body>
-    <nav>
-        <ul>
-            <li><a href="{% url 'login' %}">Login</a></li>
-            <li><a href="{% url 'register' %}">Register</a></li>
-        </ul>
-    </nav>
-    <h1>Welcome to ShallowSink</h1>
-    <p>Your trusted platform for making better tech decisions.</p>
+    <header>
+        <nav>
+            <div class="nav-container">
+                <div class="logo">
+                    <h1>ShallowSink</h1>
+                </div>
+                <div class="auth-links">
+                    <a href="{% url 'login' %}" class="btn">Login</a>
+                    <a href="{% url 'register' %}" class="btn">Register</a>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="intro">
+            <h1>Welcome to ShallowSink</h1>
+            <p>Your trusted platform for making better tech decisions.</p>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2025 ShallowSink</p>
+    </footer>
     {% block content %}
     {% endblock %}
 </body>