Spaces:
Sleeping
Sleeping
body { | |
font-family: Arial, sans-serif; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
} | |
h1 { | |
margin-bottom: 20px; | |
} | |
a { | |
color: #007bff; | |
} | |
#hiraganaBoxes { | |
display: grid; | |
grid-template-columns: repeat(10, 1fr); | |
grid-gap: 10px; | |
margin: 20px 0; | |
} | |
.hiraganaBox { | |
border: 1px solid #333; | |
padding: 10px; | |
margin: 0 10px; | |
cursor: pointer; | |
border-radius: 0.5rem; | |
font-weight: bold; | |
width: 2rem; | |
text-align: center; | |
} | |
.hiraganaBox:hover { | |
background-color: lightblue; | |
} | |
.hiraganaBox.selected { | |
background-color: rgb(106, 96, 250); | |
} | |
#canvas { | |
border: 1px solid #333; | |
display: block; | |
margin: 0 auto 20px; | |
border-radius: 0.5rem; | |
} | |
.btn { | |
background-color: #007bff; | |
border: none; | |
color: #fff; | |
padding: 10px 20px; | |
font-size: 16px; | |
cursor: pointer; | |
margin: 0.5rem 0; | |
border-radius: 5px; | |
} | |
.btn:hover { | |
background-color: #0056b3; | |
} | |
#predictionResult { | |
margin-top: 20px; | |
font-size: 18px; | |
} | |
dialog { | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
background-color: white; | |
border: 1px solid #333; | |
padding: 20px; | |
} | |
dialog img { | |
max-width: 100%; | |
height: auto; | |
} | |
dialog button { | |
margin-top: 10px; | |
} | |