Project Report Format (Osmania university).pdf

1
Your Odyssey To Numaish - Simplified
OSMANIA UNIVERSITY
SUBMITTED IN PARTIAL FULFILMENT OF THE REQUIREMENTS
FOR THE AWARD OF THE DEGREE OF BACHELOR OF SCIENCE
SUBMITTED BY - A.V. CHANDANA
DEPARTMENT OF COMPUTER SCIENCE
VILLA MARIE DEGREE COLLEGE FOR WOMEN
(Affiliated to Osmania University) Somajiguda,
Hyderabad - 500082
2022-2025

2
Acknowledgement
We would like to place on record our deep sense of gratitude to Mrs. S. Gayathri, HOD
Department of Computer Science, Villa Marie Degree College for Women, Hyderabad, for
her stimulating guidance, continuous encouragement and supervision through the course of
the present work.
We also wish to extend our thanks to the Department Lecturers and other colleagues for
attending our seminars and for the insightful comments and constructive suggestions to
improve the quality of this project work.
We are extremely thankful to Mrs. Revathi Devi Mathur, Principal of Villa Marie Degree
College for Women, Hyderabad, for providing us her valuable suggestions.
We are extremely thankful to Ms. Chinnamma, Secretary of Villa Marie Degree College
for Women and Dr. Philomena, Founder and Director of Villa Marie Degree College for
Women, Hyderabad, for providing us infrastructural facilities to work in, without which this
work would not have been possible.
Signature of the Student
A.V. Chandana
(123822467001)

3
Declaration
We hereby declare that this project report entitled “Your Odyssey To Numaish -
Simplified” submitted by us to the Department of Computer Science, Osmania University,
Hyderabad, is a bonafide work undertaken by us and it is not submitted to any other
universityor institution for the award of any degree/diploma/certificate or published any
time before.
Signature of the Students
A.V. Chandana
(123822467001)

4
Table of Contents
S.NO. Content Page Number
1. Abstract 05-06
2. System Analysis 07
2.1 Study of Existing System 08-09
2.2 Literature Survey 09-16
2.3 Problem Definition 16-17
2.4 Proposed System 17-18
2.5 Objective 18
3. Requirement Specifications 19-21
4. Design 22-23
5. Coding 24-53
6. Partial Implementation 54-57
7. Conclusion 59-59
8. Bibliography 60-61

6
Numaish (Numaish Masnuat-e-Mulki), also known as All India Industrial Exhibition (AIIE),
is a prominent annual event held in Hyderabad India. attracting millions of visitors from across
the country Numaish, the renowned annual industrial exhibition is a bustling hub of trade,
culture, and entertainment. However, the large-scale event often presents several challenges
for the public. To provide a better and more enjoyable experience for visitors at Numaish, we
are introducing a comprehensive navigation system featuring thematic zones. This initiative is
designed to simplify the visitor journey and help them explore the vast exhibition effortlessly.
Each zone is categorized by themes such as handicrafts, textiles, electronics, food courts, and
entertainment, ensuring a seamless and structured experience. Clear signage, digital maps, and
on-ground assistance will guide attendees to their areas of interest. By reducing confusion and
overcrowding, this system promotes a smoother flow of visitors. Our goal is to create an
organized, immersive, and delightful experience that allows visitors to fully enjoy everything
Numaish has to offer.

8
Study of Existing System
History and Overview of Numaish
The Numaish exhibition, officially known as the “All India Industrial Exhibition (AIIE),” holds
an extraordinary legacy, having been an iconic part of Hyderabad for 85 years. Founded in
1938 at Public Gardens, the exhibition was created to promote small-scale industries and
showcase the talents of local artisans. In 1946, it moved to its current location in Nampally,
where it has remained a vibrant, much-anticipated event ever since. Over these decades,
Numaish has grown into more than just an exhibition; it’s become a hallmark of Hyderabad’s
cultural scene, attracting millions of visitors from across India.
Numaish has celebrated some remarkable milestones in its long history. It marked its Silver
Jubilee in 1965, its Golden Jubilee in 1987, its Diamond Jubilee in 2000, and most recently, its
Platinum Jubilee in 2015. This exhibition is organized by the All India Industrial Exhibition
Society, a non-profit entity. The revenue generated from the event plays a significant role in
supporting 20 educational institutions in underprivileged areas of Telangana, directly
benefiting over 30,000 students annually. This initiative has helped improve the lives of many
children, offering them access to quality education while making Numaish an event with a
social impact beyond just commerce and entertainment.
Every year, the exhibition spans a massive 23-acre area, roughly 93,000 square meters, and
lasts for 46 days, usually kicking off on January 1. It’s an event that brings people together
from different walks of life, offering a little something for everyone. With over 2,300 stalls,
Numaish showcases an extensive variety of products, ranging from traditional handicrafts and
textiles to jewellery, electronics, household items, and an array of delicious culinary delights
from across the country. The stalls are carefully arranged, with clear signage to ensure a hassle-
free experience for the thousands of visitors who attend each year.
However, Numaish isn’t just about shopping. It’s a complete cultural experience, filled with
vibrant entertainment options. The exhibition hosts live music performances, dance shows, and
various competitions that captivate audiences of all ages. Visitors can also participate in fun
and creative contests such as Watercolour painting, Rangoli making, flower arrangement,
Mehendi design, and cookery contests. These competitions are designed to encourage
involvement from everyone, making the event not just a spectator experience, but an interactive
one. Additionally, Numaish organizes special themed days, such as Lady’s Day on January 6
and Special Children’s Day on January 31, making the exhibition even more inclusive. Cultural
programs held on key dates like Sankranti (January 15) and Republic Day (January 26) ensure
that the festive atmosphere is maintained throughout the event.
The organizers of Numaish also prioritize the safety and convenience of its visitors. The venue
is equipped with 100 CCTV cameras, ensuring security across the entire site. On-site medical
services are provided by Yashoda Hospitals, ensuring visitors have immediate access to
healthcare if needed. Free parking facilities and drinking water stations are available, allowing
attendees to enjoy their time at the exhibition without worrying about basic needs. To make the

