| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Engineer ID Card</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&display=swap'); |
| |
| :root { |
| --primary: #3b82f6; |
| --secondary: #10b981; |
| --dark: #1e293b; |
| --light: #f8fafc; |
| } |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background: linear-gradient(135deg, #f0f9ff, #e0f2fe); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 20px; |
| } |
| |
| .id-card { |
| width: 400px; |
| background: white; |
| border-radius: 15px; |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); |
| overflow: hidden; |
| position: relative; |
| transition: transform 0.3s ease; |
| } |
| |
| .id-card:hover { |
| transform: translateY(-10px); |
| } |
| |
| .id-header { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| color: white; |
| padding: 20px; |
| text-align: center; |
| position: relative; |
| } |
| |
| .id-header h1 { |
| font-family: 'Orbitron', sans-serif; |
| font-size: 24px; |
| margin: 0; |
| letter-spacing: 1px; |
| } |
| |
| .id-header p { |
| font-size: 14px; |
| opacity: 0.9; |
| margin: 5px 0 0; |
| } |
| |
| .id-body { |
| padding: 25px; |
| position: relative; |
| } |
| |
| .photo-container { |
| width: 120px; |
| height: 120px; |
| border-radius: 50%; |
| border: 5px solid white; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| overflow: hidden; |
| position: absolute; |
| top: -60px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: #e2e8f0; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .photo-container:hover { |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); |
| } |
| |
| .photo-container img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| |
| .photo-placeholder { |
| font-size: 40px; |
| color: #94a3b8; |
| } |
| |
| .photo-upload { |
| display: none; |
| } |
| |
| .details { |
| margin-top: 70px; |
| text-align: center; |
| } |
| |
| .name { |
| font-size: 22px; |
| font-weight: 700; |
| color: var(--dark); |
| margin-bottom: 5px; |
| } |
| |
| .title { |
| color: var(--primary); |
| font-weight: 600; |
| margin-bottom: 15px; |
| font-size: 16px; |
| } |
| |
| .info-item { |
| display: flex; |
| align-items: center; |
| margin-bottom: 12px; |
| padding-bottom: 12px; |
| border-bottom: 1px solid #e2e8f0; |
| } |
| |
| .info-item:last-child { |
| border-bottom: none; |
| margin-bottom: 0; |
| padding-bottom: 0; |
| } |
| |
| .info-icon { |
| width: 30px; |
| color: var(--primary); |
| font-size: 18px; |
| } |
| |
| .info-content { |
| flex: 1; |
| text-align: left; |
| font-size: 14px; |
| } |
| |
| .info-label { |
| font-weight: 600; |
| color: var(--dark); |
| } |
| |
| .info-value { |
| color: #64748b; |
| } |
| |
| .linkedin-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| background: #0a66c2; |
| color: white; |
| padding: 10px 20px; |
| border-radius: 50px; |
| margin-top: 20px; |
| text-decoration: none; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| } |
| |
| .linkedin-btn:hover { |
| background: #004182; |
| transform: translateY(-2px); |
| } |
| |
| .linkedin-icon { |
| margin-right: 8px; |
| font-size: 18px; |
| } |
| |
| .id-footer { |
| background: #f1f5f9; |
| padding: 15px; |
| text-align: center; |
| font-size: 12px; |
| color: #64748b; |
| } |
| |
| .qr-code { |
| width: 80px; |
| height: 80px; |
| background: #e2e8f0; |
| margin: 0 auto 10px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| color: #64748b; |
| font-size: 12px; |
| } |
| |
| .tech-icons { |
| display: flex; |
| justify-content: center; |
| gap: 15px; |
| margin-top: 15px; |
| } |
| |
| .tech-icon { |
| font-size: 24px; |
| color: var(--primary); |
| } |
| |
| .badge { |
| position: absolute; |
| top: 15px; |
| right: 15px; |
| background: #f59e0b; |
| color: white; |
| padding: 5px 10px; |
| border-radius: 20px; |
| font-size: 12px; |
| font-weight: 600; |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="id-card"> |
| <div class="badge">AI ENGINEER</div> |
| <div class="id-header"> |
| <h1>TECHNOVA AI</h1> |
| <p>Machine Learning & Artificial Intelligence Division</p> |
| </div> |
| |
| <div class="id-body"> |
| <div class="photo-container" id="photoContainer"> |
| <div class="photo-placeholder"> |
| <i class="fas fa-user"></i> |
| </div> |
| <input type="file" id="photoUpload" class="photo-upload" accept="image/*"> |
| </div> |
| |
| <div class="details"> |
| <div class="name">Matthew Eyesan</div> |
| <div class="title">Senior AI/ML Engineer</div> |
| |
| <div class="info-item"> |
| <div class="info-icon"> |
| <i class="fas fa-id-card"></i> |
| </div> |
| <div class="info-content"> |
| <div class="info-label">Employee ID</div> |
| <div class="info-value">ML-2023-0421</div> |
| </div> |
| </div> |
| |
| <div class="info-item"> |
| <div class="info-icon"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div class="info-content"> |
| <div class="info-label">Email</div> |
| <div class="info-value">m.eyesan@technova.ai</div> |
| </div> |
| </div> |
| |
| <div class="info-item"> |
| <div class="info-icon"> |
| <i class="fas fa-calendar-alt"></i> |
| </div> |
| <div class="info-content"> |
| <div class="info-label">Joined</div> |
| <div class="info-value">April 21, 2023</div> |
| </div> |
| </div> |
| |
| <div class="tech-icons"> |
| <i class="fab fa-python tech-icon" title="Python"></i> |
| <i class="fas fa-brain tech-icon" title="Machine Learning"></i> |
| <i class="fas fa-robot tech-icon" title="AI"></i> |
| <i class="fas fa-chart-line tech-icon" title="Data Science"></i> |
| </div> |
| |
| <a href="https://www.linkedin.com/in/matthew-eyesan" target="_blank" class="linkedin-btn"> |
| <i class="fab fa-linkedin linkedin-icon"></i> |
| LinkedIn Profile |
| </a> |
| </div> |
| </div> |
| |
| <div class="id-footer"> |
| <div class="qr-code"> |
| Scan for verification |
| </div> |
| <div>This ID must be worn visibly at all times</div> |
| <div class="text-xs mt-2">© 2023 Technova AI. All rights reserved.</div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const photoContainer = document.getElementById('photoContainer'); |
| const photoUpload = document.getElementById('photoUpload'); |
| |
| |
| photoContainer.addEventListener('click', function() { |
| photoUpload.click(); |
| }); |
| |
| photoUpload.addEventListener('change', function(e) { |
| if (e.target.files.length > 0) { |
| const file = e.target.files[0]; |
| const reader = new FileReader(); |
| |
| reader.onload = function(event) { |
| |
| const placeholder = photoContainer.querySelector('.photo-placeholder'); |
| if (placeholder) { |
| photoContainer.removeChild(placeholder); |
| } |
| |
| |
| let img = photoContainer.querySelector('img'); |
| if (!img) { |
| img = document.createElement('img'); |
| photoContainer.appendChild(img); |
| } |
| |
| img.src = event.target.result; |
| }; |
| |
| reader.readAsDataURL(file); |
| |
| |
| alert('Profile photo updated successfully!'); |
| } |
| }); |
| |
| |
| const techIcons = document.querySelectorAll('.tech-icon'); |
| techIcons.forEach(icon => { |
| icon.addEventListener('mouseenter', function() { |
| this.style.transform = 'scale(1.2)'; |
| this.style.transition = 'transform 0.2s ease'; |
| }); |
| |
| icon.addEventListener('mouseleave', function() { |
| this.style.transform = 'scale(1)'; |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mackin7/id" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
