diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 9400c84..0000000 --- a/.gitignore +++ /dev/null @@ -1,32 +0,0 @@ -# See https://help.github.com/ignore-files/ for more about ignoring files. - - -# dependencies -/node_modules/* - - -# testing -/coverage/* -/dist/* -/.tmp/* - -# production -/build/* - -# misc -.DS_Store -**/.DS_Store -.env.local -Thumbs.db -desktop.ini -.cache/** - -# IDE -*.sublime-* -*.code-workspace -/.idea -.vscode/* -*~ - -**/log/ -npm-debug.log* diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 720a847..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2024 Recursivezero Private Limited - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md index 8f0bb1d..2ed896f 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,58 @@ -# DanceCase +# India Map Project -## Objective +This project is an interactive map of India that displays information about various states when hovered over or clicked. Each state is linked to a specific page that provides more detailed information, such as state-specific images and data. -Create a web page showcasing the diverse folk dances of India, providing information about from every state. The page should be well-organized, visually appealing, and user-friendly. +## Feature -## Task Overview +- **Interactive Map**: Hovering over each state highlights it and shows a popup with relevant information. +- **State-specific Information**: When a state is clicked, users are directed to a page with more detailed data. +- **Responsive Design**: The map is designed to be responsive, adapting to different screen sizes. +- **State Image and Name**: A popup appears with the name of the state and an image related to the state when hovered over. -## Homepage: Indian Folk Dance Overview +## Technologies Used -Design a clean and visually appealing homepage displaying a map of India. -Each state on the map should be clickable, leading to the respective state's folk dance page. +- HTML5 +- CSS3 +- JavaScript +- SVG for the map graphics -## State-wise Folk Dance Pages +## Installation -### For each state, create a dedicated page containing the following elements +1. Clone the repository to your local machine: + ```bash + git clone https://github.com/AdityaSingh-7/State-Dances-of-India.git + ``` -- State Dance Name: Clearly display the name of the folk dance. -- Image: Include a high-quality image representing the dance form. -- Brief History: Provide a concise history of the dance form, highlighting its cultural significance. -- Trivia: any facts or famous artist name -- Wiki Page Link: Include a link to the dance form's Wikipedia page for users who want to explore further. +2. Navigate to the project directory: + ```bash + cd State Dances of India + ``` -## Navigation +3. Open the `index.html` file in your browser to view the project. -### Implement a user-friendly navigation system +## How to Use -Use a menu or clickable map on the homepage for easy access to state-wise pages. +1. Open the `index.html` file in a browser. +2. Hover over any state in the map to see a popup with the state's name and an image. +3. Click on a state to be redirected to the state's specific page. -Include a "Home" button on each state page for quick navigation back to the homepage. +## Screenshots -## Design and Layout +Here are some examples of the India Map and the popup in action: -Ensure the design is neat, organized, and visually appealing. -Use a consistent layout for all state pages to maintain a cohesive look. -Optimize images and use a responsive design for a seamless user experience on different devices. +### Full Map -## Code Quality +![India Map](/docs/India-map.png) -Write clean and well-documented HTML, CSS, and JavaScript code. -Ensure the website is compatible with major web browsers. -Implement responsive design principles for a smooth experience on various devices. +### State-Page -## Submission Guidelines +![State-Page](/docs/State-Page.png) -Submit a compressed folder containing all project files, including HTML, CSS, JavaScript, and images. -Provide a README file with instructions on how to navigate and use the website. -Include comments in the code to explain the functionality and structure. -## Evaluation Criteria +## License -Design and User Experience (40%): Neat, visually appealing, and easy-to-navigate pages. -Content Quality (30%): Accurate and concise information about each folk dance. -Code Quality (20%): Well-organized and documented code with good coding practices. -Responsiveness (10%): Ensure the website functions well on different devices. +This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details. ---- +## Contact -Note: Reach out for clarification or guidance if needed. The goal is to create an informative and enjoyable platform for users to explore the rich tapestry of Indian folk dances. - -© 2024 RecursiveZero Private Limited, All rights reserved. +If you have any questions or suggestions, feel free to create an issue or contact me via email: [adityakumarsingh710@gmail.com]. diff --git a/assets/images/Gujrat.jpg b/assets/images/Gujrat.jpg new file mode 100644 index 0000000..4e13a05 Binary files /dev/null and b/assets/images/Gujrat.jpg differ diff --git a/assets/images/Haryana.jpeg b/assets/images/Haryana.jpeg new file mode 100644 index 0000000..8b103de Binary files /dev/null and b/assets/images/Haryana.jpeg differ diff --git a/assets/images/andhra.jpg b/assets/images/andhra.jpg new file mode 100644 index 0000000..80795d2 Binary files /dev/null and b/assets/images/andhra.jpg differ diff --git a/assets/images/arunachal.jpeg b/assets/images/arunachal.jpeg new file mode 100644 index 0000000..b8c5b23 Binary files /dev/null and b/assets/images/arunachal.jpeg differ diff --git a/assets/images/assam.jpg b/assets/images/assam.jpg new file mode 100644 index 0000000..4c5a649 Binary files /dev/null and b/assets/images/assam.jpg differ diff --git a/assets/images/bihar.jpeg b/assets/images/bihar.jpeg new file mode 100644 index 0000000..a8972f3 Binary files /dev/null and b/assets/images/bihar.jpeg differ diff --git a/assets/images/chattisgarh.jpg b/assets/images/chattisgarh.jpg new file mode 100644 index 0000000..86e29fb Binary files /dev/null and b/assets/images/chattisgarh.jpg differ diff --git a/assets/images/delhi.jpg b/assets/images/delhi.jpg new file mode 100644 index 0000000..4281da4 Binary files /dev/null and b/assets/images/delhi.jpg differ diff --git a/assets/images/goa.jpg b/assets/images/goa.jpg new file mode 100644 index 0000000..5656cc6 Binary files /dev/null and b/assets/images/goa.jpg differ diff --git a/assets/images/himachal.jpg b/assets/images/himachal.jpg new file mode 100644 index 0000000..11e6ddd Binary files /dev/null and b/assets/images/himachal.jpg differ diff --git a/assets/images/jharkhand.jpg b/assets/images/jharkhand.jpg new file mode 100644 index 0000000..44f6efd Binary files /dev/null and b/assets/images/jharkhand.jpg differ diff --git a/assets/images/karnataka.jpg b/assets/images/karnataka.jpg new file mode 100644 index 0000000..38033ed Binary files /dev/null and b/assets/images/karnataka.jpg differ diff --git a/assets/images/kashmir.jpeg b/assets/images/kashmir.jpeg new file mode 100644 index 0000000..148f508 Binary files /dev/null and b/assets/images/kashmir.jpeg differ diff --git a/assets/images/kerala.jpg b/assets/images/kerala.jpg new file mode 100644 index 0000000..7868262 Binary files /dev/null and b/assets/images/kerala.jpg differ diff --git a/assets/images/madhyapradesh.jpg b/assets/images/madhyapradesh.jpg new file mode 100644 index 0000000..6764034 Binary files /dev/null and b/assets/images/madhyapradesh.jpg differ diff --git a/assets/images/maharashtra.jpg b/assets/images/maharashtra.jpg new file mode 100644 index 0000000..779fda3 Binary files /dev/null and b/assets/images/maharashtra.jpg differ diff --git a/assets/images/manipur.jpeg b/assets/images/manipur.jpeg new file mode 100644 index 0000000..0d266bb Binary files /dev/null and b/assets/images/manipur.jpeg differ diff --git a/assets/images/meghalaya.jpeg b/assets/images/meghalaya.jpeg new file mode 100644 index 0000000..c46b568 Binary files /dev/null and b/assets/images/meghalaya.jpeg differ diff --git a/assets/images/mizoram.jpg b/assets/images/mizoram.jpg new file mode 100644 index 0000000..bc3a1fd Binary files /dev/null and b/assets/images/mizoram.jpg differ diff --git a/assets/images/nagaland.jpeg b/assets/images/nagaland.jpeg new file mode 100644 index 0000000..f3a94e6 Binary files /dev/null and b/assets/images/nagaland.jpeg differ diff --git a/assets/images/odisha.jpg b/assets/images/odisha.jpg new file mode 100644 index 0000000..02d77f8 Binary files /dev/null and b/assets/images/odisha.jpg differ diff --git a/assets/images/punjab.jpg b/assets/images/punjab.jpg new file mode 100644 index 0000000..0063ccf Binary files /dev/null and b/assets/images/punjab.jpg differ diff --git a/assets/images/rajasthan.jpg b/assets/images/rajasthan.jpg new file mode 100644 index 0000000..050f51a Binary files /dev/null and b/assets/images/rajasthan.jpg differ diff --git a/assets/images/sikkim.jpg b/assets/images/sikkim.jpg new file mode 100644 index 0000000..c87bcf9 Binary files /dev/null and b/assets/images/sikkim.jpg differ diff --git a/assets/images/tamilnadu.jpeg b/assets/images/tamilnadu.jpeg new file mode 100644 index 0000000..e658678 Binary files /dev/null and b/assets/images/tamilnadu.jpeg differ diff --git a/assets/images/telangana.jpg b/assets/images/telangana.jpg new file mode 100644 index 0000000..a4d49a9 Binary files /dev/null and b/assets/images/telangana.jpg differ diff --git a/assets/images/tripura.jpg b/assets/images/tripura.jpg new file mode 100644 index 0000000..295b748 Binary files /dev/null and b/assets/images/tripura.jpg differ diff --git a/assets/images/uttarakhnad.jpeg b/assets/images/uttarakhnad.jpeg new file mode 100644 index 0000000..83f64fa Binary files /dev/null and b/assets/images/uttarakhnad.jpeg differ diff --git a/assets/images/uttarpradesh.jpg b/assets/images/uttarpradesh.jpg new file mode 100644 index 0000000..de05cee Binary files /dev/null and b/assets/images/uttarpradesh.jpg differ diff --git a/assets/images/westbengal.jpg b/assets/images/westbengal.jpg new file mode 100644 index 0000000..44f6efd Binary files /dev/null and b/assets/images/westbengal.jpg differ diff --git a/assets/statepages/Andhra.html b/assets/statepages/Andhra.html new file mode 100644 index 0000000..7fce830 --- /dev/null +++ b/assets/statepages/Andhra.html @@ -0,0 +1,59 @@ + + + + + + Andhra Pradesh - Kuchipudi Dance + + + + + + + + + + Home + + + +

