Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:vpn [18/05/2018 14:07] – ldalbegue
+++ informatique:vpn [01/07/2026 09:09] (Version actuelle) – bchicard
@@ Ligne 1: / Ligne 1: @@
-====== Accès à distance ======
+~~NOCACHE~~
-Voici la méthode unique quelque soit l'endroit pour la connexion aux serveurs TSE (ex VPN).
+<PHP>
-  - Installer le certificat suivant [[http://files.gretani.com/it/tse/work.gretani.com.cer|Work]] sur votre machine en vous aidant du tutoriel : [[http://files.gretani.com/it/tse/certificat.pdf|PDF]]
+echo '
-  - Télécharger et copier sur votre Bureau le fichier de connexion du bureau à distance pour le serveur TSE (Avec Chrome ou Firefox simple clic, avec Internet Explorer faire clic droit puis enregistrer la cible sous et bien spécifier l'extension de fichier .rdp) : GNI-TSE
+<style>
-  - Lancer la connexion via le fichier ainsi téléchargé et renseigner vos identifiants (GNI\xxxxx) et mot de passe.
+.vpn-wrap { font-family: Arial, sans-serif; font-size: 14px; color: #333; max-width: 680px; }
+.vpn-intro { font-size: 13px; color: #666; margin-bottom: 20px; border-left: 3px solid #378ADD; padding: 6px 0 6px 14px; line-height: 1.6; }
+.vpn-warning { background: #FEF3C7; border: 1px solid #FCD34D; border-left: 4px solid #F59E0B; border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 24px; font-size: 13px; color: #92400E; display: flex; align-items: flex-start; gap: 10px; }
+.vpn-warning svg { flex-shrink: 0; margin-top: 1px; }
+.vpn-steps { display: flex; flex-direction: column; gap: 0; }
+.vpn-step { display: flex; gap: 16px; position: relative; padding-bottom: 28px; }
+.vpn-step:last-child { padding-bottom: 0; }
+.vpn-step-line { position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: #dde3ec; }
+.vpn-step:last-child .vpn-step-line { display: none; }
+.vpn-step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #1A4A7A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; z-index: 1; }
+.vpn-step-body { flex: 1; padding-top: 4px; }
+.vpn-step-title { font-size: 14px; font-weight: 700; color: #1a2d4a; margin-bottom: 6px; }
+.vpn-step-desc { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 10px; }
+.vpn-step-note { font-size: 12px; color: #888; background: #f8fafd; border: 0.5px solid #dde3ec; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; }
+.vpn-download-btn { display: inline-flex; align-items: center; gap: 8px; background: #1D9E75; color: #fff !important; font-weight: 600; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-size: 13px; }
+.vpn-download-btn:hover { background: #17825F; text-decoration: none !important; }
+.vpn-credentials { background: #E6F1FB; border: 1px solid #BFDBFE; border-radius: 8px; padding: 12px 16px; font-size: 13px; color: #185FA5; margin-top: 4px; }
+.vpn-credentials code { background: #fff; padding: 2px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; border: 1px solid #BFDBFE; }
+</style>';
+echo '<div class="vpn-wrap">';
+echo '<p class="vpn-intro">Voici la méthode unique, quel que soit l\'endroit, pour la connexion aux serveurs TSE (ex VPN).</p>';
+echo '<div class="vpn-warning">
+    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#B45309" stroke-width="2"><path d="M12 9v4M12 17h.01"/><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
+    <span>Cette nouvelle méthode ne nécessite <strong>plus l\'installation d\'un certificat</strong> sur le PC.</span>
+</div>';
+echo '<div class="vpn-steps">';
+// Étape 1
+echo '<div class="vpn-step">
+    <div class="vpn-step-line"></div>
+    <div class="vpn-step-num">1</div>
+    <div class="vpn-step-body">
+        <div class="vpn-step-title">Télécharger le fichier de connexion</div>
+        <div class="vpn-step-desc">Téléchargez et copiez sur votre Bureau le fichier de connexion au bureau à distance pour le serveur TSE.</div>
+        <div class="vpn-step-note">
+            💡 Avec <strong>Chrome</strong> ou <strong>Firefox</strong> : simple clic.<br>
+            Avec <strong>Internet Explorer</strong> : clic droit → "Enregistrer la cible sous", en vérifiant bien l\'extension <code>.rdp</code>.
+        </div>
+        <a class="vpn-download-btn" href="https://files.gretani.com/it/tse/GNI-TSE.rdp">
+            <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="#fff" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+            Télécharger GNI-TSE.rdp
+        </a>
+    </div>
+</div>';
+// Étape 2
+echo '<div class="vpn-step">
+    <div class="vpn-step-num">2</div>
+    <div class="vpn-step-body">
+        <div class="vpn-step-title">Lancer la connexion</div>
+        <div class="vpn-step-desc">Lancez la connexion via le fichier ainsi téléchargé et renseignez vos identifiants propres au Greta Nord-Isère.</div>
+        <div class="vpn-credentials">
+            👤 Identifiant : <code>GNI\xxxxx</code><br>
+            🔑 Mot de passe : votre mot de passe habituel GNI
+        </div>
+    </div>
+</div>';
+echo '</div>'; // vpn-steps
+echo '</div>'; // vpn-wrap
+</PHP>