9
shopping experience even more seamless, ATMs are also set up on-site, allowing visitors to
easily withdraw cash as they explore the myriad of stalls.
Existing Navigation and Security Aid
Given the large scale of Numaish, visitors are supported with various navigation aids:
✓ Signage is provided to indicate the nearest entry gates for easy access.
✓ Digital displays, similar to Time Square-style screens, showcase essential information
such as do's and don'ts, visitor guidelines, contact details for reporting missing children,
and advertisements for various stalls.
✓ Security is ensured through the deployment of 100 CCTV cameras across the exhibition
premises.
✓ Printed event schedules are strategically placed at prominent stalls to inform visitors
about event timings and activities.
✓ Announcements are made periodically to inform visitors about important updates,
safety measures, and ongoing activities.
✓ A dedicated mobile application named Numaish (powered by Market Central- an online
platform for businesses to showcase products and engage customers) provides an
interactive map, event schedules, and live updates for easy navigation.
✓ A newly introduced double-decker bus, alongside the well-known mini train, offers
visitors a comprehensive tour of the location.
✓ Information kiosks placed at key locations to assist visitors with queries and provide
directions.
Literature Survey
Your Odyssey to Numaish, Simplified.
Numaish, the annual exhibition in Hyderabad, stands as one of the city’s most iconic cultural
and commercial events, drawing millions of visitors each year. Renowned for its vibrant stalls,
diverse food offerings, and captivating amusement rides, it represents a microcosm of
Hyderabad’s rich heritage. However, despite its popularity, visitors face recurring challenges,
particularly in navigation, overcrowding, and accessibility. This project aims to map the
exhibition layout and address these challenges by understanding visitor behaviours,
preferences, and pain points through a structured survey.
Response and Visualization Summary:
- No. of responses obtained: 119
- Types of questions asked: Multiple-select questions
- Types of charts used to display the results:
• Line chart

10
• 3D Doughnut chart
• Stacked bar chart
• Smooth line chart
• Column chart
• Scatter chart
• 3D Pie slice chart
Here are some of the questions that have been asked in the survey:
1. How often do you visit Numaish, Hyderabad?
a) Every year
b) Once in few years
c) Rarely
d) I have never visited
Results and Interpretation:
The chart shows that “Every year” is the most common response, with 47 individuals visiting
annually, followed by the response “I have never visited” with 27 responses and “Rarely” with
23.“Once in few years” has received the least number of responses from the main options i.e.
15. Majority of combined options e.g: "Once in a few years & Rarely" etc contribute minimally
with 1 and 2 responses each. The large number of annual visitors indicates the event's recurring
popularity, highlighting the need for a schematic map to ensure seamless navigation and
enhance the experience for both frequent and occasional attendees.
Graph Used: Line chart to depict the frequency of visits.
2. What time of the day do you prefer to visit Numaish?
a) Morning
b) Noon
c) Evening
d) It doesn’t matter

11
The chart shows “Evening” as the most preferred time to visit Numaish, followed by
“Morning”, which has a higher preference than both “Noon” and “It doesn’t matter”. Combined
options such as “Noon & Evening”, “Morning & It doesn’t matter”, “Noon & It doesn’t
matter”, and “Morning, Noon, Evening, & It doesn’t matter” represent smaller segments,
indicating varied but less significant preferences. Considering the strong preference for the
evening, a schematic map tailored for peak hours would enhance visitor experience.
Graph Used: Doughnut chart showing time preferences.
3. What is/are your primary purpose(s) for visiting Numaish?
a) Shopping from stalls
b) Enjoying amusement rides
c) Exploring food and beverages
d) Visiting art and craft galleries

12
The survey shows shopping from stalls as the main purpose (30 responses), followed by
amusement rides (15) and food exploration (10). Art and craft galleries received minimal
interest (4). Combined purposes like shopping, food, and rides (12) stood out, while others had
insignificant interest (2-3). A schematic map can enhance navigation, especially for the
majority focused on shopping.
Graph Used: Line Chart to represent the popularity of various activities.
4. How easy is it to find your way around Numaish?
a) Very easy
b) Easy
c) Difficult
d) Very difficult
The survey reveals that 33 respondents found it difficult to navigate Numaish, while 55 found
it easy. Only 18 described it as very easy, and 7 labelled it very difficult. Combined responses
like “difficult & very difficult” had 2 respondents, while “easy & difficult” had 3. A small
group (1 respondent) chose all options. These results indicate that a notable number face
challenges in navigation, emphasizing the need for a schematic map to enhance the visitor
experience.
Graph Used: Stacked bar chart showing ease of navigation.
5. How do you usually locate the stalls at Numaish?
a) Asking other visitors
b) Asking staff or organizers
c) Trial and error (wandering around)
d) Other

13
The survey shows that most respondents (50) locate stalls at Numaish through trial and error,
highlighting navigation inefficiency. “Other” (22) is the second most common method,
followed by asking staff or organizers (18) and asking other visitors (7). Combined responses
include “asking other visitors with trial and error” (2), “asking other visitors with Other” (2),
“asking staff or organizers with trial and error” (1), “asking staff or organizers with Other” (1),
and a mix of all methods (1). This highlights the need for a schematic map to streamline
navigation.
Graph Used: Smooth line chart to categorize navigation methods.
6. What is/are the biggest challenge(s) faced by you while navigating the stalls?
a) Lack of clear signage or maps
b) Overcrowding
c) Confusing layout of the stalls
d) Other
The chart indicates that overcrowding is the biggest challenge, with 47 responses, followed by
lack of clear signage or maps with 19 responses, and “Other” with 12 responses. “Confusing
layout of the stalls” received the least number of responses (6). Combined issues also contribute
significantly, for e.g: lack of clear signage or maps + overcrowding received 11 responses, and
all three challenges together received 5 responses. Additionally, overcrowding + confusing

14
layout of stalls garnered 9 responses. This highlights overcrowding as the primary concern,
followed by signage and navigation issues.
Graph Used: Column chart highlighting the challenges.
7. Do you feel there are enough direction boards or maps within the exhibition area?
a) Yes
b) No
c) Not sure
The chart reveals that the majority of respondents (39) are unsure whether there are enough
direction boards or maps, followed by 36 who believe the boards are sufficient and 35 who
think there are none. The combined responses for "No" and "Not sure" total 6, along with
minimal responses for all three options combined, totaling 3. The substantial number of
negative and uncertain responses underscores the need for better navigation aids within the
exhibition area.
Graph Used: Scatter chart depicting responses.
8. Have you ever struggled to find your way out of the exhibition?
a) Often
b) Sometimes
c) Rarely
d) Never

15
Results Interpretation:
The chart reveals that the majority of respondents "Sometimes" (50) or "Often" (28) struggle
to navigate exhibitions, while fewer chose "Rarely" (22) or "Never" (14). Additionally, there
are combined responses such as "Often, Sometimes, Rarely, Never" (2) and a few others (3 in
total), indicating occasional confusion among visitors. These results suggest that a significant
number of visitors face challenges in finding their way, underlining the need for a clear and
well-designed schematic map to improve navigation and enhance the overall experience.
Graph Used: Column chart to show the frequency of navigation issues.
9. Do you think a schematic map (for e.g: Hyderabad Metro Map) of the Numaish
would improve Navigation?
a) Yes
b) No
c) Not sure

