Buyrun hocam boş blogger teması. HTML kodlarınızı body etiketleri arasına ekleyin. Sayfada sadece sizin kodlarınız çalışacaktır.
<?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">
<!-- CSS kodlarını buraya ekleyin. -->
</style>
</head>
<body>
<!-- HTML kodlarını buraya ekleyin. -->
</body>
<b:section class="bos" id="bos" showaddelement="no" />
</html>
hocam yardımınız için öncelikle teşekkür ederim css kısmı çalıştı html kısmını yapınca hata veriyor. Eklemek istediğim kod bu nerede hata yapıyor olabiirim?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Hareketi</title>
<style>
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>
<div id="controls">
<label class="colorLabel" for="colorPickerBall">Top Rengi</label>
<input type="color" id="colorPickerBall" title="Top Rengi Seç">
<label class="colorLabel" for="colorPickerBg">Arka Plan Rengi</label>
<input type="color" id="colorPickerBg" title="Arka Plan Rengi Seç">
<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>
const ball = document.getElementById('ball');
const colorPickerBall = document.getElementById('colorPickerBall');
const colorPickerBg = document.getElementById('colorPickerBg');
const startStopButton = document.getElementById('startStopButton');
const speedSelector = document.getElementById('speedSelector');
const movementCounterDisplay = document.getElementById('movementCounter');
const setCounterDisplay = document.getElementById('setCounter');
let posX = window.innerWidth / 2 - 25;
let direction = 1;
let movementCounter = 0;
let setCounter = 0;
let intervalId = null;
const minDuration = 2000; // En düşük hız için (1 kademe) bir tam hareketin süresi 2 saniye
const maxDuration = 500; // En yüksek hız için (10 kademe) bir tam hareketin süresi 0.5 saniye
const stepDuration = (minDuration - maxDuration) / 9; // Diğer kademeler için süre farkı
function calculateVelocity(speedLevel) {
const duration = minDuration - (speedLevel - 1) * stepDuration;
const interval = 1000 / 60; // 60 FPS
return (window.innerWidth - 50) / (duration / interval);
}
ball.style.left = `${posX}px`;
function moveBall() {
const velocityX = calculateVelocity(Number(speedSelector.value));
posX += velocityX * direction;
if (posX <= 0 || posX + 50 >= window.innerWidth) {
direction *= -1;
if (direction === 1) {
movementCounter++;
movementCounterDisplay.textContent = movementCounter;
}
}
ball.style.left = `${posX}px`;
}
function changeBallColor() {
const selectedColor = colorPickerBall.value;
ball.style.backgroundColor = selectedColor;
}
function changeBgColor() {
const selectedColor = colorPickerBg.value;
document.body.style.backgroundColor = selectedColor;
}
function updateSpeed() {
if (intervalId) {
clearInterval(intervalId);
intervalId = setInterval(moveBall, 1000 / 60);
}
}
function startStop() {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
posX = window.innerWidth / 2 - 25;
ball.style.left = `${posX}px`;
setCounter++;
setCounterDisplay.textContent = `Set: ${setCounter}`;
} else {
intervalId = setInterval(moveBall, 1000 / 60);
}
}
colorPickerBall.addEventListener('input', changeBallColor);
colorPickerBg.addEventListener('input', changeBgColor);
startStopButton.addEventListener('click', startStop);
speedSelector.addEventListener('change', updateSpeed);
</script>
</body>
</html>