Kuchipudi Dance - Andhra Pradesh

+
+
+

State Map

+
+
+ +
+ Kuchipudi Dance +
+ + + + + + + + + +
Quick Facts
Dance FormKuchipudi
OriginAndhra Pradesh, India
FestivalSankranti, Various Religious Events
DurationVaries
SignificanceClassical Dance Tradition
FormationExpressive Dance and Drama
Name OriginNamed after the village of Kuchipudi
+ Read more about Kuchipudi Dance on Wikipedia +
+
+
+ + + + + + + diff --git a/assets/statepages/ArunachalPradesh.html b/assets/statepages/ArunachalPradesh.html new file mode 100644 index 0000000..cfa22a9 --- /dev/null +++ b/assets/statepages/ArunachalPradesh.html @@ -0,0 +1,80 @@ + + + + + + Arunachal Pradesh - Buiya Dance + + + + + + + Home + + +

Yak Dance - Arunachal Pradesh

+
+
+

State Map

+
+
+ +
+ Yak Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormYak Dance
OriginArunachal Pradesh, India
FestivalLosar, Reh, and other tribal festivals
DurationVaries
SignificanceCelebration of Tribal Culture
FormationCostume Dance
Name OriginInspired by the Yak
+ Read more about Yak Dance on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Assam.html b/assets/statepages/Assam.html new file mode 100644 index 0000000..77e8b88 --- /dev/null +++ b/assets/statepages/Assam.html @@ -0,0 +1,77 @@ + + + + + + Assam - Bihu Dance + + + + + + + Home + + +

Bihu Dance - Assam

+
+
+

State Map

+
+
+ +
+ Bihu Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormBihu
OriginAssam, India
FestivalBihu (Rongali, Bhogali, Kongali)
DurationVaries by festival
SignificanceHarvest Celebration
FormationGroup Dance
Name OriginNamed after the Bihu festival
+ Read more about Bihu Dance on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Bihar.html b/assets/statepages/Bihar.html new file mode 100644 index 0000000..8c2ffd9 --- /dev/null +++ b/assets/statepages/Bihar.html @@ -0,0 +1,77 @@ + + + + + + Bihar - Jat-Jatin Dance + + + + + + + Home + + +

Jat-Jatin Dance - Bihar

+
+
+

State Map

+
+
+ +
+ Jat-Jatin Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormJat-Jatin
OriginBihar, India
FestivalVarious Local Festivals
DurationVaries
SignificanceStorytelling through dance
FormationCouple Dance
Name OriginDepicts the love story of Jat and Jatin
+ Read more about Jat-Jatin Dance on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Chhatisgarh.html b/assets/statepages/Chhatisgarh.html new file mode 100644 index 0000000..dd32481 --- /dev/null +++ b/assets/statepages/Chhatisgarh.html @@ -0,0 +1,78 @@ + + + + + + + + Chhattisgarh - Panthi Dance + + + + + + Home + + +

Panthi Dance - Chhattisgarh

+
+
+

State Map

+
+
+ +
+ Panthi Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormPanthi
OriginChhattisgarh, India
FestivalTeej, Dussehra
DurationVaries
SignificanceReligious and Social Celebration
FormationGroup Dance
Name OriginNamed after the Panthi community
+ Read more about Panthi Dance on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Delhi.html b/assets/statepages/Delhi.html new file mode 100644 index 0000000..382fbd2 --- /dev/null +++ b/assets/statepages/Delhi.html @@ -0,0 +1,78 @@ + + + + + + Delhi - Kathak Dance + + + + + + + Home + + +

Kathak - Delhi

+
+
+

State Map

+
+
+ +
+ Kathak +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormKathak
OriginNorthern India, including Delhi
FestivalCultural Events, Festivals
DurationVaries
SignificanceStorytelling through Dance
FormationSolo or Group
Name OriginFrom 'Katha', meaning story
+ Read more about Kathak on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Goa.html b/assets/statepages/Goa.html new file mode 100644 index 0000000..17e4e8f --- /dev/null +++ b/assets/statepages/Goa.html @@ -0,0 +1,78 @@ + + + + + + Goa - Fugdi Dance + + + + + + + Home + + +

