From a4a2c569ccab4e09ef24d7681c604b1e33fe394c Mon Sep 17 00:00:00 2001 From: "[oceane]" <[e21497@eps-marche.be]> Date: Tue, 24 Feb 2026 15:31:44 +0100 Subject: [PATCH] Ajout du module web --- Wallette/web/index.html | 154 ++++++++++++++++++++++++++++++++++ Wallette/web/script.js | 43 ++++++++++ Wallette/web/socketService.js | 135 +++++++++++++++++++++++++++++ Wallette/web/styles.css | 68 +++++++++++++++ 4 files changed, 400 insertions(+) create mode 100644 Wallette/web/index.html create mode 100644 Wallette/web/script.js create mode 100644 Wallette/web/socketService.js create mode 100644 Wallette/web/styles.css diff --git a/Wallette/web/index.html b/Wallette/web/index.html new file mode 100644 index 0000000..158435e --- /dev/null +++ b/Wallette/web/index.html @@ -0,0 +1,154 @@ + + + + + + Portefeuille Bitcoin + + + + + + + + + + + +

+ +

+ + Portefeuille Bitcoin +

+ + +

+ Choisir une cryptomonnaie + +

+ +

+ Adresse du portefeuille + +

+ + +

Solde

0.00000000 BTC

+ +

Prix

$0.00

+ + +

Signal du marchÃ©

+ +

HOLD

CriticalitÃ© : INFO

Confiance : 0%

+ Aucune donnÃ©e pour le moment +

+ + +

StratÃ©gie

+ + +

Wallets

+ Aucun wallet chargÃ© +

+ + +

Historique des transactions

+ Aucune transaction +

+ + +

Alertes

+ Aucune alerte +

+ + +

Historique des prix

+ (Graphique historique Ã venir) +

+ +

