ALLL
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>TL - Dolar & Euro Hesaplayıcı</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* Yukarıya hizalandı */
text-align: center;
}
h2 {
font-size: 40px;
text-transform: uppercase;
margin-top: 50px; /* Yukarıda biraz boşluk */
margin-bottom: 20px;
}
input[type="number"] {
font-size: 36px;
padding: 15px;
width: 300px;
text-align: center;
margin-bottom: 30px;
}
p {
font-size: 40px;
text-transform: uppercase;
margin: 10px 0;
}
#usd {
color: blue;
}
#eur {
color: red;
}
span {
font-weight: bold;
}
/* İmza için stil */
.imza {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 20px; /* Küçültülmüş yazı boyutu */
font-family: 'Arial', sans-serif;
color: red; /* Kırmızı renk */
text-transform: capitalize; /* İlk harf büyük, diğerleri küçük */
}
/* Sol alt köşe yazısı için stil */
.not {
position: fixed;
bottom: 20px;
left: 20px;
font-size: 18px;
font-family: 'Arial', sans-serif;
color: orange; /* Turuncu renk */
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>TL Tutarı Girin:</h2>
<input type="number" id="tl" placeholder="ÖRN: 850" oninput="hesapla()">
<p><strong>Dolar:</strong> <span id="usd">0.00</span> USD</p>
<p><strong>Euro:</strong> <span id="eur">0.00</span> EUR</p>
<script>
function hesapla() {
const tl = parseFloat(document.getElementById("tl").value);
if (!isNaN(tl)) {
document.getElementById("usd").innerText = (tl / 37).toFixed(2);
document.getElementById("eur").innerText = (tl / 41).toFixed(2);
} else {
document.getElementById("usd").innerText = "0.00";
document.getElementById("eur").innerText = "0.00";
}
}
</script>
<!-- İmza -->
<div class="imza">Berat</div>
<!-- Sol köşe açıklaması -->
<div class="not">Euro 41'den, Dolar 37'den hesaplanmıştır</div>
</body>
</html>