From aa0df037be0ed01b91448edd2b2c20ac1ae048b2 Mon Sep 17 00:00:00 2001
From: Trishant Talluri <trishanttalluri@gmail.com>
Date: Fri, 24 Oct 2025 20:38:27 +0530
Subject: [PATCH] Changed contact details

---
 templates/base.html    |   4 +-
 templates/contact.html |   2 +-
 templates/menu.html    | 224 +++++++++++++++++++++++++++++++----------
 3 files changed, 173 insertions(+), 57 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index a8536f4..9190da2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -127,12 +127,12 @@ <h5 class="text-uppercase mb-2 fw-bold text-white">Location :</h5>
               </div>
               <div class="col-md-4 mt-md-0 mt-4 border-footer">
                   <h5 class="text-uppercase mb-mt-4 mb-2 fw-bold text-white">Contact Us</h5>
-                  <p>Gaurav Rajput (General secrotary mess cafiteria and allied services)</p>
+                  <p>Shubham Kumar (General secrotary mess cafiteria and allied services)</p>
                   <p>
                       <a href="mailto:dining.committee.sg@iiti.ac.in" class="text-white text-decoration-none"><i class="fas fa-envelope mr-3"></i> Mail us at:</a> gs.dining@iiti.ac.in
                   </p>
                   <p>
-                      <i class="fas fa-phone mr-3"></i> +91 8802883976
+                      <i class="fas fa-phone mr-3"></i> +91 8076229689
                   </p>
               </div>
           </div>
diff --git a/templates/contact.html b/templates/contact.html
index 5418921..cb26f45 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -50,7 +50,7 @@ <h6>{{i.occupation}}</h6>
   <span class="contact-heading"><b>Central Dining Committee:</b></span>
   <ul class="px-3 py-2">
 
-<li>Dining Warden - Dr. Pravarthana Dhanpal</li>
+<li>Dining Warden - Dr. Kalandi Charan Pradhan</li>
 
 <li>Associate Dining Warden - Dr. Nisheeth Kumar Prasad</li>
 
diff --git a/templates/menu.html b/templates/menu.html
index f148116..e355967 100644
--- a/templates/menu.html
+++ b/templates/menu.html
@@ -5,62 +5,174 @@
 <link rel="stylesheet" href="{% static 'css/menu.css' %}" />
 <link rel="stylesheet" href="{% static 'css/rules.css' %}" />
 <style>
+    /* ======== BUTTON SECTION ======== */
     .buttons-container {
         display: flex;
         justify-content: center;
-        gap: 20px;
-        margin-bottom: 20px;
+        flex-wrap: wrap;
+        gap: 14px;
+        margin-bottom: 22px;
     }
+
     .filter-btn {
-        padding: 10px 20px;
-        font-size: 1.2rem;
-        font-weight: bold;
+        padding: 8px 18px;
+        font-size: 1rem;
+        font-weight: 600;
         border: none;
         cursor: pointer;
-        border-radius: 5px;
+        border-radius: 8px;
         transition: all 0.3s ease-in-out;
     }
+
     .filter-btn.active {
         background-color: rgb(18, 37, 106);
-        color: white;
+        color: #fff;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     }
+
     .filter-btn.inactive {
         background-color: #e0e0e0;
-        color: black;
+        color: #000;
+    }
+
+    /* ======== MAIN STRUCTURE ======== */
+    main {
+        width: 92%;
+        max-width: 1100px;
+        margin: 0 auto;
+        padding-top: 0.5rem;
+        box-sizing: border-box;
+    }
+
+    h1.text-center {
+        text-align: center;
+        margin: 1.4rem 0 1rem 0;
+        font-size: 1.8rem;
+        font-weight: 700;
+        letter-spacing: 0.3px;
+        word-wrap: break-word;
+    }
+
+    /* ======== CATERER INFO (SINGLE BLOCK) ======== */
+    .caterer-info-block {
+        background: #ffffff;
+        border: 1.5px solid rgb(227, 227, 227);
+        border-radius: 10px;
+        padding: 18px 25px;
+        margin: 16px 0 28px 0;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.04);
+        line-height: 1.6;
+        color: #444;
+        word-wrap: break-word;
     }
+
+    .caterer-info-block h2 {
+        font-size: 1.3rem;
+        margin-top: 0.8rem;
+        margin-bottom: 0.4rem;
+        color: #222;
+        font-weight: 700;
+    }
+
+    .caterer-info-block p {
+        font-size: 1.05rem;
+        margin-bottom: 0.8rem;
+    }
+
+    .caterer-info-block hr {
+        border: none;
+        border-top: 1px solid #ddd;
+        margin: 1rem 0;
+    }
+
+    /* ======== MENU CONTAINER (A4 ratio, responsive) ======== */
     .menu-container {
-    max-width: 80%;
-    height: 80vh;
-    overflow: auto;
-    border: 2px solid #ccc;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-    padding: 1rem;
+        width: 100%;
+        max-width: 900px;
+        aspect-ratio: 1 / 1.414; /* A4 ratio */
+        border: 2px solid #ccc;
+        border-radius: 10px;
+        overflow: hidden;
+        margin: auto;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.05);
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+    }
+
+    .menu-inner-scroll {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        border-radius: inherit;
     }