16
Note: Number of responses below five are deemed insignificant
The chart shows that “Yes” is the majority response, accounting for approximately two-thirds
of the total. “Not sure” follows as a significant minority, while “No” is the least selected option.
Combined responses, such as "Yes, Not sure" and "Yes, No," contribute minimally. These
results highlight strong support for implementing a schematic map to improve navigation.
Graph Used: Pie slice chart representing positive responses.
Problem Definition
Navigating the stalls within Numaish can be a thrilling experience, but it can also present its
fair share of challenges, especially for those visiting for the first time or those unfamiliar with
large-scale exhibitions. While the event offers an impressive range of products and
entertainment, the sheer size of Numaish with over 2,300 stalls can be overwhelming for many
attendees.
Below are some common difficulties visitors face while navigating the exhibition:
Inadequate directional markers hindering smooth navigation:
While some areas of Numaish have clear signage, others lack adequate directional markers,
making navigation challenging. First-time visitors may struggle to locate stalls, especially in
densely packed sections, resulting in difficulty and delays.
Priority disruption due to lack of stall categorization:
Visitors often come to Numaish with a clear intention to purchase specific items or explore
particular categories of stalls. However, the lack of clear information regarding the location of
these categories creates a dilemma for many. For instance, someone looking to buy jewellery
may only come across a few jewellery stalls after wandering through various sections and
asking vendors. This results in wasted time and energy, as the vast area of the exhibition makes
it difficult to locate specific products. Visitors who are on a mission to find something specific
may feel as if they're lost in a jumble of unrelated stalls.
Lack of Seating and Rest Areas:
Walking through Numaish for hours can be physically demanding, particularly in the crowded
sections. Although there are a few seating options scattered around, they can be difficult to find
and are often limited in number. Many visitors end up walking long distances without any place
to rest, which can quickly lead to fatigue. This is especially tough for families with young
children or elderly visitors who might need to take breaks more frequently. The absence of
adequate rest areas can make the experience less enjoyable, causing some attendees to cut their
visit short or miss out on fully exploring everything the exhibition has to offer.
Despite these challenges, Numaish continues to be an event that people look forward to every
year. With its vast array of products, vibrant atmosphere, and unique cultural offerings, it’s

17
well worth the visit. However, better signage, more organized layouts, and additional seating
could help alleviate some of these difficulties, ensuring a smoother and more enjoyable
experience for all visitors.
Proposed system
Proposed Information System for Numaish
To enhance the visitor experience and streamline navigation at Numaish, the following
system is proposed:
1) Interactive Schematic Map
A detailed, interactive map will be created to assist visitors in navigating the exhibition.
It will include:
a. Entry and exit gates, including emergency exits.
b. The locations of parking facilities in the vicinity of the exhibition, Ticket counters,
toilets, food courts, and key structures like the Exhibition Society, fire stations, electric
stations, assembly points, etc.
c. Designated areas for specific stall categories (e.g., clothing stalls, jewellery shops,
Centenary hall).
d. Location of Amusement ride area.
2) Visitor Guidelines and Timings
A section will display Numaish's official timings, along with comprehensive visitor
guidelines, do’s and don’ts, to ensure a smooth and safe experience.
3) Institutional and Facility Locations
Information on educational institutions, banks, and religious structures within Numaish
will be provided for easy access.
4) Transport and Traffic Information
Details on the nearest metro stations, optimal transportation options, and peak traffic
timings will assist visitors in planning their commute effectively.
5) Acknowledgement to the Hon. Secretary
Finally, a dedicated page will express gratitude to Mr. Surender Reddy, the Hon.
Secretary of the Exhibition Society along with the staff members, for his valuable
cooperation and support in carrying out this project.

18
This system will offer an efficient and informative guide for all visitors, enhancing their overall
experience at Numaish.
Objective
➢ Provide a detailed schematic map to help annual visitors navigate Numaish more easily by
reducing reliance on trial-and-error (wandering), clearly highlighting stall locations, exits,
and key areas, as shopping is the primary purpose for most visitors.
➢ Address the high turnout during peak evening hours by offering clear navigation to ease
overcrowding and direct foot traffic efficiently, ensuring a smoother flow within the
exhibition.
➢ Enhance existing directional signage with a structured and accessible mapping solution to
improve movement, reduce time spent searching for stalls or exits, and make navigation
more convenient for first-time visitors.
➢ Improve the overall visitor experience and satisfaction by streamlining navigation,
reducing confusion, and making it easier for attendees to locate desired stalls, key areas,
and exits.

20
Requirement Specifications :
System Specifications :-
Hardware Environment - The development of this project was carried out on a system
with the following hardware specifications:
• Device Type: Laptop
• Device Name: DESKTOP-UVT7GQE
• Processor: Intel(R) Core(TM) i3-7020U CPU @ 2.30GHz
• Installed RAM: 4.00 GB
• System Type: 64-bit operating system, x64-based processor
• Pen and Touch Input: Not available
Software Environment - The software tools and platforms used for the implementation
of this project are:
• Operating System: Windows 10 Pro (Version 22H2, OS Build 19045.5487)
• Development Environment: Visual Studio Code (VS Code)
• Programming Languages: [HTML, JavaScript, CSS]
Visual Studio Code
Visual Studio Code (VS Code) is a free, open-source, and lightweight source code editor
developed by Microsoft, designed for Windows, macOS, and Linux. It is widely used for
software development due to its advanced features, including IntelliSense for smart code
completion, built-in debugging for multiple languages, an integrated terminal, and
seamless Git integration for version control. VS Code supports an extensive range of
programming languages such as JavaScript, Python, Java, C++, TypeScript, and more, with
additional functionality available through its rich Extensions Marketplace. The Live Server
extension is particularly valuable for web development, as it enables real-time preview by
automatically reloading the browser whenever changes are made to HTML, CSS, or JavaScript
files. This feature eliminates the need for manual refreshing, significantly improving workflow
efficiency. Additionally, VS Code offers Live Share, allowing developers to collaborate
remotely on the same project in real time. With features like customizable themes, code
snippets, and cloud-based integration, it provides a highly flexible and efficient development
environment.
Key Features of VS code:
i. Live Server Extension: Enables real-time preview of your web pages by automatically
refreshing the browser whenever changes are made to HTML, CSS, or JavaScript,
eliminating the need for manual reloading.

21
ii. Emmet Abbreviations: Speeds up HTML and CSS coding by allowing shorthand
syntax expansion, reducing repetitive typing and improving efficiency (e.g., typing
div.container expands to <div class="container"></div> instantly).
iii. CSS IntelliSense & Autocomplete: Provides real-time suggestions for CSS
properties, selectors, and values, making it easier to style elements without
remembering exact syntax.
iv. JavaScript Debugging: Includes a built-in debugger that allows setting breakpoints,
inspecting variables, and debugging directly within VS Code, improving the
development and troubleshooting process.
v. Prettier & ESLint Extensions: Helps maintain clean and error-free code by
automatically formatting HTML, CSS, and JavaScript and enforcing best coding
practices through linting.

