1. Приклади сайтів створених на платформі
Архітектурна студія
Методичні рекомендації для студентів
Сайт вчителя інформатики
Сайт закладу освіти
Презентація про сайти
Вітжет Sinoptik
Вітжет калькулятор
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Калькулятор</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
}
.calculator {
width: 260px;
margin: 20px auto;
padding: 15px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.display {
width: 100%;
height: 45px;
font-size: 20px;
text-align: right;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 6px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
button {
height: 45px;
font-size: 18px;
border: none;
border-radius: 6px;
cursor: pointer;
background: #e0e0e0;
}
button.operator {
background: #ffd54f;
}
button.equal {
background: #4caf50;
color: white;
grid-column: span 2;
}
button.clear {
background: #f44336;
color: white;
}
button:hover {
opacity: 0.85;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" class="display" disabled>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button onclick="appendValue('(')">(</button>
<button onclick="appendValue(')')">)</button>
<button class="operator" onclick="appendValue('/')">÷</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('*')">×</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('-')">−</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button class="equal" onclick="calculate()">=</button>
</div>
</div>
<script>
function appendValue(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
try {
document.getElementById('display').value =
eval(document.getElementById('display').value);
} catch {
document.getElementById('display').value = 'Помилка';
}
}
</script>
</body>
</html>
Вітжет погода
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Віджет погоди</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f6fc;
}
.weather-widget {
width: 260px;
margin: 20px auto;
padding: 15px;
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
border-radius: 15px;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
text-align: center;
}
.city {
font-size: 20px;
font-weight: bold;
}
.temp {
font-size: 40px;
margin: 10px 0;
}
.desc {
font-size: 16px;
}
</style>
</head>
<body>
<div class="weather-widget">
<div class="city">Чернівці</div>
<div class="temp" id="temp">--°C</div>
<div class="desc" id="desc">Завантаження...</div>
</div>
<script>
// Координати Чернівців
const lat = 48.2921;
const lon = 25.9358;
fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true`)
.then(response => response.json())
.then(data => {
const temp = data.current_weather.temperature;
document.getElementById("temp").innerText = temp + "°C";
document.getElementById("desc").innerText = "Поточна погода";
})
.catch(() => {
document.getElementById("desc").innerText = "Помилка завантаження";
});
</script>
</body>
</html>
Вітжет таймер
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Таймер 1 хвилина</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f6fb;
}
.timer {
width: 240px;
margin: 30px auto;
padding: 15px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 5px 12px rgba(0,0,0,0.15);
text-align: center;
}
.title {
font-size: 18px;
margin-bottom: 10px;
}
.time {
font-size: 36px;
font-weight: bold;
margin: 10px 0;
}
button {
padding: 8px 14px;
margin: 5px;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
.start { background: #4caf50; color: white; }
.stop { background: #f44336; color: white; }
.reset { background: #2196f3; color: white; }
</style>
</head>
<body>
<div class="timer">
<div class="title">Таймер (1 хвилина)</div>
<div class="time" id="time">01:00</div>
<button class="start" onclick="startTimer()">Старт</button>
<button class="stop" onclick="stopTimer()">Стоп</button>
<button class="reset" onclick="resetTimer()">Скинути</button>
</div>
<script>
let duration = 60; // 1 хвилина
let timeLeft = duration;
let interval = null;
function updateTime() {
const minutes = String(Math.floor(timeLeft / 60)).padStart(2, '0');
const seconds = String(timeLeft % 60).padStart(2, '0');
document.getElementById("time").innerText = minutes + ":" + seconds;
}
function startTimer() {
if (interval) return;
interval = setInterval(() => {
if (timeLeft > 0) {
timeLeft--;
updateTime();
} else {
clearInterval(interval);
interval = null;
alert("Час вийшов!");
}
}, 1000);
}
function stopTimer() {
clearInterval(interval);
interval = null;
}
function resetTimer() {
stopTimer();
timeLeft = duration;
updateTime();
}
</script>
</body>
</html>
Віджет візитер
<div>
👤 Відвідувачів: <span id="counter"></span>
</div>
<script>
let visits = localStorage.getItem("visits");
visits = visits ? parseInt(visits) + 1 : 1;
localStorage.setItem("visits", visits);
document.getElementById("counter").textContent = visits;
</script>
Немає коментарів:
Дописати коментар