ADITYA HANMANT SHINDE(23BCE11653)
Experiment 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRCTC Improved Mockup</title>
<style>
:root{
--brand:#d32f2f;
--muted:#666;
--bg:#f7f8fb;
--card:#fff;
font-family: Arial, sans-serif;
body{ margin:0; background:var(--bg); color:#111; }
header{ background:#fff; padding:14px 18px; display:flex; align-items:center; gap:16px; box-
shadow:0 1px 0 rgba(0,0,0,.04); }
.logo{ font-weight:700; color:var(--brand); font-size:20px; }
.top-actions{ margin-left:auto; display:flex; gap:10px; }
.container{ max-width:900px; margin:20px auto; padding:0 16px; }
.search-card{ background:var(--card); border-radius:12px; padding:18px; box-shadow:0 4px
12px rgba(0,0,0,.06); display:grid; grid-template-columns: 1fr 1fr 200px auto; gap:12px; align-
items:center; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
input, select{ width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }
button{ background:var(--brand); color:#fff; border:none; padding:10px 16px; border-
radius:8px; cursor:pointer; font-weight:bold; }
.results{ margin-top:18px; display:grid; gap:12px; }
.train{ background:var(--card); border-radius:8px; padding:12px; display:flex; justify-
content:space-between; }
.badge{ padding:4px 8px; border-radius:8px; font-weight:600; }
.available{ background:#e8f5e9; color:#2e7d32; }
.wl{ background:#fff3e0; color:#ef6c00; }
@media(max-width:800px){
.search-card{ grid-template-columns: 1fr; }
.top-actions{ display:none; }
</style>
</head>
<body>
<header>
<div class="logo">IRCTC Mockup</div>
<div class="top-actions">
<a href="#">Login</a>
<a href="#">My Bookings</a>
<a href="#">Help</a>
</div>
</header>
<div class="container">
<h2>Book a Train</h2>
<form class="search-card" onsubmit="return false;">
<div class="field">
<label for="from">From</label>
<input id="from" type="text" placeholder="City / Station" required>
</div>
<div class="field">
<label for="to">To</label>
<input id="to" type="text" placeholder="City / Station" required>
</div>
<div class="field">
<label for="date">Date</label>
<input id="date" type="date" required>
</div>
<div>
<button onclick="doSearch()">Search</button>
</div>
</form>
<div id="results" class="results"></div>
</div>
<script>
const TRAINS = [
{ name:'Mail Express', num:'12345', depart:'06:10', arrival:'12:00', status:'AVAILABLE', seats:5 },
{ name:'Coastal Link', num:'23456', depart:'09:00', arrival:'16:45', status:'WL', seats:18 },
{ name:'Rapid City', num:'34567', depart:'18:30', arrival:'22:15', status:'AVAILABLE', seats:2 },
];
function doSearch(){
const res = document.getElementById('results');
res.innerHTML = '';
TRAINS.forEach(t=>{
res.innerHTML += `
<div class="train">
<div>
<strong>${t.name}</strong> (${t.num})<br>
${t.depart} → ${t.arrival}
</div>
<div>
<span class="badge ${t.status==='AVAILABLE' ? 'available':'wl'}">
${t.status==='AVAILABLE' ? 'Available — '+t.seats+' seats' : 'Waitlist'}
</span>
</div>
</div>
`;
});
</script>
</body>
</html>
Experiment 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alphabet Chart</title>
<style>
body{ font-family:Arial, sans-serif; padding:20px; }
.info{ margin-top:20px; padding:10px; border:1px solid #ccc; border-radius:8px; width:250px; }
</style>
</head>
<body>
<h2>English Alphabet Chart</h2>
<img src="alphabet.png" usemap="#abcmap" alt="Alphabet Chart">
<map name="abcmap">
<area shape="rect" coords="0,0,50,50" href="#" alt="A" onclick="showExample('A','Apple')">
<area shape="rect" coords="50,0,100,50" href="#" alt="B" onclick="showExample('B','Ball')">
<area shape="rect" coords="100,0,150,50" href="#" alt="C" onclick="showExample('C','Cat')">
<!-- Continue for all letters with proper coordinates -->
</map>
<div class="info" id="info">
Click a letter to see an example here.
</div>
<script>
function showExample(letter, word){
document.getElementById('info').innerHTML = `<strong>${letter}</strong> — ${word}`;
</script>
</body>
</html>
