|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Braille Name Converter</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #6C63FF; |
|
|
--secondary: #FF6584; |
|
|
--dark: #423E7D; |
|
|
--light: #F8F9FA; |
|
|
--dot-active: #2C3E50; |
|
|
--dot-inactive: #e0e0e0; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 2rem; |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.container { |
|
|
background-color: white; |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
header { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.app-content { |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.input-section { |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
display: flex; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
input { |
|
|
flex: 1; |
|
|
padding: 1rem; |
|
|
border: 2px solid #e0e0e0; |
|
|
border-radius: 10px 0 0 10px; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
input:focus { |
|
|
outline: none; |
|
|
border-color: var(--primary); |
|
|
} |
|
|
|
|
|
button { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 0 2rem; |
|
|
border-radius: 0 10px 10px 0; |
|
|
font-size: 1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
button:hover { |
|
|
background-color: var(--dark); |
|
|
} |
|
|
|
|
|
.result-section { |
|
|
background-color: var(--light); |
|
|
border-radius: 10px; |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
min-height: 200px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.braille-container { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
flex-wrap: wrap; |
|
|
gap: 1.5rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.braille-character { |
|
|
width: 50px; |
|
|
height: 75px; |
|
|
position: relative; |
|
|
margin: 0 5px; |
|
|
} |
|
|
|
|
|
.braille-grid { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
grid-template-rows: repeat(3, 1fr); |
|
|
gap: 5px; |
|
|
padding: 5px; |
|
|
} |
|
|
|
|
|
.braille-dot-container { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.braille-dot { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
background-color: var(--dot-inactive); |
|
|
border-radius: 50%; |
|
|
transition: all 0.3s; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.braille-dot.active { |
|
|
background-color: var(--dot-active); |
|
|
transform: scale(1); |
|
|
animation: dot-appear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; |
|
|
animation-delay: calc(var(--delay) * 0.07s); |
|
|
} |
|
|
|
|
|
.braille-dot.active::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 4px; |
|
|
left: 4px; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background-color: white; |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
@keyframes dot-appear { |
|
|
0% { |
|
|
transform: scale(0) translateY(20px); |
|
|
opacity: 0; |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.1); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.braille-label { |
|
|
position: absolute; |
|
|
bottom: -20px; |
|
|
left: 0; |
|
|
right: 0; |
|
|
text-align: center; |
|
|
font-size: 0.8rem; |
|
|
color: var(--dark); |
|
|
opacity: 0; |
|
|
animation: fadeIn 0.3s forwards; |
|
|
animation-delay: calc(var(--delay) * 0.07s + 0.4s); |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(5px); } |
|
|
to { opacity: 0.7; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.guide-text { |
|
|
margin-top: 2rem; |
|
|
font-size: 0.9rem; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
footer { |
|
|
margin-top: 2rem; |
|
|
text-align: center; |
|
|
color: #666; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.app-content { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.braille-character { |
|
|
width: 40px; |
|
|
height: 60px; |
|
|
} |
|
|
|
|
|
.braille-dot { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header> |
|
|
<h1>Braille Name Converter</h1> |
|
|
<p>See your name in the Braille alphabet</p> |
|
|
</header> |
|
|
|
|
|
<div class="app-content"> |
|
|
<div class="input-section"> |
|
|
<div class="input-group"> |
|
|
<input type="text" id="nameInput" placeholder="Enter your name" autofocus> |
|
|
<button id="convertBtn">Convert</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="result-section"> |
|
|
<p id="resultText">Your name in Braille will appear here</p> |
|
|
<div id="brailleOutput" class="braille-container"></div> |
|
|
<p class="guide-text"> |
|
|
Braille represents letters with raised dots that can be read with fingertips. |
|
|
Each character uses a 2x3 grid (two columns with three rows each). |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer> |
|
|
<p>Created with ❤️ for accessibility | Standard English Braille Grade 1</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const nameInput = document.getElementById('nameInput'); |
|
|
const convertBtn = document.getElementById('convertBtn'); |
|
|
const brailleOutput = document.getElementById('brailleOutput'); |
|
|
const resultText = document.getElementById('resultText'); |
|
|
|
|
|
|
|
|
|
|
|
const brailleAlphabet = { |
|
|
'a': [true, false, false, false, false, false], |
|
|
'b': [true, false, true, false, false, false], |
|
|
'c': [true, true, false, false, false, false], |
|
|
'd': [true, true, false, true, false, false], |
|
|
'e': [true, false, false, true, false, false], |
|
|
'f': [true, true, true, false, false, false], |
|
|
'g': [true, true, true, true, false, false], |
|
|
'h': [true, false, true, true, false, false], |
|
|
'i': [false, true, true, false, false, false], |
|
|
'j': [false, true, true, true, false, false], |
|
|
'k': [true, false, false, false, true, false], |
|
|
'l': [true, false, true, false, true, false], |
|
|
'm': [true, true, false, false, true, false], |
|
|
'n': [true, true, false, true, true, false], |
|
|
'o': [true, false, false, true, true, false], |
|
|
'p': [true, true, true, false, true, false], |
|
|
'q': [true, true, true, true, true, false], |
|
|
'r': [true, false, true, true, true, false], |
|
|
's': [false, true, true, false, true, false], |
|
|
't': [false, true, true, true, true, false], |
|
|
'u': [true, false, false, false, true, true], |
|
|
'v': [true, false, true, false, true, true], |
|
|
'w': [false, true, true, true, false, true], |
|
|
'x': [true, true, false, false, true, true], |
|
|
'y': [true, true, false, true, true, true], |
|
|
'z': [true, false, false, true, true, true], |
|
|
' ': [false, false, false, false, false, false], |
|
|
'1': [true, false, false, false, false, false], |
|
|
'2': [true, false, true, false, false, false], |
|
|
'3': [true, true, false, false, false, false], |
|
|
'4': [true, true, false, true, false, false], |
|
|
'5': [true, false, false, true, false, false], |
|
|
'6': [true, true, true, false, false, false], |
|
|
'7': [true, true, true, true, false, false], |
|
|
'8': [true, false, true, true, false, false], |
|
|
'9': [false, true, true, false, false, false], |
|
|
'0': [false, true, true, true, false, false] |
|
|
}; |
|
|
|
|
|
convertBtn.addEventListener('click', convertToBraille); |
|
|
nameInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') convertToBraille(); |
|
|
}); |
|
|
|
|
|
function convertToBraille() { |
|
|
const name = nameInput.value.trim().toLowerCase(); |
|
|
if (!name) { |
|
|
resultText.textContent = 'Please enter a name to convert'; |
|
|
brailleOutput.innerHTML = ''; |
|
|
return; |
|
|
} |
|
|
|
|
|
resultText.textContent = `"${name}" in Braille:`; |
|
|
brailleOutput.innerHTML = ''; |
|
|
|
|
|
let delayCounter = 0; |
|
|
|
|
|
for (let i = 0; i < name.length; i++) { |
|
|
const char = name[i]; |
|
|
if (brailleAlphabet[char]) { |
|
|
createBrailleCharacter(char, delayCounter); |
|
|
delayCounter += 6; |
|
|
} else { |
|
|
|
|
|
createBrailleCharacter('?', delayCounter); |
|
|
delayCounter += 6; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function createBrailleCharacter(char, startDelay) { |
|
|
const pattern = brailleAlphabet[char] || brailleAlphabet[' ']; |
|
|
const charContainer = document.createElement('div'); |
|
|
charContainer.className = 'braille-character'; |
|
|
|
|
|
const grid = document.createElement('div'); |
|
|
grid.className = 'braille-grid'; |
|
|
charContainer.appendChild(grid); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 6; i++) { |
|
|
const dotContainer = document.createElement('div'); |
|
|
dotContainer.className = 'braille-dot-container'; |
|
|
|
|
|
const dot = document.createElement('div'); |
|
|
dot.className = 'braille-dot'; |
|
|
|
|
|
if (pattern[i]) { |
|
|
dot.classList.add('active'); |
|
|
dot.style.setProperty('--delay', startDelay + i); |
|
|
} |
|
|
|
|
|
dotContainer.appendChild(dot); |
|
|
grid.appendChild(dotContainer); |
|
|
} |
|
|
|
|
|
|
|
|
const label = document.createElement('div'); |
|
|
label.className = 'braille-label'; |
|
|
label.textContent = char === ' ' ? 'space' : char.toUpperCase(); |
|
|
label.style.setProperty('--delay', startDelay); |
|
|
charContainer.appendChild(label); |
|
|
|
|
|
brailleOutput.appendChild(charContainer); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const sample = "hello"; |
|
|
resultText.textContent = `"${sample}" in Braille:`; |
|
|
brailleOutput.innerHTML = ''; |
|
|
|
|
|
for (let i = 0; i < sample.length; i++) { |
|
|
createBrailleCharacter(sample[i], i * 6); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
resultText.textContent = 'Your name in Braille will appear here'; |
|
|
brailleOutput.innerHTML = ''; |
|
|
}, 3000); |
|
|
}, 1000); |
|
|
}); |
|
|
</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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