23
Book
Buy Tickets
Directions
Dry Fruits
Crockery
Shopping
Schematic
Map
Clothing &
Fashion
Home
Timings
CTA Buttons
Navigation
Panel
Transport
Visitor
guidelines
Gallery
Home Page
About us

25
Home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Numaish Exhibition</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css">
<style>
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Body */
body {
padding-top: 20px;
padding-bottom: 40px;
text-align: center;
background-color: black;
position: relative;
overflow: hidden;
}
/* Video Background */
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
object-fit: cover;
filter: blur(3px);
z-index: -1;
}
/* Hero Section */
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
padding: 20px;
width: 100%;
}
/* Main Title */
.hero h1 {
font-size: 3.5rem;
margin-bottom: 10px;
margin-top: 10px;
}
/* Styled Subheadings */
.hero h3, .hero h4 {
font-style: italic;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida
Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 300;
width: 100%;
margin: 10px 0;
white-space: normal; /* ⬛
✓ Ensures proper wrapping */
overflow: visible; /* ⬛
✓ Prevents text from being cut off */
display: block !important; /* ✓
⬛ Forces visibility */
opacity: 1 !important; /* ⬛
✓ Ensures visibility */
}

26
/* Align h3 to left on larger screens */
.hero h3 {
text-align: center;
font-size: 1.5rem;
}
/* Align h4 to right on larger screens */
.hero h4 {
text-align: center;
font-size: 1.4rem;
}
/* Hero Buttons */
.hero-buttons {
display: flex;
gap: 25px;
max-width: 600px;
width: 100%;
margin-top: 50px;
flex-wrap: wrap;
}
.hero-buttons a {
width: 150px;
height: 120px;
display: flex;
flex-direction: column;
text-decoration: none;
color: white;
background: #9564d6c8;
border-radius: 12px;
font-size: 16px;
transition: 0.3s;
padding: 10px;
}
.hero-buttons a img {
width: 50px;
height: 50px;
margin-bottom: 8px;
}
.hero-buttons a:hover {
background: #5da2eb;
}
/* ◆ RESPONSIVE DESIGN */
@media (max-width: 1024px) { /* iPad Mini & Tablets */
.hero h1 {
font-size: 2.8rem;
margin-top: 50px;
}
text-align: center;
font-size: 1.5rem;
display: block;
white-space: normal;
}
.hero-buttons {
max-width: 400px;
margin-top: 80px;
}
}
@media (max-width: 768px) { /* Small Tablets & Large Phones
*/
.hero h1 {
font-size: 2.5rem;
margin-top: 40px;
}

27
font-size: 1.5rem;
text-align: center;
padding-top: 30px;
}
.hero-buttons {
max-width: 300px;
margin-top: 40px;
}
.hero-buttons a {
width: 100px;
height: 100px;
font-size: 14px;
}
width: 35px;
height: 35px;
}
}
@media (max-width: 468px) { /* Small Phones */
.hero{
margin-top: 70px;
}
.hero h1 {
font-size: 2rem;
}
.hero h3 {
font-size: 1.4rem;
text-align: left ;
display: block;
}
.hero h4{
font-size: 1.4rem;
text-align: right ;
display: block;
}
.hero-buttons {
max-width: 250px;
}
.hero-buttons a {
width: 90px;
height: 90px;
font-size: 13px;
padding: 8px;
}
width: 30px;
height: 30px;
}
}
/* Bottom Navbar */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #000f4be8;
display: flex;
justify-content: space-around;
padding: 12px 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}
.nav-item {
color: white;
text-align: center;
flex: 1;
padding: 12px;

28
font-size: 16px;
transition: background 0.3s ease;
}
.nav-item i {
display: block;
font-size: 19px;
margin-bottom: 6px;
}
.nav-item:hover {
background: #6281b6;
}
/* More Responsive Design */
@media (max-width: 468px) {
.hero {
height: 50vh;
}
.hero h1 {
font-size: 22px;
}
.hero-buttons {
max-width: 250px;
}
.hero-buttons a {
width: 90px;
height: 90px;
font-size: 13px;
padding: 8px;
}
width: 30px;
height: 30px;
}
.nav-item {
font-size: 13px;
padding: 8px;
}
.nav-item i {
font-size: 14px;
}
}
</style>
</head>
<body>

<video autoplay muted loop>
<source src="HERO.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<div class="hero">
<h3>Your Odyssey to</h3>
<h1>N U M A I S H</h1>
<h4>~simplified</h4>
<div class="hero-buttons">
<a href="time.html" id="timings-btn">
<img src="../MAP/icons/10.png" alt="Timings">
Timings
</a>
<a href="shopping.html">
<img src="../MAP/icons/3.png" alt="Shops">
Shopping
</a>
<a href="guide.html" id="guidelines-btn">
<img src="../MAP/icons/12.png" alt="Guidelines">
Visitor Guidelines
</a>
<a href="tport.html" id="transport-btn">
<img src="../MAP/icons/11.png" alt="Transport">
Transport
</a>
<a href="#" onclick="openMaps()" id="directions-btn">
<img src="../MAP/icons/1.png" alt="Location">

29
Directions
</a>
<a
href="https://www.sriqr.com/#/ticketbooking/676e911f589fc600
606a9f4a/hyderabad%20industrial%20exhibition%202025">
<img src="../MAP/icons/2.png" alt="Tickets">
Buy Tickets
</a>
</div>
</div>

