Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chhatrapati Sambhaji Maharaj - Interactive Tribute</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #FF6B35; | |
| --secondary-color: #2E1000; | |
| --accent-color: #D4AF37; | |
| --light-color: #F5E6D3; | |
| --dark-color: #1A0500; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-color); | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); | |
| color: white; | |
| padding: 1.5rem 0; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .logo img { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| object-fit: cover; | |
| } | |
| .logo h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); | |
| } | |
| .anycoder-link { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| text-decoration: underline; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 1.5rem; | |
| } | |
| nav a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| transition: var(--transition); | |
| } | |
| nav a:hover, nav a.active { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), | |
| url('https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| color: white; | |
| text-align: center; | |
| padding: 5rem 1rem; | |
| position: relative; | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .hero h2 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| animation: fadeInDown 1s ease; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| animation: fadeInUp 1s ease; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border: none; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| } | |
| .btn:hover { | |
| background-color: #e55a2b; | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); | |
| } | |
| .section { | |
| padding: 4rem 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| display: block; | |
| width: 80px; | |
| height: 4px; | |
| background-color: var(--accent-color); | |
| margin: 1rem auto; | |
| border-radius: 2px; | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .about-img { | |
| text-align: center; | |
| } | |
| .about-img img { | |
| width: 100%; | |
| max-width: 400px; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .about-img img:hover { | |
| transform: scale(1.02); | |
| } | |
| .about-text { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| } | |
| .about-text h3 { | |
| color: var(--primary-color); | |
| margin-bottom: 1rem; | |
| font-size: 1.8rem; | |
| } | |
| .timeline { | |
| position: relative; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 2rem 0; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| width: 4px; | |
| background-color: var(--accent-color); | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| margin-left: -2px; | |
| } | |
| .timeline-item { | |
| padding: 1rem 2rem; | |
| position: relative; | |
| width: 50%; | |
| box-sizing: border-box; | |
| } | |
| .timeline-item::after { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--primary-color); | |
| border-radius: 50%; | |
| top: 20px; | |
| z-index: 1; | |
| } | |
| .timeline-item:nth-child(odd) { | |
| left: 0; | |
| } | |
| .timeline-item:nth-child(even) { | |
| left: 50%; | |
| } | |
| .timeline-item:nth-child(even)::after { | |
| left: -10px; | |
| } | |
| .timeline-item:nth-child(odd)::after { | |
| right: -10px; | |
| } | |
| .timeline-content { | |
| padding: 1.5rem; | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| top: -10px; | |
| } | |
| .timeline-content h3 { | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .timeline-content p { | |
| color: var(--dark-color); | |
| } | |
| .drawing-section { | |
| background-color: white; | |
| border-radius: 10px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| margin-top: 2rem; | |
| } | |
| .drawing-controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .drawing-controls button { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .color-picker { | |
| width: 30px; | |
| height: 30px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .brush-size { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| canvas { | |
| border: 2px solid #ddd; | |
| border-radius: 4px; | |
| width: 100%; | |
| height: 400px; | |
| touch-action: none; | |
| background-color: white; | |
| box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .gallery-item { | |
| background-color: white; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .gallery-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .gallery-img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .gallery-info { | |
| padding: 1rem; | |
| } | |
| .gallery-info h4 { | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| footer { | |
| background-color: var(--secondary-color); | |
| color: white; | |
| padding: 3rem 0 1rem; | |
| text-align: center; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-column h3 { | |
| color: var(--accent-color); | |
| margin-bottom: 1rem; | |
| font-size: 1.2rem; | |
| } | |
| .footer-column ul { | |
| list-style: none; | |
| } | |
| .footer-column li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-column a { | |
| color: white; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-column a:hover { | |
| color: var(--accent-color); | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .social-links a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| color: white; | |
| transition: var(--transition); | |
| } | |
| .social-links a:hover { | |
| background-color: var(--accent-color); | |
| transform: translateY(-3px); | |
| } | |
| .copyright { | |
| padding-top: 1rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .hero h2 { | |
| font-size: 2.5rem; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .timeline-item { | |
| width: 100%; | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| .timeline-item:nth-child(even) { | |
| left: 0; | |
| } | |
| .timeline::before { | |
| left: 2rem; | |
| } | |
| .timeline-item::after { | |
| left: 10px ; | |
| } | |
| } | |
| @keyframes fadeInDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 2000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| overflow: auto; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| margin: 5% auto; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 600px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .close { | |
| color: #aaa; | |
| float: right; | |
| font-size: 28px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .close:hover { | |
| color: var(--primary-color); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <a href="#" class="logo"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Chhatrapati_Sambhaji_Maharaj.jpg/800px-Chhatrapati_Sambhaji_Maharaj.jpg" alt="Chhatrapati Sambhaji Maharaj"> | |
| <h1>Chhatrapati Sambhaji Maharaj</h1> | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a> | |
| <nav> | |
| <ul> | |
| <li><a href="#home" class="active">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#timeline">Timeline</a></li> | |
| <li><a href="#drawing">Drawing</a></li> | |
| <li><a href="#gallery">Gallery</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="hero" id="home"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h2>Chhatrapati Sambhaji Maharaj</h2> | |
| <p>The Second Chhatrapati of the Maratha Empire and Son of the Great Chhatrapati Shivaji Maharaj</p> | |
| <a href="#about" class="btn">Learn More</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section" id="about"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>About Chhatrapati Sambhaji Maharaj</h2> | |
| </div> | |
| <div class="about-content"> | |
| <div class="about-img"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Chhatrapati_Sambhaji_Maharaj.jpg/800px-Chhatrapati_Sambhaji_Maharaj.jpg" alt="Chhatrapati Sambhaji Maharaj Portrait"> | |
| </div> | |
| <div class="about-text"> | |
| <h3>Early Life and Education</h3> | |
| <p>Sambhaji was born on 14 May 1657 at Purandar fort to Saibai, the first wife of Shivaji. His mother died when he was two years old and he was raised by his paternal grandmother Jijabai. At the age of nine, Sambhaji was sent to live with Raja Jai Singh I of Amber as a political hostage to ensure compliance of the Treaty of Purandar that Shivaji had signed with the Mughals on 11 June 1665.</p> | |
| <p>During his stay at the Mughal court, Sambhaji was exposed to military tactics and strategies which would later prove invaluable. He returned to the Maratha kingdom in 1669 after his father's escape from Agra.</p> | |
| <h3>Reign and Achievements</h3> | |
| <p>Sambhaji ascended the throne after his father's death in 1680. His reign was marked by continuous warfare with the Mughal Empire, the Portuguese, and the Siddis of Janjira. Despite facing immense challenges, Sambhaji expanded the Maratha empire and maintained its independence.</p> | |
| <p>He was known for his bravery, military acumen, and diplomatic skills. Sambhaji also promoted Sanskrit and Marathi literature, and was himself a poet and scholar.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section" id="timeline"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Historical Timeline</h2> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <h3>1657 - Birth</h3> | |
| <p>Sambhaji was born on 14 May 1657 at Purandar fort to Saibai and Shivaji.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <h3>1665 - Political Hostage</h3> | |
| <p>Sent to live with Raja Jai Singh I of Amber as part of the Treaty of Purandar.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <h3>1680 - Ascension to Throne</h3> | |
| <p>Sambhaji became the Chhatrapati after his father Shivaji's death.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <h3>1681 - Battle of Bhupalgarh</h3> | |
| <p>Defeated the Mughal forces led by Diler Khan in a significant victory.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <h3>1689 - Capture and Martyrdom</h3> | |
| <p>Captured by the Mughals after betrayal and executed on 11 March 1689.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <h3>Legacy</h3> | |
| <p>Remembered as a brave warrior and defender of the Maratha empire's independence.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section" id="drawing"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Interactive Drawing</h2> | |
| <p>Draw your tribute to Chhatrapati Sambhaji Maharaj</p> | |
| </div> | |
| <div class="drawing-section"> | |
| <div class="drawing-controls"> | |
| <button id="clear-btn"><i class="fas fa-trash"></i> Clear</button> | |
| <button id="color-btn"><i class="fas fa-palette"></i> Color</button> | |
| <input type="color" id="color-picker" class="color-picker" value="#FF6B35"> | |
| <div class="brush-size"> | |
| <i class="fas fa-paint-brush"></i> | |
| <input type="range" id="brush-size" min="1" max="50" value="5"> | |
| <span id="brush-value">5</span> | |
| </div> | |
| <button id="save-btn"><i class="fas fa-save"></i> Save</button> | |
| </div> | |
| <canvas id="drawing-canvas"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section" id="gallery"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Historical Gallery</h2> | |
| </div> | |
| <div class="gallery"> | |
| <div class="gallery-item"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Chhatrapati_Sambhaji_Maharaj.jpg/800px-Chhatrapati_Sambhaji_Maharaj.jpg" alt="Sambhaji Maharaj Portrait" class="gallery-img"> | |
| <div class="gallery-info"> | |
| <h4>Official Portrait</h4> | |
| <p>Traditional depiction of Chhatrapati Sambhaji Maharaj</p> | |
| </div> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Maratha Fort" class="gallery-img"> | |
| <div class="gallery-info"> | |
| <h4>Maratha Fort</h4> | |
| <p>Typical fort from the Maratha Empire era</p> | |
| </div> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Historical Battle" class="gallery-img"> | |
| <div class="gallery-info"> | |
| <h4>Battle Scene</h4> | |
| <p>Representation of Maratha warfare</p> | |
| </div> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Maratha Warrior" class="gallery-img"> | |
| <div class="gallery-info"> | |
| <h4>Maratha Warrior</h4> | |
| <p>Traditional Maratha soldier attire</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-column"> | |
| <h3>About</h3> | |
| <ul> | |
| <li><a href="#about">Chhatrapati Sambhaji</a></li> | |
| <li><a href="#timeline">Historical Timeline</a></li> | |
| <li><a href="#gallery">Gallery</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Interactive</h3> | |
| <ul> | |
| <li><a href="#drawing">Drawing Tool</a></li> | |
| <li><a href="#" id="learn-more">Learn More</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Connect</h3> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 Chhatrapati Sambhaji Maharaj Tribute. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modal for additional information --> | |
| <div id="info-modal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close">×</span> | |
| <h2>About This Application</h2> | |
| <p>This interactive tribute to Chhatrapati Sambhaji Maharaj features:</p> | |
| <ul> | |
| <li>Historical information about Sambhaji Maharaj</li> | |
| <li>Interactive timeline of key events</li> | |
| <li>Drawing canvas to create your own tribute</li> | |
| <li>Gallery of historical images</li> | |
| <li>Responsive design for all devices</li> | |
| </ul> | |
| <p>The drawing feature uses HTML5 Canvas API with JavaScript, providing a modern alternative to Python drawing libraries in a web environment.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Drawing Canvas functionality | |
| const canvas = document.getElementById('drawing-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const clearBtn = document.getElementById('clear-btn'); | |
| const colorBtn = document.getElementById('color-btn'); | |
| const colorPicker = document.getElementById('color-picker'); | |
| const brushSize = document.getElementById('brush-size'); | |
| const brushValue = document.getElementById('brush-value'); | |
| const saveBtn = document.getElementById('save-btn'); | |
| const learnMore = document.getElementById('learn-more'); | |
| // Set canvas size | |
| function resizeCanvas() { | |
| const section = document.querySelector('.drawing-section'); | |
| canvas.width = section.clientWidth; | |
| canvas.height = 400; | |
| // Clear canvas when resizing | |
| ctx.fillStyle = 'white'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| } | |
| window.addEventListener('load', resizeCanvas); | |
| window.addEventListener('resize', resizeCanvas); | |
| // Drawing variables | |
| let isDrawing = false; | |
| let lastX = 0; | |
| let lastY = 0; | |
| // Initialize canvas | |
| ctx.fillStyle = 'white'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.strokeStyle = colorPicker.value; | |
| ctx.lineJoin = 'round'; | |
| ctx.lineCap = 'round'; | |
| ctx.lineWidth = brushSize.value; | |
| // Drawing functions | |
| function draw(e) { | |
| if (!isDrawing) return; | |
| ctx.beginPath(); | |
| ctx.moveTo(lastX, lastY); | |
| ctx.lineTo(e.offsetX, e.offsetY); | |
| ctx.stroke(); | |
| [lastX, lastY] = [e.offsetX, e.offsetY]; | |
| } | |
| // Event listeners | |
| canvas.addEventListener('mousedown', (e) => { | |
| isDrawing = true; | |
| [lastX, lastY] = [e.offsetX, e.offsetY]; | |
| }); | |
| canvas.addEventListener('mousemove', draw); | |
| canvas.addEventListener('mouseup', () => isDrawing = false); | |
| canvas.addEventListener('mouseout', () => isDrawing = false); | |
| // Touch support | |
| canvas.addEventListener('touchstart', (e) => { | |
| isDrawing = true; | |
| const touch = e.touches[0]; | |
| [lastX, lastY] = [touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop]; | |
| e.preventDefault(); | |
| }); | |
| canvas.addEventListener('touchmove', (e) => { | |
| if (!isDrawing) return; | |
| const touch = e.touches[0]; | |
| draw({ | |
| offsetX: touch.clientX - canvas.offsetLeft, | |
| offsetY: touch.clientY - canvas.offsetTop | |
| }); | |
| e.preventDefault(); | |
| }); | |
| canvas.addEventListener('touchend', () => isDrawing = false); | |
| // Clear canvas | |
| clearBtn.addEventListener('click', () => { | |
| ctx.fillStyle = 'white'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| }); | |
| // Change color | |
| colorBtn.addEventListener('click', () => { | |
| colorPicker.click(); | |
| }); | |
| colorPicker.addEventListener('input', () => { | |
| ctx.strokeStyle = colorPicker.value; | |
| }); | |
| // Change brush size | |
| brushSize.addEventListener('input', () => { | |
| ctx.lineWidth = brushSize.value; | |
| brushValue.textContent = brushSize.value; | |
| }); | |
| // Save drawing | |
| saveBtn.addEventListener('click', () => { | |
| const link = document.createElement('a'); | |
| link.download = 'sambhaji-tribute.png'; | |
| link.href = canvas.toDataURL('image/png'); | |
| link.click(); | |
| }); | |
| // Modal functionality | |
| const modal = document.getElementById('info-modal'); | |
| const closeBtn = document.querySelector('.close'); | |
| learnMore.addEventListener('click', () => { | |
| modal.style.display = 'block'; | |
| }); | |
| closeBtn.addEventListener('click', () => { | |
| modal.style.display = 'none'; | |
| }); | |
| window.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.style.display = 'none'; | |
| } | |
| }); | |
| // Active navigation link | |
| window.addEventListener('scroll', () => { | |
| const sections = document.querySelectorAll('section'); | |
| const navLinks = document.querySelectorAll('nav a'); | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (scrollY >= (sectionTop - 200)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |