155 lines
6.6 KiB
HTML
155 lines
6.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Technical Turbulence - Team{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<body>
|
|
<div class="contributors">
|
|
<div class="team-info">
|
|
<div class="stats-container" id="stats2">
|
|
<h1 class="heading"><span class="emoji stats">Our stats</span></h1>
|
|
<hr>
|
|
|
|
<div class="stats-cards">
|
|
<div class="stats-card">
|
|
<h1 class="stats-card-header">2</h1>
|
|
<p class="stats-card-info">year of robotics</p>
|
|
</div>
|
|
<div class="stats-card">
|
|
<h1 class="stats-card-header">2</h1>
|
|
<p class="stats-card-info">awards this season</p>
|
|
</div>
|
|
<div class="stats-card">
|
|
<h1 class="stats-card-header">7</h1>
|
|
<p class="stats-card-info">total awards won</p>
|
|
</div>
|
|
<div class="stats-card">
|
|
<h1 class="stats-card-header">9</h1>
|
|
<p class="stats-card-info">team members</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="stats-button" onclick="window.location.href = '{{ url_for('competitions') }}' ; ">View
|
|
our log</button>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<h1 class="heading"><span class="emoji sponsors" id="team">Our mentor and coach</span></h1>
|
|
<hr>
|
|
<p class="info">❤️ meet our amazing coach and mentor! ❤️</p>
|
|
<div class="members-container">
|
|
<div class="member-card">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/default.jpg') }}">
|
|
<h2 class="member-name">Mr. Kruger</h2>
|
|
<p class="member-role">COACH / MENTOR</p>
|
|
</div>
|
|
</div>
|
|
<h1 class="heading"><span class="emoji team" id="team">Our team</span></h1>
|
|
<hr>
|
|
<p class="info">⭐ meet our amazing team! ⭐</p>
|
|
|
|
<div class="members-container">
|
|
|
|
<div class="member-card" id="hardware">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/default.jpg') }}">
|
|
<h2 class="member-name">Samuel</h2>
|
|
<p class="member-role">HARDWARE</p>
|
|
</div>
|
|
<div class="member-card" id="hardware">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/anish.png') }}">
|
|
<h2 class="member-name">Anish</h2>
|
|
<p class="member-role">HARDWARE</p>
|
|
</div>
|
|
<div class="member-card" id="hardware">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/default.jpg') }}">
|
|
<h2 class="member-name">Daniel</h2>
|
|
<p class="member-role">HARDWARE</p>
|
|
</div>
|
|
<div class="member-card" id="hardware">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/default.jpg') }}">
|
|
<h2 class="member-name">Stephen</h2>
|
|
<p class="member-role">HARDWARE</p>
|
|
</div>
|
|
<div class="member-card" id="software">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/new-keshav.png') }}">
|
|
<h2 class="member-name">Keshav</h2>
|
|
<p class="member-role">SOFTWARE</p>
|
|
</div>
|
|
<div class="member-card" id="software">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/sujay.png') }}">
|
|
<h2 class="member-name">Sujay</h2>
|
|
<p class="member-role">SOFTWARE</p>
|
|
</div>
|
|
<div class="member-card" id="software">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/abhi.png') }}">
|
|
<h2 class="member-name">Abhiram</h2>
|
|
<p class="member-role">SOFTWARE</p>
|
|
</div>
|
|
<div class="member-card" id="hardware">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/default.jpg') }}">
|
|
<h2 class="member-name">Caitlin</h2>
|
|
<p class="member-role">ALUMNI; HARDWARE</p>
|
|
</div>
|
|
<div class="member-card" id="software">
|
|
<img class="member-image" src="{{ url_for('static', filename='images/default.jpg') }}">
|
|
<h2 class="member-name">Krith</h2>
|
|
<p class="member-role">OUTREACH</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function createConfetti(emoji, originX, originY) {
|
|
const confettiCount = 40;
|
|
for (let i = 0; i < confettiCount; i++) {
|
|
let confetti = document.createElement("div");
|
|
confetti.innerHTML = emoji;
|
|
confetti.style.position = "fixed";
|
|
confetti.style.left = `${originX}px`;
|
|
confetti.style.top = `${originY}px`;
|
|
confetti.style.fontSize = `${Math.random() * 2 + 1.5}rem`;
|
|
confetti.style.pointerEvents = "none";
|
|
confetti.style.opacity = "0";
|
|
|
|
document.body.appendChild(confetti);
|
|
|
|
let angle = Math.random() * Math.PI * 2;
|
|
let velocityX = Math.cos(angle) * (Math.random() * window.innerWidth * 0.5);
|
|
let velocityY = -Math.abs(Math.sin(angle) * (Math.random() * window.innerHeight * 0.5));
|
|
|
|
let fallX = velocityX * 1.2;
|
|
let fallY = window.innerHeight;
|
|
|
|
|
|
confetti.animate([
|
|
{ transform: `translate(0, 0) scale(1)`, opacity: 0 },
|
|
{ transform: `translate(${velocityX}px, ${velocityY}px) scale(1.2)`, opacity: 1, offset: 0.2 },
|
|
{ transform: `translate(${fallX}px, ${fallY}px) scale(0.8)`, opacity: 0, offset: 1 }
|
|
], {
|
|
duration: 6000 + Math.random() * 1000,
|
|
easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
|
|
});
|
|
|
|
setTimeout(() => confetti.remove(), 7000);
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll("#software, #hardware").forEach(card => {
|
|
card.addEventListener("mouseenter", (event) => {
|
|
let emoji = card.id === "software" ? "😊" : "💩";
|
|
let rect = card.getBoundingClientRect();
|
|
let originX = event.clientX;
|
|
let originY = event.clientY;
|
|
createConfetti(emoji, originX, originY);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
{% endblock %} |