Dhalo Dance - Goa

+
+
+

State Map

+
+
+ +
+ Dhalo Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormDhalo
OriginGoa, India
FestivalShigmo
DurationVaries
SignificanceCelebration of Spring
FormationStreet Parade Dance
Name OriginFrom 'Dhalo', meaning 'to move around'
+ Read more about Dhalo Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Gujrat.html b/assets/statepages/Gujrat.html new file mode 100644 index 0000000..b2dffaa --- /dev/null +++ b/assets/statepages/Gujrat.html @@ -0,0 +1,77 @@ + + + + + + Gujarat - Garba Dance + + + + + + + + Home + + +

Garba Dance - Gujarat

+ +
+
+

State Map

+
+
+ +
+ Garba Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormGarba
OriginGujarat, India
FestivalNavaratri
DurationNine Nights
SignificanceWorship of Goddess Durga
FormationCircular Dance
Name OriginSanskrit word 'Garbha'
+ + Read more about Garba Dance on Wikipedia + +
+
+
+ + + + diff --git a/assets/statepages/Harayana.html b/assets/statepages/Harayana.html new file mode 100644 index 0000000..c72d952 --- /dev/null +++ b/assets/statepages/Harayana.html @@ -0,0 +1,54 @@ + + + + + + Haryana - Saang Dance + + + + + + + + Home + + +

Phag Dance - Haryana

+
+
+

State Map

+
+
+ +
+ Phag Dance +
+ + + + + + + + + +
Quick Facts
Dance FormPhag
OriginHaryana, India
FestivalHoli, Phalgun
DurationVaries
SignificanceCelebration of Spring
FormationGroup Dance
Name OriginPhalgun month in Hindu Calendar
+ Read more about Phag Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/HimachalPradesh.html b/assets/statepages/HimachalPradesh.html new file mode 100644 index 0000000..fd674c0 --- /dev/null +++ b/assets/statepages/HimachalPradesh.html @@ -0,0 +1,79 @@ + + + + + + Himachal Pradesh - Nati Dance + + + + + + + Home + + +

Nati Dance - Himachal Pradesh

+
+
+

State Map

+
+
+ +
+ Nati Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormNati
OriginHimachal Pradesh, India
FestivalKullu Dussehra, Other Festivals
DurationVaries
SignificanceCultural and Religious Celebration
FormationLarge Group Dance in Circles
Name OriginFrom 'Natyam' meaning dance
+ Read more about Nati Dance on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Jharkhand.html b/assets/statepages/Jharkhand.html new file mode 100644 index 0000000..958bfd0 --- /dev/null +++ b/assets/statepages/Jharkhand.html @@ -0,0 +1,78 @@ + + + + + + Jharkhand - Chhau Dance + + + + + + + Home + + +

Chhau Dance - Jharkhand

+
+
+

State Map

+
+
+ +
+ Chhau Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormChhau
OriginJharkhand, West Bengal, Odisha
FestivalChaitra Parva, Ashvin Navaratri
DurationNights during festivals
SignificanceMartial Art and Folk Dance
FormationSolo or Group
Name OriginFrom 'Chaya' meaning shadow or image
+ Read more about Chhau Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Karnataka.html b/assets/statepages/Karnataka.html new file mode 100644 index 0000000..969ae24 --- /dev/null +++ b/assets/statepages/Karnataka.html @@ -0,0 +1,78 @@ + + + + + + Karnataka - Yakshagana Dance + + + + + + + Home + + +

Yakshagana - Karnataka

+
+
+

State Map

+
+
+ +
+ Yakshagana +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormYakshagana
OriginKarnataka, India
FestivalMultiple, often religious events
DurationAll Night Performances
SignificanceStorytelling through Dance-Drama
FormationEnsemble
Name OriginFrom 'Yaksha' (demigod) and 'Gana' (song)
+ Read more about Yakshagana on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Kashmir.html b/assets/statepages/Kashmir.html new file mode 100644 index 0000000..f0b23a6 --- /dev/null +++ b/assets/statepages/Kashmir.html @@ -0,0 +1,79 @@ + + + + + + Dance Form of Jammu and Kashmir + + + + + + + + + Home + + +

Rouf - Kashmir

+
+
+

State Map

+
+
+ +
+ Rouf +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormRouf
OriginKashmir, India
FestivalEid, Ramzan
DurationVaries
SignificanceCelebration of Joy and Community
FormationWomen's Group Dance
Name OriginFrom the Kashmiri word 'Rauf', linked to joy
+ Read more about Rouf on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Kerala.html b/assets/statepages/Kerala.html new file mode 100644 index 0000000..675187e --- /dev/null +++ b/assets/statepages/Kerala.html @@ -0,0 +1,78 @@ + + + + + + Kerala - Kathakali Dance + + + + + + + Home + + +

Kathakali - Kerala

+
+
+

State Map

+
+
+ +
+ Kathakali +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormKathakali
OriginKerala, India
FestivalOnam, Temple Festivals
Duration3-4 hours
SignificanceClassical Dance-Drama
FormationMainly Solo with support
Name OriginFrom 'Katha' (story) and 'Kali' (performance)
+ Read more about Kathakali on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/MadhyaPradesh.html b/assets/statepages/MadhyaPradesh.html new file mode 100644 index 0000000..f778583 --- /dev/null +++ b/assets/statepages/MadhyaPradesh.html @@ -0,0 +1,78 @@ + + + + + + Madhya Pradesh - Matki Dance + + + + + + + Home + + +

Matki Dance - Madhya Pradesh

+
+
+

State Map

+
+
+ +
+ Matki Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormMatki
OriginMadhya Pradesh, India
FestivalHoli, Diwali
DurationVaries
SignificanceCelebration of Joy and Harvest
FormationWomen's Dance with a Pot
Name OriginFrom 'Matka', meaning earthen pot
+ Read more about Matki Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Maharashtra.html b/assets/statepages/Maharashtra.html new file mode 100644 index 0000000..1fb99ac --- /dev/null +++ b/assets/statepages/Maharashtra.html @@ -0,0 +1,77 @@ + + + + + + Maharashtra - Lavani Dance + + + + + + + Home + + +

Lavani - Maharashtra

+
+
+

State Map

+
+
+ +
+ Lavani +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormLavani
OriginMaharashtra, India
FestivalGanesh Chaturthi, Navratri
DurationVaries
SignificanceExpression of Women's Strength and Beauty
FormationSolo or Group
Name OriginFrom 'Lavanya', meaning beauty
+ Read more about Lavani on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Manipur.html b/assets/statepages/Manipur.html new file mode 100644 index 0000000..32f21f9 --- /dev/null +++ b/assets/statepages/Manipur.html @@ -0,0 +1,78 @@ + + + + + + Manipur - Manipuri Dance + + + + + + + Home + + +

Manipuri Dance - Manipur

+
+
+

State Map

+
+
+ +
+ Manipuri Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormManipuri
OriginManipur, India
FestivalLai Haraoba, Ras Lila
DurationVaries
SignificanceDevotional Dance Form
FormationEnsemble
Name OriginNamed after the state of Manipur
+ Read more about Manipuri Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Meghalaya.html b/assets/statepages/Meghalaya.html new file mode 100644 index 0000000..ea5299f --- /dev/null +++ b/assets/statepages/Meghalaya.html @@ -0,0 +1,78 @@ + + + + + + Meghalaya - Nongkrem Dance + + + + + + + Home + + +

