피코rc웹컨트롤러사이트코드.zip
0.14MB
main.py
0.00MB
## 디자인 업데이트 버전 웹사이트
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>RC Car Controller</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>라즈베리 피코 RC카 웹컨트롤러</h1>
<p class="creator">제작: 상암고 교사 성원경<br>제작날짜: 23년 12월 1일(금)</p>
<img id="carImage" src="stop.png" alt="RC Car Image" />
<p id="status">정지</p>
<div class="button-row">
<button type="button" onclick="go()">전진</button>
</div>
<div class="button-row">
<button type="button" onclick="left()">좌회전</button>
<button type="button" onclick="stop()">정지</button>
<button type="button" onclick="right()">우회전</button>
</div>
<div class="button-row">
<button type="button" onclick="back()">후진</button>
</div>
</div>
</body>
</html>
style.css
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
h1 {
color: #4CAF50;
margin-top: 20px;
}
.creator {
font-size: 0.9em;
color: #555;
}
#carImage {
width: 300px;
height: auto;
margin: 20px 0;
}
#status {
font-size: 1.2em;
color: #888;
}
.button-row {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.button-row button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-transform: uppercase;
margin: 0 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button-row button:hover {
background-color: #45a049;
}
.button-row button:focus {
outline: none;
}
gpt와 나눈대화
https://chat.openai.com/share/f4df143f-bcf6-45d6-bc89-3cfae595cdaa