différence M1 - M2

.gitignore

@@ -0,0 +1,3 @@
+/raylib_ignore
+/web
+michelson

Makefile

@@ -3,6 +3,13 @@ michelson: main.c
 
 clean:
 	rm -f michelson
+	rm -r web
 
 run:
 	./michelson
+
+web: main.c 
+	mkdir -p web && emcc -o web/index.html main.c -Os -Wall -std=c99 -DPLATFORM_WEB -s USE_GLFW=3 -s ALLOW_MEMORY_GROWTH=1 -I. --shell-file minshell.html --preload-file glsl/michelson_web.frag raylib/libraylib.web.a
+
+webrun:
+	cd web && python -m http.server 8000 && cd ..

README.md

@@ -1,5 +1,65 @@
-# TODO
+# Simulateur d'Interféromètre de Michelson
 
-- Spectre avec selecteur multiple 
-- Caper les fps au choix
-- Compiler web
+Une simulation interactive temps réel et physiquement réaliste de l'interféromètre de Michelson. Ce projet permet de visualiser les figures d'interférences (franges et anneaux) en manipulant les composants optiques (miroirs, source lumineuse, milieu).
+
+![Aperçu du simulateur](img/screenshot.png)
+
+## Fonctionnalités
+
+### Contrôle et Simulation
+* **Miroir Mobile (M1) :** Translation et inclinaison sur deux axes.
+* **Sources Lumineuses :**
+    * Spectre (380nm - 780nm).
+    * Gestion de **sources polychromatiques** (ajout/suppression de longueurs d'onde multiples).
+    * Rendu additif des couleurs.
+* **Milieux dispersifs :** Ajout d'une cuve de gaz avec indice de réfraction variable n pour visualiser le déphasage.
+
+### Performance & Rendu
+* **Rendu GPU :** Calcul des interférences par **shader (GLSL)** pour des performances élevées.
+* **Interface UI :** `raygui`.
+* **Optimisation :** Sélecteur de **FPS Cible** (30, 60, 120, 144, Illimité).
+* **Vues :** Schéma optique 2D + Vue "Écran".
+
+## Installation et Compilation
+
+### Prérequis
+* **[Raylib](https://www.raylib.com/)**
+* **[Emscripten](https://github.com/emscripten-core/emscripten/)**
+
+### Compilation (Linux / Mac)
+
+```bash
+make
+make run 
+```
+ou
+```bash
+gcc main.c -o michelson -lraylib -lGL -lm -lpthread -ldl -lrt -lX11
+./michelson
+```
+
+### Version Web (Emscripten)
+
+```bash
+make web 
+make webrun
+```
+ou
+```bash
+mkdir -p web && emcc -o web/index.html main.c -Os -Wall -std=c99 -DPLATFORM_WEB -s USE_GLFW=3 -s ALLOW_MEMORY_GROWTH=1 -I. --shell-file minshell.html --preload-file glsl/michelson_web.frag raylib/libraylib.web.a
+```
+
+## Contrôles Utilisateur
+
+| Action | Commande |
+| --- | --- |
+| **Plein Écran** | Touche `F` |
+| **Sélectionner une longueur d'onde** | `Clic Gauche` sur le spectre |
+| **Ajouter une longueur d'onde** | `Clic Droit` sur une zone vide du spectre |
+| **Supprimer une longueur d'onde** | `Clic Droit` sur une ligne existante |
+| **Régler les miroirs** | Sliders / boutons `+` / `-` |
+| **Précision / Vitesse** | Maintenir `Shift` |
+
+## Physique du projet
+
+Calcule de l'intensité lumineuse en tout point de l'écran en se basant sur la différence de marche.

glsl/michelson.frag

@@ -47,27 +47,23 @@ void main() {
     float relX = (pixelX - center.x) * zoom;
     float relY = (pixelY - center.y) * zoom;
    
-
     // r^2
     float radiusSq = relX * relX + relY * relY;
 
-    // Diff de marche lamme d'air 2 * e cos(i) mais petits angles => cos(i) ~ 1 - i^2/2 mais i ~ r/f et r^2 = x^2 + y^2
-    float ringFactorBase = radiusSq * 0.065;
-
     // Diff de marche du au coin d'air
     float wDelta = (relX * angleM1 + relY * angleM1_Y) * 200.0;
 
-    float currDeltaBase = deltaLnm + wDelta;
+    float cosFactor = 1.0 - (radiusSq * 0.000004);
 
-    float currDelta = deltaLnm - ringFactorBase + wDelta;
+    float currDelta = (deltaLnm * cosFactor) + wDelta;
 
     vec3 accumColor = vec3(0.0);
 
     for(int i = 0; i < 10; i++) {
     if (i >= lambdasCount) break;
         float l = lambdas[i];
+        if (l < 1.0) l = 550.0;
         vec3 baseColorVec = WavelengthToRGB(l);
-        float currDelta = currDeltaBase - ringFactorBase;
         float K = PI / l;
         float phase = currDelta * K;
         float intensity = cos(phase);

glsl/michelson_web.frag

@@ -0,0 +1,75 @@
+#version 100
+
+precision highp float;
+
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+uniform vec2 center;
+uniform float screenHeight;
+uniform float d1;
+uniform float d2;
+uniform float angleM1;
+uniform float angleM1_Y;
+uniform float zoom;
+
+uniform float lambdas[10];
+uniform int lambdasCount;
+
+const float PI = 3.14159265359;
+
+vec3 WavelengthToRGB(float l) {
+    float r = 0.0; float g = 0.0; float b = 0.0;
+    if (l >= 380.0 && l < 440.0) { r = -(l - 440.0) / (440.0 - 380.0); b = 1.0; }
+    else if (l >= 440.0 && l < 490.0) { g = (l - 440.0) / (490.0 - 440.0); b = 1.0; }
+    else if (l >= 490.0 && l < 510.0) { g = 1.0; b = -(l - 510.0) / (510.0 - 490.0); }
+    else if (l >= 510.0 && l < 580.0) { r = (l - 510.0) / (580.0 - 510.0); g = 1.0; }
+    else if (l >= 580.0 && l < 645.0) { r = 1.0; g = -(l - 645.0) / (645.0 - 580.0); }
+    else if (l >= 645.0 && l <= 780.0) { r = 1.0; }
+
+    float factor = 1.0;
+    if (l >= 380.0 && l < 420.0) factor = 0.3 + 0.7 * (l - 380.0) / (420.0 - 380.0);
+    else if (l >= 380.0 && l <= 645.0) factor = 1.0;
+    else if (l > 700.0 && l <= 780.0) factor = 0.3 + 0.7 * (780.0 - l) / (780.0 - 700.0);
+
+    return vec3(r * factor, g * factor, b * factor);
+}
+
+void main() {
+    float pixelX = gl_FragCoord.x;
+    float pixelY = screenHeight - gl_FragCoord.y;
+
+    float deltaLnm = 2.0 * (d1 - d2) * 1000.0;
+
+    float relX = (pixelX - center.x) * zoom;
+    float relY = (pixelY - center.y) * zoom;
+    
+    float radiusSq = relX * relX + relY * relY;
+
+    float wDelta = (relX * angleM1 + relY * angleM1_Y) * 200.0;
+
+    float cosFactor = 1.0 - (radiusSq * 0.000004);
+
+    float currDelta = (deltaLnm * cosFactor) + wDelta;
+
+    vec3 accumColor = vec3(0.0);
+
+    for(int i = 0; i < 10; i++) {
+        if (i >= lambdasCount) break; 
+        
+        float l = lambdas[i];
+        if (l < 1.0) l = 550.0; 
+
+        vec3 baseColorVec = WavelengthToRGB(l);
+        
+        float K = PI / l;
+        float phase = currDelta * K;
+        
+        float intensity = cos(phase);
+        intensity = intensity * intensity; 
+        
+        accumColor += baseColorVec * intensity;
+    }
+
+    gl_FragColor = vec4(accumColor, 1.0);
+}

main.c

@@ -1,7 +1,10 @@
-#include "raylib.h"
+#include "raylib/raylib.h"
 #include <math.h>
 #define RAYGUI_IMPLEMENTATION
-#include "raygui.h"
+#include "raylib/raygui.h"
+#if defined(PLATFORM_WEB)
+    #include <emscripten/emscripten.h>
+#endif
 
 #define UI_WIDTH 450
 #define COLOR_BG (Color){ 25, 25, 30, 255 }
@@ -23,6 +26,7 @@ typedef struct {
     Vector2 center;
     bool gaz;
     float nGaz;
+    int targetFps;
 } Michelson;
 
 Color WavelengthToColor(float lambda) {
@@ -71,7 +75,8 @@ void DrawInterferenceViewGPU(Michelson *mic, Rectangle rec, Shader shader, bool
     float centerX = rec.x + rec.width / 2.0f;
     float centerY = rec.y + rec.height / 2.0f;
     float center[2] = { centerX, centerY };
-    float scrHeight = (float)GetScreenHeight();
+    //float scrHeight = (float)GetScreenHeight();
+    float scrHeight = 1080.0f;
     float zoom = *isFullscreen ? 0.7 : 1; 
 
     float addedOpticalPathOneWay = 0.0f;
@@ -271,7 +276,7 @@ void DrawControlPanel(Michelson *mic) {
     DrawRectangleLinesEx(spectrumRect, 1, GRAY);
 
     Vector2 mousePos = GetMousePosition();
-    float stepLambda = speedMode ? 10.0f : 1.0f;
+    float stepLambda = speedMode ? 0.7f : 0.03f;
 
     if (CheckCollisionPointRec(mousePos, spectrumRect)) {
         float mouseRatio = (mousePos.x - spectrumRect.x) / spectrumRect.width;
@@ -372,24 +377,28 @@ void DrawControlPanel(Michelson *mic) {
     int rows = (mic->lambdasCount + cols - 1) / cols;
     startY += (rows * (btnH + 5)) + 20;
 
-
-    // Pos M1
+    // Pos M1 M2 (d1 - d2)
     startY += 0;
-    DrawText(TextFormat("Position M1 : %.2f um", mic->d1), startX, startY, 20, ORANGE);
+    float currentDiff = mic->d1 - mic->d2;
+    DrawText(TextFormat("Distance M1 - M2: %.2f um", currentDiff), startX, startY, 20, ORANGE);
    
     // Pas des + et -
-    float stepD1 = speedMode ? 0.5f : 0.005f;
+    float stepD1 = speedMode ? 0.05f : 0.006f;
+
+    if (GuiButtonRepeat((Rectangle){startX, startY + 30, btnSize, 25}, "-", shouldRepeat)) mic->d1 -= stepD1;
+
+    float sliderVal = currentDiff;
+    GuiSlider((Rectangle){startX + btnSize + 5, startY + 30, sliderWidth - 75, 25}, NULL, NULL, &sliderVal, -100.0f, 100.0f);
+    mic->d1 = mic->d2 + sliderVal;
 
     if (GuiButtonRepeat((Rectangle){startX, startY + 30, btnSize, 25}, "-", shouldRepeat)) mic->d1 -= stepD1;
-    GuiSlider((Rectangle){startX + btnSize + 5, startY + 30, sliderWidth - 75, 25}, NULL, NULL, &mic->d1, 100, 600);
     if (GuiButtonRepeat((Rectangle){startX + btnSize + sliderWidth - 65, startY + 30, btnSize, 25}, "+", shouldRepeat)) mic->d1 += stepD1;
     if (GuiButton((Rectangle){startX + contentWidth - 60, startY + 30, 60, 25}, "Egal")) mic->d1 = mic->d2;
 
-
     // Angle M1 X
     startY += 90;
     DrawText(TextFormat("Inclinaison M1: %.3f deg", mic->angleM1), startX, startY, 20, ORANGE);
-    float stepAngle = speedMode ? 0.05f : 0.001f;
+    float stepAngle = speedMode ? 0.05f : 0.0006f;
     if (GuiButtonRepeat((Rectangle){startX, startY + 30, btnSize, 25}, "-", shouldRepeat)) mic->angleM1 -= stepAngle;
     GuiSlider((Rectangle){startX + btnSize + 5, startY + 30, sliderWidth - 75, 25}, 0, 0, &mic->angleM1, -1.0f, 1.0f);
     if (GuiButtonRepeat((Rectangle){startX + btnSize + sliderWidth - 65, startY + 30, btnSize, 25}, "+", shouldRepeat)) mic->angleM1 += stepAngle;
@@ -397,6 +406,7 @@ void DrawControlPanel(Michelson *mic) {
 
     // Angles M1 Y 
     startY += 90;
+    stepAngle = speedMode ? 0.05f : 0.0006f;
     DrawText(TextFormat("Inclinaison Y: %.3f deg", mic->angleM1_Y), startX, startY, 20, ORANGE);
     if (GuiButtonRepeat((Rectangle){startX, startY + 30, btnSize, 25}, "-", shouldRepeat)) mic->angleM1_Y -= stepAngle;
     GuiSlider((Rectangle){startX + btnSize + 5, startY + 30, sliderWidth - 75, 25}, 0, 0, &mic->angleM1_Y, -1.0f, 1.0f);
@@ -420,7 +430,7 @@ void DrawControlPanel(Michelson *mic) {
     GuiCheckBox((Rectangle){startX, startY + 30, 20, 20}, "Cuve", &mic->gaz);
     if (mic->gaz) {
         DrawText(TextFormat("n = %.4f", mic->nGaz), startX + 150, startY + 30, 20, WHITE);
-        float stepN = speedMode ? 0.001f : 0.0001f;
+        float stepN = speedMode ? 0.001f : 0.00005f;
         if (GuiButtonRepeat((Rectangle){startX, startY + 55, btnSize, 25}, "-", shouldRepeat)) mic->nGaz -= stepN;
         GuiSlider((Rectangle){startX + btnSize + 5, startY + 55, sliderWidth - 10, 25}, NULL, NULL, &mic->nGaz, 1.000f, 1.100f);
         if (GuiButtonRepeat((Rectangle){startX + btnSize + sliderWidth, startY + 55, btnSize, 25}, "+", shouldRepeat)) mic->nGaz += stepN;
@@ -438,27 +448,134 @@ void DrawControlPanel(Michelson *mic) {
     
     float refLambda = mic->lambdas[mic->selectedLambdaIndex];
     float p = (delta * 1000.0f) / refLambda; 
-    DrawText(TextFormat("Ordre p (sel) = %.2f", p), startX, startY + 65, 20, WHITE);
+    DrawText(TextFormat("Ordre p = %.2f", p), startX, startY + 65, 20, WHITE);
+
+    // FPS
+    int bottomY = GetScreenHeight() - 40;
+    int perfStartY = bottomY - 80;
+
+    DrawLine(startX, perfStartY - 10, startX + contentWidth, perfStartY - 10, GRAY);
+    DrawText("PERFORMANCES (Cible FPS)", startX, perfStartY, 20, GRAY);
+
+    int fpsValues[] = {0, 30, 60, 120, 144};
+    const char* fpsTexts[] = {"MAX", "30", "60", "120", "144"};
+    int fpsCount = 5;
+    int fpsSpacing = 5;
+    int fpsBtnW = (contentWidth - (fpsSpacing * (fpsCount - 1))) / fpsCount;
+
+    for (int i = 0; i < fpsCount; i++) {
+        Rectangle fpsRect = {startX + i * (fpsBtnW + fpsSpacing), perfStartY + 30, fpsBtnW, 25};
+        bool isCurrent = (mic->targetFps == i);
+        if (GuiButton(fpsRect, fpsTexts[i])) {
+            mic->targetFps = i;
+            SetTargetFPS(fpsValues[i]);
+        }
+        if (isCurrent) {
+            DrawRectangleLinesEx(fpsRect, 2, COLOR_ACCENT);
+            DrawRectangle(fpsRect.x + 2, fpsRect.y + 2, fpsRect.width-4, fpsRect.height-4, Fade(COLOR_ACCENT, 0.2f));
+        }
+    }
 
     // Bas 
-    int bottomY = GetScreenHeight() - 40;
     DrawLine(0, bottomY, UI_WIDTH, bottomY, Fade(WHITE, 0.1f));
     int fps = GetFPS();
     Color fpsColor = (fps >= 100) ? COLOR_ACCENT : (fps >= 60 ? GREEN : (fps >= 30 ? ORANGE : RED));
+    int currentFpsVal = fpsValues[mic->targetFps];
     DrawText("STATUT:", startX, bottomY + 12, 20, COLOR_TEXT_DIM);
-    DrawText(TextFormat("%i FPS", fps), startX + 100, bottomY + 12, 20, fpsColor);
+    DrawText(TextFormat("%i FPS (%s)", fps, (currentFpsVal == 0 ? "Max" : TextFormat("%i", currentFpsVal))), startX + 100, bottomY + 12, 20, fpsColor);
 }
 
-int main () {
-    SetConfigFlags(FLAG_MSAA_4X_HINT);
-    InitWindow(1920, 1080, "Interferometre de Michelson");
-    SetTargetFPS(10044);
-
-    Shader shader = LoadShader(0, "michelson.frag");
-
 Michelson mic = {0};
+Shader shader;
+bool isFullscreen = false;
+Rectangle normalBounds = {0};
+Rectangle fullScreenBounds = {0};
+#if !defined(PLATFORM_WEB)
+    RenderTexture2D target;
+#endif
+
+void UpdateDrawFrame(void) {
+    if (IsKeyPressed(KEY_F)) {
+        isFullscreen = !isFullscreen;
+    }
+
+    Rectangle currentViewBounds = isFullscreen ? fullScreenBounds : normalBounds;
+    #if defined(PLATFORM_WEB)
+        BeginDrawing();
+            ClearBackground(COLOR_BG);
+            float gridThick = 1.1f;
+            float gridAlpha = 0.03f;
+            // Grille fond
+            for(int i = UI_WIDTH; i < 1920; i += 100) {
+                DrawLineEx((Vector2){i, 0}, (Vector2){i, 1080}, gridThick, Fade(WHITE, gridAlpha));
+            }
+            for(int i = 0; i < 1080; i += 100) {
+                DrawLineEx((Vector2){UI_WIDTH, i}, (Vector2){1920, i}, gridThick, Fade(WHITE, gridAlpha));
+            }
+
+            DrawMichelsonSchema(&mic);
+            DrawControlPanel(&mic);
+            DrawInterferenceViewGPU(&mic, currentViewBounds, shader, &isFullscreen);
+        EndDrawing();
+    #else
+        float scale = fminf((float)GetScreenWidth() / 1920, (float)GetScreenHeight() / 1080);
+        float newWidth = 1920 * scale;
+        float newHeight = 1080 * scale;
+        float offsetX = (GetScreenWidth() - newWidth) * 0.5f;
+        float offsetY = (GetScreenHeight() - newHeight) * 0.5f;
+        SetMouseOffset(-offsetX, -offsetY);
+        SetMouseScale(1.0f / scale, 1.0f / scale);
+        BeginTextureMode(target);
+            ClearBackground(COLOR_BG);
+            float gridThick = 1.1f;
+            float gridAlpha = 0.03f;
+            // Grille fond
+            //for(int i = UI_WIDTH; i < 1920; i += 100) DrawLine(i, 0, i, 1080, Fade(WHITE, 0.05f));
+            //for(int i = 0; i < 1080; i += 100) DrawLine(UI_WIDTH, i, 1920, i, Fade(WHITE, 0.05f));
+            for(int i = UI_WIDTH; i < 1920; i += 100) {
+                DrawLineEx((Vector2){i, 0}, (Vector2){i, 1080}, gridThick, Fade(WHITE, gridAlpha));
+            }
+            for(int i = 0; i < 1080; i += 100) {
+                DrawLineEx((Vector2){UI_WIDTH, i}, (Vector2){1920, i}, gridThick, Fade(WHITE, gridAlpha));
+            }
+            DrawMichelsonSchema(&mic);
+            DrawControlPanel(&mic);
+            DrawInterferenceViewGPU(&mic, currentViewBounds, shader, &isFullscreen);
+        EndTextureMode();
+        BeginDrawing();
+            ClearBackground(COLOR_BG);
+            Rectangle sourceRec = {0.0f, 0.0f, (float)target.texture.width, -(float)target.texture.height};
+            Rectangle destRec = { offsetX, offsetY, newWidth, newHeight };
+            DrawTexturePro(target.texture, sourceRec, destRec, (Vector2){0, 0}, 0.0f, WHITE);
+        EndDrawing();
+    #endif
+}
+
+
+int main () {
+    #if defined(PLATFORM_WEB)
+        InitWindow(1920, 1080, "Interferometre de Michelson");
+        SetConfigFlags(FLAG_MSAA_4X_HINT);
+    #else 
+        SetConfigFlags(FLAG_WINDOW_RESIZABLE | FLAG_MSAA_4X_HINT);
+        InitWindow(1280, 720, "Interferometre de Michelson");
+    #endif
+
+    SetTargetFPS(0);
+
+    #if defined(PLATFORM_WEB)
+        shader = LoadShader(0, "glsl/michelson_web.frag");
+    #else
+        shader = LoadShader(0, "glsl/michelson.frag");
+    #endif
+
+    #if !defined(PLATFORM_WEB)
+        target = LoadRenderTexture(1920, 1080);
+        SetTextureFilter(target.texture, TEXTURE_FILTER_BILINEAR);
+    #endif
+
     mic.center = (Vector2){ UI_WIDTH + (1920 - UI_WIDTH) / 2.0f - 100, 1080 / 2.0f };
-    mic.d1 = 250.0f;
+    mic.d1 = 265.0f;
     mic.d2 = 250.0f;
     mic.lambdas[0] = 550.0f;
     mic.lambdasCount = 1;
@@ -468,28 +585,17 @@ int main () {
     mic.nGaz = 1.0f;
     mic.gaz = false;
 
-    bool isFullscreen = false;
-
-    Rectangle normalBounds = {1920 - 530, 50, 500, 500};
-    Rectangle fullScreenBounds = {UI_WIDTH + 10, 40, 1920 - UI_WIDTH - 20, 1030};
-    //Rectangle screenViewBounds = {400, 0, 1080, 1080};
+    normalBounds = (Rectangle){1920 - 530, 50, 500, 500};
+    fullScreenBounds = (Rectangle){UI_WIDTH + 10, 40, 1920 - UI_WIDTH - 20, 1030};
     
+    #if defined(PLATFORM_WEB)
+        emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
+    #else
         while (!WindowShouldClose()) {
-        if (IsKeyPressed(KEY_F)) {
-            isFullscreen = !isFullscreen;
+            UpdateDrawFrame();
         }
-        Rectangle currentViewBounds = isFullscreen ? fullScreenBounds : normalBounds;
-        BeginDrawing();
-            ClearBackground(COLOR_BG);
-            // Grille fond
-            for(int i = UI_WIDTH; i < 1920; i += 100) DrawLine(i, 0, i, 1080, Fade(WHITE, 0.05f));
-            for(int i = 0; i < 1080; i += 100) DrawLine(UI_WIDTH, i, 1920, i, Fade(WHITE, 0.05f));
+    #endif
         
-            DrawMichelsonSchema(&mic);
-            DrawControlPanel(&mic);
-            DrawInterferenceViewGPU(&mic, currentViewBounds, shader, &isFullscreen);
-        EndDrawing();
-    }
     CloseWindow();
     return 0;
 }

minshell.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Interferometre Michelson - Web</title>
+    <style>
+        body { 
+            margin: 0; 
+            padding: 0; 
+            background-color: #19191e;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        canvas.emscripten {
+            border: 0px none;
+            background-color: #19191e;
+            display: block;
+            
+            aspect-ratio: 16 / 9;
+
+            max-width: 100vw;
+            max-height: 100vh;
+            
+            height: auto;
+            width: auto;
+            
+            box-shadow: 0 0 20px rgba(0,0,0,0.5);
+            
+            image-rendering: -moz-crisp-edges;
+            image-rendering: -webkit-optimize-contrast;
+            image-rendering: crisp-edges;
+            image-rendering: pixelated;
+        }
+    </style>
+  </head>
+  <body>
+    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+    <script type='text/javascript'>
+      var Module = {
+        print: (function() {
+          return function(text) { console.log(text); };
+        })(),
+        printErr: function(text) { console.error(text); },
+        canvas: (function() {
+          var canvas = document.getElementById('canvas');
+          return canvas;
+        })()
+      };
+    </script>
+    {{{ SCRIPT }}}
+  </body>
+</html>