<div class="bottom-nav">
<a href="Home.html" class="nav-item">
<i class="fas fa-home"></i>
Home
</a>
<a href="map.html" class="nav-item">
<i class="fas fa-map"></i>
Schematic Map
</a>
<a href="gallery.html" class="nav-item">
<i class="fas fa-images"></i>
Gallery
</a>
<a href="about.html" class="nav-item">
<i class="fas fa-info-circle"></i>
About Us
</a>
</div>
<script>
function openMaps() {
var destination =
"Exhibition+Grounds,+Exhibition+ground,+Patel+Nagar,+Ghos
ha+Mahal+North,+Nampally,+Hyderabad,+Telangana+500001"
;
var startPoint = "Your+Current+Location";
var googleMapsUrl =
"https://www.google.com/maps/dir/?api=1&origin=" +
encodeURIComponent(startPoint) + "&destination=" +
encodeURIComponent(destination) + "&travelmode=driving";
window.open(googleMapsUrl, "_blank");
}
if (navigator.platform.indexOf("iPhone") !== -1 ||
navigator.platform.indexOf("iPad") !== -1) {
window.location.href = appleMapsUrl;
} else {
window.location.href = googleMapsUrl;
}
</script>
</body>
</html>
Timings page
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Exhibition Timings</title>
<style>
body {
background-color: #001849;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;

30
margin: auto;
background: rgb(215, 229, 244);
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-size: 22px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease, transform 0.2s ease;
z-index: 1000;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: #f8f9fa;
overflow: hidden;
}
th, td {
padding: 12px;
border: 1px solid #cdcbd4;
text-align: center;
}
th {
background: #e9e9e9;
font-weight: bold;
}
h1, h2 {
color: #333;
}
/* Go Back Button */
.go-back {
position: fixed;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.8);
color: #00429f;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
}
.go-back:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
}
.go-back {
width: 35px;
height: 35px;
font-size: 18px;
}
}
/* Bottom Navbar */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
padding: 12px 0;
}
.nav-item {
color: white;
text-align: center;
flex: 1;
padding: 12px;

31
font-size: 16px;
}
}
.nav-item i {
font-size: 14px;
}
}
.nav-item i {
display: block;
font-size: 19px;
margin-bottom: 6px;
}
.nav-item:hover {
}
.hero {
height: 50vh;
}
.hero h1 {
font-size: 22px;
}
.hero-buttons {
max-width: 250px;
}
.hero-buttons a {
width: 90px;
height: 90px;
font-size: 13px;
padding: 8px;
}
width: 30px;
height: 30px;
}
.nav-item {
font-size: 13px;
padding: 8px;
</style>
</head>
<body>
<a href="home.html" class="go-back">←</a>
<div class="container">
<h1>Numaish Exhibition Timings</h1>
<table>
<thead>
<tr>
<th>Day</th>
<th>Timings</th>
</tr>
</thead>
<tbody>
<tr><td>Monday</td><td>4:00 pm – 10:30
pm</td></tr>
<tr><td>Tuesday</td><td>4:00 pm – 10:30
pm</td></tr>
<tr><td>Wednesday</td><td>4:00 pm – 10:30
pm</td></tr>
<tr><td>Thursday</td><td>4:00 pm – 10:30
pm</td></tr>
<tr><td>Friday</td><td>4:00 pm – 10:30
pm</td></tr>
<tr><td>Saturday</td><td>4:00 pm – 11:00
pm</td></tr>
<tr><td>Sunday</td><td>4:00 pm – 11:00
pm</td></tr>
</tbody>
</table>
<h2>Entry Fee & Parking Details</h2>
<table>
<thead>
<tr><th>Category</th><th>Fee</th></tr>
</thead>
<tbody>

32
<tr><td>Adult</td><td>Rs. 40/-</td></tr>
<tr><td>Child (below 5 yrs)</td><td>No Entry
Fee</td></tr>
<tr><td>Senior Citizens</td><td>No Entry
Fee</td></tr>
<tr><td>Differently-abled Persons</td><td>No Entry
Fee</td></tr>
</tbody>
</table>
<h2>Car Parking Fee</h2>
<table>
<thead>
<tr><th>Location</th><th>Four
Wheeler</th><th>Two Wheeler</th></tr>
</thead>
<tbody>
<tr><td>Inside Exhibition
Grounds</td><td>Free</td><td>Free</td></tr>
<tr><td>Other Places</td><td>Rs. 50/-</td><td>Rs.
20/-</td></tr>
</tbody>
</table>
</div>
<!—Bottom Navbar -->
Home
</a>
Schematic Map
</a>
Gallery
</a>
About Us
</a>
</div>
</body>
</html>
Shopping Page
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1.0">
<title>Shopping</title>

<style>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
padding: 20px;
color: aliceblue;
}
h1 {

33
margin-top: 80px;
font-size: 36px;
color: #f3f4f9;
width: 40px;
height: 50px;
margin-right: 10px;
}
serif;
}
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-
.shop-text {
flex-grow: 1;
.shop-container {
width: 100%;
max-width: 600px;
margin: auto;
}
.shop-item {
display: flex;
justify-content: space-between;
background: #00135d;
border-radius: 8px;
padding: 15px;
}
.shop-item:hover {
}
.shop-button {
display: flex;
color: white;
font-size: 18px;
flex-grow: 1;
}
.shop-button img {
text-align: left;
}
.direction-icon {
background: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
transition: transform 0.2s ease;
}
.direction-icon img {
width: 70%;
height: auto;
border-radius: 50%;
}
.direction-icon:hover {
}
/* Responsive Styling */
.shop-button {
font-size: 16px;
}
h1 {
font-size: 22px;
}

34
}
.shop-button {
font-size: 14px;
}
h1 {
font-size: 20px;
}
}
/* Bottom Navbar */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #000f4b;
display: flex;
padding: 12px 0;
}
.nav-item {
color: white;
text-align: center;
flex: 1;
padding: 12px;
font-size: 18px;
}
.nav-item i {
display: block;
font-size: 24px;
margin-bottom: 6px;
}
.nav-item:hover {
}
.go-back {
position: fixed;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.8);
color: #00429f;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
font-size: 22px;
z-index: 1000;
}
.go-back:hover {
}
.go-back {
width: 35px;
height: 35px;
font-size: 18px;
}
}
</style>
</head>

35
<body>
<h1>Shopping at Numaish</h1>
<div class="shop-container">
<div class="shop-item">
<a href="cnf.html" class="shop-button">
<img src="../MAP/icons/5.png" alt="Clothes">
<span class="shop-text">Clothing & Fashion</span>
</a>
<a href="map1.html" class="direction-icon">
<img src="../MAP/icons/9.png" alt="Direction">
</a>
</div>
<a href="crockery.html" class="shop-button">
<img src="../MAP/icons/7.png" alt="Crockery">
<span class="shop-text">Crockery</span>
</a>
<img src="../MAP/icons/9.png" alt="Direction">
</a>
</div>
<a href="df.html" class="shop-button">
Visitor Guidelines
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1.0">
<title>Visitor Guidelines</title>
<style>
body {
<img src="../MAP/icons/8.png" alt="Dry Fruits">
<span class="shop-text">Dry Fruits</span>
</a>
Home
</a>
Schematic Map
</a>
Gallery
</a>
About Us
</a>
</div>
</div>
</body>
</html>
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
background: #000844;
padding: 20px;

36
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: #bcbcbc;
overflow: hidden;
}
th, td {
padding: 12px;
border: 1px solid #12014b;
text-align: center;
}
th {
background: #9a9a9b;
font-weight: bold;
}
.go-back {
position: fixed;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.8);
color: #00429f;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
font-size: 22px;
z-index: 1000;
}
.go-back:hover {
}
.container {
padding: 15px;
}
table {
font-size: 14px;
}
.go-back {
width: 35px;
height: 35px;
font-size: 18px;
}
}
table {
font-size: 12px;
}
}
/* Bottom Navbar */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
padding: 12px 0;
}
.nav-item {
color: white;

37
text-align: center;
flex: 1;
padding: 12px;
font-size: 16px;
}
.nav-item {
font-size: 13px;
padding: 8px;
}
.nav-item i {
font-size: 14px;
}
}
.nav-item i {
display: block;
font-size: 19px;
margin-bottom: 6px;
}
.nav-item:hover {
}
.hero {
height: 50vh;
}
.hero h1 {
font-size: 22px;
}
.hero-buttons {
max-width: 250px;
}
.hero-buttons a {
width: 90px;
height: 90px;
font-size: 13px;
padding: 8px;
}
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>Visitor Guidelines</h1>
<table>
<thead>
<tr>
<th>Do's</th>
<th>Don'ts</th>
</tr>
</thead>
<tbody>
<tr><td>Carry multiple payment options including
cash and digital payments.</td><td>Avoid carrying valuables
such as expensive jewelry and unnecessary gadgets.</td></tr>
<tr><td>Keep personal items such as wallets and
mobile phones secure.</td><td>Do not litter; use designated
waste disposal bins.</td></tr>
<tr><td>Use public transport like metro, cabs, or autos
to avoid parking issues.</td><td>Do not park in unauthorized
areas to avoid fines or towing.</td></tr>
<tr><td>Supervise children and senior citizens closely
in crowded areas.</td><td>Do not engage in conflicts; maintain
a polite demeanor.</td></tr>
<tr><td>Follow security and event guidelines,
including entry/exit protocols.</td><td>Do not ignore
emergency exits; familiarize yourself with their
locations.</td></tr>
</tbody>
</table>
</div>

