Scribd
Upload
4 views5 pages

html.html

The document is an HTML template for an OCCI Control Panel, featuring a dashboard and WiFi settings interface. It includes styles for layout, buttons, and forms, as well as JavaScript functions for toggling sections and password visibility. The dashboard displays indoor and outdoor temperatures, heater status, and allows temperature adjustments, while the WiFi settings form enables users to configure their network credentials.

Uploaded by

ozgurbogan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views5 pages

html.html

The document is an HTML template for an OCCI Control Panel, featuring a dashboard and WiFi settings interface. It includes styles for layout, buttons, and forms, as well as JavaScript functions for toggling sections and password visibility. The dashboard displays indoor and outdoor temperatures, heater status, and allows temperature adjustments, while the WiFi settings form enables users to configure their network credentials.

Uploaded by

ozgurbogan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCCI Kontrol Paneli</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f0f2f5; padding-
bottom: 60px; }
header { background: #4CAF50; color: white; padding: 20px; text-align: center;
font-size: 24px; position: sticky; top: 0; z-index: 100; }
.navbar { display: flex; justify-content: center; background: #fff; padding:
10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.navbar button { background: none; border: none; font-size: 18px; margin: 0
10px; cursor: pointer; padding: 10px; }
.navbar button.active { border-bottom: 2px solid #4CAF50; color: #4CAF50; }
.container { max-width: 600px; margin: 20px auto; padding: 20px; background:
#fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.dashboard, .wifi-settings { display: none; }
.dashboard.active, .wifi-settings.active { display: block; }
.toggle-container { display: flex; justify-content: center; margin-bottom:
20px; }
.toggle-btn { padding: 10px 20px; font-size: 18px; border: none; border-radius:
5px; cursor: pointer; background-color: #4CAF50; color: #fff; }
.card-container { display: flex; justify-content: space-between; margin-bottom:
20px; }
.card { flex: 1; background: #e9ecef; padding: 15px; margin: 0 5px; text-align:
center; border-radius: 8px; }
.card h3 { margin-top: 0; }
.card p { font-size: 28px; color: #E91E63; margin: 10px 0 0; font-weight: bold;
}
.temp-control { display: flex; justify-content: center; align-items: center;
background: #e9ecef; padding: 10px; border-radius: 8px; margin-bottom: 20px; }
.temp-control button { width: 40px; height: 40px; font-size: 24px; border:
none; background: #4CAF50; color: white; border-radius: 50%; cursor: pointer;
margin: 0 10px; }
.temp-control span { font-size: 26px; min-width: 50px; text-align: center;
color: #E91E63; font-weight: bold; }
.wifi-form { display: flex; flex-direction: column; }
.wifi-form label { margin-bottom: 5px; font-weight: bold; text-align: left; }
.wifi-form input, .wifi-form select { margin-bottom: 15px; padding: 10px;
border: 1px solid #ccc; border-radius: 5px; font-size: 16px; }
.checkbox-container { display: flex; align-items: center; margin-bottom:
15px; }
.checkbox-container label { margin-left: 5px; font-size: 16px; }
.wifi-box, .user-box {
border: 1px solid #888;
background-color: #f7f7f7;
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
}
.field {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.field label {
width: 150px;
margin-right: 10px;
}
.field input, .field select {
flex: 1;
}
.button-container { display: flex; gap: 10px; }
.button-container button { flex: 1; padding: 10px; height: 45px; font-size:
16px; background-color: #4CAF50; color: white; border: none; border-radius: 5px;
cursor: pointer; transition: background-color 0.3s ease; }
.button-container button:hover { background-color: #45a049; }
.button-container button.reset-button { background-color: #f44336; }
.button-container button.reset-button:hover { background-color: #d32f2f; }
.footer { text-align: center; font-size: 14px; margin-top: 20px; }
.footer p { margin: 0; }
footer.fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%;
background: #4CAF50; color: white; text-align: center; padding: 10px 0; font-size:
14px; z-index: 200; }
</style>
<script>
function showSection(section) {
document.getElementById('dashboard').classList.remove('active');
document.getElementById('wifi-settings').classList.remove('active');
document.getElementById(section).classList.add('active');
document.getElementById('btn-dashboard').classList.remove('active');
document.getElementById('btn-wifi').classList.remove('active');
if(section === 'dashboard'){
document.getElementById('btn-dashboard').classList.add('active');
} else {
document.getElementById('btn-wifi').classList.add('active');
}
localStorage.setItem('activeSection', section);
}

window.onload = function() {
const lastSection = localStorage.getItem('activeSection') || 'dashboard';
showSection(lastSection);
}

function togglePassword() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</head>
<body>
<header>OCCI Akıllı Termostad</header>
<div class="navbar">
<button id="btn-dashboard" onclick="showSection('dashboard')">Kontrol
Paneli</button>
<button id="btn-wifi" onclick="showSection('wifi-settings')">WiFi
Ayarları</button>
</div>
<div class="container">
<!-- Dashboard Kartı -->
<div id="dashboard" class="dashboard active">
<div class="toggle-container">
<form action="/toggleState" method="POST">
<button class="toggle-btn" type="submit">Sistem: )rawliteral";

html += systemState;

html += R"rawliteral(</button>
</form>
</div>
<div class="card-container">
<div class="card">
<h3>İç Ortam Sıcaklığı</h3>
<p>)rawliteral";

html += String(Isi1, 1) + " °C";

html += R"rawliteral(</p>
</div>
<div class="card">
<h3>Dış Ortam Sıcaklığı</h3>
<p>)rawliteral";

html += String(Isi2, 1) + " °C";

html += R"rawliteral(</p>
</div>
<div class="card">
<h3>Isıtıcı Durumu</h3>
<p>)rawliteral";

String heaterStatus = (digitalRead(KOM_PIN) == HIGH) ? "<span


style='color:red;'>KAPALI</span>" : "<span style='color:green;'>AÇIK</span>";
html += heaterStatus;

html += R"rawliteral(</p>
</div>
</div>
<div class="temp-control">
<form action="/decreaseTemp" method="POST" style="display:inline;">
<button type="submit">-</button>
</form>
<span>)rawliteral";

html += String(IsiSet, 1) + " °C";

html += R"rawliteral(</span>
<form action="/increaseTemp" method="POST" style="display:inline;">
<button type="submit">+</button>
</form>
</div>
<div class="footer">
<p>© 2025 OCCI Kontrol Paneli</p>
</div>
</div>
<!-- WiFi Ayarları Kartı -->
<div id="wifi-settings" class="wifi-settings">
<form class="wifi-form" action="/save" method="POST">
<div class="wifi-box">
<div class="field">
<label for="ssid">WiFi Ağ Adı (SSID):</label>
</div>
<div class="field">
<select id="ssid" name="ssid" required>
<option value="" disabled selected>Bir ağ seçin</option>
)rawliteral";

html += cachedSsidOptions;

html += R"rawliteral(
</select>
</div>
<div class="field">
<label for="password">WiFi Şifre:</label>
</div>
<div class="field">
<input type="password" id="password" name="password" placeholder="WiFi
şifrenizi girin" required>
</div>
<div class="field" style="text-align: center;">
<input type="checkbox" id="show-password" onclick="togglePassword()">
<label for="show-password">Şifreyi Göster</label>
</div>
</div>
<div class="user-box">
<div class="field">
<label for="Kullanıcı">Kullanıcı Adı:</label>
</div>
<div class="field">
<input type="text" id="Kullanıcı" name="Kullanıcı"
placeholder="Kullanıcı adınızı girin" required>
</div>
<div class="field">
<label for="kullaniciSifre">Kullanıcı Şifre:</label>
</div>
<div class="field">
<input type="password" id="kullaniciSifre" name="kullaniciSifre"
placeholder="Kullanıcı şifrenizi girin" required>
</div>
<div class="field">
<label>Modül Kimliği:</label>
</div>
<div class="field">
<span>)rawliteral";
html += macStr;
html += R"rawliteral(</span>
</div>
</div>
<div class="button-container">
<button type="submit">Kaydet</button>
<button type="button" class="reset-button"
onclick="location.href='/reset'">Reset</button>
</div>
</form>
<div class="footer">
<p>© 2025 OCCI WiFi Ayarları</p>
</div>
</div>
</div>
<footer class="fixed-footer">© 2025 OCCI Home by İNSECT</footer>
</body>
</html>

You might also like