Nongkrem Dance - Meghalaya

+
+
+

State Map

+
+
+ +
+ Nongkrem Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormNongkrem
OriginMeghalaya, India
FestivalNongkrem Festival
Duration5 Days
SignificanceThanksgiving to the Goddess Ka Blei Synshar
FormationGroup Dance
Name OriginNamed after the festival
+ Read more about Nongkrem Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Mizoram.html b/assets/statepages/Mizoram.html new file mode 100644 index 0000000..ee14d09 --- /dev/null +++ b/assets/statepages/Mizoram.html @@ -0,0 +1,78 @@ + + + + + + Mizoram - Traditional Dance + + + + + + + Home + + +

Cheraw Dance - Mizoram

+
+
+

State Map

+
+
+ +
+ Cheraw Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormCheraw
OriginMizoram, India
FestivalChapchar Kut, Mim Kut
DurationVaries
SignificanceCelebration of Life and Harvest
FormationUnique Bamboo Dance
Name OriginFrom 'Cheraw', the Mizo word for bamboo
+ Read more about Cheraw Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Nagaland.html b/assets/statepages/Nagaland.html new file mode 100644 index 0000000..7302ed7 --- /dev/null +++ b/assets/statepages/Nagaland.html @@ -0,0 +1,78 @@ + + + + + + Nagaland - Zeliang Dance + + + + + + + Home + + +

War Dance - Nagaland

+
+
+

State Map

+
+
+ +
+ War Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormWar Dance
OriginNagaland, India
FestivalHornbill Festival, Tribal Festivals
DurationVaries
SignificanceShowcasing Warrior Skills
FormationGroup, often Men
Name OriginReflects the martial spirit of the tribes
+ Read more about War Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Odisha.html b/assets/statepages/Odisha.html new file mode 100644 index 0000000..bc0c33c --- /dev/null +++ b/assets/statepages/Odisha.html @@ -0,0 +1,78 @@ + + + + + + Odisha - Odissi Dance + + + + + + + Home + + +

Odissi - Odisha

+
+
+

State Map

+
+
+ +
+ Odissi +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormOdissi
OriginOdisha, India
FestivalRath Yatra, Various Temple Festivals
Duration1-2 hours
SignificanceClassical Dance with Devotional Themes
FormationSolo or Group
Name OriginNamed after the state of Odisha
+ Read more about Odissi on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Rajasthan.html b/assets/statepages/Rajasthan.html new file mode 100644 index 0000000..227fce7 --- /dev/null +++ b/assets/statepages/Rajasthan.html @@ -0,0 +1,54 @@ + + + + + + Rajasthan - Ghoomar Dance + + + + + + + + Home + + +

Ghoomar - Rajasthan

+
+
+

State Map

+
+
+ +
+ Ghoomar +
+ + + + + + + + + +
Quick Facts
Dance FormGhoomar
OriginRajasthan, India
FestivalTeej, Gangaur
DurationVaries
SignificanceExpression of Feminine Grace
FormationCircular Dance
Name OriginFrom 'Ghoomna', meaning to swirl
+ Read more about Ghoomar on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Sikkim.html b/assets/statepages/Sikkim.html new file mode 100644 index 0000000..0a947a8 --- /dev/null +++ b/assets/statepages/Sikkim.html @@ -0,0 +1,54 @@ + + + + + + Sikkim - Mask Dance + + + + + + + + Home + + +

Tamang Selo - Sikkim

+
+
+

State Map

+
+
+ +
+ Tamang Selo +
+ + + + + + + + + +
Quick Facts
Dance FormTamang Selo
OriginSikkim, India
FestivalLosar, Sonam Lhosar
DurationVaries
SignificanceCelebration of Tamang Culture
FormationGroup Dance
Name OriginNamed after the Tamang community
+ Read more about Tamang Selo on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/TamilNadu.html b/assets/statepages/TamilNadu.html new file mode 100644 index 0000000..b264427 --- /dev/null +++ b/assets/statepages/TamilNadu.html @@ -0,0 +1,77 @@ + + + + + + Tamil Nadu - Bharatanatyam Dance + + + + + + + Home + + +

Bharatanatyam - Tamil Nadu

+
+
+

State Map

+
+
+ +
+ Bharatanatyam +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormBharatanatyam
OriginTamil Nadu, India
FestivalMargazhi Festival, Temple Festivals
DurationVaries
SignificancePreservation of Indian Cultural Heritage
FormationSolo or Group
Name OriginFrom 'Bharata' and 'Natya', meaning dance of Bharata
+ Read more about Bharatanatyam on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/Telangana.html b/assets/statepages/Telangana.html new file mode 100644 index 0000000..23da244 --- /dev/null +++ b/assets/statepages/Telangana.html @@ -0,0 +1,53 @@ + + + + + + Telangana - Bathukamma Dance + + + + + + + Home + + +

Perini Sivatandavam - Telangana

+
+
+

State Map

+
+
+ +
+ Perini Sivatandavam +
+ + + + + + + + + +
Quick Facts
Dance FormPerini Sivatandavam
OriginTelangana, India
FestivalMahashivratri, Various Religious Events
DurationVaries
SignificanceWarrior and Devotional Dance
FormationGroup Dance
Name Origin'Perini' meaning valour, 'Siva' for Lord Shiva, 'Tandavam' for his cosmic dance
+ Read more about Perini Sivatandavam on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Tripura.html b/assets/statepages/Tripura.html new file mode 100644 index 0000000..69bf16e --- /dev/null +++ b/assets/statepages/Tripura.html @@ -0,0 +1,77 @@ + + + + + + Tripura - Hojagiri Dance + + + + + + + Home + + +

Hojagiri Dance - Tripura

+
+
+

State Map

+
+
+ +
+ Hojagiri Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormHojagiri
OriginTripura, India
FestivalHojagiri Festival, Diwali
DurationVaries
SignificanceCelebration of Reang Tribe Culture
FormationWomen's Candle Dance
Name OriginFrom 'Hojagiri', a Reang word implying a dance of light
+ Read more about Hojagiri Dance on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/UttarPradesh.html b/assets/statepages/UttarPradesh.html new file mode 100644 index 0000000..c9e1a8e --- /dev/null +++ b/assets/statepages/UttarPradesh.html @@ -0,0 +1,78 @@ + + + + + + Uttar Pradesh - Kathak Dance + + + + + + + Home + + +

Kathak - Uttar Pradesh

+
+
+

State Map

+
+
+ +
+ Kathak +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormKathak
OriginUttar Pradesh, India
FestivalMultiple, often cultural events
DurationVaries
SignificanceStorytelling through Dance
FormationSolo or Group
Name OriginFrom 'Katha', meaning story
+ Read more about Kathak on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/Uttarakhand.html b/assets/statepages/Uttarakhand.html new file mode 100644 index 0000000..3fb67ec --- /dev/null +++ b/assets/statepages/Uttarakhand.html @@ -0,0 +1,78 @@ + + + + + + Uttarakhand - Langvir Dance + + + + + + + Home + + +