+
     iframe {
         width: 100%;
         height: 100%;
         border: none;
+        display: block;
     }
-    section {
-        padding: 10px;
-        margin-bottom: 10px;
-        border-radius: 10px;
-        background: #ffffff;
-        border: solid rgb(227, 227, 227);
+
+    /* ======== RESPONSIVE BEHAVIOR ======== */
+    @media (max-width: 1024px) {
+        main {
+            width: 94%;
+        }
+
+        .caterer-info-block {
+            padding: 15px 20px;
+        }
+
+        .filter-btn {
+            font-size: 0.95rem;
+            padding: 7px 16px;
+        }
+
+        .menu-container {
+            max-width: 95%;
+        }
     }
-    .information {
-        font-size: 1.1rem;
-        line-height: 1.6;
-        color: #555;
-        background: #ffffff;
-        padding: 15px;
-        border-radius: 8px;
+
+    @media (max-width: 768px) {
+        h1.text-center {
+            font-size: 1.5rem;
+        }
+
+        .caterer-info-block h2 {
+            font-size: 1.15rem;
+        }
+
+        .caterer-info-block p {
+            font-size: 1rem;
+        }
+
+        .menu-container {
+            aspect-ratio: auto;
+            height: 70vh; /* maintain fixed visual space */
+        }
     }
 
+    @media (max-width: 480px) {
+        .caterer-info-block {
+            padding: 12px 16px;
+        }
+
+        .buttons-container {
+            gap: 10px;
+        }
+
+        .filter-btn {
+            font-size: 0.9rem;
+            padding: 6px 12px;
+            border-radius: 6px;
+        }
+
+        .menu-container {
+            height: 65vh;
+        }
+    }
 </style>
 {% endblock %}
 
@@ -68,31 +180,35 @@
 <main>
   <h1 class="text-center">Caterers Information</h1>
 
-  {% for caterer in caterers %}
-  <section class="container">
-      <h2>{{ caterer.name }} Caterers</h2>
-      <div class="information mx-md-5 mx-3">
+  <div class="caterer-info-block">
+      {% for caterer in caterers %}
+          <h2>{{ caterer.name }} Caterers</h2>
           <p>{{ caterer.upper_description }}</p>
-      </div>
-  </section>
-  {% endfor %}
+          {% if not forloop.last %}
+          <hr>
+          {% endif %}
+      {% endfor %}
+  </div>
 
   <h1 class="text-center">Menu</h1>
-    <div class="buttons-container">
-        {% for menu in menus %}
-            <button class="filter-btn {% if forloop.first %}active{% else %}inactive{% endif %}" 
-                    onclick="showMenu('{{ menu.menu_type }}')" 
-                    id="btn-{{ menu.menu_type }}">
-                {{ menu.menu_type }}
-            </button>
-        {% endfor %}
-    </div>
-    {% for menu in menus %}
-    <div class="menu-container" id="menu-{{ menu.menu_type }}" {% if not forloop.first %}style="display:none;"{% endif %}>
-        <iframe src="{{ menu.sheet_url}}"></iframe>
-    </div>
-    {% endfor %}
-    <br>
+  <div class="buttons-container">
+      {% for menu in menus %}
+          <button class="filter-btn {% if forloop.first %}active{% else %}inactive{% endif %}" 
+                  onclick="showMenu('{{ menu.menu_type }}')" 
+                  id="btn-{{ menu.menu_type }}">
+              {{ menu.menu_type }}
+          </button>
+      {% endfor %}
+  </div>
+
+  {% for menu in menus %}
+  <div class="menu-container" id="menu-{{ menu.menu_type }}" {% if not forloop.first %}style="display:none;"{% endif %}>
+      <div class="menu-inner-scroll">
+          <iframe src="{{ menu.sheet_url }}"></iframe>
+      </div>
+  </div>
+  {% endfor %}
+  <br>
 </main>
 
 <script>
@@ -100,7 +216,7 @@ <h1 class="text-center">Menu</h1>
         document.querySelectorAll('.menu-container').forEach(menu => {
             menu.style.display = 'none';
         });
-        document.getElementById('menu-' + menuType).style.display = 'block';
+        document.getElementById('menu-' + menuType).style.display = 'flex';
         document.querySelectorAll('.filter-btn').forEach(btn => {
             btn.classList.remove('active');
             btn.classList.add('inactive');