Scribd
Upload
14 views

Doctype HTML

This document is an HTML template for a smart irrigation application with a focus on user interface design. It includes styles for various components such as headers, navigation, dashboards, cards, and alerts, all tailored for a responsive experience. The layout is designed to facilitate easy management of irrigation zones, weather forecasts, and user settings.

Uploaded by

Reyad Ben yahya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Doctype HTML

This document is an HTML template for a smart irrigation application with a focus on user interface design. It includes styles for various components such as headers, navigation, dashboards, cards, and alerts, all tailored for a responsive experience. The layout is designed to facilitate easy management of irrigation zones, weather forecasts, and user settings.

Uploaded by

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

<!

DOCTYPE html>

<html dir=”rtl” lang=”ar”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>‫ محدث‬- ‫<تطبيق الري الذكي عن بعد‬/title>

<style>

:root {

--primary-color: #0d904f;

--secondary-color: #81c784;

--accent-color: #4caf50;

--background-color: #f8f9fa;

--text-color: #212121;

--light-text: #f5f5f5;

--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;

body {

background-color: var(--background-color);

color: var(--text-color);
}

header {

background-color: var(--primary-color);

color: white;

padding: 1rem;

box-shadow: var(--shadow);

display: flex;

justify-content: space-between;

align-items: center;

.logo {

display: flex;

align-items: center;

gap: 10px;

font-size: 1.5rem;

font-weight: bold;

.logo-icon {

font-size: 2rem;

nav ul {

display: flex;

list-style: none;
}

nav ul li {

margin-right: 1rem;

nav ul li a {

color: white;

text-decoration: none;

padding: 0.5rem;

nav ul li a:hover {

background-color: rgba(255, 255, 255, 0.2);

border-radius: 4px;

main {

max-width: 1200px;

margin: 2rem auto;

padding: 0 1rem;

.dashboard {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 1.5rem;
margin-bottom: 2rem;

.card {

background-color: white;

border-radius: 8px;

padding: 1.5rem;

box-shadow: var(--shadow);

transition: transform 0.3s ease;

.card:hover {

transform: translateY(-5px);

.card-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1rem;

color: var(--primary-color);

.card-icon {

font-size: 1.8rem;

color: var(--accent-color);

}
.sensor-value {

font-size: 2.5rem;

font-weight: bold;

margin: 1rem 0;

text-align: center;

.sensor-unit {

font-size: 1rem;

color: #666;

margin-right: 5px;

.sensor-status {

display: flex;

justify-content: center;

align-items: center;

padding: 0.5rem;

border-radius: 4px;

font-weight: bold;

.status-optimal {

background-color: rgba(76, 175, 80, 0.2);

color: #2e7d32;

}
.status-warning {

background-color: rgba(255, 193, 7, 0.2);

color: #f57f17;

.status-alert {

background-color: rgba(244, 67, 54, 0.2);

color: #d32f2f;

.irrigation-zones {

background-color: white;

border-radius: 8px;

padding: 1.5rem;

box-shadow: var(--shadow);

margin-bottom: 2rem;

.zones-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.5rem;

color: var(--primary-color);

}
.zone-list {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 1rem;

.zone-item {

background-color: var(--background-color);

border-radius: 8px;

padding: 1rem;

display: flex;

flex-direction: column;

.zone-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1rem;

.zone-name {

font-weight: bold;

font-size: 1.1rem;

.zone-status {
display: inline-block;

width: 15px;

height: 15px;

border-radius: 50%;

.zone-active {

background-color: #4caf50;

.zone-inactive {

background-color: #9e9e9e;

.zone-controls {

display: flex;

align-items: center;

justify-content: space-between;

margin-top: 1rem;

.switch {

position: relative;

display: inline-block;

width: 60px;

height: 34px;

}
.switch input {

opacity: 0;

width: 0;

height: 0;

.slider {

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ccc;

transition: .4s;

border-radius: 34px;

.slider:before {

position: absolute;

content: “”;

height: 26px;

width: 26px;

left: 4px;

bottom: 4px;

background-color: white;
transition: .4s;

border-radius: 50%;

input:checked + .slider {

background-color: var(--accent-color);

input:checked + .slider:before {

transform: translateX(26px);

.btn {

background-color: var(--primary-color);

color: white;

border: none;

padding: 0.5rem 1rem;

border-radius: 4px;

cursor: pointer;

font-weight: bold;

transition: background-color 0.3s ease;

.btn:hover {

background-color: #0a7a40;

}
.weather-forecast {

background-color: white;

border-radius: 8px;

padding: 1.5rem;

box-shadow: var(--shadow);

.forecast-header {

margin-bottom: 1.5rem;

color: var(--primary-color);

.forecast-days {

display: flex;

justify-content: space-between;

overflow-x: auto;

padding-bottom: 1rem;

.forecast-day {

display: flex;

flex-direction: column;

align-items: center;

min-width: 80px;

.day-name {
font-weight: bold;

margin-bottom: 0.5rem;

.weather-icon {

font-size: 2rem;

margin-bottom: 0.5rem;

color: var(--accent-color);

.temperature {

font-weight: bold;

.rain-chance {

font-size: 0.9rem;

color: #666;

.charts {

background-color: white;

border-radius: 8px;

padding: 1.5rem;

box-shadow: var(--shadow);

margin-bottom: 2rem;

}
.charts-header {

margin-bottom: 1.5rem;

color: var(--primary-color);

.chart-container {

height: 300px;

position: relative;

margin-bottom: 1rem;

/* ‫* نظام التنبيهات‬/

.alerts {

background-color: white;

border-radius: 8px;

padding: 1.5rem;

box-shadow: var(--shadow);

margin-bottom: 2rem;

.alerts-header {

margin-bottom: 1.5rem;

color: var(--primary-color);

.alert-list {

display: flex;
flex-direction: column;

gap: 1rem;

.alert-item {

background-color: var(--background-color);

border-radius: 8px;

padding: 1rem;

display: flex;

justify-content: space-between;

align-items: center;

.alert-icon {

font-size: 1.5rem;

margin-left: 1rem;

.alert-critical {

color: #d32f2f;

.alert-warning {

color: #f57f17;

.alert-info {
color: #0288d1;

.alert-content {

flex-grow: 1;

.alert-title {

font-weight: bold;

margin-bottom: 0.5rem;

.alert-time {

font-size: 0.9rem;

color: #666;

.alert-action {

display: flex;

gap: 0.5rem;

/* ‫ جدولة الري‬:‫* إضافة جديدة‬/

.schedule-container {

background-color: white;

border-radius: 8px;

padding: 1.5rem;
box-shadow: var(--shadow);

margin-bottom: 2rem;

display: none;

.schedule-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.5rem;

color: var(--primary-color);

.schedule-form {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 1rem;

.form-group {

margin-bottom: 1rem;

.form-group label {

display: block;

margin-bottom: 0.5rem;

font-weight: bold;
}

.form-group select, .form-group input {

width: 100%;

padding: 0.5rem;

border: 1px solid #ddd;

border-radius: 4px;

.form-actions {

grid-column: 1 / -1;

display: flex;

justify-content: flex-end;

gap: 1rem;

margin-top: 1rem;

.btn-secondary {

background-color: #757575;

.btn-secondary:hover {

background-color: #616161;

/* ‫ وحدة التحكم الذكي‬:‫* إضافة جديدة‬/

.smart-control {
background-color: white;

border-radius: 8px;

padding: 1.5rem;

box-shadow: var(--shadow);

margin-bottom: 2rem;

.smart-control-header {

margin-bottom: 1.5rem;

color: var(--primary-color);

.smart-modes {

display: flex;

flex-wrap: wrap;

gap: 1rem;

margin-bottom: 1rem;

.smart-mode {

flex: 1;

min-width: 150px;

background-color: var(--background-color);

border-radius: 8px;

padding: 1rem;

text-align: center;

cursor: pointer;
transition: all 0.3s ease;

.smart-mode:hover {

transform: translateY(-5px);

.smart-mode-icon {

font-size: 2rem;

margin-bottom: 0.5rem;

color: var(--accent-color);

.smart-mode-title {

font-weight: bold;

margin-bottom: 0.5rem;

.smart-mode-desc {

font-size: 0.9rem;

color: #666;

.smart-mode.active {

background-color: rgba(76, 175, 80, 0.2);

border: 2px solid var(--accent-color);

}
/* ‫* نظام إعداد التقارير‬/

.reports {

background-color: white;

border-radius: 8px;

padding: 1.5rem;

box-shadow: var(--shadow);

margin-bottom: 2rem;

.reports-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.5rem;

color: var(--primary-color);

.report-options {

display: flex;

gap: 1rem;

margin-bottom: 1rem;

flex-wrap: wrap;

.report-option {

padding: 0.5rem 1rem;


background-color: var(--background-color);

border-radius: 4px;

cursor: pointer;

.report-option.active {

background-color: var(--primary-color);

color: white;

footer {

background-color: var(--primary-color);

color: white;

text-align: center;

padding: 1rem;

margin-top: 2rem;

/* ‫* اللوحة الجانبية‬/

.sidebar {

position: fixed;

top: 0;

right: -300px; /* ‫* البداية خارج الشاشة‬/

width: 300px;

height: 100%;

background-color: white;

box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);


transition: right 0.3s ease;

z-index: 1000;

padding: 1rem;

overflow-y: auto;

.sidebar.active {

right: 0;

.sidebar-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 2rem;

padding-bottom: 1rem;

border-bottom: 1px solid #eee;

.close-sidebar {

background: none;

border: none;

font-size: 1.5rem;

cursor: pointer;

.profile-info {
display: flex;

align-items: center;

margin-bottom: 2rem;

.profile-avatar {

width: 60px;

height: 60px;

border-radius: 50%;

background-color: var(--primary-color);

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 1.5rem;

margin-left: 1rem;

.profile-name {

font-weight: bold;

.profile-role {

color: #666;

font-size: 0.9rem;

}
.sidebar-menu {

list-style: none;

.sidebar-menu li {

margin-bottom: 0.5rem;

.sidebar-menu a {

display: block;

padding: 0.75rem;

color: var(--text-color);

text-decoration: none;

border-radius: 4px;

transition: background-color 0.3s ease;

.sidebar-menu a:hover {

background-color: var(--background-color);

.menu-icon {

margin-left: 0.5rem;

.overlay {

position: fixed;
top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

display: none;

z-index: 999;

.user-actions {

margin-top: auto;

padding-top: 1rem;

border-top: 1px solid #eee;

.mobile-menu-btn {

display: none;

background: none;

border: none;

color: white;

font-size: 1.5rem;

cursor: pointer;

@media (max-width: 768px) {

.dashboard, .zone-list {

grid-template-columns: 1fr;
}

.forecast-days {

padding-bottom: 1rem;

.forecast-day {

min-width: 60px;

nav ul {

display: none;

.mobile-menu-btn {

display: block;

</style>

</head>

<body>

<div class=”overlay” id=”overlay”></div>

<div class=”sidebar” id=”sidebar”>

<div class=”sidebar-header”>

<h3>‫<اإلعدادات‬/h3>

<button class=”close-sidebar” onclick=”toggleSidebar()”>✕</button>


</div>

<div class=”profile-info”>

<div class=”profile-avatar”>👤</div>

<div>

<div class=”profile-name”>‫<أحمد محمد‬/div>

<div class=”profile-role”>‫<مدير النظام‬/div>

</div>

</div>

<ul class=”sidebar-menu”>

<li><a href=”#”><span class=”menu-icon”>🏠</span> ‫<الرئيسية‬/a></li>

<li><a href=”#”><span class=”menu-icon”>🌱</span> ‫<إدارة المزرعة‬/a></li>

<li><a href=”#”><span class=”menu-icon”>💧</span> ‫<جدولة الري‬/a></li>

<li><a href=”#”><span class=”menu-icon”>📈</span> ‫<التقارير واإلحصائيات‬/a></li>

<li><a href=”#”><span class=”menu-icon”>⚙️</span> ‫<إعدادات النظام‬/a></li>

<li><a href=”#”><span class=”menu-icon”>🔔</span> ‫<إعدادات التنبيهات‬/a></li>

<li><a href=”#”><span class=”menu-icon”>🔌</span> ‫<األجهزة المتصلة‬/a></li>

<li><a href=”#”><span class=”menu-icon”>👥</span> ‫<المستخدمين‬/a></li>

<li><a href=”#”><span class=”menu-icon”>❓</span> ‫<المساعدة والدعم‬/a></li>

</ul>

<div class=”user-actions”>

<button class=”btn” style=”width: 100%;”>‫<تسجيل الخروج‬/button>

</div>

</div>
<header>

<div class=”logo”>

<span class=”logo-icon”>💧</span>

<span>‫<نظام الري الذكي‬/span>

</div>

<nav>

<button class=”mobile-menu-btn” onclick=”toggleSidebar()”>☰</button>

<ul>

<li><a href=”#” class=”active”>‫<الرئيسية‬/a></li>

<li><a href=”#”>‫<المناطق‬/a></li>

<li><a href=”#”>‫<التقارير‬/a></li>

<li><a href=”#”>‫<اإلعدادات‬/a></li>

</ul>

</nav>

</header>

<main>

<section class=”dashboard”>

<div class=”card”>

<div class=”card-header”>

<h3>‫<رطوبة التربة‬/h3>

<span class=”card-icon”>💧</span>

</div>

<div class=”sensor-value”>38<span class=”sensor-unit”>%</span></div>

<div class=”sensor-status status-warning”>‫<بحاجة للري قريبًا‬/div>

</div>
<div class=”card”>

<div class=”card-header”>

<h3>‫<درجة الحرارة‬/h3>

<span class=”card-icon”></span>
;

</div>

<div class=”sensor-value”>27<span class=”sensor-unit”>°C</span></div>

<div class=”sensor-status status-optimal”>‫<معتدلة‬/div>

</div>

<div class=”card”>

<div class=”card-header”>

<h3>‫<استهالك المياه‬/h3>

<span class=”card-icon”>📊</span>

You might also like