38
Home
</a>
Schematic Map
</a>
Gallery
</a>
About Us
</a>
</div>
</body>
</html>
About Us Page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>
* {
}
body {
font-family: Verdana, sans-serif;
margin: 0;
color: grey;
text-align: center; /* Centering text globally */
}
/* Slideshow container */
.slideshow-container {
max-width: 300px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-
through */
.prev:hover, .next:hover {

39
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next, .text {font-size: 11px}
}
/* About Us Section */
.about-us {
padding: 40px;
background-color: #f2f2f2;
}
.about-us h2 {
font-size: 28px;
color: #333;
}
.about-us p {
font-size: 16px;
color: #555;
line-height: 1.6;
max-width: 800px;
margin: auto;
}
/* Our Heartfelt Gratitude Section */
.gratitude-section {
padding: 40px;
background-color: #e9f7fb;

40
}
.gratitude-images {
display: flex;
gap: 20px;
margin-top: 20px;
}
.gratitude-images img {
width: 250px;
height: 350px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease;
}
.gratitude-images img:hover {
}
/* Responsive Design */
@media only screen and (max-width: 768px) {
.gratitude-images img {
width: 200px;
height: 300px;
}
.about-us p {
font-size: 14px;
}
.slideshow-container {
width: 100%;
}
.prev, .next, .text {
font-size: 14px;
}
}
.go-back {
position: fixed;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.8);
color: #00429f;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
font-size: 22px;
z-index: 1000;
}
.go-back:hover {
}
.container {
padding: 15px;
}
table {
font-size: 14px;
}
.go-back {
width: 35px;
height: 35px;
font-size: 18px;
}
}
table {
font-size: 12px;
}

41
}
/* Bottom Navbar */
.bottom-nav {
position: sticky;
bottom: 0;
left: 0;
width: 100%;
display: flex;
padding: 12px 0;
}
.nav-item {
color: white;
text-align: center;
flex: 1;
padding: 12px;
font-size: 16px;
}
}
.hero h1 {
font-size: 22px;
}
.hero-buttons {
max-width: 250px;
}
.hero-buttons a {
width: 90px;
height: 90px;
font-size: 13px;
padding: 8px;
}
width: 30px;
height: 30px;
}
.nav-item {
font-size: 13px;
padding: 8px;
}
.nav-item i {
font-size: 14px;
}
}
.nav-item i {
display: block;
font-size: 19px;
margin-bottom: 6px;
</style>
</head>
<body>
}

.nav-item:hover {
}
.hero {
height: 50vh;
<div class="about-us">
<h2>About Us</h2>
<p>
Our group was inspired to design the schematic map for the
Hyderabad Numaish to address the common challenges faced
during large events, such as overcrowding and difficulty in
finding key areas like stalls and amenities. Drawing from the
layout designs of theme parks and trade fairs, we focused on
creating a user-friendly and clear guide that helps visitors
navigate the event smoothly. We believe that this map will

42
enhance the overall experience for attendees by making the
exhibition more accessible, organized, and enjoyable for
everyone.
</p>
<h2>Our Team</h2>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="../MAP/about/4.png" style="width:100%">
</div>
</div>
</div>
</div>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(4)"></span> 
</div>
</div>

<div class="gratitude-section">
<h2>Our Heartfelt Gratitude</h2>
<div class="gratitude-images">
<img src="../MAP/about/5.jpeg" alt="Gratitude 1">
<img src="../MAP/about/6.jpeg" alt="Gratitude 2">
</div>
<p>
We would like to extend our heartfelt gratitude to Mr. Surender
Reddy, the Secretary of the Exhibition Society. His invaluable
support and insights into the workings of the Numaish exhibition
have significantly contributed to the development of our
schematic map. His dedication to improving the event experience
for all attendees has been truly inspiring, and we are grateful for
his collaboration in making this project a success.
<br>
A special thank you to Mr. Saurabh Chatterjee, the talented
photographer behind SIA Photography, for generously providing
us with the stunning photographs of the 2025 Numaish. His
exceptional work has captured the essence of the exhibition, and
his contributions have helped bring our project to life. We truly
appreciate his willingness to support us and share his beautiful
photography, which has added a unique touch to our project.
</p>
</div>
Home
</a>
Schematic Map
</a>
Gallery

43
</a>
About Us
</a>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
Schematic Map Page
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1.0">
<title>Clothing-Map</title>

<link href="https://api.mapbox.com/mapbox-gl-
js/v3.3.0/mapbox-gl.css" rel="stylesheet">

<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida
Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #9d9d9d;
color: rgb(0, 36, 68);
font-size: 20px;
}
#map {
height: 80vh;

