Updated feedback form and login issue

Author: Anusha271815

feed-back.css

@@ -27,14 +27,15 @@ body {
 }
 
 .page-container {
-  min-height: 100vh;
+  /* min-height: 100vh; */
+  height:max-content ;
   display: flex;
   flex-direction: column;
 }
 
 /* Header Styles */
 header {
-  background: linear-gradient(135deg, #b5e7b5 0%, #a5d6a7 100%);
+  background: linear-gradient(135deg, #b5e7b5 0%,  #4caf50 100%);
   padding: 20px 0;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   position: relative;
@@ -61,6 +62,8 @@ header::before {
   align-items: center;
   position: relative;
   z-index: 1;
+  /* box-shadow: 0 4px -2px green;  */
+
 }
 
 .logo-section {
@@ -133,16 +136,17 @@ main {
 }
 
 .feedback-container {
-  max-width: 700px;
+  max-width: 800px;
   margin: 0 auto;
-  background: var(--bg-primary, rgba(255, 255, 255, 0.95));
-  border-radius: 20px;
-  padding: 40px;
-  box-shadow: 0 10px 40px var(--shadow-light, rgba(0, 0, 0, 0.1));
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  border-radius: var(--radius-large);
+  padding: 48px;
+  box-shadow: var(--shadow-soft);
+  border: 1px solid var(--glass-border);
   position: relative;
   overflow: hidden;
+  /* border-top:2px solid #388e3c; */
 }
 
 .feedback-container::before {
@@ -151,40 +155,78 @@ main {
   top: 0;
   left: 0;
   right: 0;
-  height: 4px;
-  background: linear-gradient(90deg, #4caf50, #2e7d32, #1b5e20);
-  border-radius: 20px 20px 0 0;
+  height: 6px;
+  background: linear-gradient(90deg, #4caf50, #2e7d32, #1b5e20, #4caf50);
+  background-size: 200% 100%;
+  animation: gradientShift 3s ease-in-out infinite;
 }
 
+ @keyframes gradientShift {
+    0%, 100% { background-position: 0% 0%; }
+    50% { background-position: 100% 0%; }
+  }
 /* Header Section */
 .feedback-header {
   text-align: center;
   margin-bottom: 40px;
 }
 
 .feedback-icon {
-  font-size: 3rem;
-  color: #4caf50;
-  margin-bottom: 20px;
-  animation: pulse 2s infinite;
+  font-size: 4rem;
+  color: var(--accent-green);
+  margin-bottom: 24px;
+  display: inline-block;
+  padding: 20px;
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(46, 125, 50, 0.05));
+  border-radius: 50%;
+  animation: iconPulse 3s ease-in-out infinite;
+  position: relative;
 }
 
+.feedback-icon::after {
+        content: '';
+        position: absolute;
+        top: -10px;
+        left: -10px;
+        right: -10px;
+        bottom: -10px;
+        border: 2px solid var(--accent-green);
+        border-radius: 50%;
+        opacity: 0;
+        animation: ringPulse 3s ease-in-out infinite;
+      }
+
 .feedback-title {
-  color: #1b5e20;
-  font-size: 2rem;
-  margin-bottom: 10px;
-  font-weight: 600;
+  color: var(--dark-green);
+  font-size: 2.4rem;
+  margin-bottom: 12px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  text-shadow: 2px 2px 5px green;
 }
 
 .feedback-subtitle {
-  color: #666;
-  font-size: 1rem;
-  opacity: 0.8;
+  color: var(--text-medium);
+  font-size: 1.1rem;
+  opacity: 0.9;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+ @keyframes iconPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+@keyframes ringPulse {
+  0%, 100% { opacity: 0; transform: scale(0.8); }
+  50% { opacity: 0.3; transform: scale(1.2); }
 }
 
 /* Form Styles */
 .feedback-form {
   animation: slideInUp 0.6s ease-out;
+  margin-top: 10px;
 }
 
 .form-row {
@@ -193,6 +235,7 @@ main {
 
 .form-group {
   position: relative;
+  padding:0 100px;
 }
 
 .form-group label {
@@ -271,7 +314,7 @@ main {
 
 /* Submit Button */
 .submit-button {
-  width: 100%;
+  width: 86%;
   padding: 18px;
   background: linear-gradient(135deg, #4caf50, #2e7d32);
   color: white;
@@ -281,7 +324,8 @@ main {
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  margin-top: 20px;
+  /* margin-top: 20px; */
+  margin:auto;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -629,12 +673,22 @@ main {
 @media (max-width: 768px) {
   .feedback-container {
     margin: 20px 15px;
-    padding: 30px 25px;
+    /* padding: 30px 25px; */
     border-radius: 15px;
   }
 
+  .form-group{
+    margin: 0;
+    padding: 0 20px;
+  }
+/* 
+  .submit-button{
+    margin: auto;
+  } */
+
   .header-content {
     padding: 0 15px;
+
   }
 
   header h1 {

feed-back.html

@@ -12,15 +12,13 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
       rel="stylesheet"
     />
-    <style>
-    </style>
   </head>
   <body>
     <div class="page-container">
       <header>
         <div class="header-content">
           <div class="logo-section">
-            <img src="/AgriTech/images/logo.png" alt="AgriTech logo" class="site-logo">
+            <img src="images/logo.png" alt="AgriTech logo" class="site-logo">
             <h1>AgriTech</h1>
           </div>
           <div style="display: flex; gap: 1rem; align-items: center;">
@@ -32,9 +30,12 @@ <h1>AgriTech</h1>
             <a href="#" class="logout-button" onclick="showLogoutConfirmation()">Logout</a>
           </div>
         </div>
-
+      </header>
+        
+      <main>
         <form id="feedbackForm" class="feedback-form">
           <div class="form-row">
+            <h2 class="feedback-header feedback-title">Share Your Feedback</h2>
             <div class="form-group">
               <label for="name">
                 <i class="fas fa-user input-icon"></i>
@@ -77,6 +78,8 @@ <h1>AgriTech</h1>
             <div class="button-ripple"></div>
           </button>
         </form>
+      </main>
+        
 
         <div id="thankYouMessage" class="hidden thank-you-section">
           <div class="success-animation">
@@ -113,7 +116,7 @@ <h3>All Feedback Submissions</h3>
           </div>
         </div>
       </div>
-    </main>
+
 
     <div class="floating-help">
       <button class="help-button" title="Need help?">

index.html

@@ -144,7 +144,7 @@ <h3 class="serif">AgriTech</h3>
         <h4 class="serif">Quick Links</h4>
         <ul>
           <li><a href="index.html">Home</a></li>
-          <li><a href="main.html">Dashboard</a></li>
+          <li><a href="login.html" title="login first">Dashboard</a></li>
           <li><a href="feed-back.html">Feedback</a></li>
           <li><a href="chat.html">AI Assistant</a></li>
         </ul>

main.css

@@ -379,7 +379,7 @@ footer a:hover {
   color: white;
   background: rgba(255, 255, 255, 0.08);
   transform: translateY(-3px) scale(1.07);
-  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
+  /* box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); */
 }
 
 /* Ripple Animation */

main.html

@@ -393,13 +393,15 @@ <h1>Smart Loan Guide for Farmers</h1>
         <section id="loan-guide" class="loan-guide-section">
           <h2>Smart Loan Eligibility Guide</h2>
           <p>Get step-by-step assistance for applying for agricultural loans.</p>
-          <a href="smart_loan.html" class="btn-green" id="goLoanGuide">Go to Smart Loan Guide</a>
-
-          <label for="languageSelect">Language:</label>
-          <select id="languageSelect" class="language-select">
-            <option value="en">English</option>
-            <option value="hi">हिन्दी</option>
-          </select>
+          <div style="margin-top: 20px;">
+            <a href="smart_loan.html" class="btn-green" id="goLoanGuide" style="margin-right: 20px;">Go to Smart Loan Guide</a>
+            <label for="languageSelect">Language:</label>
+            <select id="languageSelect" class="language-select">
+              <option value="en">English</option>
+              <option value="hi">हिन्दी</option>
+            </select>
+          </div>
+          
         </section>
       </div>