|
|
<!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> |
