0% found this document useful (0 votes)

32 views113 pages

APP Linux

The document is an HTML template for a system monitoring dashboard titled 'ENSA-B System Monitor'. It includes various styles and functionalities using Tailwind CSS, Chart.js, and ApexCharts, with a focus on responsive design and dark mode support. Key features include animated elements, tooltips, progress indicators, and sections for displaying logs and security events.

Uploaded by

elhasbis.fst

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

0% found this document useful (0 votes)

32 views113 pages

APP Linux

Uploaded by

elhasbis.fst

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

Code 2

<!DOCTYPE html>

<head>

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

<title>ENSA-B System Monitor</title>

<script src="[Link]

<script src="[Link] crossorigin="anonymous"></script>

<style>

:root {

--primary: #4F46E5;

--primary-light: #6366F1;

--secondary: #10B981;

--tertiary: #F59E0B;

--danger: #EF4444;

--info: #0EA5E9;

--success: #22C55E;

--warning: #F59E0B;

--bg-light: #FFFFFF;

--bg-dark: #0F172A;

--card-light: #F9FAFB;

--card-dark: #1E293B;

--text-light: #1F2937;

--text-dark: #F3F4F6;

}
body {

font-family: 'Poppins', sans-serif;

transition: background-color 0.3s, color 0.3s;

.dark {

color-scheme: dark;

.card {

border-radius: 12px;

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

transition: all 0.3s ease;

.dark .card {

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

.card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

.dark .card:hover {

box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);

.btn {

transition: all 0.2s ease;

}

.btn:hover {

transform: translateY(-2px);

.btn:active {

transform: translateY(0);

.animate-pulse-slow {

animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse {

0%, 100% {

opacity: 1;

50% {

opacity: 0.8;

.logo-container {

position: relative;

overflow: hidden;

border-radius: 50%;

width: 50px;

height: 50px;

background: linear-gradient(135deg, var(--primary), var(--secondary));

}
.logo-text {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-weight: bold;

color: white;

font-size: 16px;

.process-bar {

height: 8px;

border-radius: 4px;

background: #e5e7eb;

overflow: hidden;

.process-bar-fill {

height: 100%;

border-radius: 4px;

transition: width 1s ease-in-out;

.gradient-bg {

background: linear-gradient(135deg, #4F46E522, #10B98122);

.dark .gradient-bg {

background: linear-gradient(135deg, #4F46E511, #10B98111);

}
/* Tooltip styles */

.tooltip {

position: relative;

display: inline-block;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

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

color: var(--bg-light);

text-align: center;

border-radius: 6px;

padding: 5px;

position: absolute;

z-index: 1;

bottom: 125%;

left: 50%;

transform: translateX(-50%);

opacity: 0;

transition: opacity 0.3s;

.dark .tooltip .tooltiptext {

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

color: var(--bg-dark);

.tooltip:hover .tooltiptext {

visibility: visible;
opacity: 1;

/* Progress Circle */

.progress-circle {

position: relative;

width: 120px;

height: 120px;

.progress-circle-bg {

fill: none;

stroke: #e5e7eb;

stroke-width: 8;

.dark .progress-circle-bg {

stroke: #4b5563;

.progress-circle-value {

fill: none;

stroke-width: 8;

stroke-linecap: round;

transition: stroke-dashoffset 1s ease;

.progress-text {

position: absolute;

top: 50%;

left: 50%;
transform: translate(-50%, -50%);

font-size: 24px;

font-weight: 600;

/* Custom Scrollbar */

::-webkit-scrollbar {

width: 8px;

height: 8px;

::-webkit-scrollbar-track {

background: #f1f1f1;

border-radius: 10px;

.dark ::-webkit-scrollbar-track {

background: #333;

::-webkit-scrollbar-thumb {

background: #888;

border-radius: 10px;

::-webkit-scrollbar-thumb:hover {

background: #555;

/* Network Status Indicator */

.status-indicator {
display: inline-block;

width: 12px;

height: 12px;

border-radius: 50%;

margin-right: 8px;

.status-good {

background-color: var(--secondary);

box-shadow: 0 0 8px var(--secondary);

.status-warning {

background-color: var(--tertiary);

box-shadow: 0 0 8px var(--tertiary);

.status-bad {

background-color: var(--danger);

box-shadow: 0 0 8px var(--danger);

/* Wave Animation */

.wave {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: linear-gradient(to bottom, transparent, rgba(79, 70, 229, 0.2));

border-radius: 12px;
animation: wave 8s ease-in-out infinite;

transform-origin: bottom center;

@keyframes wave {

0%, 100% {

transform: scaleY(0.8);

50% {

transform: scaleY(1.1);

/* ENSA-B Logo Animation */

@keyframes pulse-border {

0%, 100% {

box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);

50% {

box-shadow: 0 0 0 5px rgba(79, 70, 229, 0);

.pulse-border {

animation: pulse-border 2s infinite;

/* Log entries styles */

.log-entry {

padding: 8px;

margin-bottom: 8px;
border-radius: 8px;

font-size: 14px;

.log-info {

background-color: rgba(14, 165, 233, 0.1);

border-left: 4px solid var(--info);

.log-warning {

background-color: rgba(245, 158, 11, 0.1);

border-left: 4px solid var(--tertiary);

.log-error {

background-color: rgba(239, 68, 68, 0.1);

border-left: 4px solid var(--danger);

.dark .log-info {

background-color: rgba(14, 165, 233, 0.2);

.dark .log-warning {

background-color: rgba(245, 158, 11, 0.2);

.dark .log-error {

background-color: rgba(239, 68, 68, 0.2);

}
/* Project Architecture Section */

.architecture-section {

position: relative;

padding: 2rem;

border-radius: 1rem;

overflow: hidden;

background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(16, 185, 129, 0.05));

.dark .architecture-section {

background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.1));

.architecture-image {

border-radius: 0.75rem;

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

transition: transform 0.3s ease;

.architecture-image:hover {

transform: scale(1.01);

/* Team Section */

.team-section {

border-radius: 0.75rem;

overflow: hidden;

.team-member {

transition: all 0.3s ease;

}

.team-member:hover {

transform: translateY(-5px);

/* Enhance Logo */

.enhanced-logo {

display: flex;

align-items: center;

justify-content: center;

position: relative;

width: 50px;

height: 50px;

border-radius: 50%;

background: conic-gradient(var(--primary), var(--secondary), var(--tertiary), var(--info), var(--

primary));

animation: rotate 3s linear infinite;

box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);

.enhanced-logo::before {

content: '';

position: absolute;

width: 80%;

height: 80%;

border-radius: 50%;

background: white;

z-index: 1;

}
.dark .enhanced-logo::before {

background: var(--card-dark);

.enhanced-logo-text {

position: absolute;

z-index: 2;

font-weight: bold;

font-size: 16px;

background: linear-gradient(to right, var(--primary), var(--secondary));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

@keyframes rotate {

from {

transform: rotate(0deg);

to {

transform: rotate(360deg);

/* IDS Section Styles */

.ids-section {

position: relative;

padding: 1.5rem;

border-radius: 1rem;

overflow: hidden;

background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(16, 185, 129, 0.05));

transition: all 0.3s ease;

}

.dark .ids-section {

background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(16, 185, 129, 0.1));

.ids-section:hover {

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

.dark .ids-section:hover {

box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);

.threat-level {

width: 100%;

height: 8px;

background: #e5e7eb;

border-radius: 4px;

overflow: hidden;

margin: 8px 0;

.threat-level-fill {

height: 100%;

border-radius: 4px;

transition: width 1s ease-in-out;

.threat-low {

background: var(--secondary);
}

.threat-medium {

background: var(--tertiary);

.threat-high {

background: var(--danger);

.threat-critical {

background: var(--danger);

animation: pulse-threat 2s infinite;

@keyframes pulse-threat {

0%, 100% {

opacity: 1;

50% {

opacity: 0.7;

.security-event {

display: flex;

align-items: center;

padding: 8px;

margin-bottom: 8px;

border-radius: 8px;

background-color: rgba(79, 70, 229, 0.05);

border-left: 4px solid var(--primary);

.[Link] {

background-color: rgba(245, 158, 11, 0.1);

border-left: 4px solid var(--tertiary);

.[Link] {

background-color: rgba(239, 68, 68, 0.1);

border-left: 4px solid var(--danger);

.security-event-icon {

width: 24px;

height: 24px;

margin-right: 12px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

.security-event-info {

flex: 1;

.security-event-time {

font-size: 12px;

color: var(--text-light);

opacity: 0.7;
}

.dark .security-event-time {

color: var(--text-dark);

.security-threat-counter {

position: relative;

width: 80px;

height: 80px;

margin: 0 auto;

.threat-circle-bg {

fill: none;

stroke: #e5e7eb;

stroke-width: 8;

.dark .threat-circle-bg {

stroke: #4b5563;

.threat-circle-value {

fill: none;

stroke-width: 8;

stroke-linecap: round;

transition: stroke-dashoffset 1s ease;

.threat-count {
position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 20px;

font-weight: 600;

.blink {

animation: blink 1s linear infinite;

@keyframes blink {

0% {

opacity: 1;

50% {

opacity: 0.3;

100% {

opacity: 1;

.ports-container {

display: flex;

flex-wrap: wrap;

gap: 8px;

.port-badge {
padding: 4px 8px;

border-radius: 4px;

font-size: 12px;

font-weight: 500;

background-color: rgba(79, 70, 229, 0.1);

color: var(--primary);

display: flex;

align-items: center;

.dark .port-badge {

background-color: rgba(79, 70, 229, 0.2);

.[Link] {

background-color: rgba(245, 158, 11, 0.1);

color: var(--tertiary);

.dark .[Link] {

background-color: rgba(245, 158, 11, 0.2);

.[Link] {

background-color: rgba(239, 68, 68, 0.1);

color: var(--danger);

.dark .[Link] {

background-color: rgba(239, 68, 68, 0.2);

}
</style>

</head>

<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-all duration-

300">

<div class="min-h-screen gradient-bg">

<header class="py-4 px-6 md:px-10 flex flex-col md:flex-row justify-between items-center

shadow-sm bg-white dark:bg-gray-800 sticky top-0 z-10">

<div class="flex items-center mb-4 md:mb-0">

<div class="enhanced-logo mr-4">

</div>

<div>

<h1 class="text-2xl font-bold text-primary">System Monitor</h1>

<p class="text-sm text-gray-500 dark:text-gray-400">ENSA Berrechid</p>

</div>

<div class="flex items-center space-x-4">

<p class="text-sm text-gray-500 dark:text-gray-400">Dernière mise à jour</p>

<p class="font-medium" id="current-time">Chargement...</p>

</div>

<button id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-

gray-200 dark:hover:bg-gray-600 focus:outline-none">

<svg id="sun-icon" class="w-6 h-6 text-yellow-500 hidden" fill="none"

stroke="currentColor" viewBox="0 0 24 24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0

16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343
17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>

</svg>

<svg id="moon-icon" class="w-6 h-6 text-indigo-300" fill="none" stroke="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354

15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>

</button>

<div class="flex space-x-2">

<button id="refresh-btn" class="btn px-4 py-2 bg-primary hover:bg-primary-light text-

white rounded-lg flex items-center">

<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4

4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-
2m15.357 2H15"></path>

</svg>

Rafraîchir

</button>

<button id="export-btn" class="btn px-4 py-2 bg-white hover:bg-gray-100 dark:bg-gray-

700 dark:hover:bg-gray-600 text-gray-800 dark:text-white border border-gray-200 dark:border-gray-
600 rounded-lg flex items-center">

<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12

10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1
0 01.293.707V19a2 2 0 01-2 2z"></path>

</svg>

Exporter

</button>

</div>

</header>

<main class="p-6 md:p-10">

<div class="card bg-white dark:bg-gray-800 p-6 relative overflow-hidden">

<div>

<h2 class="text-xl font-semibold mb-2">Informations Système</h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

<div>

<p class="text-sm text-gray-500 dark:text-gray-400">Nom de la machine</p>

<p class="font-medium" id="machine-name">DESKTOP-4UL6JAV</p>

</div>

<div>

<p class="text-sm text-gray-500 dark:text-gray-400">Adresse IP</p>

<p class="font-medium" id="machine-ip">[Link]</p>

</div>

<div>

<p class="text-sm text-gray-500 dark:text-gray-400">Système d'exploitation</p>

<p class="font-medium" id="os-info">Windows</p>

</div>

<div class="mt-4 md:mt-0">

<div class="flex items-center">

<div class="flex items-center mr-6">

<div class="status-indicator status-good"></div>

<span class="text-sm font-medium">Système en ligne</span>

</div>

<div class="flex items-center">

<div class="status-indicator status-good"></div>

<span class="text-sm font-medium" id="uptime">Uptime: 1j 5h 30m</span>

</div>

</div>
</div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h2 class="text-xl font-semibold mb-4">Architecture du Projet</h2>

<div class="flex flex-col items-center">

<img
src="[Link]
ea36b1f04570a3bd70?w=1280&h=853"

alt="Architecture du système de surveillance à distance SSH"

class="architecture-image max-w-full h-auto shadow-lg rounded-lg mb-6"

width="800">

<div class="mt-4 text-center max-w-3xl">

<p class="text-gray-600 dark:text-gray-300">

Notre système utilise une architecture client-serveur via SSH pour surveiller les
performances système à distance.

Un ordinateur de contrôle sous Linux/Ubuntu se connecte via SSH à une machine

cible Windows pour collecter et analyser

les données de performance en temps réel.

</p>

</div>

<h2 class="text-xl font-semibold mb-4">Système de Détection d'Intrusions (IDS)</h2>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

<div class="col-span-1 lg:col-span-2">

<p class="text-gray-600 dark:text-gray-300 mb-4">

La sécurité des systèmes informatiques étant devenue une priorité majeure,

notre projet intègre un mécanisme de Détection d'Intrusions Réseau, ou IDS (Intrusion Detection
System). L'objectif est de surveiller en continu le trafic réseau de la machine afin de détecter tout
comportement anormal ou suspect pouvant indiquer une tentative d'intrusion. Nous avons opté
pour un IDS léger, conçu pour consommer peu de ressources, ce qui le rend idéal pour une utilisation
sur des postes individuels, des machines virtuelles ou des systèmes embarqués. Cet IDS assure une
première couche de défense en analysant les connexions entrantes et sortantes, tout en alertant
l'utilisateur via une interface claire et réactive.

</p>

<h3 class="text-lg font-medium mb-3">Intégration dans l'interface & Résultats

attendus</h3>

<p class="text-gray-600 dark:text-gray-300 mb-4">

Notre IDS léger s'intègre de manière transparente à l'interface de supervision de

la machine. Lorsqu'un comportement anormal est détecté -- par exemple une tentative de connexion
non autorisée, un scan de ports ou une activité inhabituelle sur des ports sensibles -- une alerte
visuelle est immédiatement déclenchée. L'utilisateur peut alors consulter un journal des événements
pour analyser en détail la nature de l'activité détectée. Cette intégration intelligente renforce la
proactivité du système tout en gardant l'expérience utilisateur fluide et ergonomique. À travers cette
fonctionnalité, nous visons à améliorer la résilience du poste de travail contre les menaces réseau,
tout en sensibilisant l'utilisateur aux risques potentiels en temps réel.

</p>

</div>

<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">

<h3 class="text-lg font-medium mb-3 text-center">État de Sécurité</h3>

<div class="security-threat-counter mb-4">

<svg width="80" height="80" viewBox="0 0 80 80">

<circle class="threat-circle-bg" cx="40" cy="40" r="36"></circle>

<circle id="threat-progress" class="threat-circle-value" style="stroke: var(--

danger);" cx="40" cy="40" r="36" stroke-dasharray="226.195"
stroke-dashoffset="158.3365"></circle>

</svg>
<div class="threat-count text-danger" id="threat-count">3</div>

</div>

<div class="flex justify-between text-sm mb-1">

<span>Niveau de menace</span>

<span id="threat-level-text" class="text-warning">Moyen</span>

</div>

<div id="threat-level-bar" class="threat-level-fill threat-medium" style="width:

45%;"></div>

</div>

<p class="text-sm font-medium mb-2">Ports surveillés</p>

<div class="ports-container" id="monitored-ports">

<span class="port-badge">22 (SSH)</span>

<span class="port-badge">80 (HTTP)</span>

<span class="port-badge">443 (HTTPS)</span>

<span class="port-badge">3389 (RDP)</span>

<span class="port-badge warning">21 (FTP)</span>

<span class="port-badge danger">135 (RPC)</span>

</div>

<div>

<button id="ids-details-btn" class="w-full btn px-4 py-2 bg-primary hover:bg-

primary-light text-white rounded-lg flex items-center justify-center">

<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0
002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>

</svg>

Rapport complet
</button>

</div>

<h3 class="text-lg font-medium mb-3">Dernières alertes de sécurité</h3>

<div class="max-h-60 overflow-y-auto" id="security-events">

<div class="security-event danger">

<div class="security-event-icon bg-danger/10 text-danger">

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-
1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>

</svg>

</div>

<div class="flex justify-between">

<p class="font-medium">Tentative d'accès non autorisée</p>

<span class="security-event-time">5/28/2025 [Link] AM</span>

</div>

<p class="text-sm text-gray-600 dark:text-gray-400">Tentative de connexion

multiple échouée depuis [Link] sur le port 22 (SSH)</p>

</div>

<div class="security-event warning">

<div class="security-event-icon bg-tertiary/10 text-tertiary">

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-
1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>

</svg>

</div>
<div class="security-event-info">

<div class="flex justify-between">

<p class="font-medium">Scan de ports détecté</p>

<span class="security-event-time">5/28/2025 [Link] AM</span>

</div>

<p class="text-sm text-gray-600 dark:text-gray-400">Scan de ports séquentiel

détecté depuis [Link]</p>

</div>

<div class="security-event-icon bg-primary/10 text-primary">

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

</div>

<div class="flex justify-between">

<p class="font-medium">Activité inhabituelle sur port 3389</p>

<span class="security-event-time">5/27/2025 [Link] PM</span>

</div>

<p class="text-sm text-gray-600 dark:text-gray-400">Trafic élevé détecté sur le

port 3389 (RDP) depuis [Link]</p>

</div>

<div class="security-event-icon bg-primary/10 text-primary">

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>
</div>

<div class="flex justify-between">

<p class="font-medium">Vérification de vulnérabilité</p>

<span class="security-event-time">5/27/2025 [Link] PM</span>

</div>

<p class="text-sm text-gray-600 dark:text-gray-400">Mise à jour des signatures

de vulnérabilités terminée</p>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h2 class="text-xl font-semibold mb-4">Notre Équipe</h2>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

<div class="team-member bg-gradient-to-br from-primary/10 to-secondary/10

dark:from-primary/20 dark:to-secondary/20 rounded-lg p-6 text-center">

<div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-r from-primary to-

info flex items-center justify-center text-white text-2xl font-bold">

</div>

<h3 class="text-lg font-semibold text-primary">ELHASBIS Zakaria</h3>

<p class="text-gray-600 dark:text-gray-300 mt-2">Développeur Principal</p>

<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">

Expert en architecture système et programmation réseau, responsable de

l'intégration SSH.
</p>

</div>

<div class="team-member bg-gradient-to-br from-info/10 to-tertiary/10 dark:from-

info/20 dark:to-tertiary/20 rounded-lg p-6 text-center">

<div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-r from-info to-

tertiary flex items-center justify-center text-white text-2xl font-bold">

</div>

<h3 class="text-lg font-semibold text-info">KISTASS Yassine</h3>

<p class="text-gray-600 dark:text-gray-300 mt-2">Développeur Frontend</p>

<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">

Spécialiste UI/UX et visualisation de données, responsable de l'interface utilisateur.

</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Utilisation CPU</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Utilisation moyenne de tous les cœurs</span>

</div>
</div>

<div class="flex flex-col items-center">

<div class="progress-circle mb-4">

<svg width="120" height="120" viewBox="0 0 120 120">

<circle class="progress-circle-bg" cx="60" cy="60" r="54"></circle>

<circle id="cpu-progress" class="progress-circle-value" style="stroke: var(--

primary);" cx="60" cy="60" r="54" stroke-dasharray="339.292"
stroke-dashoffset="237.5044"></circle>

</svg>

<div class="progress-text" id="cpu-percentage">30%</div>

</div>

<div class="w-full mt-4">

<div class="flex justify-between text-sm mb-1">

<span>Charge actuelle</span>

</div>

<div id="cpu-chart" class="w-full h-20"></div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Mémoire RAM</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Utilisation totale de la mémoire</span>

</div>

<div class="flex flex-col items-center">

<div class="progress-circle mb-4">

<svg width="120" height="120" viewBox="0 0 120 120">

<circle class="progress-circle-bg" cx="60" cy="60" r="54"></circle>

<circle id="ram-progress" class="progress-circle-value" style="stroke: var(--

tertiary);" cx="60" cy="60" r="54" stroke-dasharray="339.292"
stroke-dashoffset="169.646"></circle>

</svg>

<div class="progress-text" id="ram-percentage">50%</div>

</div>

<div class="w-full mt-4">

<div class="flex justify-between text-sm mb-1">

<span>Utilisée / Totale</span>

<span id="ram-usage">8GB / 16GB</span>

</div>

<div id="ram-chart" class="w-full h-20"></div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Espace Disque</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>
<span class="tooltiptext">Utilisation des disques</span>

</div>

<div class="flex justify-between text-sm mb-1">

<span>C: System (SSD)</span>

<span id="disk-c-usage">120GB / 256GB</span>

</div>

<div id="disk-c-fill" class="process-bar-fill bg-secondary" style="width:

47%;"></div>

</div>

<div class="flex justify-between text-sm mb-1">

<span>D: Data (HDD)</span>

<span id="disk-d-usage">756GB / 1TB</span>

</div>

<div id="disk-d-fill" class="process-bar-fill bg-tertiary" style="width: 75%;"></div>

</div>

<div>

<div class="flex justify-between text-sm mb-1">

<span>E: Backup (HDD)</span>

<span id="disk-e-usage">1.8TB / 2TB</span>

</div>

<div id="disk-e-fill" class="process-bar-fill bg-danger" style="width: 90%;"></div>

</div>
</div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Réseau</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Trafic réseau en temps réel</span>

</div>

<div>

<div class="grid grid-cols-2 gap-4 mb-4">

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Ping</p>

<p class="text-xl font-semibold" id="ping-value">24 ms</p>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Status</p>

<p class="text-xl font-semibold flex items-center">

<span class="status-indicator status-good"></span>

<span id="network-status">Stable</span>

</p>

</div>

<span>Download</span>

<span id="download-speed">42.5 Mbps</span>

</div>

<div id="download-chart" class="w-full h-16"></div>

</div>

<div>

<div class="flex justify-between text-sm mb-1">

<span>Upload</span>

<span id="upload-speed">12.8 Mbps</span>

</div>

<div id="upload-chart" class="w-full h-16"></div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Températures</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Températures des composants</span>

</div>

<div class="grid grid-cols-2 gap-4">

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">CPU</p>

<div class="process-bar mt-2">

<div id="cpu-temp-bar" class="process-bar-fill bg-secondary" style="width:

31%;"></div>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">GPU</p>

<p class="text-xl font-semibold" id="gpu-temp">26°C</p>

<div class="process-bar mt-2">

<div id="gpu-temp-bar" class="process-bar-fill bg-secondary" style="width:

26%;"></div>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Disque système</p>

<p class="text-xl font-semibold" id="ssd-temp">21°C</p>

<div class="process-bar mt-2">

<div id="ssd-temp-bar" class="process-bar-fill bg-secondary" style="width:

21%;"></div>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Ambiant</p>

<p class="text-xl font-semibold" id="ambient-temp">26°C</p>

<div class="process-bar mt-2">

<div id="ambient-temp-bar" class="process-bar-fill bg-secondary" style="width:

26%;"></div>

</div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Logs Système</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Derniers logs système</span>

</div>

<div class="max-h-60 overflow-y-auto" id="system-logs">

</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">

<div class="card bg-white dark:bg-gray-800 p-6">

<h3 class="text-lg font-semibold mb-4">Top Processus CPU</h3>

<table class="w-full text-sm">

<thead>

<tr class="border-b border-gray-200 dark:border-gray-700">

<th class="text-left py-2 pr-2">Processus</th>

<th class="text-right py-2 pl-2">Utilisation</th>

</tr>
</thead>

</tbody>

</table>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h3 class="text-lg font-semibold mb-4">Top Processus RAM</h3>

<table class="w-full text-sm">

<thead>

<tr class="border-b border-gray-200 dark:border-gray-700">

<th class="text-left py-2 pr-2">Processus</th>

<th class="text-right py-2 pl-2">Utilisation</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h3 class="text-lg font-semibold mb-4">Logs Application</h3>

</div>

</main>

<footer class="bg-white dark:bg-gray-800 p-6 md:p-10 border-t border-gray-200 dark:border-

gray-700">

<div class="max-w-6xl mx-auto">

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

<div>

<h4 class="text-lg font-semibold mb-4">À propos du projet</h4>

<p class="text-gray-600 dark:text-gray-400 text-sm">

Ce tableau de bord de surveillance système a été développé dans le cadre d'un projet
de fin d'études

à l'École Nationale des Sciences Appliquées de Berrechid (ENSA-B). Il permet de

surveiller

en temps réel les performances de votre système informatique.

</p>

</div>

<div>

<h4 class="text-lg font-semibold mb-4">Technologies utilisées</h4>

<ul class="text-gray-600 dark:text-gray-400 text-sm space-y-2">

<li>• Frontend : HTML5, TailwindCSS, JavaScript</li>

<li>• Visualisations : ApexCharts, [Link]</li>

<li>• Données en temps réel : WebSockets</li>

<li>• Backend : Bash script avec SSH et PowerShell</li>

<li>• Sécurité : IDS léger avec analyse de trafic</li>

</ul>

</div>
<div>

<h4 class="text-lg font-semibold mb-4">Contactez-nous</h4>

<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">

Pour toute question ou suggestion concernant ce projet, n'hésitez pas à nous

contacter.

</p>

<div class="flex space-x-4">

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">

<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593

1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325
0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-
3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />

</svg>

</button>

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">

<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723

10.016 10.016 0 01-3.127 1.195 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822
4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0
003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102
2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-
13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />

</svg>

</button>

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">

<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205

[Link].82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422
18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07
1.835 2.809 1.305 [Link]-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-
1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399
3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12
[Link] 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 [Link].81 1.096.81 2.22 0 1.606-.015
2.896-.015 3.286 0 .[Link].57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-
12" />

</svg>

</button>

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">

<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853

0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0
4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063
2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782
13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24
1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />

</svg>

</button>

</div>

<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center">

<p class="text-sm text-gray-500 dark:text-gray-400">

© 2025 ENSA Berrechid. Tous droits réservés.

</p>

</div>

</footer>

</div>

// Simulated bash script data based on the actual output you provided

function getMonitoringData() {

return {

hostname: "DESKTOP-4UL6JAV",
ip: "[Link]",

os: "Windows",

uptime: "1j 5h 30m",

topCPU: [

{ name: "VirtualBoxVM", usage: 1797.22 },

{ name: "dwm", usage: 1648.02 },

{ name: "chrome", usage: 593.88 },

{ name: "msedge", usage: 550.86 },

{ name: "sldBgDwld", usage: 546.56 }

topRAM: [

{ name: "Memory Compression", usage: 604.51 },

{ name: "WhatsApp", usage: 449.79 },

{ name: "Code", usage: 420.25 },

{ name: "chrome", usage: 394.22 },

{ name: "msedge", usage: 371.06 }

temperatures: [31, 26, 21, 26], // Ignoring the 127°C value which is likely an error

cpuTemp: 31,

gpuTemp: 26,

ssdTemp: 21,

ambientTemp: 26,

systemLogs: [

{ time: "5/28/2025 [Link] AM", type: "Warning", source: "DCOM", message: "La
description de l'ID d'événement '10016'..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Microsoft-Windows-

WindowsUpdateClient", message: "Installation réussie: Windows a installé l..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Microsoft-Windows-

WindowsUpdateClient", message: "Installation démarrée : Windows a commencé ..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Microsoft-Windows-

WindowsUpdateClient", message: "Windows Update a démarré le téléchargement ..." },

{ time: "5/28/2025 [Link] AM", type: "Warning", source: "DCOM", message: "La
description de l'ID d'événement '10016'..." }
],

appLogs: [

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Software Protection

Platform Service", message: "La planification du redémarrage du service de..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "SecurityCenter", message:

"L'état Windows Defender a été mis à jour vers..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Software Protection

Platform Service", message: "La migration de bas niveau hors connexion a r..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "SecurityCenter", message:

"L'état Windows Defender a été mis à jour vers..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Software Protection

Platform Service", message: "La planification du redémarrage du service de..." }

// Données simulées pour l'IDS

ids: {

threatLevel: 45, // 0-100

threatCount: 3,

threatStatus: "Moyen", // "Faible", "Moyen", "Élevé", "Critique"

monitoredPorts: [

{ port: 22, service: "SSH", status: "normal" },

{ port: 80, service: "HTTP", status: "normal" },

{ port: 443, service: "HTTPS", status: "normal" },

{ port: 3389, service: "RDP", status: "normal" },

{ port: 21, service: "FTP", status: "warning" },

{ port: 135, service: "RPC", status: "danger" }

securityEvents: [

{ time: "5/28/2025 [Link] AM", type: "danger", title: "Tentative d'accès non
autorisée", message: "Tentative de connexion multiple échouée depuis [Link] sur le port 22
(SSH)" },

{ time: "5/28/2025 [Link] AM", type: "warning", title: "Scan de ports détecté",
message: "Scan de ports séquentiel détecté depuis [Link]" },

{ time: "5/27/2025 [Link] PM", type: "info", title: "Activité inhabituelle sur port
3389", message: "Trafic élevé détecté sur le port 3389 (RDP) depuis [Link]" },
{ time: "5/27/2025 [Link] PM", type: "info", title: "Vérification de vulnérabilité",
message: "Mise à jour des signatures de vulnérabilités terminée" }

};

// Check for dark mode preference

if ([Link] && [Link]('(prefers-color-scheme: dark)').matches) {

[Link]('dark');

[Link]('sun-icon').[Link]('hidden');

[Link]('moon-icon').[Link]('hidden');

// Listen for changes in color scheme preference

[Link]('(prefers-color-scheme: dark)').addEventListener('change', event => {

if ([Link]) {

[Link]('dark');

[Link]('sun-icon').[Link]('hidden');

[Link]('moon-icon').[Link]('hidden');

} else {

[Link]('dark');

[Link]('sun-icon').[Link]('hidden');

[Link]('moon-icon').[Link]('hidden');

});

// Theme toggle

const themeToggle = [Link]('theme-toggle');

const sunIcon = [Link]('sun-icon');

const moonIcon = [Link]('moon-icon');

[Link]('click', () => {

if ([Link]('dark')) {

[Link]('dark');

[Link]('hidden');

} else {

[Link]('dark');

[Link]('hidden');

});

// Update current time

function updateCurrentTime() {

const now = new Date();

const timeStr = [Link]([], { hour: '2-digit', minute: '2-digit', second: '2-

digit' });

const dateStr = [Link]([], { year: 'numeric', month: 'short', day: 'numeric' });

[Link]('current-time').innerText = `${dateStr} ${timeStr}`;

// Initialize charts

function initCharts() {

// CPU Chart

const cpuChartOptions = {

series: [{

name: "Utilisation CPU",

data: [28, 29, 33, 36, 32, 32, 33, 30, 30, 35, 34, 38, 35, 36, 32, 30, 31, 30]

}],

chart: {
height: 80,

type: 'area',

sparkline: {

enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {

show: false

stroke: {

curve: 'smooth',

width: 2

fill: {

type: 'gradient',

gradient: {

shadeIntensity: 1,

opacityFrom: 0.7,

opacityTo: 0.3,

stops: [0, 100]

colors: ['#4F46E5'],

tooltip: {

fixed: {

enabled: false
},

y: {

formatter: function(value) {

return value + "%";

};

const cpuChart = new ApexCharts([Link]("cpu-chart"), cpuChartOptions);

[Link]();

// RAM Chart

const ramChartOptions = {

series: [{

name: "Utilisation RAM",

data: [45, 47, 50, 48, 49, 53, 50, 55, 48, 45, 50, 52, 53, 50, 47, 49, 50, 51]

}],

chart: {

height: 80,

type: 'area',

sparkline: {

enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {

show: false
}

stroke: {

curve: 'smooth',

width: 2

fill: {

type: 'gradient',

gradient: {

shadeIntensity: 1,

opacityFrom: 0.7,

opacityTo: 0.3,

stops: [0, 100]

colors: ['#F59E0B'],

tooltip: {

fixed: {

enabled: false

y: {

formatter: function(value) {

return value + "%";

};

const ramChart = new ApexCharts([Link]("ram-chart"),

ramChartOptions);

[Link]();
// Download speed chart

const downloadChartOptions = {

series: [{

data: [38, 42, 35, 47, 39, 36, 40, 45, 42, 36, 39, 40, 41, 42, 38, 40, 36, 40]

}],

chart: {

height: 60,

type: 'area',

sparkline: {

enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {

show: false

stroke: {

curve: 'smooth',

width: 2

fill: {

type: 'gradient',

gradient: {

shadeIntensity: 1,

opacityFrom: 0.7,
opacityTo: 0.3,

stops: [0, 100]

colors: ['#10B981'],

tooltip: {

fixed: {

enabled: false

y: {

formatter: function(value) {

return value + " Mbps";

};

const downloadChart = new ApexCharts([Link]("download-chart"),

downloadChartOptions);

[Link]();

// Upload speed chart

const uploadChartOptions = {

series: [{

data: [12, 14, 10, 15, 12, 13, 10, 14, 11, 15, 12, 14, 12, 10, 13, 14, 12, 11]

}],

chart: {

height: 60,

type: 'area',

sparkline: {
enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {

show: false

stroke: {

curve: 'smooth',

width: 2

fill: {

type: 'gradient',

gradient: {

shadeIntensity: 1,

opacityFrom: 0.7,

opacityTo: 0.3,

stops: [0, 100]

colors: ['#4F46E5'],

tooltip: {

fixed: {

enabled: false

y: {

formatter: function(value) {
return value + " Mbps";

};

const uploadChart = new ApexCharts([Link]("upload-chart"),

uploadChartOptions);

[Link]();

return { cpuChart, ramChart, downloadChart, uploadChart };

// Set circle progress

function setCircleProgress(elementId, percentage) {

const circle = [Link](elementId);

const radius = [Link];

const circumference = radius * 2 * [Link];

[Link] = `${circumference} ${circumference}`;

const offset = circumference - (percentage / 100) * circumference;

[Link] = offset;

// Generate random number within range (for values not directly provided by our script)

function randomInRange(min, max) {

return [Link]([Link]() * (max - min + 1)) + min;

// Update system info from monitoring data

function updateSystemInfo() {
const data = getMonitoringData();

[Link]('machine-name').innerText = [Link];

[Link]('machine-ip').innerText = [Link];

[Link]('os-info').innerText = [Link];

[Link]('uptime').innerText = `Uptime: ${[Link]}`;

// Update CPU data

function updateCPUData(cpuChart) {

const data = getMonitoringData();

// Calculate a CPU usage percentage from the data

// Normalize top process CPU values to percentage (arbitrary scale since the values are so
high)

const maxPossibleCPU = 2000; // Assuming this is a reasonable max value

const totalCpuUsage = [Link](

([Link][0].usage / maxPossibleCPU) * 100,

100

);

[Link]('cpu-percentage').innerText = `${[Link](totalCpuUsage)}%`;

setCircleProgress('cpu-progress', totalCpuUsage);

[Link]('cpu-load').innerText = (totalCpuUsage / 10).toFixed(1);

const newCPUData = [Link][0].slice(1);

[Link](totalCpuUsage);

[Link]([{ data: newCPUData }]);

// Update CPU process table from data

let cpuProcessesHTML = '';

[Link]((process, index) => {

const isLast = index === [Link] - 1;

cpuProcessesHTML += `

<tr${!isLast ? ' class="border-b border-gray-100 dark:border-gray-700"' : ''}>

<td class="py-2 pr-2">${[Link]}</td>

<td class="text-right py-2 pl-2">${[Link](2)}</td>

</tr>

});

[Link]('cpu-processes').innerHTML = cpuProcessesHTML;

// Update RAM data

function updateRAMData(ramChart) {

const data = getMonitoringData();

// Calculate total RAM usage in MB

const totalRAMUsage = [Link]((acc, proc) => acc + [Link], 0);

const totalRAMGB = (totalRAMUsage / 1000).toFixed(2);

const totalRAM = 16; // Assuming 16GB total RAM

const ramPercentage = [Link]([Link]((totalRAMGB / totalRAM) * 100), 100);

[Link]('ram-percentage').innerText = `${ramPercentage}%`;

setCircleProgress('ram-progress', ramPercentage);

[Link]('ram-usage').innerText = `${totalRAMGB}GB / ${totalRAM}GB`;

const newRAMData = [Link][0].slice(1);

[Link](ramPercentage);
[Link]([{ data: newRAMData }]);

// Update RAM process table from data

let ramProcessesHTML = '';

[Link]((process, index) => {

const isLast = index === [Link] - 1;

const usageStr = [Link] >= 1000 ?

`${([Link] / 1000).toFixed(2)} GB` :

`${[Link](2)} MB`;

ramProcessesHTML += `

<tr${!isLast ? ' class="border-b border-gray-100 dark:border-gray-700"' : ''}>

<td class="py-2 pr-2">${[Link]}</td>

<td class="text-right py-2 pl-2">${usageStr}</td>

</tr>

});

[Link]('ram-processes').innerHTML = ramProcessesHTML;

// Update temperature data

function updateTemperatureData() {

const data = getMonitoringData();

[Link]('cpu-temp').innerText = `${[Link]}°C`;

[Link]('gpu-temp').innerText = `${[Link]}°C`;

[Link]('ssd-temp').innerText = `${[Link]}°C`;

[Link]('ambient-temp').innerText = `${[Link]}°C`;

[Link]('cpu-temp-bar').[Link] = `${[Link]}%`;
[Link]('gpu-temp-bar').[Link] = `${[Link]}%`;

[Link]('ssd-temp-bar').[Link] = `${[Link]}%`;

[Link]('ambient-temp-bar').[Link] = `${[Link]}%`;

// Update bar colors based on temperature (these are low temps, so all are green)

const cpuTempBar = [Link]('cpu-temp-bar');

const gpuTempBar = [Link]('gpu-temp-bar');

const ssdTempBar = [Link]('ssd-temp-bar');

const ambientTempBar = [Link]('ambient-temp-bar');

[Link] = 'process-bar-fill ' + ([Link] > 70 ? 'bg-danger' :

[Link] > 60 ? 'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + ([Link] > 75 ? 'bg-danger' :

[Link] > 65 ? 'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + ([Link] > 55 ? 'bg-danger' : [Link]

> 45 ? 'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + ([Link] > 45 ? 'bg-danger' :

[Link] > 40 ? 'bg-tertiary' : 'bg-secondary');

// Update IDS data

function updateIDSData() {

const data = getMonitoringData();

const ids = [Link];

// Update threat count and level

[Link]('threat-count').innerText = [Link];

[Link]('threat-level-text').innerText = [Link];

[Link]('threat-level-bar').[Link] = `${[Link]}%`;

// Set threat circle progress

setCircleProgress('threat-progress', 100 - [Link]);

// Set appropriate threat level class

const threatLevelBar = [Link]('threat-level-bar');

if ([Link] < 25) {

[Link] = 'threat-level-fill threat-low';

[Link]('threat-level-text').className = 'text-secondary';

} else if ([Link] < 50) {

[Link] = 'threat-level-fill threat-medium';

[Link]('threat-level-text').className = 'text-tertiary';

} else if ([Link] < 75) {

[Link] = 'threat-level-fill threat-high';

[Link]('threat-level-text').className = 'text-danger';

} else {

[Link] = 'threat-level-fill threat-critical';

[Link]('threat-count').className = 'threat-count text-danger blink';

[Link]('threat-level-text').className = 'text-danger blink';

// Add event listener to details button

[Link]('ids-details-btn').addEventListener('click', () => {

alert('Fonctionnalité complète disponible dans la version finale.');

});

// Update disk data (still using random since the script doesn't provide disk info)

function updateDiskData() {

const diskC = { total: 256, used: randomInRange(110, 130) };

const diskD = { total: 1024, used: randomInRange(700, 800) };

const diskE = { total: 2048, used: randomInRange(1700, 1900) };

const cPercentage = [Link](([Link] / [Link]) * 100);

const dPercentage = [Link](([Link] / [Link]) * 100);

const ePercentage = [Link](([Link] / [Link]) * 100);

[Link]('disk-c-usage').innerText = `${[Link]}GB / ${[Link]}GB`;

[Link]('disk-d-usage').innerText = `${[Link]}GB / ${[Link]}GB`;

[Link]('disk-e-usage').innerText = `${([Link] / 1024).toFixed(1)}TB / $

{[Link] / 1024}TB`;

[Link]('disk-c-fill').[Link] = `${cPercentage}%`;

[Link]('disk-d-fill').[Link] = `${dPercentage}%`;

[Link]('disk-e-fill').[Link] = `${ePercentage}%`;

// Update bar colors based on usage

const cElement = [Link]('disk-c-fill');

const dElement = [Link]('disk-d-fill');

const eElement = [Link]('disk-e-fill');

[Link] = 'process-bar-fill ' + (cPercentage > 80 ? 'bg-danger' : cPercentage > 60 ?

'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + (dPercentage > 80 ? 'bg-danger' : dPercentage > 60 ?

'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + (ePercentage > 80 ? 'bg-danger' : ePercentage > 60 ?

'bg-tertiary' : 'bg-secondary');

// Update network data (still using random since the script doesn't provide network info)

function updateNetworkData(downloadChart, uploadChart) {

const ping = randomInRange(15, 50);

[Link]('ping-value').innerText = `${ping} ms`;

const networkStatus = ping < 30 ? 'Stable' : ping < 50 ? 'Good' : 'Latent';

[Link]('network-status').innerText = networkStatus;
const statusIndicator = [Link]('#network-status').previousElementSibling;

[Link] = 'status-indicator ' + (ping < 30 ? 'status-good' : ping < 50 ? 'status-

good' : 'status-warning');

const downloadSpeed = randomInRange(35, 50);

[Link]('download-speed').innerText = `${downloadSpeed} Mbps`;

const uploadSpeed = randomInRange(8, 15);

[Link]('upload-speed').innerText = `${uploadSpeed} Mbps`;

const newDownloadData = [Link][0].slice(1);

[Link](downloadSpeed);

[Link]([{ data: newDownloadData }]);

const newUploadData = [Link][0].slice(1);

[Link](uploadSpeed);

[Link]([{ data: newUploadData }]);

// Update system logs

function updateSystemLogs() {

const data = getMonitoringData();

let logsHTML = '';

[Link](log => {

const logClass = [Link]() === 'error' ? 'log-error' :

[Link]() === 'warning' ? 'log-warning' : 'log-info';

logsHTML += `

<div class="log-entry ${logClass} mb-2">

<span class="text-xs text-gray-500 dark:text-gray-400">${[Link]}</span>

</div>

</div>

});

[Link]('system-logs').innerHTML = logsHTML;

// Update application logs

function updateAppLogs() {

const data = getMonitoringData();

let logsHTML = '';

[Link](log => {

const logClass = [Link]() === 'error' ? 'log-error' :

[Link]() === 'warning' ? 'log-warning' : 'log-info';

logsHTML += `

<div class="log-entry ${logClass} mb-2">

<div class="flex justify-between mb-1">

<span class="text-xs text-gray-500 dark:text-gray-400">${[Link]}</span>

</div>

</div>

});
[Link]('app-logs').innerHTML = logsHTML;

// Refresh all data

function refreshAllData(charts) {

updateCurrentTime();

updateSystemInfo();

updateCPUData([Link]);

updateRAMData([Link]);

updateDiskData();

updateNetworkData([Link], [Link]);

updateTemperatureData();

updateSystemLogs();

updateAppLogs();

updateIDSData();

// Initialize on page load

[Link]('DOMContentLoaded', () => {

const charts = initCharts();

// Initial update

updateCurrentTime();

updateSystemInfo();

updateCPUData([Link]);

updateRAMData([Link]);

updateTemperatureData();

updateSystemLogs();

updateAppLogs();

updateIDSData();
// Set up periodic updates

setInterval(() => updateCurrentTime(), 1000);

setInterval(() => refreshAllData(charts), 5000);

// Refresh button functionality

[Link]('refresh-btn').addEventListener('click', () => {

refreshAllData(charts);

});

// Export button functionality

[Link]('export-btn').addEventListener('click', () => {

const now = new Date();

const dateStr = [Link]().replace(/:/g, '-').substring(0, 19);

const data = getMonitoringData();

// Create a text version of the monitoring data

let reportText = `=== Rapport de Monitoring ${dateStr} ===\n\n`;

reportText += `[ Hostname ]\n${[Link]}\n\n`;

reportText += `[ Adresse IP ]\n${[Link]}\n\n`;

reportText += `[ Top 5 CPU ]\n\n`;

reportText += `Name CPU\n`;

reportText += `---- ---\n`;

[Link](proc => {

reportText += `${[Link](20)} ${[Link](2)}\n`;

});

reportText += `\n\n[ Top 5 RAM ]\n\n`;

reportText += `Name RAM_MB\n`;

reportText += `---- ------\n`;

[Link](proc => {

reportText += `${[Link](20)} ${[Link](2)}\n`;

});

reportText += `\n\n[ Température ]\n`;

[Link](temp => {

reportText += `${temp}\n`;

});

reportText += `\n[ Logs Système ]\n\n`;

reportText += `TimeGenerated EntryType Source Message\n`;

reportText += `------------- --------- ------ -------\n`;

[Link](log => {

reportText += `${[Link](25)} ${[Link](10)} ${[Link](40)} $

{[Link]}\n`;

});

reportText += `\n\n[ Logs Application ]\n\n`;

reportText += `TimeGenerated EntryType Source Message\n`;

reportText += `------------- --------- ------ -------\n`;

[Link](log => {

reportText += `${[Link](25)} ${[Link](10)} ${[Link](40)} $

{[Link]}\n`;

});

reportText += `\n\n[ Alertes de Sécurité IDS ]\n\n`;

reportText += `Niveau de menace: ${[Link]} (${[Link]}%)\n`;

reportText += `Nombre d'alertes: ${[Link]}\n\n`;

reportText += `Dernières alertes:\n`;

[Link](event => {

reportText += `- [${[Link]}] ${[Link]}: ${[Link]}\n`;

});
reportText += `\n\n✅ Rapport sauvegardé à : ${dateStr}.log\n`;

reportText += `\n\nRapport généré par: ELHASBIS Zakaria et KISTASS Yassine\n`;

reportText += `© 2025 ENSA Berrechid. Tous droits réservés.`;

// Create a Blob with the text content

const blob = new Blob([reportText], { type: 'text/plain' });

// Create a link element and trigger the download

const downloadLink = [Link]('a');

[Link] = [Link](blob);

[Link] = `rapport_${[Link](/[:-]/g, '_')}.log`;

[Link](downloadLink);

[Link]();

[Link](downloadLink);

});

</script>

</body>

</html>
Code 1

<!DOCTYPE html>

<head>

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

<title>ENSA-B System Monitor</title>

<script src="[Link]

<script src="[Link] crossorigin="anonymous"></script>

<style>

:root {

--primary: #4F46E5;

--primary-light: #6366F1;

--secondary: #10B981;

--tertiary: #F59E0B;

--danger: #EF4444;

--info: #0EA5E9;

--bg-light: #FFFFFF;

--bg-dark: #0F172A;

--card-light: #F9FAFB;

--card-dark: #1E293B;

--text-light: #1F2937;
--text-dark: #F3F4F6;

body {

font-family: 'Poppins', sans-serif;

transition: background-color 0.3s, color 0.3s;

.dark {

color-scheme: dark;

.card {

border-radius: 12px;

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

transition: all 0.3s ease;

.dark .card {

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

.card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

.dark .card:hover {

box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);

}
.btn {

transition: all 0.2s ease;

.btn:hover {

transform: translateY(-2px);

.btn:active {

transform: translateY(0);

.animate-pulse-slow {

animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse {

0%, 100% {

opacity: 1;

50% {

opacity: 0.8;

.logo-container {

position: relative;

overflow: hidden;

border-radius: 50%;

width: 50px;

height: 50px;
background: linear-gradient(135deg, var(--primary), var(--secondary));

.logo-text {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-weight: bold;

color: white;

font-size: 16px;

.process-bar {

height: 8px;

border-radius: 4px;

background: #e5e7eb;

overflow: hidden;

.process-bar-fill {

height: 100%;

border-radius: 4px;

transition: width 1s ease-in-out;

.gradient-bg {

background: linear-gradient(135deg, #4F46E522, #10B98122);

.dark .gradient-bg {
background: linear-gradient(135deg, #4F46E511, #10B98111);

/* Tooltip styles */

.tooltip {

position: relative;

display: inline-block;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

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

color: var(--bg-light);

text-align: center;

border-radius: 6px;

padding: 5px;

position: absolute;

z-index: 1;

bottom: 125%;

left: 50%;

transform: translateX(-50%);

opacity: 0;

transition: opacity 0.3s;

.dark .tooltip .tooltiptext {

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

color: var(--bg-dark);

}
.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

/* Progress Circle */

.progress-circle {

position: relative;

width: 120px;

height: 120px;

.progress-circle-bg {

fill: none;

stroke: #e5e7eb;

stroke-width: 8;

.dark .progress-circle-bg {

stroke: #4b5563;

.progress-circle-value {

fill: none;

stroke-width: 8;

stroke-linecap: round;

transition: stroke-dashoffset 1s ease;

.progress-text {

position: absolute;
top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 24px;

font-weight: 600;

/* Custom Scrollbar */

::-webkit-scrollbar {

width: 8px;

height: 8px;

::-webkit-scrollbar-track {

background: #f1f1f1;

border-radius: 10px;

.dark ::-webkit-scrollbar-track {

background: #333;

::-webkit-scrollbar-thumb {

background: #888;

border-radius: 10px;

::-webkit-scrollbar-thumb:hover {

background: #555;

}
/* Network Status Indicator */

.status-indicator {

display: inline-block;

width: 12px;

height: 12px;

border-radius: 50%;

margin-right: 8px;

.status-good {

background-color: var(--secondary);

box-shadow: 0 0 8px var(--secondary);

.status-warning {

background-color: var(--tertiary);

box-shadow: 0 0 8px var(--tertiary);

.status-bad {

background-color: var(--danger);

box-shadow: 0 0 8px var(--danger);

/* Wave Animation */

.wave {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;
background: linear-gradient(to bottom, transparent, rgba(79, 70, 229, 0.2));

border-radius: 12px;

animation: wave 8s ease-in-out infinite;

transform-origin: bottom center;

@keyframes wave {

0%, 100% {

transform: scaleY(0.8);

50% {

transform: scaleY(1.1);

/* ENSA-B Logo Animation */

@keyframes pulse-border {

0%, 100% {

box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);

50% {

box-shadow: 0 0 0 5px rgba(79, 70, 229, 0);

.pulse-border {

animation: pulse-border 2s infinite;

/* Log entries styles */

.log-entry {
padding: 8px;

margin-bottom: 8px;

border-radius: 8px;

font-size: 14px;

.log-info {

background-color: rgba(14, 165, 233, 0.1);

border-left: 4px solid var(--info);

.log-warning {

background-color: rgba(245, 158, 11, 0.1);

border-left: 4px solid var(--tertiary);

.log-error {

background-color: rgba(239, 68, 68, 0.1);

border-left: 4px solid var(--danger);

.dark .log-info {

background-color: rgba(14, 165, 233, 0.2);

.dark .log-warning {

background-color: rgba(245, 158, 11, 0.2);

.dark .log-error {

background-color: rgba(239, 68, 68, 0.2);

}

/* Project Architecture Section */

.architecture-section {

position: relative;

padding: 2rem;

border-radius: 1rem;

overflow: hidden;

background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(16, 185, 129, 0.05));

.dark .architecture-section {

background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.1));

.architecture-image {

border-radius: 0.75rem;

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

transition: transform 0.3s ease;

.architecture-image:hover {

transform: scale(1.01);

/* Team Section */

.team-section {

border-radius: 0.75rem;

overflow: hidden;

}
.team-member {

transition: all 0.3s ease;

.team-member:hover {

transform: translateY(-5px);

/* Enhance Logo */

.enhanced-logo {

display: flex;

align-items: center;

justify-content: center;

position: relative;

width: 50px;

height: 50px;

border-radius: 50%;

background: conic-gradient(var(--primary), var(--secondary), var(--tertiary), var(--info), var(--

primary));

animation: rotate 3s linear infinite;

box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);

.enhanced-logo::before {

content: '';

position: absolute;

width: 80%;

height: 80%;

border-radius: 50%;

background: white;

z-index: 1;
}

.dark .enhanced-logo::before {

background: var(--card-dark);

.enhanced-logo-text {

position: absolute;

z-index: 2;

font-weight: bold;

font-size: 16px;

background: linear-gradient(to right, var(--primary), var(--secondary));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

@keyframes rotate {

from {

transform: rotate(0deg);

to {

transform: rotate(360deg);

</style>

</head>

<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-all duration-

300">

<div class="min-h-screen gradient-bg">

<header class="py-4 px-6 md:px-10 flex flex-col md:flex-row justify-between items-center

shadow-sm bg-white dark:bg-gray-800 sticky top-0 z-10">
<div class="flex items-center mb-4 md:mb-0">

<div class="enhanced-logo mr-4">

</div>

<div>

<h1 class="text-2xl font-bold text-primary">System Monitor</h1>

<p class="text-sm text-gray-500 dark:text-gray-400">ENSA Berrechid</p>

</div>

<div class="flex items-center space-x-4">

<p class="text-sm text-gray-500 dark:text-gray-400">Dernière mise à jour</p>

<p class="font-medium" id="current-time">Chargement...</p>

</div>

<button id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-

gray-200 dark:hover:bg-gray-600 focus:outline-none">

<svg id="sun-icon" class="w-6 h-6 text-yellow-500 hidden" fill="none"

stroke="currentColor" viewBox="0 0 24 24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0

16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343
17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>

</svg>

<svg id="moon-icon" class="w-6 h-6 text-indigo-300" fill="none" stroke="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354

15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>

</svg>

</button>

<div class="flex space-x-2">

<button id="refresh-btn" class="btn px-4 py-2 bg-primary hover:bg-primary-light text-

white rounded-lg flex items-center">

<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4
4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-
2m15.357 2H15"></path>

</svg>

Rafraîchir

</button>

<button id="export-btn" class="btn px-4 py-2 bg-white hover:bg-gray-100 dark:bg-gray-

700 dark:hover:bg-gray-600 text-gray-800 dark:text-white border border-gray-200 dark:border-gray-
600 rounded-lg flex items-center">

<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"

xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12

10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1
0 01.293.707V19a2 2 0 01-2 2z"></path>

</svg>

Exporter

</button>

</div>

</header>

<main class="p-6 md:p-10">

<div class="card bg-white dark:bg-gray-800 p-6 relative overflow-hidden">

<div class="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-

center">

<div>

<h2 class="text-xl font-semibold mb-2">Informations Système</h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

<div>

<p class="text-sm text-gray-500 dark:text-gray-400">Nom de la machine</p>

<p class="font-medium" id="machine-name">DESKTOP-4UL6JAV</p>

</div>

<div>

<p class="text-sm text-gray-500 dark:text-gray-400">Adresse IP</p>

<p class="font-medium" id="machine-ip">[Link]</p>

</div>

<div>

<p class="text-sm text-gray-500 dark:text-gray-400">Système d'exploitation</p>

<p class="font-medium" id="os-info">Windows</p>

</div>

<div class="mt-4 md:mt-0">

<div class="flex items-center">

<div class="flex items-center mr-6">

<div class="status-indicator status-good"></div>

<span class="text-sm font-medium">Système en ligne</span>

</div>

<div class="flex items-center">

<div class="status-indicator status-good"></div>

<span class="text-sm font-medium" id="uptime">Uptime: 1j 5h 30m</span>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h2 class="text-xl font-semibold mb-4">Architecture du Projet</h2>

<div class="flex flex-col items-center">

<img
src="[Link]
ea36b1f04570a3bd70?w=1280&h=853"

alt="Architecture du système de surveillance à distance SSH"

class="architecture-image max-w-full h-auto shadow-lg rounded-lg mb-6"

width="800">

<div class="mt-4 text-center max-w-3xl">

<p class="text-gray-600 dark:text-gray-300">

Notre système utilise une architecture client-serveur via SSH pour surveiller les
performances système à distance.

Un ordinateur de contrôle sous Linux/Ubuntu se connecte via SSH à une machine

cible Windows pour collecter et analyser

les données de performance en temps réel.

</p>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h2 class="text-xl font-semibold mb-4">Notre Équipe</h2>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

<div class="team-member bg-gradient-to-br from-primary/10 to-secondary/10

dark:from-primary/20 dark:to-secondary/20 rounded-lg p-6 text-center">

<div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-r from-primary to-

info flex items-center justify-center text-white text-2xl font-bold">

ZE
</div>

<h3 class="text-lg font-semibold text-primary">ELHASBIS Zakaria</h3>

<p class="text-gray-600 dark:text-gray-300 mt-2">Développeur Principal</p>

<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">

Expert en architecture système et programmation réseau, responsable de

l'intégration SSH.

</p>

</div>

<div class="team-member bg-gradient-to-br from-info/10 to-tertiary/10 dark:from-

info/20 dark:to-tertiary/20 rounded-lg p-6 text-center">

<div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-r from-info to-

tertiary flex items-center justify-center text-white text-2xl font-bold">

</div>

<h3 class="text-lg font-semibold text-info">KISTASS Yassine</h3>

<p class="text-gray-600 dark:text-gray-300 mt-2">Développeur Frontend</p>

<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">

Spécialiste UI/UX et visualisation de données, responsable de l'interface utilisateur.

</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Utilisation CPU</h3>

<div class="tooltip">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24
24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Utilisation moyenne de tous les cœurs</span>

</div>

<div class="flex flex-col items-center">

<div class="progress-circle mb-4">

<svg width="120" height="120" viewBox="0 0 120 120">

<circle class="progress-circle-bg" cx="60" cy="60" r="54"></circle>

<circle id="cpu-progress" class="progress-circle-value" style="stroke: var(--

primary);" cx="60" cy="60" r="54" stroke-dasharray="339.292"
stroke-dashoffset="237.5044"></circle>

</svg>

<div class="progress-text" id="cpu-percentage">30%</div>

</div>

<div class="w-full mt-4">

<div class="flex justify-between text-sm mb-1">

<span>Charge actuelle</span>

</div>

<div id="cpu-chart" class="w-full h-20"></div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Mémoire RAM</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Utilisation totale de la mémoire</span>

</div>

<div class="flex flex-col items-center">

<div class="progress-circle mb-4">

<svg width="120" height="120" viewBox="0 0 120 120">

<circle class="progress-circle-bg" cx="60" cy="60" r="54"></circle>

<circle id="ram-progress" class="progress-circle-value" style="stroke: var(--

tertiary);" cx="60" cy="60" r="54" stroke-dasharray="339.292"
stroke-dashoffset="169.646"></circle>

</svg>

<div class="progress-text" id="ram-percentage">50%</div>

</div>

<div class="w-full mt-4">

<div class="flex justify-between text-sm mb-1">

<span>Utilisée / Totale</span>

<span id="ram-usage">8GB / 16GB</span>

</div>

<div id="ram-chart" class="w-full h-20"></div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Espace Disque</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Utilisation des disques</span>

</div>

<div class="flex justify-between text-sm mb-1">

<span>C: System (SSD)</span>

<span id="disk-c-usage">120GB / 256GB</span>

</div>

<div id="disk-c-fill" class="process-bar-fill bg-secondary" style="width:

47%;"></div>

</div>

<div class="flex justify-between text-sm mb-1">

<span>D: Data (HDD)</span>

<span id="disk-d-usage">756GB / 1TB</span>

</div>

<div id="disk-d-fill" class="process-bar-fill bg-tertiary" style="width: 75%;"></div>

</div>

<div>

<div class="flex justify-between text-sm mb-1">

<span>E: Backup (HDD)</span>

<span id="disk-e-usage">1.8TB / 2TB</span>

</div>

<div id="disk-e-fill" class="process-bar-fill bg-danger" style="width: 90%;"></div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Réseau</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Trafic réseau en temps réel</span>

</div>

<div>

<div class="grid grid-cols-2 gap-4 mb-4">

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Ping</p>

<p class="text-xl font-semibold" id="ping-value">24 ms</p>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Status</p>

<p class="text-xl font-semibold flex items-center">

<span id="network-status">Stable</span>

</p>

</div>

<div class="flex justify-between text-sm mb-1">

<span>Download</span>

<span id="download-speed">42.5 Mbps</span>

</div>

<div id="download-chart" class="w-full h-16"></div>

</div>

<div>

<div class="flex justify-between text-sm mb-1">

<span>Upload</span>

<span id="upload-speed">12.8 Mbps</span>

</div>

<div id="upload-chart" class="w-full h-16"></div>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Températures</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>
<span class="tooltiptext">Températures des composants</span>

</div>

<div class="grid grid-cols-2 gap-4">

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">CPU</p>

<p class="text-xl font-semibold" id="cpu-temp">31°C</p>

<div class="process-bar mt-2">

<div id="cpu-temp-bar" class="process-bar-fill bg-secondary" style="width:

31%;"></div>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">GPU</p>

<p class="text-xl font-semibold" id="gpu-temp">26°C</p>

<div class="process-bar mt-2">

<div id="gpu-temp-bar" class="process-bar-fill bg-secondary" style="width:

26%;"></div>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Disque système</p>

<p class="text-xl font-semibold" id="ssd-temp">21°C</p>

<div class="process-bar mt-2">

<div id="ssd-temp-bar" class="process-bar-fill bg-secondary" style="width:

21%;"></div>

</div>

<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">

<p class="text-sm text-gray-500 dark:text-gray-400">Ambiant</p>

<p class="text-xl font-semibold" id="ambient-temp">26°C</p>

<div class="process-bar mt-2">

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<div class="flex justify-between items-start mb-4">

<h3 class="text-lg font-semibold">Logs Système</h3>

<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24

24" xmlns="[Link]

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13

16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>

</svg>

<span class="tooltiptext">Derniers logs système</span>

</div>

<div class="max-h-60 overflow-y-auto" id="system-logs">

</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">

<div class="card bg-white dark:bg-gray-800 p-6">

<h3 class="text-lg font-semibold mb-4">Top Processus CPU</h3>

<thead>

<tr class="border-b border-gray-200 dark:border-gray-700">

<th class="text-left py-2 pr-2">Processus</th>

<th class="text-right py-2 pl-2">Utilisation</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h3 class="text-lg font-semibold mb-4">Top Processus RAM</h3>

<table class="w-full text-sm">

<thead>

<tr class="border-b border-gray-200 dark:border-gray-700">

<th class="text-left py-2 pr-2">Processus</th>

<th class="text-right py-2 pl-2">Utilisation</th>

</tr>

</thead>

</tbody>

</table>

</div>

</div>
</div>

<div class="card bg-white dark:bg-gray-800 p-6">

<h3 class="text-lg font-semibold mb-4">Logs Application</h3>

<div class="max-h-60 overflow-y-auto" id="app-logs">

</div>

</main>

<footer class="bg-white dark:bg-gray-800 p-6 md:p-10 border-t border-gray-200 dark:border-

gray-700">

<div class="max-w-6xl mx-auto">

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

<div>

<h4 class="text-lg font-semibold mb-4">À propos du projet</h4>

<p class="text-gray-600 dark:text-gray-400 text-sm">

Ce tableau de bord de surveillance système a été développé dans le cadre d'un projet
de fin d'études

à l'École Nationale des Sciences Appliquées de Berrechid (ENSA-B). Il permet de

surveiller

en temps réel les performances de votre système informatique.

</p>

</div>

<div>

<h4 class="text-lg font-semibold mb-4">Technologies utilisées</h4>

<ul class="text-gray-600 dark:text-gray-400 text-sm space-y-2">

<li>• Frontend : HTML5, TailwindCSS, JavaScript</li>

<li>• Visualisations : ApexCharts, [Link]</li>

<li>• Données en temps réel : WebSockets</li>

<li>• Backend : Bash script avec SSH et PowerShell</li>

</ul>

</div>

<div>

<h4 class="text-lg font-semibold mb-4">Contactez-nous</h4>

<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">

Pour toute question ou suggestion concernant ce projet, n'hésitez pas à nous

contacter.

</p>

<div class="flex space-x-4">

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">

<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593

</svg>

</button>

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">

<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723

</svg>

</button>

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"
viewBox="0 0 24 24" xmlns="[Link]

<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205

</svg>

</button>

<button class="btn p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200

dark:hover:bg-gray-600 rounded-full">

<svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="currentColor"

viewBox="0 0 24 24" xmlns="[Link]

<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853

</svg>

</button>

</div>

<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center">

<p class="text-sm text-gray-500 dark:text-gray-400">

</p>

</div>

</footer>

</div>
<script>

// Simulated bash script data based on the actual output you provided

function getMonitoringData() {

return {

hostname: "DESKTOP-4UL6JAV",

ip: "[Link]",

os: "Windows",

uptime: "1j 5h 30m",

topCPU: [

{ name: "VirtualBoxVM", usage: 1797.22 },

{ name: "dwm", usage: 1648.02 },

{ name: "chrome", usage: 593.88 },

{ name: "msedge", usage: 550.86 },

{ name: "sldBgDwld", usage: 546.56 }

topRAM: [

{ name: "Memory Compression", usage: 604.51 },

{ name: "WhatsApp", usage: 449.79 },

{ name: "Code", usage: 420.25 },

{ name: "chrome", usage: 394.22 },

{ name: "msedge", usage: 371.06 }

temperatures: [31, 26, 21, 26], // Ignoring the 127°C value which is likely an error

cpuTemp: 31,

gpuTemp: 26,

ssdTemp: 21,

ambientTemp: 26,

systemLogs: [

{ time: "5/28/2025 [Link] AM", type: "Warning", source: "DCOM", message: "La
description de l'ID d'événement '10016'..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Microsoft-Windows-

WindowsUpdateClient", message: "Installation réussie: Windows a installé l..." },
{ time: "5/28/2025 [Link] AM", type: "Information", source: "Microsoft-Windows-
WindowsUpdateClient", message: "Installation démarrée : Windows a commencé ..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Microsoft-Windows-

WindowsUpdateClient", message: "Windows Update a démarré le téléchargement ..." },

{ time: "5/28/2025 [Link] AM", type: "Warning", source: "DCOM", message: "La
description de l'ID d'événement '10016'..." }

appLogs: [

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Software Protection

Platform Service", message: "La planification du redémarrage du service de..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "SecurityCenter", message:

"L'état Windows Defender a été mis à jour vers..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Software Protection

Platform Service", message: "La migration de bas niveau hors connexion a r..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "SecurityCenter", message:

"L'état Windows Defender a été mis à jour vers..." },

{ time: "5/28/2025 [Link] AM", type: "Information", source: "Software Protection

Platform Service", message: "La planification du redémarrage du service de..." }

};

// Check for dark mode preference

if ([Link] && [Link]('(prefers-color-scheme: dark)').matches) {

[Link]('dark');

[Link]('sun-icon').[Link]('hidden');

[Link]('moon-icon').[Link]('hidden');

// Listen for changes in color scheme preference

[Link]('(prefers-color-scheme: dark)').addEventListener('change', event => {

if ([Link]) {

[Link]('dark');

[Link]('sun-icon').[Link]('hidden');
[Link]('moon-icon').[Link]('hidden');

} else {

[Link]('dark');

[Link]('sun-icon').[Link]('hidden');

[Link]('moon-icon').[Link]('hidden');

});

// Theme toggle

const themeToggle = [Link]('theme-toggle');

const sunIcon = [Link]('sun-icon');

const moonIcon = [Link]('moon-icon');

[Link]('click', () => {

if ([Link]('dark')) {

[Link]('dark');

[Link]('hidden');

} else {

[Link]('dark');

[Link]('hidden');

});

// Update current time

function updateCurrentTime() {

const now = new Date();

const timeStr = [Link]([], { hour: '2-digit', minute: '2-digit', second: '2-

digit' });

const dateStr = [Link]([], { year: 'numeric', month: 'short', day: 'numeric' });
[Link]('current-time').innerText = `${dateStr} ${timeStr}`;

// Initialize charts

function initCharts() {

// CPU Chart

const cpuChartOptions = {

series: [{

name: "Utilisation CPU",

data: [28, 29, 33, 36, 32, 32, 33, 30, 30, 35, 34, 38, 35, 36, 32, 30, 31, 30]

}],

chart: {

height: 80,

type: 'area',

sparkline: {

enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {

show: false

stroke: {

curve: 'smooth',

width: 2

fill: {
type: 'gradient',

gradient: {

shadeIntensity: 1,

opacityFrom: 0.7,

opacityTo: 0.3,

stops: [0, 100]

colors: ['#4F46E5'],

tooltip: {

fixed: {

enabled: false

y: {

formatter: function(value) {

return value + "%";

};

const cpuChart = new ApexCharts([Link]("cpu-chart"), cpuChartOptions);

[Link]();

// RAM Chart

const ramChartOptions = {

series: [{

name: "Utilisation RAM",

data: [45, 47, 50, 48, 49, 53, 50, 55, 48, 45, 50, 52, 53, 50, 47, 49, 50, 51]

}],

chart: {
height: 80,

type: 'area',

sparkline: {

enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {

show: false

stroke: {

curve: 'smooth',

width: 2

fill: {

type: 'gradient',

gradient: {

shadeIntensity: 1,

opacityFrom: 0.7,

opacityTo: 0.3,

stops: [0, 100]

colors: ['#F59E0B'],

tooltip: {

fixed: {

enabled: false
},

y: {

formatter: function(value) {

return value + "%";

};

const ramChart = new ApexCharts([Link]("ram-chart"),

ramChartOptions);

[Link]();

// Download speed chart

const downloadChartOptions = {

series: [{

data: [38, 42, 35, 47, 39, 36, 40, 45, 42, 36, 39, 40, 41, 42, 38, 40, 36, 40]

}],

chart: {

height: 60,

type: 'area',

sparkline: {

enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {
show: false

stroke: {

curve: 'smooth',

width: 2

fill: {

type: 'gradient',

gradient: {

shadeIntensity: 1,

opacityFrom: 0.7,

opacityTo: 0.3,

stops: [0, 100]

colors: ['#10B981'],

tooltip: {

fixed: {

enabled: false

y: {

formatter: function(value) {

return value + " Mbps";

};

const downloadChart = new ApexCharts([Link]("download-chart"),

downloadChartOptions);
[Link]();

// Upload speed chart

const uploadChartOptions = {

series: [{

data: [12, 14, 10, 15, 12, 13, 10, 14, 11, 15, 12, 14, 12, 10, 13, 14, 12, 11]

}],

chart: {

height: 60,

type: 'area',

sparkline: {

enabled: true

animations: {

enabled: true,

easing: 'easeinout',

speed: 800,

toolbar: {

show: false

stroke: {

curve: 'smooth',

width: 2

fill: {

type: 'gradient',

gradient: {

shadeIntensity: 1,
opacityFrom: 0.7,

opacityTo: 0.3,

stops: [0, 100]

colors: ['#4F46E5'],

tooltip: {

fixed: {

enabled: false

y: {

formatter: function(value) {

return value + " Mbps";

};

const uploadChart = new ApexCharts([Link]("upload-chart"),

uploadChartOptions);

[Link]();

return { cpuChart, ramChart, downloadChart, uploadChart };

// Set circle progress

function setCircleProgress(elementId, percentage) {

const circle = [Link](elementId);

const radius = [Link];

const circumference = radius * 2 * [Link];

[Link] = `${circumference} ${circumference}`;

const offset = circumference - (percentage / 100) * circumference;

[Link] = offset;

// Generate random number within range (for values not directly provided by our script)

function randomInRange(min, max) {

return [Link]([Link]() * (max - min + 1)) + min;

// Update system info from monitoring data

function updateSystemInfo() {

const data = getMonitoringData();

[Link]('machine-name').innerText = [Link];

[Link]('machine-ip').innerText = [Link];

[Link]('os-info').innerText = [Link];

[Link]('uptime').innerText = `Uptime: ${[Link]}`;

// Update CPU data

function updateCPUData(cpuChart) {

const data = getMonitoringData();

// Calculate a CPU usage percentage from the data

// Normalize top process CPU values to percentage (arbitrary scale since the values are so
high)

const maxPossibleCPU = 2000; // Assuming this is a reasonable max value

const totalCpuUsage = [Link](

([Link][0].usage / maxPossibleCPU) * 100,

100
);

[Link]('cpu-percentage').innerText = `${[Link](totalCpuUsage)}%`;

setCircleProgress('cpu-progress', totalCpuUsage);

[Link]('cpu-load').innerText = (totalCpuUsage / 10).toFixed(1);

const newCPUData = [Link][0].slice(1);

[Link](totalCpuUsage);

[Link]([{ data: newCPUData }]);

// Update CPU process table from data

let cpuProcessesHTML = '';

[Link]((process, index) => {

const isLast = index === [Link] - 1;

cpuProcessesHTML += `

<tr${!isLast ? ' class="border-b border-gray-100 dark:border-gray-700"' : ''}>

<td class="py-2 pr-2">${[Link]}</td>

<td class="text-right py-2 pl-2">${[Link](2)}</td>

</tr>

});

[Link]('cpu-processes').innerHTML = cpuProcessesHTML;

// Update RAM data

function updateRAMData(ramChart) {

const data = getMonitoringData();

// Calculate total RAM usage in MB

const totalRAMUsage = [Link]((acc, proc) => acc + [Link], 0);

const totalRAMGB = (totalRAMUsage / 1000).toFixed(2);

const totalRAM = 16; // Assuming 16GB total RAM

const ramPercentage = [Link]([Link]((totalRAMGB / totalRAM) * 100), 100);

[Link]('ram-percentage').innerText = `${ramPercentage}%`;

setCircleProgress('ram-progress', ramPercentage);

[Link]('ram-usage').innerText = `${totalRAMGB}GB / ${totalRAM}GB`;

const newRAMData = [Link][0].slice(1);

[Link](ramPercentage);

[Link]([{ data: newRAMData }]);

// Update RAM process table from data

let ramProcessesHTML = '';

[Link]((process, index) => {

const isLast = index === [Link] - 1;

const usageStr = [Link] >= 1000 ?

`${([Link] / 1000).toFixed(2)} GB` :

`${[Link](2)} MB`;

ramProcessesHTML += `

<tr${!isLast ? ' class="border-b border-gray-100 dark:border-gray-700"' : ''}>

<td class="py-2 pr-2">${[Link]}</td>

<td class="text-right py-2 pl-2">${usageStr}</td>

</tr>

});

[Link]('ram-processes').innerHTML = ramProcessesHTML;
}

// Update temperature data

function updateTemperatureData() {

const data = getMonitoringData();

[Link]('cpu-temp').innerText = `${[Link]}°C`;

[Link]('gpu-temp').innerText = `${[Link]}°C`;

[Link]('ssd-temp').innerText = `${[Link]}°C`;

[Link]('ambient-temp').innerText = `${[Link]}°C`;

[Link]('cpu-temp-bar').[Link] = `${[Link]}%`;

[Link]('gpu-temp-bar').[Link] = `${[Link]}%`;

[Link]('ssd-temp-bar').[Link] = `${[Link]}%`;

[Link]('ambient-temp-bar').[Link] = `${[Link]}%`;

// Update bar colors based on temperature (these are low temps, so all are green)

const cpuTempBar = [Link]('cpu-temp-bar');

const gpuTempBar = [Link]('gpu-temp-bar');

const ssdTempBar = [Link]('ssd-temp-bar');

const ambientTempBar = [Link]('ambient-temp-bar');

[Link] = 'process-bar-fill ' + ([Link] > 70 ? 'bg-danger' :

[Link] > 60 ? 'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + ([Link] > 75 ? 'bg-danger' :

[Link] > 65 ? 'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + ([Link] > 55 ? 'bg-danger' : [Link]

> 45 ? 'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + ([Link] > 45 ? 'bg-danger' :

[Link] > 40 ? 'bg-tertiary' : 'bg-secondary');

}
// Update disk data (still using random since the script doesn't provide disk info)

function updateDiskData() {

const diskC = { total: 256, used: randomInRange(110, 130) };

const diskD = { total: 1024, used: randomInRange(700, 800) };

const diskE = { total: 2048, used: randomInRange(1700, 1900) };

const cPercentage = [Link](([Link] / [Link]) * 100);

const dPercentage = [Link](([Link] / [Link]) * 100);

const ePercentage = [Link](([Link] / [Link]) * 100);

[Link]('disk-c-usage').innerText = `${[Link]}GB / ${[Link]}GB`;

[Link]('disk-d-usage').innerText = `${[Link]}GB / ${[Link]}GB`;

[Link]('disk-e-usage').innerText = `${([Link] / 1024).toFixed(1)}TB / $

{[Link] / 1024}TB`;

[Link]('disk-c-fill').[Link] = `${cPercentage}%`;

[Link]('disk-d-fill').[Link] = `${dPercentage}%`;

[Link]('disk-e-fill').[Link] = `${ePercentage}%`;

// Update bar colors based on usage

const cElement = [Link]('disk-c-fill');

const dElement = [Link]('disk-d-fill');

const eElement = [Link]('disk-e-fill');

[Link] = 'process-bar-fill ' + (cPercentage > 80 ? 'bg-danger' : cPercentage > 60 ?

'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + (dPercentage > 80 ? 'bg-danger' : dPercentage > 60 ?

'bg-tertiary' : 'bg-secondary');

[Link] = 'process-bar-fill ' + (ePercentage > 80 ? 'bg-danger' : ePercentage > 60 ?

'bg-tertiary' : 'bg-secondary');

}
// Update network data (still using random since the script doesn't provide network info)

function updateNetworkData(downloadChart, uploadChart) {

const ping = randomInRange(15, 50);

[Link]('ping-value').innerText = `${ping} ms`;

const networkStatus = ping < 30 ? 'Stable' : ping < 50 ? 'Good' : 'Latent';

[Link]('network-status').innerText = networkStatus;

const statusIndicator = [Link]('#network-status').previousElementSibling;

[Link] = 'status-indicator ' + (ping < 30 ? 'status-good' : ping < 50 ? 'status-

good' : 'status-warning');

const downloadSpeed = randomInRange(35, 50);

[Link]('download-speed').innerText = `${downloadSpeed} Mbps`;

const uploadSpeed = randomInRange(8, 15);

[Link]('upload-speed').innerText = `${uploadSpeed} Mbps`;

const newDownloadData = [Link][0].slice(1);

[Link](downloadSpeed);

[Link]([{ data: newDownloadData }]);

const newUploadData = [Link][0].slice(1);

[Link](uploadSpeed);

[Link]([{ data: newUploadData }]);

// Update system logs

function updateSystemLogs() {

const data = getMonitoringData();

let logsHTML = '';

[Link](log => {

const logClass = [Link]() === 'error' ? 'log-error' :

[Link]() === 'warning' ? 'log-warning' : 'log-info';

logsHTML += `

<div class="log-entry ${logClass} mb-2">

<div class="flex justify-between mb-1">

<span class="text-xs text-gray-500 dark:text-gray-400">${[Link]}</span>

</div>

</div>

});

[Link]('system-logs').innerHTML = logsHTML;

// Update application logs

function updateAppLogs() {

const data = getMonitoringData();

let logsHTML = '';

[Link](log => {

const logClass = [Link]() === 'error' ? 'log-error' :

[Link]() === 'warning' ? 'log-warning' : 'log-info';

logsHTML += `

<div class="log-entry ${logClass} mb-2">

<div class="flex justify-between mb-1">

<span class="text-xs text-gray-500 dark:text-gray-400">${[Link]}</span>

</div>

</div>

});

[Link]('app-logs').innerHTML = logsHTML;

// Refresh all data

function refreshAllData(charts) {

updateCurrentTime();

updateSystemInfo();

updateCPUData([Link]);

updateRAMData([Link]);

updateDiskData();

updateNetworkData([Link], [Link]);

updateTemperatureData();

updateSystemLogs();

updateAppLogs();

// Initialize on page load

[Link]('DOMContentLoaded', () => {

const charts = initCharts();

// Initial update

updateCurrentTime();

updateSystemInfo();
updateCPUData([Link]);

updateRAMData([Link]);

updateTemperatureData();

updateSystemLogs();

updateAppLogs();

// Set up periodic updates

setInterval(() => updateCurrentTime(), 1000);

setInterval(() => refreshAllData(charts), 5000);

// Refresh button functionality

[Link]('refresh-btn').addEventListener('click', () => {

refreshAllData(charts);

});

// Export button functionality

[Link]('export-btn').addEventListener('click', () => {

const now = new Date();

const dateStr = [Link]().replace(/:/g, '-').substring(0, 19);

const data = getMonitoringData();

// Create a text version of the monitoring data

let reportText = `=== Rapport de Monitoring ${dateStr} ===\n\n`;

reportText += `[ Hostname ]\n${[Link]}\n\n`;

reportText += `[ Adresse IP ]\n${[Link]}\n\n`;

reportText += `[ Top 5 CPU ]\n\n`;

reportText += `Name CPU\n`;

reportText += `---- ---\n`;

[Link](proc => {

reportText += `${[Link](20)} ${[Link](2)}\n`;

});

reportText += `\n\n[ Top 5 RAM ]\n\n`;

reportText += `Name RAM_MB\n`;

reportText += `---- ------\n`;

[Link](proc => {

reportText += `${[Link](20)} ${[Link](2)}\n`;

});

reportText += `\n\n[ Température ]\n`;

[Link](temp => {

reportText += `${temp}\n`;

});

reportText += `\n[ Logs Système ]\n\n`;

reportText += `TimeGenerated EntryType Source Message\n`;

reportText += `------------- --------- ------ -------\n`;

[Link](log => {

reportText += `${[Link](25)} ${[Link](10)} ${[Link](40)} $

{[Link]}\n`;

});

reportText += `\n\n[ Logs Application ]\n\n`;

reportText += `TimeGenerated EntryType Source Message\n`;

reportText += `------------- --------- ------ -------\n`;

[Link](log => {

reportText += `${[Link](25)} ${[Link](10)} ${[Link](40)} $

{[Link]}\n`;

});

reportText += `\n\n✅ Rapport sauvegardé à : ${dateStr}.log\n`;

reportText += `\n\nRapport généré par: ELHASBIS Zakaria et KISTASS Yassine\n`;

// Create a Blob with the text content

const blob = new Blob([reportText], { type: 'text/plain' });

// Create a link element and trigger the download

const downloadLink = [Link]('a');

[Link] = [Link](blob);

[Link] = `rapport_${[Link](/[:-]/g, '_')}.log`;

[Link](downloadLink);

[Link]();

[Link](downloadLink);

});

</script>

</body>

</html>

Bot Rocket League IA Grand Champion
No ratings yet
Bot Rocket League IA Grand Champion
15 pages
Index
No ratings yet
Index
60 pages
Earning App Bot HTML
No ratings yet
Earning App Bot HTML
11 pages
Zeknardv 1
No ratings yet
Zeknardv 1
16 pages
Asdoctype HTML
No ratings yet
Asdoctype HTML
34 pages
Wifi
No ratings yet
Wifi
20 pages
Create Canva Design
No ratings yet
Create Canva Design
27 pages
Aaaaa
No ratings yet
Aaaaa
13 pages
MÃ NGUỒN V1 .TX - HTML
No ratings yet
MÃ NGUỒN V1 .TX - HTML
49 pages
Index HTML
No ratings yet
Index HTML
6 pages
Amir
No ratings yet
Amir
13 pages
Branch Bound Knapsack12
No ratings yet
Branch Bound Knapsack12
5 pages
DOPE HTML-WPS Office
No ratings yet
DOPE HTML-WPS Office
6 pages
4969dcc8-6334-4f74-bd22-78596a4c6ae0
No ratings yet
4969dcc8-6334-4f74-bd22-78596a4c6ae0
18 pages
Snsai Project KT
No ratings yet
Snsai Project KT
53 pages
TXT
No ratings yet
TXT
23 pages
First Try
No ratings yet
First Try
9 pages
Prototype CRM
No ratings yet
Prototype CRM
101 pages
Ali Ai Bot
No ratings yet
Ali Ai Bot
10 pages
Index
No ratings yet
Index
24 pages
Index
No ratings yet
Index
24 pages
Blackbox Output Code BPQKRWT7H3
No ratings yet
Blackbox Output Code BPQKRWT7H3
21 pages
Hij
No ratings yet
Hij
21 pages
Message
No ratings yet
Message
12 pages
Sasasasas
No ratings yet
Sasasasas
55 pages
Your Task - Create A Single-File Multi-Tool Website...
No ratings yet
Your Task - Create A Single-File Multi-Tool Website...
31 pages
Mauritanian Programmers
No ratings yet
Mauritanian Programmers
7 pages
HTML
No ratings yet
HTML
24 pages
Tap Tap Mining
No ratings yet
Tap Tap Mining
15 pages
Whiteboard Css
No ratings yet
Whiteboard Css
12 pages
Documento (8) RPG
No ratings yet
Documento (8) RPG
78 pages
Aps
No ratings yet
Aps
56 pages
Text
No ratings yet
Text
18 pages
Code Python 1
No ratings yet
Code Python 1
17 pages
Index
No ratings yet
Index
20 pages
Login HTML
No ratings yet
Login HTML
8 pages
Text 3
No ratings yet
Text 3
113 pages
Index HTML
No ratings yet
Index HTML
14 pages
Text
No ratings yet
Text
115 pages
Tweaks
No ratings yet
Tweaks
25 pages
4
No ratings yet
4
16 pages
Modern Chair Website Synopsis
No ratings yet
Modern Chair Website Synopsis
20 pages
Message
No ratings yet
Message
33 pages
Index
No ratings yet
Index
23 pages
Pagina de Vendas 01. Versao 04
No ratings yet
Pagina de Vendas 01. Versao 04
14 pages
Message
No ratings yet
Message
27 pages
Doctype HTML
No ratings yet
Doctype HTML
29 pages
Index HTML
No ratings yet
Index HTML
19 pages
Text
No ratings yet
Text
15 pages
Htmlgamedemojualancoin
No ratings yet
Htmlgamedemojualancoin
17 pages
Nintendo Blogger Mine
No ratings yet
Nintendo Blogger Mine
18 pages
مقالة وردبريس قروباتي
No ratings yet
مقالة وردبريس قروباتي
19 pages
Theme 8455354877711033351
No ratings yet
Theme 8455354877711033351
17 pages
Azedit
No ratings yet
Azedit
11 pages
Message
No ratings yet
Message
7 pages
Dokumen Tanpa Judul-2
No ratings yet
Dokumen Tanpa Judul-2
39 pages
Message
No ratings yet
Message
12 pages
Lorenzevalidator Rcs
No ratings yet
Lorenzevalidator Rcs
20 pages
McAfee WebAdvisor Launch Errors
No ratings yet
McAfee WebAdvisor Launch Errors
10 pages
Polymorphism Assignment
No ratings yet
Polymorphism Assignment
5 pages
MIS 9th Edition Solution Manual
No ratings yet
MIS 9th Edition Solution Manual
6 pages
Python Voice Email Assistant Guide
No ratings yet
Python Voice Email Assistant Guide
19 pages
EUSM Tool for Oracle EUS Management
No ratings yet
EUSM Tool for Oracle EUS Management
13 pages
Indian Bank Improves Services Availability With IT Management
No ratings yet
Indian Bank Improves Services Availability With IT Management
5 pages
Intership Project Report (Used Car's Dataset)
No ratings yet
Intership Project Report (Used Car's Dataset)
49 pages
Software Engineer Internship Task
No ratings yet
Software Engineer Internship Task
7 pages
Software Testing: Why Testing Is Important?
No ratings yet
Software Testing: Why Testing Is Important?
10 pages
Ad3364 Data Exploration and Visualization Laboratory Syllabus L T P C
No ratings yet
Ad3364 Data Exploration and Visualization Laboratory Syllabus L T P C
2 pages
Bacula Setup Guide for IT Admins
100% (1)
Bacula Setup Guide for IT Admins
13 pages
DB2 DBA Interview Q&A Guide
No ratings yet
DB2 DBA Interview Q&A Guide
2 pages
2.1 Types and Methods of Data Transmission
No ratings yet
2.1 Types and Methods of Data Transmission
7 pages
Windows HPC Clusters with GPUs Overview
No ratings yet
Windows HPC Clusters with GPUs Overview
23 pages
Module 2 v2
No ratings yet
Module 2 v2
21 pages
Archicad Shortcuts
No ratings yet
Archicad Shortcuts
6 pages
Gravity Workout
No ratings yet
Gravity Workout
4 pages
MemberCompanyData 010920161014
No ratings yet
MemberCompanyData 010920161014
51 pages
AutoCAD Mapping Tutorial for CEE 317
No ratings yet
AutoCAD Mapping Tutorial for CEE 317
2 pages
TL-MR3020 V1 Datasheet 1
No ratings yet
TL-MR3020 V1 Datasheet 1
2 pages
Tech Career of Sourabh Bajaj
100% (1)
Tech Career of Sourabh Bajaj
1 page
Deeksha S Resume
No ratings yet
Deeksha S Resume
2 pages
Google Ad Swipe File PDF
100% (1)
Google Ad Swipe File PDF
15 pages
Management Information System
No ratings yet
Management Information System
4 pages
CS8383 OOP Lab Lecture Plan
No ratings yet
CS8383 OOP Lab Lecture Plan
4 pages
2nd Quarter Ict 7 Ms Excel 2021 Lesson 2
No ratings yet
2nd Quarter Ict 7 Ms Excel 2021 Lesson 2
39 pages
Docebo Pages & Menus Guide
No ratings yet
Docebo Pages & Menus Guide
8 pages
All Best Links For All (Ever Green)
No ratings yet
All Best Links For All (Ever Green)
12 pages
Automate Testing Power Apps Practical
No ratings yet
Automate Testing Power Apps Practical
352 pages