Chholiya Dance - Uttarakhand

+
+
+

State Map

+
+
+ +
+ Chholiya Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormChholiya
OriginUttarakhand, India
FestivalWeddings, Festivals
DurationVaries
SignificanceTraditional Martial Dance
FormationGroup Dance
Name OriginFrom 'Chholiya', representing the dance of soldiers
+ Read more about Chholiya Dance on Wikipedia +
+
+
+ + + + + + diff --git a/assets/statepages/WestBengal.html b/assets/statepages/WestBengal.html new file mode 100644 index 0000000..dc4b3d7 --- /dev/null +++ b/assets/statepages/WestBengal.html @@ -0,0 +1,77 @@ + + + + + + West Bengal - Chhau Dance + + + + + + + Home + + +

Chhau Dance - West Bengal

+
+
+

State Map

+
+
+ +
+ Chhau Dance +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormChhau
OriginWest Bengal, Jharkhand, Odisha
FestivalChaitra Parva, Ashvin Navaratri
DurationNights during festivals
SignificanceMartial Art and Folk Dance
FormationSolo or Group
Name OriginFrom 'Chaya' meaning shadow or image
+ Read more about Chhau Dance on Wikipedia +
+
+
+ + + + + diff --git a/assets/statepages/punjab.html b/assets/statepages/punjab.html new file mode 100644 index 0000000..7866321 --- /dev/null +++ b/assets/statepages/punjab.html @@ -0,0 +1,80 @@ + + + + + + Punjab - Bhangra Dance + + + + + + + Home + + +

Bhangra - Punjab

+
+
+

State Map

