|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Input Form | Text to Exam (Vocabulary Exam Generator)</title> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
font-family: 'Rubik', sans-serif; |
|
background-color: #1B1B1B; |
|
color: #FFF7D0; |
|
font-size: 62.5%; |
|
box-sizing: border-box; |
|
} |
|
|
|
.container { |
|
padding: 3rem 3.4rem; |
|
background-color: #212529; |
|
border-radius: 24px; |
|
height: 50rem; |
|
width: 38rem; |
|
margin: 0 auto; |
|
margin-top: 4%; |
|
} |
|
|
|
h1 { |
|
font-size: 3.2rem; |
|
text-align: center; |
|
background-color: transparent; |
|
margin-bottom: .6rem; |
|
color: #FFE66C; |
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
width: .8rem; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
border-radius: 10px; |
|
|
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: #FFF7D0; |
|
border-radius: 10px; |
|
} |
|
|
|
.subtitle { |
|
background-color: transparent; |
|
font-size: 1.6rem; |
|
text-align: center; |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.docs-tutorial { |
|
padding: .6rem 32%; |
|
font-size: 1.6rem; |
|
text-decoration: none; |
|
border-radius: 10px; |
|
color: #FFE66C; |
|
background-color: #33363A; |
|
transition: .3s ease-out; |
|
} |
|
|
|
.docs-tutorial:hover { |
|
background-color: #FFE66C; |
|
color: #212529; |
|
} |
|
|
|
.form { |
|
margin-top: .8rem; |
|
background-color: transparent; |
|
width: 100%; |
|
} |
|
|
|
.textbox { |
|
border: 2px solid #FFF7D0; |
|
width: 100%; |
|
height: 20rem; |
|
background-color: transparent; |
|
padding: 1.1rem; |
|
font-size: 1.6rem; |
|
border-radius: 13px; |
|
margin: 1rem 0; |
|
} |
|
|
|
.level { |
|
font-size: 1.6rem; |
|
margin-right: .6rem; |
|
background-color: transparent; |
|
} |
|
|
|
.cefr { |
|
font-size: 1.6rem; |
|
border: 2px solid #FFF7D0; |
|
border-radius: 8px; |
|
padding: .7rem; |
|
width: 53.6%; |
|
background-color: transparent; |
|
} |
|
|
|
.generate { |
|
padding: .5rem; |
|
font-size: 2rem; |
|
border-radius: 20px; |
|
background-color: #FFF7D0; |
|
color: #212529; |
|
font-weight: 600; |
|
width: 100%; |
|
margin-top: 1rem; |
|
transition: .2s ease-out; |
|
} |
|
|
|
.generate:hover { |
|
background-color: #FFE66C; |
|
} |
|
|
|
.dev { |
|
background-color: transparent; |
|
padding: 1rem 3rem; |
|
width: 38rem; |
|
margin: 0 auto; |
|
margin-top: 10px; |
|
margin-bottom: 1.2%; |
|
border-radius: 40px; |
|
border: 1px solid #33363A; |
|
display: flex; |
|
flex-direction: row; |
|
font-size: 2.6rem; |
|
display: flex; |
|
justify-content: center; |
|
background-color: #212529; |
|
text-decoration: none; |
|
transition: .2s; |
|
} |
|
|
|
.dev:hover { |
|
|
|
border: 1px solid #FFF7D0; |
|
} |
|
|
|
.credit { |
|
width: fit-content; |
|
margin-right: 3px; |
|
background-color: transparent; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>T2E Vocabulary Exam Generator</h1> |
|
<p class="subtitle">Generate Vocabulary Exam from context.</p> |
|
<a class="docs-tutorial" target="_blank" href="https://scribehow.com/shared/How_to_use_T2E_Vocabulary_Exam_Generator__vyYu396JT_qZ0jKATVUqeQ">Docs & Tutorial</a> |
|
<form action="/process" method="POST" class="form"> |
|
<textarea name="text" id="text" cols="90" rows="30" class="textbox" placeholder="Enter text here (i.e. Computer is good.)"></textarea> |
|
<br> |
|
<label for="cefr_level" class="level">Select CEFR level :</label> |
|
<select name="cefr_level" id="cefr_level" class="cefr"> |
|
<option value="ALL">ALL</option> |
|
<option value="A1">A1</option> |
|
<option value="A2">A2</option> |
|
<option value="B1">B1</option> |
|
<option value="B2">B2</option> |
|
<option value="C1">C1</option> |
|
<option value="C2">C2</option> |
|
</select> |
|
<br> |
|
<button id="changeText" class="generate">Generate</button> |
|
</form> |
|
</div> |
|
<a href="https://nontgcob.com/" target="_blank" class="dev"> |
|
<p class="credit">Developed by Nutnornont Chamadol</p> |
|
</a> |
|
|
|
<script> |
|
const btn = document.getElementById('changeText'); |
|
|
|
|
|
btn.addEventListener('click', function() { |
|
btn.textContent = 'Generating exam...'; |
|
}); |
|
</script> |
|
</body> |
|
</html> |
