* {
font-family: 'Oswald', sans-serif;
}
body{
background: #c21500; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffc500, #c21500); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffc500, #c21500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.valuta{
display: flex;
margin-bottom: -17px;
margin-left: 19px;
}
#valuta_1{
height: 23px;
margin-top: 19px;
border: 1px solid black;
border-radius: 5px;
margin-left: 3px;
}
.p_v{
margin-left: 40px;
}
#valuta_2{
height: 23px;
margin-top: 19px;
border: 1px solid black;
border-radius: 5px;
margin-left: 3px;
}
.input_for{
margin-left: 20px;
display: inline-flex;
}
#equals{
width: 52px;
margin-top: 5px;
height: 56px;
margin-left: 10px;
}
#main_name{
text-align: center;
}
#number_for_konv{
width: 120px;
height: 30px;
border: 1px solid black;
border-radius: 5px;
}
#bt{
margin-left: 83px;
}
#button_main{
width: 200px;
height: 40px;
border: 1px solid black;
border-radius: 5px;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#button_main:hover {
background-color: #fe8952
}
#button_main:active {
background-color: #fe8952;
box-shadow: 0 5px #f59494;
transform: translateY(4px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Обменник курсов</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=Oswald:wght@300&display=swap" rel="stylesheet">
<script type="text/javascript" src="eel.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/favicon.png">
</head>
<body>
<h1 id="main_name">Конвертер валют</h1>
<div class="valuta">
<p>Выберите валюту</p>
<select name="valuta_1" id="valuta_1">
<option value="USD">USD</option>
<option value="BYN">BYN</option>
<option value="EUR">EUR</option>
<option value="RUB">RUB</option>
</select>
<p class="p_v">Выберите валюту</p>
<select name="valuta_2" id="valuta_2">
<option value="USD">USD</option>
<option value="BYN">BYN</option>
<option value="EUR">EUR</option>
<option value="RUB">RUB</option>
</select>
</div>
<div class="input_for">
<form action="../main.py" method="post">
<p><input id="number_for_konv" type="number" name="number" placeholder="Введите сумму"></p>
<img id="equals" src="img/equals.png" alt="">
<p>Итого : <output id="out"></output> </p>
</form>
</div>
<div id="bt">
<button id="button_main" type="submit">Рассчитать</button>
</div>
<script>
let valuta = document.getElementById('valuta');
let in_s = document.querySelector('#valuta_1');
let out_s = document.querySelector('#valuta_2');
document.querySelector("#button_main").onclick = function () {
eel.get_course(valuta,in_s,out_s)((x) => {
document.getElementById("out").innerHTML = x;
});
}
</script>
</body>
</html>