LostAndFoundPortal/about.html at main · itsjanajana/LostAndFoundPortal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>About Us - Lost & Found IIITDMK</title>
  <style>
    body {
      margin: 0; font-family: Arial, sans-serif;
      background: #f2f6fc; color: #1a1a1a;
    }
    header, footer {
      background: #1a2d4e; color: white;
      padding: 1rem 2rem;
      display: flex; justify-content: space-between; align-items: center;
    }
    nav a {
      color: white; text-decoration: none;
      margin-left: 20px; font-weight: bold;
    }
    .container {
      max-width: 800px; margin: 40px auto;
      background: white; padding: 30px;
      border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.08);
    }
    h2 { color: #1a2d4e; margin-bottom: 10px; }
    p { line-height: 1.6; }
    label { display: block; margin-top: 20px; font-weight: bold; }
    input, textarea {
      width: 100%; padding: 10px; margin-top: 6px;
      border: 1px solid #ccc; border-radius: 5px;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px; border: none;
      border-radius: 5px; background: #1a2d4e; color: white;
      cursor: pointer; font-size: 1rem;
    }
    .success-msg {
      margin-top: 20px; color: green;
      text-align: center; font-weight: bold; display: none;
    }
    footer {
      font-size: 14px;
      display: flex; justify-content: space-between;
      padding: 1rem 2rem;
    }
  </style>
</head>
<body>

  <header>
    <div><strong>Lost & Found IIITDMK</strong></div>
    <nav>
      <a href="index.html">Home</a>
      <a href="report-found.html">Report Found</a>
      <a href="report-lost.html">Report Lost</a>
      <a href="view-items.html">View Items</a>
      <a href="how-we-work.html">How We Work</a>
      <a href="about.html">About Us</a>
    </nav>
  </header>

  <div class="container">
    <h2>About Us</h2>
    <p>
      This platform helps students and staff of IIITDM Kancheepuram report and retrieve lost or found items efficiently and transparently. Our aim is to connect the right items back to their rightful owners with minimum hassle.
    </p>
    <p>
      The system is managed by the Student Affairs Office and supported by campus volunteers. Found items are physically stored in the Lost & Found Room, Admin Block Ground Floor.
    </p>

    <h2>Contact Us</h2>
    <p>Email: <a href="mailto:lostfound@iiitdm.ac.in">lostfound@iiitdm.ac.in</a></p>
    <p>Phone: +91-XXXXXXXXXX</p>
    <p>Office Hours: Mon–Fri, 10am to 5pm</p>

    <form id="contactForm">
      <label>Your Name *</label>
      <input type="text" placeholder="Full name" required>

      <label>Your Email *</label>
      <input type="email" placeholder="Email address" required>

      <label>Your Message *</label>
      <textarea placeholder="Write your message here..." rows="5" required></textarea>

      <button type="submit">Send Message</button>
    </form>
    <div class="success-msg" id="contactSuccess">Message sent successfully. We'll get back to you shortly!</div>
  </div>

  <footer>
    <div>© 2025 Lost & Found IIITDM Kancheepuram</div>
    <div>
      <a href="how-we-work.html">Privacy</a> |
      <a href="about.html">About Us</a>
    </div>
  </footer>

  <script>
    const form = document.getElementById('contactForm');
    const msg = document.getElementById('contactSuccess');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      msg.style.display = 'block';
      setTimeout(() => {
        msg.style.display = 'none';
      }, 4000);
      form.reset();
    });
  </script>

</body>
</html>