+
+
+ +
+ Bhangra +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Quick Facts
Dance FormBhangra
OriginPunjab, India
FestivalBaisakhi, Lohri
DurationVaries
SignificanceCelebration of Harvest
FormationGroup Dance
Name OriginFrom 'Bhang' meaning to break, referring to breaking soil
+ Read more about Bhangra on Wikipedia +
+
+
+ + + + + + diff --git a/assets/states.json b/assets/states.json new file mode 100644 index 0000000..c8901c8 --- /dev/null +++ b/assets/states.json @@ -0,0 +1,212 @@ +{ + "andhra": { + "id": "Andhra.html", + "name": "Andhra Pradesh", + "dance": "Kuchipudi Dance", + "image": "assets/images/andhra.jpg", + "svg": "assets/svg/Andhra.svg" + }, + "assam": { + "id": "Assam.html", + "name": "Assam", + "dance": "Bihu Dance", + "image": "assets/images/assam.jpg", + "svg": "assets/svg/assam.svg" + }, + "arunachalpradesh": { + "id": "ArunachalPradesh.html", + "name": "Arunachal Pradesh", + "dance": "Bari Dance", + "image": "assets/images/arunachal.jpeg", + "svg": "assets/svg/ArunachalPradesh.svg" + }, + "bihar": { + "id": "Bihar.html", + "name": "Bihar", + "dance": "Bihar Folk Dance", + "image": "assets/images/bihar.jpeg", + "svg": "assets/svg/Bihar.svg" + }, + "chhatisgarh": { + "id": "Chhatisgarh.html", + "name": "Chhattisgarh", + "dance": "Raut Nacha", + "image": "assets/images/chattisgarh.jpg", + "svg": "assets/svg/Chhatisgarh.svg" + }, + "delhi": { + "id": "Delhi.html", + "name": "Delhi", + "dance": "Kathak", + "image": "assets/images/delhi.jpg", + "svg": "assets/svg/Delhi.svg" + }, + "telangana": { + "id": "Telangana.html", + "name": "Telangana", + "dance": "Perini Shiva Thandavam", + "image": "assets/images/telangana.jpg", + "svg": "assets/svg/Telangana.svg" + }, + "goa": { + "id": "Goa.html", + "name": "Goa", + "dance": "Dekhnni", + "image": "assets/images/goa.jpg", + "svg": "assets/svg/Goa.svg" + }, + "gujarat": { + "id": "Gujrat.html", + "name": "Gujarat", + "dance": "Garba", + "image": "assets/images/Gujrat.jpg", + "svg": "assets/svg/Gujrat.svg" + }, + "kerala": { + "id": "Kerala.html", + "name": "Kerala", + "dance": "Kathakali", + "image": "assets/images/kerala.jpg", + "svg": "assets/svg/Kerala.svg" + }, + "karnataka": { + "id": "Karnataka.html", + "name": "Karnataka", + "dance": "Karnataka Folk Dance", + "image": "assets/images/karnataka.jpg", + "svg": "assets/svg/Karnataka.svg" + }, + "maharashtra": { + "id": "Maharashtra.html", + "name": "Maharashtra", + "dance": "Lavani", + "image": "assets/images/maharashtra.jpg", + "svg": "assets/svg/Maharashtra.svg" + }, + "madhyapradesh": { + "id": "MadhyaPradesh.html", + "name": "Madhya Pradesh", + "dance": "Gond Dance", + "image": "assets/images/madhyapradesh.jpg", + "svg": "assets/svg/MadhyaPradesh.svg" + }, + "uttarpradesh": { + "id": "UttarPradesh.html", + "name": "Uttar Pradesh", + "dance": "Kathak", + "image": "assets/images/uttarpradesh.jpg", + "svg": "assets/svg/UttarPradesh.svg" + }, + "nagaland": { + "id": "Nagaland.html", + "name": "Nagaland", + "dance": "Heka Dance", + "image": "assets/images/nagaland.jpeg", + "svg": "assets/svg/Nagaland.svg" + }, + "manipur": { + "id": "Manipur.html", + "name": "Manipur", + "dance": "Manipuri Dance", + "image": "assets/images/manipur.jpeg", + "svg": "assets/svg/Manipur.svg" + }, + "meghalaya": { + "id": "Meghalaya.html", + "name": "Meghalaya", + "dance": "Laho Dance", + "image": "assets/images/meghalaya.jpeg", + "svg": "assets/svg/Meghalaya.svg" + }, + "mizoram": { + "id": "Mizoram.html", + "name": "Mizoram", + "dance": "Cheraw Dance", + "image": "assets/images/mizoram.jpg", + "svg": "assets/svg/Mizoram.svg" + }, + "odisha": { + "id": "Odisha.html", + "name": "Odisha", + "dance": "Odissi", + "image": "assets/images/odisha.jpg", + "svg": "assets/svg/Odisha.svg" + }, + "rajasthan": { + "id": "Rajasthan.html", + "name": "Rajasthan", + "dance": "Ghoomar", + "image": "assets/images/rajasthan.jpg", + "svg": "assets/svg/Rajasthan.svg" + }, + "sikkim": { + "id": "Sikkim.html", + "name": "Sikkim", + "dance": "Chyabrung Dance", + "image": "assets/images/sikkim.jpg", + "svg": "assets/svg/Sikkim.svg" + }, + "tamilnadu": { + "id": "TamilNadu.html", + "name": "Tamil Nadu", + "dance": "Bharatanatyam", + "image": "assets/images/tamilnadu.jpeg", + "svg": "assets/svg/TamilNadu.svg" + }, + "haryana": { + "id": "Harayana.html", + "name": "Haryana", + "dance": "Ghoomar", + "image": "assets/images/Haryana.jpeg", + "svg": "assets/svg/Harayana.svg" + }, + "punjab": { + "id": "punjab.html", + "name": "Punjab", + "dance": "Bhangra", + "image": "assets/images/punjab.jpg", + "svg": "assets/svg/punjab.svg" + }, + "tripura": { + "id": "Tripura.html", + "name": "Tripura", + "dance": "Hojagiri Dance", + "image": "assets/images/tripura.jpg", + "svg": "assets/svg/Tripura.svg" + }, + "uttarakhand": { + "id": "Uttarakhand.html", + "name": "Uttarakhand", + "dance": "Langvir Dance", + "image": "assets/images/uttarakhnad.jpeg", + "svg": "assets/svg/Uttarakhand.svg" + }, + "himachalpradesh": { + "id": "HimachalPradesh.html", + "name": "Himachal Pradesh", + "dance": "Nati Dance", + "image": "assets/images/himachal.jpg", + "svg": "assets/svg/HimachalPradesh.svg" + }, + "jammuandkashmir": { + "id": "Kashmir.html", + "name": "Jammu and Kashmir", + "dance": "Rauf Dance", + "image": "assets/images/kashmir.jpeg", + "svg": "assets/svg/Kashmir.svg" + }, + "westbengal": { + "id": "WestBengal.html", + "name": "West Bengal", + "dance": "Bhatiali", + "image": "assets/images/westbengal.jpg", + "svg": "assets/svg/WestBengal.svg" + }, + "jharkhand": { + "id": "Jharkhand.html", + "name": "Jharkhand", + "dance": "Chhau Dance", + "image": "assets/images/jharkhand.jpg", + "svg": "assets/svg/Jharkhand.svg" + } +} diff --git a/assets/svg/Andhra.svg b/assets/svg/Andhra.svg new file mode 100644 index 0000000..39cc20b --- /dev/null +++ b/assets/svg/Andhra.svg @@ -0,0 +1,11 @@ + + Andhra + + + + + \ No newline at end of file diff --git a/assets/svg/ArunachalPradesh.svg b/assets/svg/ArunachalPradesh.svg new file mode 100644 index 0000000..a1bfd4a --- /dev/null +++ b/assets/svg/ArunachalPradesh.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Bihar.svg b/assets/svg/Bihar.svg new file mode 100644 index 0000000..7eb508f --- /dev/null +++ b/assets/svg/Bihar.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Chhatisgarh.svg b/assets/svg/Chhatisgarh.svg new file mode 100644 index 0000000..816042e --- /dev/null +++ b/assets/svg/Chhatisgarh.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Delhi.svg b/assets/svg/Delhi.svg new file mode 100644 index 0000000..8e92c06 --- /dev/null +++ b/assets/svg/Delhi.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Goa.svg b/assets/svg/Goa.svg new file mode 100644 index 0000000..948353b --- /dev/null +++ b/assets/svg/Goa.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Gujrat.svg b/assets/svg/Gujrat.svg new file mode 100644 index 0000000..0858130 --- /dev/null +++ b/assets/svg/Gujrat.svg @@ -0,0 +1,14 @@ + + + + + + + \ No newline at end of file diff --git a/assets/svg/Harayana.svg b/assets/svg/Harayana.svg new file mode 100644 index 0000000..95d1cc6 --- /dev/null +++ b/assets/svg/Harayana.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/HimachalPradesh.svg b/assets/svg/HimachalPradesh.svg new file mode 100644 index 0000000..cd8110a --- /dev/null +++ b/assets/svg/HimachalPradesh.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Jharkhand.svg b/assets/svg/Jharkhand.svg new file mode 100644 index 0000000..7c2ba1a --- /dev/null +++ b/assets/svg/Jharkhand.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Karnataka.svg b/assets/svg/Karnataka.svg new file mode 100644 index 0000000..76131bc --- /dev/null +++ b/assets/svg/Karnataka.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Kashmir.svg b/assets/svg/Kashmir.svg new file mode 100644 index 0000000..f7d0e11 --- /dev/null +++ b/assets/svg/Kashmir.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Kerala.svg b/assets/svg/Kerala.svg new file mode 100644 index 0000000..83bccdc --- /dev/null +++ b/assets/svg/Kerala.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/MadhyaPradesh.svg b/assets/svg/MadhyaPradesh.svg new file mode 100644 index 0000000..e2edf4f --- /dev/null +++ b/assets/svg/MadhyaPradesh.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Maharashtra.svg b/assets/svg/Maharashtra.svg new file mode 100644 index 0000000..13233ff --- /dev/null +++ b/assets/svg/Maharashtra.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Manipur.svg b/assets/svg/Manipur.svg new file mode 100644 index 0000000..68c8223 --- /dev/null +++ b/assets/svg/Manipur.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Meghalaya.svg b/assets/svg/Meghalaya.svg new file mode 100644 index 0000000..ca84353 --- /dev/null +++ b/assets/svg/Meghalaya.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Mizoram.svg b/assets/svg/Mizoram.svg new file mode 100644 index 0000000..43855c3 --- /dev/null +++ b/assets/svg/Mizoram.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Nagaland.svg b/assets/svg/Nagaland.svg new file mode 100644 index 0000000..3dc1b77 --- /dev/null +++ b/assets/svg/Nagaland.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Odisha.svg b/assets/svg/Odisha.svg new file mode 100644 index 0000000..3b2a03a --- /dev/null +++ b/assets/svg/Odisha.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Rajasthan.svg b/assets/svg/Rajasthan.svg new file mode 100644 index 0000000..29f7885 --- /dev/null +++ b/assets/svg/Rajasthan.svg @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Sikkim.svg b/assets/svg/Sikkim.svg new file mode 100644 index 0000000..b8d7f59 --- /dev/null +++ b/assets/svg/Sikkim.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/TamilNadu.svg b/assets/svg/TamilNadu.svg new file mode 100644 index 0000000..ae5a962 --- /dev/null +++ b/assets/svg/TamilNadu.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Telangana.svg b/assets/svg/Telangana.svg new file mode 100644 index 0000000..cc552e1 --- /dev/null +++ b/assets/svg/Telangana.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Tripura.svg b/assets/svg/Tripura.svg new file mode 100644 index 0000000..331d428 --- /dev/null +++ b/assets/svg/Tripura.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/UttarPradesh.svg b/assets/svg/UttarPradesh.svg new file mode 100644 index 0000000..af8e7a3 --- /dev/null +++ b/assets/svg/UttarPradesh.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/Uttarakhand.svg b/assets/svg/Uttarakhand.svg new file mode 100644 index 0000000..bb1ea70 --- /dev/null +++ b/assets/svg/Uttarakhand.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/WestBengal.svg b/assets/svg/WestBengal.svg new file mode 100644 index 0000000..d392d13 --- /dev/null +++ b/assets/svg/WestBengal.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/assam.svg b/assets/svg/assam.svg new file mode 100644 index 0000000..549afdf --- /dev/null +++ b/assets/svg/assam.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/assets/svg/punjab.svg b/assets/svg/punjab.svg new file mode 100644 index 0000000..53ca51d --- /dev/null +++ b/assets/svg/punjab.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assigment.code-workspace b/assigment.code-workspace deleted file mode 100644 index 876a149..0000000 --- a/assigment.code-workspace +++ /dev/null @@ -1,8 +0,0 @@ -{ - "folders": [ - { - "path": "." - } - ], - "settings": {} -} \ No newline at end of file diff --git a/docs/India-map.png b/docs/India-map.png new file mode 100644 index 0000000..c3e007e Binary files /dev/null and b/docs/India-map.png differ diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..f89a4d0 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,54 @@ +# India Map Project + +This project is an interactive map of India that displays information about various states when hovered over or clicked. Each state is linked to a specific page that provides more detailed information, such as state-specific images and data. + +## Feature + +- **Interactive Map**: Hovering over each state highlights it and shows a popup with relevant information. +- **State-specific Information**: When a state is clicked, users are directed to a page with more detailed data. +- **Responsive Design**: The map is designed to be responsive, adapting to different screen sizes. +- **State Image and Name**: A popup appears with the name of the state and an image related to the state when hovered over. + +## Technologies Used + +- HTML5 +- CSS3 +- JavaScript +- SVG for the map graphics + +## Installation + +1. Clone the repository to your local machine: + ```bash + git clone https://github.com/AdityaSingh-7/State-Dances-of-India.git + ``` + +2. Navigate to the project directory: + ```bash + cd State Dances of India + ``` + +3. Open the `index.html` file in your browser to view the project. + +## How to Use + +1. Open the `index.html` file in a browser. +2. Hover over any state in the map to see a popup with the state's name and an image. +3. Click on a state to be redirected to the state's specific page. + +## Screenshots + +Here are some examples of the India Map and the popup in action: + +### Full Map + +![India Map](/docs/imdia-map.png) + + +## License + +This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details. + +## Contact + +If you have any questions or suggestions, feel free to create an issue or contact me via email: [adityakumarsingh710@gmail.com]. diff --git a/docs/State-Page.png b/docs/State-Page.png new file mode 100644 index 0000000..d1bc802 Binary files /dev/null and b/docs/State-Page.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..7dd5ca9 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Interactive India Map + + + + + +