44
width: 100%;
padding-bottom: 60px; /* Adjusted padding to avoid
overlap */
cursor: grab; /* Set default grab cursor for the map */
}
#map:active {
cursor: grabbing; /* Change to grabbing cursor when
active */
}
color: white;
text-align: center;
flex: 1;
padding: 12px;
font-size: 18px;
}
.nav-item i {
display: block;
font-size: 24px;
margin-bottom: 6px;
@media (max-width: 768px) { }
#map {
height: 70vh;
}
}
#map {
height: 70vh;
}
}
/* Bottom Navbar */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #000f4b;
display: flex;
padding: 12px 0;
}
.nav-item {
.nav-item:hover {
}
.mapboxgl-ctrl-logo { display: none !important; }
.mapboxgl-ctrl-attrib {
display: none !important;
}
.go-back {
position: fixed;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.8);
color: #00429f;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
font-size: 22px;

45
z-index: 1000;
}
.go-back:hover {
}
.go-back {
width: 35px;
height: 35px;
font-size: 18px;
}
}
</style>
</head>
<body>
<h2>Schematic Map</h2>
<div id="map"></div>
<a href="javascript:history.back()" class="go-back">
<i class="fas fa-arrow-left"></i>
</a>
Home
</a>
<a href="map1.html" class="nav-item">
Schematic Map
</a>
<a href="#" class="nav-item">
<i class="fas fa-heart"></i>
Heartfelt Gratitude
</a>
<a href="#" class="nav-item">
About Us
</a>
</div>

<script src="https://api.mapbox.com/mapbox-gl-
js/v3.3.0/mapbox-gl.js"></script>
<script>
// Replace with your Mapbox Access Token
mapboxgl.accessToken =
"pk.eyJ1IjoicHJpeWFua2FrYXRlIiwiYSI6ImNtOGFoMnM0ejF
nMzYya3NmZXJscmtnbGIifQ.Ba2QN3_0eeOlrlEHYzzDUg";
// Initialize 3D Map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12', // Change to
'satellite-streets-v12' for a satellite view
center: [78.4710, 17.3850], // Numaish Exhibition Grounds
zoom: 17,
pitch: 60, // f
µ
˛ Tilt for 3D effect
bearing: -20, // »
⬛ Rotate map slightly
antialias: true // Makes 3D look smooth
});
// Add zoom and rotation controls
map.addControl(new mapboxgl.NavigationControl());
// Add 3D buildings (extrusions)
map.on('load', () => {
map.addLayer({
id: '3d-buildings',
source: 'composite',
'source-layer': 'building',
type: 'fill-extrusion',
paint: {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': ["get", "height"],
'fill-extrusion-base': ["get", "min_height"],

46
}
});
'fill-extrusion-opacity': 0.6 // If the same popup is clicked, remove it
if (currentPopup && currentPopup.isOpen()) {
currentPopup.remove();
currentPopup = null; // Reset the popup reference
// Add Pins for Stalls } else {
var locations = [
{ name: "Cashmere Hub", lat: 17.3851, lng: 78.4709 },
{ name: "Ram Janki Chikankari", lat: 17.3853, lng:
78.4711 },
{ name: "Ikkat Bags", lat: 17.3852, lng: 78.4705 },
any)
// If a new popup is clicked, close the existing one (if
if (currentPopup) {
currentPopup.remove();
}
{ name: "SD SHAH and Sons", lat: 17.3850, lng:
78.4707 },
{ name: "Royal Attire", lat: 17.3849, lng: 78.4705 },
{ name: "National Crockery", lat: 17.3855, lng: 78.4710
}, // Moved a bit back (south) and right (east)
{ name: "Dilkash Enterprises", lat: 17.3858, lng: 78.4711 }, //
Moved a bit back (south) and right (east)
{ name: "Dubai Ceramics", lat: 17.3849, lng: 78.4712 },
{ name: "Dry Fruit World", lat: 17.3851, lng: 78.4710 },
{ name: "Healthy Nuts & Dry Fruits", lat: 17.3852, lng:
78.4711 },
{ name: "Dry Fruit House", lat: 17.3851, lng: 78.4709 },
{ name: "Freshly Dried", lat: 17.3850, lng: 78.4708 },
{ name: "Nutty Delights", lat: 17.3850, lng: 78.4707 },
{ name: "The Nut Basket", lat: 17.3852, lng: 78.4708 } //
Moved a bit back (south) and right (east)
];
let currentPopup = null; // Store the current popup reference
locations.forEach(location => {
const marker = new mapboxgl.Marker({ color: '#0d268c'
}) // Blue color for stall markers
.setLngLat([location.lng, location.lat])
.addTo(map);
// Change cursor to pointer on hover
marker.getElement().style.cursor = 'pointer';
// Add event listener for mouse click to toggle popup
visibility
marker.getElement().addEventListener('click', function()
{
// Create a new popup
currentPopup = new mapboxgl.Popup({
closeButton: false, closeOnClick: false })
.setLngLat([location.lng, location.lat])
.setHTML(`<b>${location.name}</b>`)
.addTo(map);
}
});
});
// Add Gates with only text labels
var gates = [
{ name: "GATE 1-Gandhi Bhavan Gate", lat: 17.38802,
lng: 78.4702 },
{ name: "GATE 2-Ajantha Gate", lat: 17.386298, lng:
78.471408 },
{ name: "GATE 3-Ghoshmahal Gate", lat: 17.384488,
lng: 78.472395 },
{ name: "GATE 5-Emergency Exit", lat: 17.385128, lng:
78.472097 },
78.471829 },
78.469241 },
{ name: "GATE 7-Service Emergency Exit", lat:
17.386055, lng: 78.469221 },
78.469236 },
78.469576 }
];

