Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact - Pranit Chilbule</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> | |
| <style> | |
| /* Import existing theme variables */ | |
| :root { | |
| --bg-primary: #0d1117; | |
| --bg-secondary: #010409; | |
| --bg-card: #21262d; | |
| --text-primary: #c9d1d9; | |
| --text-secondary: rgba(201, 209, 217, 0.8); | |
| --accent-blue: #58a6ff; | |
| --accent-green: #10a37f; | |
| --header-bg: rgba(0, 0, 0, 0.6); | |
| --border-color: #30363d; | |
| } | |
| /* Base styles */ | |
| body { | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: var(--header-bg); | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--accent-blue); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .nav-links a { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-links a:hover { | |
| color: var(--accent-blue); | |
| } | |
| /* Main container */ | |
| .main-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| max-width: 1000px; | |
| margin: 120px auto 4rem; | |
| padding: 0 2rem; | |
| } | |
| /* Contact Form Section */ | |
| .contact-section { | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| border-radius: 1rem; | |
| border: 1px solid var(--border-color); | |
| height: fit-content; | |
| } | |
| .section-title { | |
| font-size: 1.8rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--accent-blue); | |
| text-align: center; | |
| } | |
| .form-group { | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| position: absolute; | |
| left: 0.75rem; | |
| top: 0.75rem; | |
| color: var(--text-secondary); | |
| transition: all 0.3s ease; | |
| pointer-events: none; | |
| font-size: 0.9rem; | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 0.75rem; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| box-sizing: border-box; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--accent-blue); | |
| box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); | |
| } | |
| .form-input:focus + .form-label, | |
| .form-input:not(:placeholder-shown) + .form-label { | |
| transform: translateY(-1.5rem) scale(0.8); | |
| background: var(--bg-card); | |
| padding: 0 0.5rem; | |
| color: var(--accent-blue); | |
| } | |
| textarea.form-input { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 0.75rem; | |
| background: var(--accent-blue); | |
| color: white; | |
| border: none; | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .submit-btn:hover { | |
| background: #4a8fd6; | |
| transform: translateY(-2px); | |
| } | |
| /* Direct Contact Section */ | |
| .direct-contact { | |
| margin-top: 2rem; | |
| text-align: center; | |
| padding: 1.5rem; | |
| background: var(--bg-secondary); | |
| border-radius: 0.5rem; | |
| } | |
| .contact-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--accent-blue); | |
| text-decoration: none; | |
| margin: 0.5rem 0; | |
| transition: all 0.3s ease; | |
| } | |
| .contact-link:hover { | |
| color: var(--accent-green); | |
| } | |
| .download-section { | |
| margin-top: 1rem; | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .resume-btn, .csv-btn { | |
| padding: 0.75rem 1.5rem; | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 0.9rem; | |
| } | |
| .resume-btn { | |
| background: var(--accent-green); | |
| } | |
| .resume-btn:hover { | |
| background: #0c8a6a; | |
| transform: translateY(-2px); | |
| } | |
| .csv-btn { | |
| background: #f39c12; | |
| } | |
| .csv-btn:hover { | |
| background: #d68910; | |
| transform: translateY(-2px); | |
| } | |
| /* Resume Display Section */ | |
| .resume-section { | |
| background: var(--bg-card); | |
| border-radius: 1rem; | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| height: fit-content; | |
| } | |
| .resume-header { | |
| padding: 1rem 2rem; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .resume-viewer { | |
| width: 100%; | |
| height: 600px; | |
| border: none; | |
| background: white; | |
| } | |
| .view-toggle { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .toggle-btn { | |
| padding: 0.5rem 1rem; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.25rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-btn.active { | |
| background: var(--accent-blue); | |
| color: white; | |
| } | |
| .resume-placeholder { | |
| padding: 2rem; | |
| text-align: center; | |
| color: var(--text-secondary); | |
| background: var(--bg-secondary); | |
| border-radius: 0.5rem; | |
| margin: 1rem; | |
| } | |
| /* Success message */ | |
| .success-message { | |
| display: none; | |
| background: var(--accent-green); | |
| color: white; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| /* Animation classes */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.6s ease; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .main-container { | |
| margin-top: 100px; | |
| padding: 0 1rem; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .download-section { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <nav> | |
| <div class="logo">Pranit Chilbule</div> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="index.html"><i class="fas fa-house"></i> Home</a></li> | |
| <li><a href="about.html"><i class="fas fa-user"></i> About</a></li> | |
| <li><a href="projects.html"><i class="fas fa-code"></i> Projects</a></li> | |
| <li><a href="achievements.html"><i class="fas fa-trophy"></i> Achievements</a></li> | |
| <li><a href="contact.html"><i class="fas fa-envelope"></i> Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main class="main-container"> | |
| <!-- Resume Display Section --> | |
| <section class="resume-section fade-in"> | |
| <div class="resume-header"> | |
| <h2 class="section-title" style="margin: 0;">My Resume</h2> | |
| <div class="view-toggle"> | |
| <button class="toggle-btn active" onclick="toggleView('embed')">Embedded</button> | |
| <button class="toggle-btn" onclick="toggleView('link')">Link</button> | |
| </div> | |
| </div> | |
| <div id="embedView"> | |
| <iframe | |
| src="https://drive.google.com/file/d/1PTP4E5yEt6YSQ_E5fKlNicweDAP0RRAM/preview" | |
| class="resume-viewer" | |
| allow="autoplay"> | |
| </iframe> | |
| </div> | |
| <div id="linkView" style="display: none;"> | |
| <div class="resume-placeholder"> | |
| <h3>Resume Link Access</h3> | |
| <p>Click the button below to view my resume in a new tab:</p> | |
| <a href="https://drive.google.com/file/d/1PTP4E5yEt6YSQ_E5fKlNicweDAP0RRAM/view?usp=drive_link" | |
| target="_blank" class="resume-btn" style="display: inline-block; margin-top: 1rem;"> | |
| Open Resume in New Tab | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form Section --> | |
| <section class="contact-section fade-in"> | |
| <h2 class="section-title">Get In Touch</h2> | |
| <div id="successMessage" class="success-message"> | |
| Message sent successfully! Thank you for reaching out. | |
| </div> | |
| <form id="contactForm" onsubmit="handleSubmit(event)"> | |
| <div class="form-group"> | |
| <input type="text" id="name" class="form-input" placeholder=" " required> | |
| <label for="name" class="form-label">Name</label> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" id="email" class="form-input" placeholder=" " required> | |
| <label for="email" class="form-label">Email</label> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" id="subject" class="form-input" placeholder=" " required> | |
| <label for="subject" class="form-label">Subject</label> | |
| </div> | |
| <div class="form-group"> | |
| <textarea id="message" class="form-input" placeholder=" " required></textarea> | |
| <label for="message" class="form-label">Message</label> | |
| </div> | |
| <button type="submit" class="submit-btn">Send Message</button> | |
| </form> | |
| <div class="direct-contact"> | |
| <h3>Direct Contact</h3> | |
| <a href="tel:+919763059811" class="contact-link"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/> | |
| </svg> | |
| +91-9763059811 | |
| </a> | |
| <br> | |
| <a href="mailto:[email protected]" class="contact-link"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/> | |
| </svg> | |
| [email protected] | |
| </a> | |
| <div class="download-section"> | |
| <a href="https://drive.google.com/file/d/1PTP4E5yEt6YSQ_E5fKlNicweDAP0RRAM/view?usp=drive_link" | |
| target="_blank" class="resume-btn"> | |
| 📄 View Resume | |
| </a> | |
| <button onclick="downloadCSV()" class="csv-btn"> | |
| 📊 Download Responses | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| // Store form responses in memory (replaces localStorage) | |
| let formResponses = JSON.parse(localStorage.getItem('contactResponses') || '[]'); | |
| // Form submission handler | |
| function handleSubmit(event) { | |
| event.preventDefault(); | |
| const formData = { | |
| timestamp: new Date().toISOString(), | |
| name: document.getElementById('name').value, | |
| email: document.getElementById('email').value, | |
| subject: document.getElementById('subject').value, | |
| message: document.getElementById('message').value | |
| }; | |
| // Add to responses array | |
| formResponses.push(formData); | |
| // Save to localStorage | |
| localStorage.setItem('contactResponses', JSON.stringify(formResponses)); | |
| console.log('Form submitted:', formData); | |
| console.log('Total responses:', formResponses.length); | |
| // Show success message | |
| const successMsg = document.getElementById('successMessage'); | |
| successMsg.style.display = 'block'; | |
| setTimeout(() => { | |
| successMsg.style.display = 'none'; | |
| }, 5000); | |
| // Reset form | |
| event.target.reset(); | |
| } | |
| // Download CSV function | |
| function downloadCSV() { | |
| if (formResponses.length === 0) { | |
| alert('No responses to download yet!'); | |
| return; | |
| } | |
| // Create CSV content | |
| const headers = ['Timestamp', 'Name', 'Email', 'Subject', 'Message']; | |
| const csvContent = [ | |
| headers.join(','), | |
| ...formResponses.map(response => [ | |
| `"${response.timestamp}"`, | |
| `"${response.name}"`, | |
| `"${response.email}"`, | |
| `"${response.subject}"`, | |
| `"${response.message.replace(/"/g, '""')}"` | |
| ].join(',')) | |
| ].join('\n'); | |
| // Create and download file | |
| const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); | |
| const link = document.createElement('a'); | |
| const url = URL.createObjectURL(blob); | |
| link.setAttribute('href', url); | |
| link.setAttribute('download', `contact_responses_${new Date().toISOString().split('T')[0]}.csv`); | |
| link.style.visibility = 'hidden'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| // Toggle resume view | |
| function toggleView(viewType) { | |
| const embedView = document.getElementById('embedView'); | |
| const linkView = document.getElementById('linkView'); | |
| const buttons = document.querySelectorAll('.toggle-btn'); | |
| buttons.forEach(btn => btn.classList.remove('active')); | |
| if (viewType === 'embed') { | |
| embedView.style.display = 'block'; | |
| linkView.style.display = 'none'; | |
| buttons[0].classList.add('active'); | |
| } else { | |
| embedView.style.display = 'none'; | |
| linkView.style.display = 'block'; | |
| buttons[1].classList.add('active'); | |
| } | |
| } | |
| // Animation observer | |
| const observer = new IntersectionObserver( | |
| (entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, | |
| { threshold: 0.1 } | |
| ); | |
| document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); | |
| // Load existing responses count on page load | |
| window.addEventListener('load', () => { | |
| console.log(`Loaded ${formResponses.length} previous responses`); | |
| }); | |
| </script> | |
| </body> | |
| </html> |