Explore Dances Of India

+ + +
+ + + +
+ + +
+ × + + State Image + +
+ + +
+ +
+ + + + diff --git a/js-files/index.js b/js-files/index.js new file mode 100644 index 0000000..4e6b6d0 --- /dev/null +++ b/js-files/index.js @@ -0,0 +1,170 @@ +document.addEventListener('DOMContentLoaded', async () => { + const indiaSvg = document.getElementById('india-map'); + const popup = document.getElementById('state-popup'); + const popupStateName = document.getElementById('popup-state-name'); + const popupStateInfo = document.getElementById('popup-state-info'); + const popupStateImage = document.getElementById('popup-state-image'); + const closePopup = document.querySelector('.close-popup'); + const copyButton = document.querySelector('.copy-button'); + const seeMoreButton = document.getElementById('see-more-button'); + const homeButton = document.getElementById('home-button'); + + let statesData = {}; + + // 1. Fetch States Data + async function fetchStatesData() { + try { + const response = await fetch('assets/states.json'); + if (!response.ok) throw new Error('Failed to load state data'); + statesData = await response.json(); + } catch (error) { + console.error('Error fetching states data:', error); + alert('Unable to load states data. Please try again later.'); + } + } + + // 2. Load State SVGs Dynamically + async function loadStateSVGs() { + const statesGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + statesGroup.setAttribute('id', 'india-states'); + indiaSvg.setAttribute('viewBox', '0 0 1500 1800'); + + const loadPromises = Object.keys(statesData).map(async (stateKey) => { + const stateInfo = statesData[stateKey]; + try { + const response = await fetch(stateInfo.svg); + const svgText = await response.text(); + + // Parse SVG paths + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = svgText; + const statePaths = tempDiv.querySelectorAll('path'); + + statePaths.forEach((path) => { + const clonedPath = path.cloneNode(true); + clonedPath.setAttribute('data-state', stateKey); + addEventListenersToState(clonedPath, stateInfo); + statesGroup.appendChild(clonedPath); + }); + } catch (error) { + console.error(`Error loading SVG for ${stateKey}:`, error); + } + }); + + await Promise.all(loadPromises); + indiaSvg.appendChild(statesGroup); + } + + // 3. Add Event Listeners to States + function addEventListenersToState(path, stateInfo) { + const tooltip = document.createElement('div'); + tooltip.style.position = 'fixed'; + tooltip.style.backgroundColor = 'rgba(0,0,0,0.7)'; + tooltip.style.color = 'white'; + tooltip.style.padding = '10px 15px'; + tooltip.style.borderRadius = '4px'; + tooltip.style.display = 'none'; + tooltip.style.zIndex = '1000'; + tooltip.textContent = stateInfo.name; + document.body.appendChild(tooltip); + + path.style.fill = '#92ad5c'; + path.style.transition = 'fill 0.2s ease, transform 0.1s ease'; + path.style.cursor = 'pointer'; + + // Hover: Change color and show state name + path.addEventListener('mouseenter', (event) => { + path.style.fill = '#FFA500'; + path.style.transform = 'scale(1.02)'; + + const rect = event.target.getBoundingClientRect(); + tooltip.style.left = `${event.clientX + 50}px`; + tooltip.style.top = `${event.clientY + 50}px`; + tooltip.style.display = 'block'; + }); + + path.addEventListener('mouseleave', () => { + path.style.fill = '#aee38a'; + path.style.transform = 'scale(1)'; + tooltip.style.display = 'none'; + }); + + // Click: Show Popup + path.addEventListener('click', (event) => { + showPopup(event, stateInfo); + }); + } + + // 4. Show Popup Dynamically + function showPopup(event, stateInfo) { + const stateElement = event.target; + const stateRect = stateElement.getBoundingClientRect(); + + popupStateName.textContent = stateInfo.name; + popupStateInfo.innerHTML = `

State Dance: ${stateInfo.dance}

`; + popupStateImage.src = stateInfo.image || 'default-image.jpg'; + + // Configure "See More" button to redirect to state-specific page + seeMoreButton.onclick = () => { + window.location.href = `assets/statepages/${stateInfo.id}`; // Redirect to state page + }; + + // Position the popup + const popupRect = popup.getBoundingClientRect(); + let left = stateRect.left + window.scrollX + stateRect.width / 2 - popupRect.width / 2; + let top = stateRect.top + window.scrollY + stateRect.height + 10; + + if (left + popupRect.width > window.innerWidth) { + left = window.innerWidth - popupRect.width - 10; + } + if (left < 10) { + left = 10; + } + if (top + popupRect.height > window.innerHeight) { + top = stateRect.top + window.scrollY - popupRect.height - 20; + } + + popup.style.left = `${left}px`; + popup.style.top = `${top}px`; + popup.style.display = 'flex'; + popup.style.opacity = '1'; + } + + // 5. Hide Popup + function hidePopup() { + popup.style.display = 'none'; + popup.style.opacity = '0'; + } + + // Close Popup Event + closePopup.addEventListener('click', hidePopup); + + // Close Popup if clicked outside + window.addEventListener('click', (event) => { + if (event.target === popup) { + hidePopup(); + } + }); + + // 6. Copy Button Functionality + function copyToClipboard() { + const stateInfoText = `${popupStateName.textContent} - ${popupStateInfo.textContent}`; + navigator.clipboard.writeText(stateInfoText).then(() => { + alert('State information copied to clipboard!'); + }).catch((error) => { + console.error('Error copying text: ', error); + }); + } + + // Event listener for the copy button + copyButton.addEventListener('click', copyToClipboard); + + // 7. Initialize Map + async function initialize() { + popup.style.display = 'none'; + await fetchStatesData(); + await loadStateSVGs(); + } + + initialize(); +}); diff --git a/js-files/loadSVG.js b/js-files/loadSVG.js new file mode 100644 index 0000000..c6c1cbd --- /dev/null +++ b/js-files/loadSVG.js @@ -0,0 +1,13 @@ +async function loadStateSVG(svgPath) { + try { + const response = await fetch(svgPath); + if (!response.ok) throw new Error('SVG not found'); + const svgText = await response.text(); + + // Inject the SVG into the container + document.getElementById('state-svg').innerHTML = svgText; + } catch (error) { + console.error('Error loading state SVG:', error); + document.getElementById('state-svg').innerHTML = '

Unable to load state map.

'; + } + } \ No newline at end of file diff --git a/styles/Home-styles.css b/styles/Home-styles.css new file mode 100644 index 0000000..8955f4e --- /dev/null +++ b/styles/Home-styles.css @@ -0,0 +1,216 @@ +/* General Styles */ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + color: #333; + margin: 0; + padding: 0; + text-align: center; + min-height: 100vh; + justify-content: center; +} + +h1 { + font-size: 50px; + font-weight: 700; + color: #2c3e50; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + margin-bottom: 40px; + text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); + animation: fadeInDown 1s ease-out +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.map-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + max-width: 1200px; + margin: 40px auto; + position: relative; +} + +svg { + width: 100%; + height: auto; + max-width: 100%; +} + +/* Popup Styles */ +#state-popup { + display: none; + display: flex; + flex-direction: column; + position: absolute; + background-color: #fff; + padding: 20px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 8px; + max-width: 500px; + min-width: 400px; + z-index: 1000; + opacity: 0; + transition: opacity 0.3s ease; +} +@keyframes popupSlideIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +#state-popup img { + width: 100%; + max-height: 300px; + object-fit: cover; + aspect-ratio: 3/3; + border-radius: 8px; + margin-top: 10px; +} + +#popup-state-name { + font-size: 2.0rem; + font-weight: bold; +} + +#popup-state-info { + font-size: 1.5rem; + margin-top: 10px; +} + + +.copy-button { + background-color: #4CAF50; + color: white; + border: none; + padding: 18px 30px; + font-size: 1.5rem; + cursor: pointer; + border-radius: 10px; + margin-top: 2px; + margin-right: 35px; +} + +.copy-button:hover { + background-color: #45a049; +} + +.popup-buttons { + display: flex; + justify-content: space-between; + margin-top: 10px; +} + +#see-more-button{ + background-color: #007BFF; + color: white; + border: none; + padding: 18px 30px; + font-size: 1.5rem; + cursor: pointer; + border-radius: 10px; + margin-top: 20px; +} + +#see-more-button:hover, #home-button:hover { + background-color: #0056b3; +} + +/* Close Button in Popup */ +.close-popup { + position: absolute; + top: 5px; + right: 10px; + font-size: 2rem; + cursor: pointer; + color: #333; +} + +.close-popup:hover { + color: #ff0000; +} + +/* Tooltip Styles */ +.tooltip { + position: fixed; + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 10px 15px; + border-radius: 4px; + z-index: 1000; + display: none; +} + +/* Hover Effects for States in Map */ +path { + fill: #aee38a; + cursor: pointer; + transition: fill 0.2s ease, transform 0.1s ease; +} + +path:hover { + fill: #FFA500; + transform: scale(1.05); +} + + + /* Make Popup Responsive */ + @media (max-width: 768px) { + #state-popup { + width: 50%; + height: 50%; + min-width: unset; + max-width: unset; + padding: 5px; + top: auto; + + } + h1 { + font-size: 20px + } + + #popup-state-name { + font-size: 1.5rem; + } + + #popup-state-info { + font-size: 1rem; + } + + .popup-buttons { + flex-direction: column; + gap: 10px; + } + + .copy-button, + #see-more-button { + max-width: unset; + flex: unset; + font-size: 0.9rem; + + } + + #state-popup img { + max-height: 200px; + margin-top: 15px; + } + } + \ No newline at end of file diff --git a/styles/state-styles.css b/styles/state-styles.css new file mode 100644 index 0000000..65dac3f --- /dev/null +++ b/styles/state-styles.css @@ -0,0 +1,200 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: #2c3e50; + background-color: #f8f9fa; + min-height: 100vh; + line-height: 1.6; + } + + .home-button { + position: fixed; + top: 30px; + left: 30px; + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + background-color: #2c3e50; + color: white; + text-decoration: none; + border-radius: 50px; + font-weight: 500; + transition: all 0.3s ease; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + z-index: 100; + } + + .home-button:hover { + background-color: #34495e; + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + } + + .home-button svg { + fill: currentColor; + width: 20px; + height: 20px; + } + + h1 { + text-align: center; + font-size: 3rem; + color: #2c3e50; + margin: 80px 0 50px; + font-weight: 700; + position: relative; + } + + h1::after { + content: ''; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 4px; + background: linear-gradient(90deg, #2c3e50, #3498db); + border-radius: 2px; + } + + .main-container { + display: flex; + gap: 200px; + max-width:2000px; + margin: 0 auto; + padding: 20px; + + } + + #state-svg-container { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: white; + padding: 30px; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + height: 100%; + max-width: 800px; + } + + #state-svg-container h2 { + margin-bottom: 20px; + font-size: 2rem; + color: #2c3e50; + text-align: center; + } + + #state-svg { + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + + #state-svg svg { + width: 100%; + height: 100%; + } + + .right-content { + flex: 1; + display: flex; + flex-direction: column; + background: white; + padding: 30px; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + height: 100%; + max-width: 800px; + } + + .right-content img { + width: 100%; + height: 500px; + object-fit: cover; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + margin-bottom: 20px; + } + + .info-table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; + background: #ffffff; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); + } + + .info-table th, .info-table td { + padding: 15px; + border: 1px solid #eef2f7; + } + + .info-table th { + background: #3498db; + color: white; + text-align: left; + font-size: 1.2rem; + letter-spacing: 0.5px; + } + + .info-table tr:nth-child(even) { + background-color: #f8f9fa; + } + + .info-table tr:hover { + background-color: #f1f4f8; + } + + .info-table td:first-child { + font-weight: 600; + color: #2c3e50; + } + + .content-text a { + display: block; + text-align: center; + margin-top: 20px; + color: #3498db; + text-decoration: none; + font-weight: 500; + padding: 10px; + border-radius: 5px; + transition: all 0.3s ease; + } + + .content-text a:hover { + color: #2980b9; + background-color: #f8f9fa; + } + + @media (max-width: 768px) { + .main-container { + flex-direction: column; + height: auto; + gap: 30px; + } + + #state-svg-container, .right-content { + width: 100%; + max-width: none; + height: auto; + } + + .right-content img { + height: 250px; + } + } \ No newline at end of file