datasaffron-dashboard / dashboard.html
Ohm1998's picture
dude i want to create website that has login screen like this https://ohmasadataanalyst.github.io/SC-dashboard/login/ oncethe user login it opens a page of sidebar excatly like the one in this code
fb766c5 verified
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataSaffron Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="components/sidebar.js"></script>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-header"><i class="fa-solid fa-chart-line"></i><h1>DataSaffron</h1></div>
<ul class="sidebar-nav">
<li><a href="dashboard.html?department=operations" class="nav-link" data-target="operations"><i class="icon fa-solid fa-server"></i><span>إدارة التشغيل</span></a></li>
<li><a href="dashboard.html?department=maintenance" class="nav-link" data-target="maintenance"><i class="icon fa-solid fa-wrench"></i><span>إدارة الصيانة</span></a></li>
<li><a href="dashboard.html?department=it" class="nav-link" data-target="it"><i class="icon fa-solid fa-laptop-code"></i><span>إدارة التقنية</span></a></li>
<li><a href="dashboard.html?department=quality" class="nav-link" data-target="quality"><i class="icon fa-solid fa-award"></i><span>إدارة الجودة</span></a></li>
<li><a href="#" class="nav-link" data-target="upload"><i class="icon fa-solid fa-upload"></i><span>رفع التقارير</span></a></li>
</ul>
</aside>
<main class="main-content">
<!-- PDF Upload Section -->
<section id="upload" class="department-section">
<div class="page-header">
<h2>رفع التقارير</h2>
<p>قم بتحميل تقارير الأداء لتحليلها وعرض الاتجاهات</p>
</div>
<div class="pdf-upload-section">
<form class="pdf-upload-form" id="pdfUploadForm">
<div class="form-group">
<label for="department">القسم</label>
<select name="department" id="department" class="form-select" required>
<option value="">اختر القسم</option>
<option value="operations">إدارة التشغيل</option>
<option value="maintenance">إدارة الصيانة</option>
<option value="it">إدارة التقنية</option>
<option value="quality">إدارة الجودة</option>
</select>
</div>
<div class="form-group">
<label for="dateRange">الفترة الزمنية</label>
<div style="display: flex; gap: 1rem;">
<input type="date" name="start_date" class="form-control" required>
<span>إلى</span>
<input type="date" name="end_date" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="pdf_file">ملف PDF</label>
<input type="file" name="pdf_file" accept=".pdf" required>
</div>
<button type="submit" class="btn-primary">رفع التقرير</button>
</form>
</div>
</section>
<!-- Department PDF View Section -->
<section id="department-view" class="department-section" style="display: none;">
<div class="page-header">
<h2 id="department-title">تقرير الأداء</h2>
<p id="department-period">الفترة من ... إلى ...</p>
</div>
<div class="pdf-viewer" id="pdfViewer">
<iframe id="pdfFrame" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div class="trend-chart-container">
<h3>اتجاه الأداء الأسبوعي</h3>
<canvas id="trendChart"></canvas>
</div>
<div style="margin-top: 2rem;">
<button id="downloadPdf" class="btn-primary">
<i class="fas fa-download"></i> تحميل التقرير
</button>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>