<div class="header">
<h1>Burç Hesaplama Programı</h1>
</div>
<div class="kutu-1">
<select name="slctgun" id="slctgun">
<script>
for (let gun = 1; gun <= 31; gun++) {
document.write("<option value='" + gun + "'>" + gun + "</option>");
}
</script>
</select>
<select name="slctay" id="slctay">
<script>
for (let ay = 1; ay <= 12; ay++) {
document.write("<option value='" + ay + "'>" + ay + "</option>");
}
</script>
</select>
<select name="slctyil" id="slctyil">
<script>
for (let yil = 1950; yil <= 2024; yil++) {
document.write("<option value='" + yil + "'>" + yil + "</option>");
}
</script>
</select>
</div>
<div class="button-container">
<button id="button" onclick="burchesapla()">Burç Hesapla</button>
<button id="clearButton" onclick="clearResult()">Sonucu Sil</button>
</div>
<div class="kutu-2" id="kutu-2"></div>
body {
background-color: black;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
min-height: 100vh;
}
.code-tabs {
display: flex;
justify-content: flex-start;
background-color: #333;
padding: 10px;
border-bottom: 2px solid #444;
border-radius: 9px;
}
.code-tabs button {
background: transparent;
border: none;
color: white;
font-size: 16px;
margin-right: 10px;
padding: 10px 15px;
cursor: pointer;
transition: background 0.3s ease;
}
.code-tabs button:hover {
background: #555;
border-radius: 9px;
}
.code-tabs button.active {
background: #444;
border-bottom: 2px solid #ff6347;
}
.code-tab {
display: none;
background-color: #1e1e1e;
color: #fff;
padding: 20px;
font-family: monospace;
font-size: 14px;
overflow-y: auto;
max-height: 300px; /* Gerektiğinde scroll için */
}
.code-tab.active {
display: block;
}
.code-tab pre {
white-space: pre-wrap;
word-wrap: break-word;
}
select {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
select:focus {
border-color: #ff6347;
outline: none;
}
.header {
text-align: center;
margin-bottom: 20px;
animation: fadeIn 2s ease-out;
}
.header h1 {
font-size: 36px;
color: #fff;
font-weight: bold;
background: linear-gradient(90deg, #ff7f50, #ff6347, #ff4500);
-webkit-background-clip: text;
background-clip: text;
padding: 10px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
letter-spacing: 2px;
animation: slideIn 1s ease-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.kutu-1 {
background-color: transparent;
border: 2px solid blue;
width: 90%;
max-width: 300px; /* Mobil cihazlar için daha geniş alan */
padding: 10px;
border-radius: 8px;
margin-bottom: 20px;
}
#button, #clearButton {
margin: 10px;
width: 150px;
height: 40px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
#button {
background-color: transparent;
border: 1px solid #fff;
color: white;
}
#clearButton {
background-color: transparent;
border: 1px solid #fff;
color: white;
}
#button:hover, #clearButton:hover {
background-color: #fff;
color: black;
transform: scale(1.05);
}
#button:active, #clearButton:active {
transform: scale(0.95);
}
.kutu-2 {
background-color: transparent;
width: 90%;
max-width: 300px;
height: 40px;
margin-top: 20px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #fff;
border: 3px solid #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
function burchesapla(){
let slctgun=document.getElementById("slctgun").value;
let slctay=document.getElementById("slctay").value;
document.getElementById("slctyil").value;
if((slctay==4 && slctgun<=20)||(slctay==3&&slctgun>=21))
document.getElementById("kutu-2").innerHTML="Koç Burcu";
else if ((slctay == 12 & slctgun >= 12) || (slctay == 1 & slctgun <= 20))
document.getElementById("kutu-2").innerHTML="Oğlak Burcu";
else if ((slctay == 9 & slctgun >= 22) || (slctay == 10 & slctgun <= 23))
document.getElementById("kutu-2").innerHTML="Terazi Burcu";
else if ((slctay == 1 & slctgun >= 21) || (slctay == 2 & slctgun <= 19))
document.getElementById("kutu-2").innerHTML="Kova Burcu";
else if ((slctay == 2 & slctgun >= 20) || (slctay == 3 & slctgun <= 20))
document.getElementById("kutu-2").innerHTML="Balık Burcu";
else if ((slctay == 4 & slctgun >= 21) || (slctay == 5 & slctgun <= 21))
document.getElementById("kutu-2").innerHTML="Boğa Burcu";
else if((slctay == 5 & slctgun >= 22) || (slctay == 6 & slctgun <= 21))
document.getElementById("kutu-2").innerHTML="İkizler Burcu";
else if ((slctay == 6 & slctgun >= 22) || (slctay == 7 & slctgun <= 23))
document.getElementById("kutu-2").innerHTML="Yengeç Burcu";
else if ((slctay == 7 & slctgun >= 24) || (slctay == 8 & slctgun <= 23))
document.getElementById("kutu-2").innerHTML="Aslan Burcu";
else if ((slctay == 8 & slctgun >= 24) || (slctay == 9 & slctgun <= 23))
document.getElementById("kutu-2").innerHTML="Başak Burcu";
else if ((slctay == 10 & slctgun >= 23) || (slctay == 11 & slctgun <= 22))
document.getElementById("kutu-2").innerHTML="Akrep Burcu";
else
document.getElementById("kutu-2").innerHTML="Yay Burcu";
}
function clearResult() {
document.getElementById("kutu-2").innerHTML = "";
document.getElementById("slctgun").selectedIndex = 0;
document.getElementById("slctay").selectedIndex = 0;
document.getElementById("slctyil").selectedIndex = 0;
}