+ + + + + + diff --git a/Wallette/web/script.js b/Wallette/web/script.js new file mode 100644 index 0000000..2beb11b --- /dev/null +++ b/Wallette/web/script.js @@ -0,0 +1,43 @@ +// script.js (module) +import { + connectToAlerts, + onAlert, + disconnectFromAlerts, + isConnected +} from './socketService.js'; + +// Exemple : rÃ©cupÃ©rer un userId (ici exemple statique, adapte-toi) +const userId = 'user-123'; + +// Connecter automatiquement Ã l'ouverture +connectToAlerts(userId); + +// Quand une alerte arrive, l'ajouter dans la liste #alertList +onAlert(function(alert) { + console.log('Nouvelle alerte reÃ§ue dans main.js :', alert); + + const list = document.getElementById('alertList'); + if (!list) return; + + const li = document.createElement('li'); + li.className = 'list-group-item bg-transparent text-white'; + // Si l'alerte est un objet, essaye d'afficher message et type + if (typeof alert === 'object') { + li.textContent = (alert.message ? alert.message : JSON.stringify(alert)); + } else { + li.textContent = String(alert); + } + + // PrÃ©fixer pour voir les nouvelles alertes en haut + list.prepend(li); +}); + +// DÃ©connexion propre Ã la fermeture de la page +window.addEventListener('beforeunload', () => { + if (isConnected()) { + disconnectFromAlerts(); + } +}); + +// Exposer pour debug dans console +window._alertsService = { connectToAlerts, disconnectFromAlerts, isConnected }; \ No newline at end of file diff --git a/Wallette/web/socketService.js b/Wallette/web/socketService.js new file mode 100644 index 0000000..2d57e27 --- /dev/null +++ b/Wallette/web/socketService.js @@ -0,0 +1,135 @@ +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// FICHIER : socketService.js +// RÃLE : GÃ©rer la connexion temps rÃ©el avec le serveur +// CRÃÃ PAR : StÃ©phane (module alertes) +// POUR : OcÃ©ane (frontend web) +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ + +// On importe la librairie Socket.IO +import { io } from 'socket.io-client'; + +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// CONFIGURATION +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ + +// L'adresse du serveur (Ã changer selon l'environnement) +// En dÃ©veloppement : localhost +// En production : l'adresse du vrai serveur +const SERVER_URL = 'http://localhost:3000'; + +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// VARIABLES +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ + +// La connexion socket (null = pas encore connectÃ©) +let socket = null; + +// Liste des fonctions Ã appeler quand on reÃ§oit une alerte +let alertCallbacks = []; + +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// FONCTION : Se connecter au serveur +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// Appelle cette fonction quand l'utilisateur se connecte Ã ton site +// +// ParamÃ¨tre : userId = l'identifiant de l'utilisateur connectÃ© +// +// Exemple : connectToAlerts('user-123'); +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +export function connectToAlerts(userId) { + + // Si dÃ©jÃ connectÃ©, on ne fait rien + if (socket !== null) { + console.log('â ï¸ DÃ©jÃ connectÃ© au serveur d\'alertes'); + return; + } + + // CrÃ©er la connexion + socket = io(SERVER_URL); + + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + // ÃVÃNEMENT : Connexion rÃ©ussie + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + socket.on('connect', function() { + console.log('â ConnectÃ© au serveur d\'alertes'); + + // IMPORTANT : On envoie notre userId au serveur + // Pour qu'il sache qui on est et nous envoie NOS alertes + socket.emit('auth', userId); + }); + + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + // ÃVÃNEMENT : Authentification confirmÃ©e + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + socket.on('auth_success', function(data) { + console.log('â AuthentifiÃ© :', data.message); + }); + + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + // ÃVÃNEMENT : RÃ©ception d'une alerte ! + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + socket.on('alert', function(alert) { + console.log('ð ALERTE REÃUE :', alert); + + // On appelle toutes les fonctions enregistrÃ©es + // (voir onAlert plus bas) + alertCallbacks.forEach(function(callback) { + callback(alert); + }); + }); + + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + // ÃVÃNEMENT : DÃ©connexion + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + socket.on('disconnect', function(reason) { + console.log('â DÃ©connectÃ© du serveur :', reason); + }); + + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + // ÃVÃNEMENT : Erreur de connexion + // âââââââââââââââââââââââââââââââââââââââââââââââââââââ + socket.on('connect_error', function(error) { + console.log('â Erreur de connexion :', error.message); + }); +} + +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// FONCTION : S'abonner aux alertes +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// Appelle cette fonction pour dire "quand il y a une alerte, +// exÃ©cute cette fonction" +// +// ParamÃ¨tre : callback = la fonction Ã exÃ©cuter +// +// Exemple : +// onAlert(function(alert) { +// console.log('Nouvelle alerte !', alert); +// }); +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +export function onAlert(callback) { + alertCallbacks.push(callback); +} + +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// FONCTION : Se dÃ©connecter +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// Appelle cette fonction quand l'utilisateur se dÃ©connecte +// de ton site (logout) +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +export function disconnectFromAlerts() { + if (socket !== null) { + socket.disconnect(); + socket = null; + alertCallbacks = []; + console.log('ð DÃ©connectÃ© du serveur d\'alertes'); + } +} + +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// FONCTION : VÃ©rifier si connectÃ© +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +// Retourne true si connectÃ©, false sinon +// âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ +export function isConnected() { + return socket !== null && socket.connected; +} diff --git a/Wallette/web/styles.css b/Wallette/web/styles.css new file mode 100644 index 0000000..90538a6 --- /dev/null +++ b/Wallette/web/styles.css @@ -0,0 +1,68 @@ +body { + background: linear-gradient(135deg, #0f172a, #020617); + color: white; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.main-content { + flex: 1; +} + +.card { + background: rgba(255, 255, 255, 0.05); + border: none; + color: white; +} + +/* Signal */ + +.signal-box { + text-align: center; + padding: 20px; + border-radius: 10px; +} + +.buy { + background: rgba(22,163,74,0.2); + color: #4ade80; +} + +.sell { + background: rgba(220,38,38,0.2); + color: #f87171; +} + +.hold { + background: rgba(234,179,8,0.2); + color: #fde047; +} + +.value { + font-size: 28px; + font-weight: bold; +} + +/* Inputs */ + +.form-control, +.form-select { + background-color: rgba(255,255,255,0.1); + color: white; + border: 1px solid rgba(255,255,255,0.2); +} + +.form-control::placeholder { + color: #cbd5f5; +} + +select.form-select { + background-color: rgba(255,255,255,0.1); + color: white; +} + +select.form-select option { + background-color: #0f172a; + color: white; +} \ No newline at end of file -- 2.50.1