Forum Discussion
Australian Sign Language
Here is the code for the alphabets:
<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AUSLAN Alphabet</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
box-sizing: border-box;
font-family: 'DM Sans', sans-serif;
}
.modal-overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
transform: scale(0.9);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
}
.modal-overlay.active .modal-content {
transform: scale(1);
opacity: 1;
}
.grid-card {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.2s ease;
position: relative;
overflow: hidden;
}
.grid-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.grid-card:hover::before {
opacity: 1;
}
.grid-card:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.4);
}
.grid-card:active {
transform: translateY(-4px) scale(1.02);
}
.image-container {
animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.letter-display {
animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
<style>@view-transition { navigation: auto; }</style>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
<script src="/_sdk/element_sdk.js" type="text/javascript"></script>
</head>
<body class="h-full">
<div class="h-full w-full overflow-auto" style="background-color: #8B5CF6;"><!-- Card Grid -->
<main class="max-w-5xl mx-auto px-4 py-12">
<div id="card-grid" class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-7 gap-3 md:gap-4"><!-- Cards generated by JS -->
</div>
</main><!-- Modal Overlay -->
<div id="modal-overlay" class="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4" style="background-color: rgba(26, 26, 26, 0.6);">
<div class="modal-content w-80 md:w-96 rounded-3xl shadow-2xl overflow-hidden" style="background-color: #FFFFFF;"><!-- Letter at top -->
<div class="letter-display flex items-center justify-center py-8 relative" style="background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);"><span id="modal-letter" class="text-8xl md:text-9xl font-bold relative z-10" style="color: #6366F1;">A</span>
<div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.3), transparent);"></div>
</div><!-- Image below -->
<div class="image-container w-full p-6 pt-0">
<div id="modal-image-container" class="w-full aspect-square flex items-center justify-center rounded-2xl overflow-hidden" style="background-color: #F0EFE9;"><!-- Image placeholder --> <span id="modal-image-placeholder" class="text-6xl font-medium" style="color: #BEBEBE;">A</span>
</div>
</div><!-- Go Back Button -->
<div class="p-6 pt-0"><button id="go-back-btn" class="w-full py-3 px-6 rounded-xl font-bold text-lg transition-all" style="background-color: #6366F1; color: white;" onmouseover="this.style.backgroundColor='#4F46E5'" onmouseout="this.style.backgroundColor='#6366F1'"> ← Go Back </button>
</div>
</div><!-- Close button --> <button id="close-modal" class="absolute top-6 right-6 w-10 h-10 rounded-full flex items-center justify-center transition-colors" style="background-color: rgba(255,255,255,0.2);" onmouseover="this.style.backgroundColor='rgba(255,255,255,0.3)'" onmouseout="this.style.backgroundColor='rgba(255,255,255,0.2)'">
<svg width="20" height="20" viewbox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
</svg></button>
</div>
</div>
<script>
// Alphabet data with AUSLAN images
const alphabetData = {
A: { image: 'https://o.quizlet.com/QZh54TZWHPUJ9jXquxllxw.png' },
B: { image: 'https://o.quizlet.com/Fa-i-UohJfPysVPafhcGRQ.png' },
C: { image: 'https://o.quizlet.com/dwuiRx5cvxVTyO.FCwdJsQ.png' },
D: { image: 'https://o.quizlet.com/OoBMRnTen6.nAa-bOmXStA.png' },
E: { image: 'https://o.quizlet.com/a8gXoROIncrzW4RFMDurYQ.png' },
F: { image: 'https://o.quizlet.com/BNMuCN9XO3uAiswxYMNt7A.png' },
G: { image: 'https://o.quizlet.com/UpxTxKYX2CbERcbC1w6bfQ.png' },
H: { image: 'https://o.quizlet.com/8B8vlQhJLjVpGpctp5mjcg.png' },
I: { image: 'https://o.quizlet.com/LnnmoMxQqcxym.c9aCeA1Q.png' },
J: { image: 'https://o.quizlet.com/XtgTNBauEz1gJ3ohlORolw.png' },
K: { image: 'https://o.quizlet.com/u8UtsMNQVzLI62jP-Jo6Nw.png' },
L: { image: 'https://o.quizlet.com/CeIBP93dpBy1IH8vvaZ2.g.png' },
M: { image: 'https://o.quizlet.com/m0kTQ6XYUjwodKzpF679nQ.png' },
N: { image: 'https://o.quizlet.com/I9SB0DhYVvvolDfVtzMUfA.png' },
O: { image: 'https://o.quizlet.com/NinvK-oAu8kbuLDx0N7YtQ.png' },
P: { image: 'https://o.quizlet.com/92HmcufwmV8KLSDt7lfjOg.png' },
Q: { image: 'https://o.quizlet.com/KZZkXV3nice2EB6icxOU4g.png' },
R: { image: 'https://o.quizlet.com/kxwzcYz9vlJCr5.-4RbX.Q.png' },
S: { image: 'https://o.quizlet.com/yVev1Ik2jxt1BzrTDv58NQ.png' },
T: { image: 'https://o.quizlet.com/IxAiSH1.Jlssn-Uglip-xg.png' },
U: { image: 'https://o.quizlet.com/.jYzruhZpYkaleECaoLbRQ.png' },
V: { image: 'https://o.quizlet.com/.AKpMs70PEM0qbyxjtQZdg.png' },
W: { image: 'https://o.quizlet.com/aWq0Jgt.u1AJh6fQHCKslw.png' },
X: { image: 'https://o.quizlet.com/XLCR66dR8ZSmwcOJNbyBKA.png' },
Y: { image: 'https://o.quizlet.com/McTAIuIuV6QRYkW2mMZ2XA.png' },
Z: { image: 'https://o.quizlet.com/htC7Hc2cRYNms8niY4IFPg.png' }
};
// Generate card grid
function generateCards() {
const grid = document.getElementById('card-grid');
grid.innerHTML = '';
Object.keys(alphabetData).forEach(letter => {
const card = document.createElement('div');
card.className = 'grid-card aspect-square rounded-2xl flex items-center justify-center cursor-pointer shadow-sm';
card.style.backgroundColor = '#FFFFFF';
card.dataset.letter = letter;
card.innerHTML = `<span class="text-2xl md:text-3xl font-semibold relative z-10" style="color: #6366F1">${letter}</span>`;
card.addEventListener('click', () => openModal(letter));
grid.appendChild(card);
});
}
// Modal functions
function openModal(letter) {
const modal = document.getElementById('modal-overlay');
const modalLetter = document.getElementById('modal-letter');
const imageContainer = document.getElementById('modal-image-container');
modalLetter.textContent = letter;
// Check if image exists for this letter
const letterData = alphabetData[letter];
if (letterData.image) {
imageContainer.innerHTML = `<img src="${letterData.image}" alt="AUSLAN sign for ${letter}" class="max-w-full max-h-full object-contain" loading="lazy" onerror="console.error('Image failed to load:', this.src); this.parentElement.innerHTML='<span class=\\'text-6xl font-medium\\' style=\\'color: #BEBEBE\\'>${letter}</span>';">`;
} else {
imageContainer.innerHTML = `<span class="text-6xl font-medium" style="color: #BEBEBE">${letter}</span>`;
}
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeModal() {
const modal = document.getElementById('modal-overlay');
modal.classList.remove('active');
document.body.style.overflow = '';
}
// Event listeners
document.getElementById('modal-overlay').addEventListener('click', (e) => {
if (e.target === document.getElementById('modal-overlay')) {
closeModal();
}
});
document.getElementById('close-modal').addEventListener('click', (e) => {
e.stopPropagation();
closeModal();
});
document.getElementById('go-back-btn').addEventListener('click', (e) => {
e.stopPropagation();
closeModal();
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeModal();
}
});
// Initialize
generateCards();
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9c5dfb37967ed72d',t:'MTc2OTc0NDc3Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>