47
gates.forEach(gate => {
// Create a div element for the gate label
const gateLabel = document.createElement('div');
gateLabel.innerHTML = `<b>${gate.name}</b>`;
gateLabel.style.color = '#ff6347';
gateLabel.style.fontSize = '14px';
gateLabel.style.fontWeight = 'bold';
gateLabel.style.background = 'rgba(255, 255, 255, 0.7)';
gateLabel.style.padding = '4px 8px';
gateLabel.style.borderRadius = '4px';
gateLabel.style.textAlign = 'center';
// Create a custom HTML marker with the gate label
new mapboxgl.Marker({ element: gateLabel })
.setLngLat([gate.lng, gate.lat])
.addTo(map);
});
});
</script>
</body>
</html>
CSS Source File
body{
font-family: sans-serif;
color: #fff;}
*{
margin: 0;
padding: 0;
}
::-webkit-scrollbar{
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track{
background: #2d2733;
}
::-webkit-scrollbar-thumb{
background: #555;
}
::-webkit-scrollbar-thumb:hover{
background: #dcbfff;
}
.world-map {
}
.mapdiv {
position: absolute;
top: 0;
left: 0;
width: max-content;
height: max-content;
min-height: 30em;
display: flex;
}
svg {
width: 100vw;
height: 100vh;
}
path {
fill: #443d4b8a;

48
stroke: #08020f;
transition: 100ms;
}
polygon{
fill: #443d4b8a;
stroke: #08020f;
transition: 100ms;
}
ellipse{
fill: #443d4b8a;
stroke: #08020f;
transition: 100ms;
}
rect{
fill: #443d4b8a;
stroke: #08020f;
transition: 100ms;
}
circle
{
fill: #443d4b8a;
stroke: #08020f;
transition: 100ms;
}
polygon:hover {
fill: #c99aff8e;
stroke: #08020f;
}
ellipse:hover {
fill: #c99aff8e;
stroke: #08020f;
}
rect:hover {
fill: #c99aff4f;
stroke: #08020f;
}
path:hover {
fill: #c99aff8e;
stroke: #08020f;
}
circle:hover {
fill: #c99aff8e;
stroke: #08020f;
}
.side-panel {
position: fixed;
background-color: #1d1a20;
padding: 2em;
top: 0;
left: -30em;
width: 100%;
max-width: 30em;
height: 100vh;
transition: 600ms cubic-bezier(0.77, 0, 0.18, 1);
overflow: scroll;
z-index: 1;
}
.side-panel .container {
padding-block: 2em;
transition: 200ms ease-out;
}

49
.side-panel-open{
left:0;
}
.hide{
opacity: 0;
}
.close-btn{
position:absolute;
top:0;
right: 0;
width:5em;
border: none;
background-color: #443d4b;
color: #fff;
transition: 100ms;
cursor: pointer;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
user-select:none;
transition: 200ms;
}
.close-btn i{
font-size: 2em;
}
.close-btn:hover{
background-color: #c99aff;
}
.side-image {
width: 60%;
max-width: 20em;
margin-block: 1em;
}
.side-panel .container > ul {
margin-top: 2em;
list-style:none;
}
.side-panel .container > ul > li {
margin-bottom: 2em;
}
.side-panel li {
margin-bottom: 1em;
font-size: 1.2em;
}
.side-panel ul ul {
margin-top: 1em;
font-size: 0.7em;
list-style: circle;
padding-left: 2em;
}
.side-panel strong {
color:#dcbfff;
}
.zoom-controls {
position: fixed;
top: 1em;
right: 1em;
}
.zoom-controls button {

50
display: block;
width: 1.5em;
height: 1.5em;
font-size: 2em;
background-color: #443d4b;
color: #fff;
border: 1px #dcbfff solid;
cursor: pointer;
border: 1px #443d4b solid;
cursor: default;
color: #333;
}
.zoom-out {
}
}
/* .mapdiv path {
.zoom-controls button:hover{
background-color: #2e2a33;
}
button:disabled {
background-color: #1d1a20;
fill : #CC1100;
stroke: #dece0c;
stroke-width: 4px;
transition: fill 0.3s;
} */
Java Script Source File
const map = document.querySelector("svg");
const panels = document.querySelectorAll("path");
const polygons = document.querySelectorAll("polygon");
const rects = document.querySelectorAll("rect");
const circles = document.querySelectorAll("circle");
const ellipsis = document.querySelectorAll("ellipsis");
const sidePanel = document.querySelector(".side-panel");
const container = document.querySelector(".side-panel
.container");
const closeBtn = document.querySelector(".close-btn");
const loading = document.querySelector(".loading");
const zoomInBtn = document.querySelector(".zoom-in");
const zoomOutBtn = document.querySelector(".zoom-out");
const zoomValueOutput = document.querySelector(".zoom-
value");
panels.addEventListener("mouseenter", function() {
const classList = [...this.classList].join('.');
console.log(classList);
const selctor = '.' + classList;
const matchingElements =
document.querySelectorAll(selector);
matchingElements.forEach(e1 => e1.style.fill = "#c99aff")
});
panels.addEventListener("mouseout", function() {

51
matchingElements.forEach(e1 => e1.style.fill = "#443d4b")
rects.addEventListener("mouseout", function() {
});
polygons.addEventListener("mouseenter", function() {
});
polygons.addEventListener("mouseout", function() {
});
rects.addEventListener("mouseenter", function() {
});
});
circles.addEventListener("mouseenter", function() {
});
circles.addEventListener("mouseout", function() {
});
ellipsis.addEventListener("mouseenter", function() {

52
});
ellipsis.addEventListener("mouseout", function() {
});
// you will need to add click event listeners for remaining svg
vector types as well/ e.g. rect, polygon, etc
panels.addEventListener("click", function(e){
loading.innerText = "Loading...";
container.classList.add("hide");
loading.classList.remove("hide");
let clickedPanelName;
if(e.target.hasAttribute("name")){
clickedPanelName = e.target.getAttribute("name");
} else{
clickedPanelName = e.target.classList.value;
}
sidePanel.classList.add("side-panel-open");
// here you can add code to add data in the side panel, however
you want.
// currently showing no data
loading.innerText = "No data to show."
});
closeBtn.addEventListener("click", ()=>{
sidePanel.classList.remove("side-panel-open")
});
let zoomValue = 100;
zoomOutBtn.disabled = true;
zoomInBtn.addEventListener("click", ()=>{
zoomOutBtn.disabled = false;
zoomValue += 100;
if(zoomValue < 500){
zoomInBtn.disabled = false;
} else{
zoomInBtn.disabled = true;
}
map.style.width = zoomValue + "vw";
map.style.height = zoomValue + "vh";
zoomValueOutput.innerText = zoomValue + "%";
console.log("zoom in");
});
zoomOutBtn.addEventListener("click", () => {

53
zoomInBtn.disabled = false;
map.style.width = zoomValue + "vw";
zoomValue -= 100;
if(zoomValue > 100){
zoomOutBtn.disabled = false;
}else{
zoomOutBtn.disabled = true;
}
map.style.height = zoomValue + "vh";
zoomValueOutput.innerText = zoomValue + "%";
console.log("zoom out");
});

56
Categories
Transport and Traffic Information

59
Proposed Information System for Numaish is designed to elevate the visitor experience by
providing seamless navigation, essential guidelines, and real-time information moreover here
are few more points to enhance the visitor’s experience:
1.Crowd Monitoring & Updates Use AI and IoT sensors to track crowd density and suggest
less crowded routes.
2.Provide live updates on entry/exit gates, waiting times, and event schedules.
Multilingual Support
3.Translation features for non-native speakers, enabling easy communication and
understanding.
4.Smart Parking Management Live parking space availability updates and digital parking
reservations. QR-based parking tickets for easy vehicle tracking.
With this initiative, visitors can explore Numaish effortlessly, This project is a step towards
modernization, enhancing the event's efficiency and ensuring a hassle-free visit for everyone.

61
➢ https://exhibitionsociety.com/
➢ https://siaphotography.in/
➢ https://www.hyderabadtourism.travel/hyderabad-numaish
➢ https://chatgpt.com/g/g-2DQzU5UZl-code-copilot
➢ https://openai.com/index/chatgpt/
➢ https://moovitapp.com/index/en/public_transit-
All_India_Industrial_Exhibition_Numaish-Hyderabad-site_149170878-5997
➢ http://www.canva.com
➢ http://www.flaticon.com

Project Report Format (Osmania university).pdf

More Related Content

Similar to Project Report Format (Osmania university).pdf

Recently uploaded