tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the thai page

Browse Source
This commit is contained in:
Triston Armstrong 2024-02-13 21:29:08 -06:00
parent c3ded3cf43
commit 2fd3530911
2 changed files with 60 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
pages/thai/index.tsx
View File

@ -11,6 +11,35 @@ const cardSpinningTimer = {
}; };
export default function Home() { export default function Home() {
return (
<>
<Head>
<title>Thai Stuff</title>
</Head>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(5, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
width: '100%',
gap: 8
}}>
<FlippyCard />
<div className='grey-round' style={{ gridColumn: '2 / span 4' }}>
<p></p>
</div>
<div style={{ gridRow: 2, gridColumn: '1 / span 5' }}>
<div className='grey-round' style={{ gridColumn: '1 / span 5' }}>
<p></p>
</div>
</div>
</div>
</>
)
}
function FlippyCard() {
const cardRef = useRef<HTMLDivElement>(null) const cardRef = useRef<HTMLDivElement>(null)
const [randomeLetter, setRandomLetter] = useState<LetterType>({ const [randomeLetter, setRandomLetter] = useState<LetterType>({
letter: 'ฮ', letter: 'ฮ',
@ -30,12 +59,7 @@ export default function Home() {
} }
return ( return (
<> <div className='card grey-round' ref={cardRef}>
<Head>
<title>Thai Stuff</title>
</Head>
<div className='card' ref={cardRef}>
<div> <div>
<p>{randomeLetter.letter}</p> <p>{randomeLetter.letter}</p>
<p>{randomeLetter.phono}</p> <p>{randomeLetter.phono}</p>
@ -53,7 +77,6 @@ export default function Home() {
}}>Next</button> }}>Next</button>
</div> </div>
</div> </div>
</>
) )
} }

28
styles/thai.css
View File

@ -1,22 +1,22 @@
.card { .grey-round {
position: absolute; padding: 2px;
top: calc(50% - 22rem);
left: calc(50% - 9rem);
width: 18rem;
height: 26rem;
padding: 10px;
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
border-radius: 10px; border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
border-right: 1px solid color(srgb 0.3784 0.4042 0.43); border-right: 1px solid color(srgb 0.3784 0.4042 0.43);
border-top: 1px solid color(srgb 0.3784 0.4042 0.43); border-top: 1px solid color(srgb 0.3784 0.4042 0.43);
} }
.card {
width: 10rem;
height: 14rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.card > div > p:first-of-type { .card > div > p:first-of-type {
font-size: 8rem; font-size: 4rem;
margin: 0; margin: 0;
color: #bfcedd; color: #bfcedd;
text-shadow: -4px 3px 7px #121316; text-shadow: -4px 3px 7px #121316;
@ -33,10 +33,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0; padding: 4px;
margin: 0; margin: 0;
gap: 2px; gap: 2px;
font-size: 1.6rem; font-size: 0.8rem;
} }
.card > .buttons > button { .card > .buttons > button {