Bunu deneyin hocam. Scriptte hata var onu da düzenlemeniz gerekiyor.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='tr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[/* ]]></b:skin>
<style id='css'>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
overflow: hidden;
flex-direction: column;
font-family: 'Arial', sans-serif;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#controls {
position: absolute;
bottom: 20px;
display: flex;
gap: 20px;
align-items: center;
background-color: #ecf0f1;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.counter {
margin: 0;
font-size: 1.2em;
font-weight: bold;
}
.colorLabel {
margin-right: 10px;
font-size: 1em;
}
button, select, input[type="color"] {
padding: 10px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
button {
background-color: #3498db;
color: white;
}
button:hover {
background-color: #2980b9;
}
select {
background-color: #bdc3c7;
color: #2c3e50;
}
input[type="color"] {
border: none;
padding: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<div id='ball'/>
<div id='controls'>
<label class='colorLabel' for='colorPickerBall'>Top Rengi</label>
<input id='colorPickerBall' title='Top Rengi Seç' type='color'/>
<label class='colorLabel' for='colorPickerBg'>Arka Plan Rengi</label>
<input id='colorPickerBg' title='Arka Plan Rengi Seç' type='color'/>
<button id='startStopButton'>Durdur/Başlat</button>
<select id='speedSelector' title='Hız Seç'>
<option value='1'>Hız 1</option>
<option value='2'>Hız 2</option>
<option value='3'>Hız 3</option>
<option value='4'>Hız 4</option>
<option value='5'>Hız 5</option>
<option value='6'>Hız 6</option>
<option value='7'>Hız 7</option>
<option value='8'>Hız 8</option>
<option value='9'>Hız 9</option>
<option value='10'>Hız 10</option>
</select>
<p class='counter' id='movementCounter'>0</p>
<p class='counter' id='setCounter'>Set: 0</p>
</div>
<script>
<!-- js kodları buraya gelecek. -->
</script>
</body>
<b:section class='bos' id='bos' showaddelement='no'/>
</html>