Bug with my web server HTML error 500 [ESP32]

Hello, i have a question with my code, i use a USP32.

I want to put my html page and 2 javascript on my code, on this code, I have done a Web server, wifi, and DNSserver.

So at first I with another code this :

// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include "SPIFFS.h"

// Replace with your network credentials
const char* ssid = "THO-MAS";
const char* password = "marabouchpic";

// Set LED GPIO
const int ledPin = 2;
// Stores LED state
String ledState;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Replaces placeholder with LED state value
String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
  return String();
}
 
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);

  // Initialize SPIFFS
  if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/GamePad.html", String(), false, processor);
  });
  
  // Route to load style.css file
  server.on("/multikey.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/multikey.js");
  }); 
  
    // Route to load style.css file
  server.on("/CanvasGamepad.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/CanvasGamepad.js");
  }); 
  
  // Route to set GPIO to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);    
    request->send(SPIFFS, "/GamePad.html", String(), false, processor);
  });
  
  // Route to set GPIO to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);    
    request->send(SPIFFS, "/GamePad.html", String(), false, processor);
  });

  // Start server
  server.begin();
}
 
void loop(){
  
}

so and at second i have this code for my work :

#include <WiFi.h>
#include <WebServer.h>
#include <DNSServer.h>
#include <FastLED.h>

#define LED_PIN     12
//#define NUM_LEDS    9
#define BRIGHTNESS  20
#define LED_TYPE    WS2812B

#define COLOR_ORDER GRB

// Params for width and height
const uint8_t kMatrixWidth = 3;
const uint8_t kMatrixHeight = 3;


// Param for different pixel layouts
const bool    kMatrixSerpentineLayout = true;
uint16_t XY( uint8_t x, uint8_t y)
{
  uint16_t i;
  
   if( kMatrixSerpentineLayout == true) {
    if( y & 0x01) {
      // Odd rows run backwards
      uint8_t reverseX = (kMatrixWidth - 1) - x;
      i = (y * kMatrixWidth) + reverseX;
    } else {
      // Even rows run forwards
      i = (y * kMatrixWidth) + x;
    }
  }
  
  return i;
}


#define NUM_LEDS (kMatrixWidth * kMatrixHeight)
//CRGB leds_plus_safety_pixel[ NUM_LEDS + 1];
//CRGB* const leds( leds_plus_safety_pixel + 1);

uint16_t XYsafe( uint8_t x, uint8_t y)
{
  if( x >= kMatrixWidth) return -1;
  if( y >= kMatrixHeight) return -1;
  return XY(x,y);
}

CRGB leds[NUM_LEDS];

const byte DNS_PORT = 53;

/* Put your SSID & Password */
const char* ssid = "Jojo_ESP32";  // Enter SSID here
//const char* password = "12345678";  //Enter Password here and edit code below

/* Put IP Address details */
IPAddress local_ip(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

WiFiServer wifiServer(80);
WebServer webServer(10000);
DNSServer dnsServer;

bool button_A = false;
bool button_B = false;
bool button_C_clicked = false;
bool button_D_clicked = false;

String redirectHTML = "<script>"
"location.href = 'http://192.168.1.1:10000/'"
"</script>";

void DrawOneFrame( byte startHue8, int8_t yHueDelta8, int8_t xHueDelta8)
{
  byte lineStartHue = startHue8;
  for( byte y = 0; y < kMatrixHeight; y++) {
    lineStartHue += yHueDelta8;
    byte pixelHue = lineStartHue;      
    for( byte x = 0; x < kMatrixWidth; x++) {
      pixelHue += xHueDelta8;
      leds[ XY(x, y)]  = CHSV( pixelHue, 255, 255);
    }
  }
}

void setup() {
 Serial.begin(115200);

 Serial.println("Booting up..");

 WiFi.mode(WIFI_AP);
 WiFi.softAPConfig(local_ip, gateway, subnet);
 WiFi.softAP(ssid);
 //WiFi.softAP(ssid, password);

 delay(1000);

 // if DNSServer is started with "*" for domain name, it will reply with
 // provided IP to all DNS request
 dnsServer.start(DNS_PORT, "*", local_ip);

 wifiServer.begin();

 webServer.on("/", handle_OnConnect);
 webServer.on("/led1on", handle_button1on);
 webServer.on("/led1off", handle_button1off);
 webServer.on("/led2on", handle_button2on);
 webServer.on("/led2off", handle_button2off);
 webServer.on("/led3click", handle_button3click);
 webServer.on("/led4click", handle_button4click);
 webServer.onNotFound(handle_NotFound);
 webServer.begin();

 Serial.println("HTTP server started");

 //LED Strip setup

 FastLED.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
 FastLED.setBrightness(BRIGHTNESS);

 for (int i = 0; i < NUM_LEDS; i++)
 {
 leds[i] = CRGB(0, 50, 0);
 }

 FastLED.show();

 delay(100);

}

unsigned long animation_start_time;

void loop() {
 dnsServer.processNextRequest();

 WiFiClient client = wifiServer.available();   // listen for incoming clients
 if (client) {
 String currentLine = "";
 while (client.connected()) {
 if (client.available()) {
 char c = client.read();
 if (c == '\n') {
 if (currentLine.length() == 0) {
 client.println("HTTP/1.1 200 OK");
 client.println("Content-type:text/html");
 client.println();
 client.print(redirectHTML);
 break;
 }
 else {
 currentLine = "";
 }
 }
 else if (c != '\r') {
 currentLine += c;
 }
 }
 }
 client.stop();
 }

 webServer.handleClient();

 //clear_leds();

 if (button_A == true) {
 uint32_t ms = millis();
    int32_t yHueDelta32 = ((int32_t)cos16( ms * (40/1) ) * (60 / kMatrixWidth));
    int32_t xHueDelta32 = ((int32_t)cos16( ms * (70/1) ) * (40 / kMatrixHeight));
    DrawOneFrame( ms / 65536, yHueDelta32 / 32768, xHueDelta32 / 32768);
    if( ms < 5000 ) {
      FastLED.setBrightness( scale8( BRIGHTNESS, (ms * 256) / 5000));
    } else {
      FastLED.setBrightness(BRIGHTNESS);
    }
    FastLED.show();
 if( ms < 10000 ) {
      FastLED.setBrightness( scale8( BRIGHTNESS, (ms * 256) / 10000));
    } else {
      FastLED.setBrightness(BRIGHTNESS);
    }
    FastLED.show();
 }
 else {
 leds[0] = CRGB(255, 0, 0);
 leds[1] = CRGB(255, 255, 0);
 }

 if (button_B) {
 leds[1] = CRGB(0, 255, 0);
 }
 else {
 leds[1] = CRGB(255, 0, 0);
 }

 if (button_C_clicked == true) {
 button_C_clicked = false;

 set_leds();

 animation_start_time = millis();
 }


 if (button_D_clicked == true) {
 button_D_clicked = false;

 clear_leds();
 }


 if (millis() - animation_start_time > 5000) {
 clear_leds();
 }

 FastLED.show();
}

void set_leds() {
 for (int i = 0; i < NUM_LEDS; i++)
 {
 leds[i] = CRGB::Yellow;
 }
}

void clear_leds() {
 for (int i = 0; i < NUM_LEDS; i++)
 {
 leds[i] = CRGB::Black;
 }
}

void handle_OnConnect() {
 button_A = false;
 button_B = false;
 Serial.println("Button A: OFF | Button B: OFF");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button1on() {
 button_A = true;
 Serial.println("Button A: ON");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button1off() {
 button_A = false;
 Serial.println("Button A: OFF");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button2on() {
 button_B = true;
 Serial.println("Button B: ON");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button2off() {
 button_B = false;
 Serial.println("Button B: OFF");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_NotFound() {
 webServer.send(200, "text/html", "Not found");
}

void handle_button3click() {
 button_C_clicked = true;
 webServer.send(200, "text/html", SendHTML(button_A, button_B));

}

void handle_button4click() {
 button_D_clicked = true;
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}




String SendHTML(uint8_t led1stat, uint8_t led2stat) {
 String ptr = "<!DOCTYPE html> <html>\n";
 ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
 ptr += "<title>LED Control</title>\n";
 ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
 ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
 ptr += ".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
 ptr += ".button-on {background-color: #3498db;}\n";
 ptr += ".button-on:active {background-color: #2980b9;}\n";
 ptr += ".button-off {background-color: #34495e;}\n";
 ptr += ".button-off:active {background-color: #2c3e50;}\n";
 ptr += "p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
 ptr += "</style>\n";
 ptr += "</head>\n";
 ptr += "<body>\n";
 ptr += "<h1>ESP32 Web Server</h1>\n";
 ptr += "<h3>Using Access Point(AP) Mode</h3>\n";

 if (led1stat)
 {
 ptr += "<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";
 }
 else
 {
 ptr += "<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";
 }

 if (led2stat)
 {
 ptr += "<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";
 }
 else
 {
 ptr += "<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";
 }

 ptr += "<p>LED3 Button</p><a class=\"button button - off\" href=\" /led3click\">Clickme</a>";
 ptr += "<p>LED4 Button</p><a class=\"button button - off\" href=\" /led4click\">Clickme</a>";

 ptr += "</body>\n";
 ptr += "</html>\n";
 return ptr;
}

And fir finish i tried to put the code for upload my html and javascript on my second program… but when i try to connect on the page he told me a HTML error 500
i don’t what i missed.

on this code we have 2 webserver but, i put the first on the note.

#include "WiFi.h"
//#include "WebServer.h"
#include "DNSServer.h"
#include "ESPAsyncWebServer.h"
#include "FastLED.h"
#include "SPIFFS.h"

#define LED_PIN     12
//#define NUM_LEDS    9
#define BRIGHTNESS  20
#define LED_TYPE    WS2812B

#define COLOR_ORDER GRB

// Params for width and height
const uint8_t kMatrixWidth = 3;
const uint8_t kMatrixHeight = 3;


// Param for different pixel layouts
const bool    kMatrixSerpentineLayout = true;
uint16_t XY(uint8_t x, uint8_t y)
{
 uint16_t i;

 if (kMatrixSerpentineLayout == true) {
 if (y & 0x01) {
 // Odd rows run backwards
 uint8_t reverseX = (kMatrixWidth - 1) - x;
 i = (y * kMatrixWidth) + reverseX;
 }
 else {
 // Even rows run forwards
 i = (y * kMatrixWidth) + x;
 }
 }

 return i;
}


#define NUM_LEDS (kMatrixWidth * kMatrixHeight)
//CRGB leds_plus_safety_pixel[ NUM_LEDS + 1];
//CRGB* const leds( leds_plus_safety_pixel + 1);

uint16_t XYsafe(uint8_t x, uint8_t y)
{
 if (x >= kMatrixWidth) return -1;
 if (y >= kMatrixHeight) return -1;
 return XY(x, y);
}

CRGB leds[NUM_LEDS];

const byte DNS_PORT = 53;

/* Put your SSID & Password */
const char* ssid = "Jojo_ESP32";  // Enter SSID here
//const char* password = "12345678";  //Enter Password here and edit code below

/* Put IP Address details */
IPAddress local_ip(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

WiFiServer wifiServer(81);
//WebServer webServer(10000);
AsyncWebServer server(80);
DNSServer dnsServer;

bool button_A = false;
bool button_B = false;
bool button_C_clicked = false;
bool button_D_clicked = false;

String redirectHTML = "<script>"
"location.href = 'http://192.168.1.1:80/'"
"</script>";

void DrawOneFrame(byte startHue8, int8_t yHueDelta8, int8_t xHueDelta8)
{
 byte lineStartHue = startHue8;
 for (byte y = 0; y < kMatrixHeight; y++) {
 lineStartHue += yHueDelta8;
 byte pixelHue = lineStartHue;
 for (byte x = 0; x < kMatrixWidth; x++) {
 pixelHue += xHueDelta8;
 leds[XY(x, y)] = CHSV(pixelHue, 255, 255);
 }
 }
}

void setup() {
  
 Serial.begin(115200);

 Serial.println("Booting up..");

 WiFi.mode(WIFI_AP);
 WiFi.softAPConfig(local_ip, gateway, subnet);
 WiFi.softAP(ssid);
 //WiFi.softAP(ssid, password);

 delay(1000);

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", local_ip);
  
 wifiServer.begin();

/*
 webServer.on("/", handle_OnConnect);
 webServer.on("/led1on", handle_button1on);
 webServer.on("/led1off", handle_button1off);
 webServer.on("/led2on", handle_button2on);
 webServer.on("/led2off", handle_button2off);
 webServer.on("/led3click", handle_button3click);
 webServer.on("/led4click", handle_button4click);
 webServer.onNotFound(handle_NotFound);
 webServer.begin();
  */

 Serial.println("HTTP server started");

 //LED Strip setup

 FastLED.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
 FastLED.setBrightness(BRIGHTNESS);

 for (int i = 0; i < NUM_LEDS; i++)
 {
 leds[i] = CRGB(0, 50, 0);
 }

 FastLED.show();
 
  // Initialize SPIFFS
  if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

   // Route for root / web page
  server.on("/GamePad.html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/GamePad.html");
  });
  
  // Route to load JavaScript.js file
  server.on("/multikey.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/multikey.js");
  }); 
  
    // Route to load JavaScript.js file
  server.on("/CanvasGamepad.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/CanvasGamepad.js");
  }); 

    // Start server
  server.begin();
 delay(100);
}

unsigned long animation_start_time;

void loop() {
 dnsServer.processNextRequest();

 WiFiClient client = wifiServer.available();   // listen for incoming clients
 if (client) {
 String currentLine = "";
 while (client.connected()) {
 if (client.available()) {
 char c = client.read();
 if (c == '\n') {
 if (currentLine.length() == 0) {
 client.println("HTTP/1.1 200 OK");
 client.println("Content-type:text/html");
 client.println();
 client.print(redirectHTML);
 break;
 }
 else {
 currentLine = "";
 }
 }
 else if (c != '\r') {
 currentLine += c;
 }
 }
 }
 client.stop();
 }

 //webServer.handleClient();

 /*clear_leds();

 if (button_A == true) {
 uint32_t ms = millis();
 int32_t yHueDelta32 = ((int32_t)cos16(ms * (40 / 1)) * (60 / kMatrixWidth));
 int32_t xHueDelta32 = ((int32_t)cos16(ms * (70 / 1)) * (40 / kMatrixHeight));
 DrawOneFrame(ms / 65536, yHueDelta32 / 32768, xHueDelta32 / 32768);
 if (ms < 5000) {
 FastLED.setBrightness(scale8(BRIGHTNESS, (ms * 256) / 5000));
 }
 else {
 FastLED.setBrightness(BRIGHTNESS);
 }
 FastLED.show();
 if (ms < 10000) {
 FastLED.setBrightness(scale8(BRIGHTNESS, (ms * 256) / 10000));
 }
 else {
 FastLED.setBrightness(BRIGHTNESS);
 }
 FastLED.show();
 }
 else {
 leds[0] = CRGB(255, 0, 0);
 leds[1] = CRGB(255, 255, 0);
 }

 if (button_B) {
 leds[1] = CRGB(0, 255, 0);
 }
 else {
 leds[1] = CRGB(255, 0, 0);
 }

 if (button_C_clicked == true) {
 button_C_clicked = false;

 set_leds();

 animation_start_time = millis();
 }


 if (button_D_clicked == true) {
 button_D_clicked = false;

 clear_leds();
 }


 if (millis() - animation_start_time > 5000) {
 clear_leds();
 }

 FastLED.show();
 */
}

void set_leds() {
 for (int i = 0; i < NUM_LEDS; i++)
 {
 leds[i] = CRGB::Yellow;
 }
}

void clear_leds() {
 for (int i = 0; i < NUM_LEDS; i++)
 {
 leds[i] = CRGB::Black;
 }
}
/*
void handle_OnConnect() {
 button_A = false;
 button_B = false;
 Serial.println("Button A: OFF | Button B: OFF");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button1on() {
 button_A = true;
 Serial.println("Button A: ON");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button1off() {
 button_A = false;
 Serial.println("Button A: OFF");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button2on() {
 button_B = true;
 Serial.println("Button B: ON");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_button2off() {
 button_B = false;
 Serial.println("Button B: OFF");
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

void handle_NotFound() {
 webServer.send(200, "text/html", "Not found");
}

void handle_button3click() {
 button_C_clicked = true;
 webServer.send(200, "text/html", SendHTML(button_A, button_B));

}

void handle_button4click() {
 button_D_clicked = true;
 webServer.send(200, "text/html", SendHTML(button_A, button_B));
}

*/

/*
String SendHTML(uint8_t led1stat, uint8_t led2stat) {
 String ptr = "<!DOCTYPE html><html>\n";
 ptr += "<head>< meta name=\"format-detection\" content=\"telephone=yes\"><meta name=\"msapplication-tap-highlight\" content=\"no\"> <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width\">\n";
 ptr += "<title>LuxeFery Gamepad</title></head>\n";
 ptr += "<body><canvas id=\"game\"></canvas>\n";
 ptr += "<script src=\"multikey.js\"></script>\n";
 ptr += "<script src=\"CanvasGamepad.js\"></script>\n";
 ptr += "<script>CanvasGamepad.setup(\n";
 ptr += "{\n";
 ptr += "canvas:\"controller\",\n";
 ptr += "start:{name:\"start\", key:\"b\"},\n";
 ptr += "select:{name:\"select\", key:\"v\"},\n";
 ptr += "trace:false,\n";
 ptr += "debug:false,\n";
 ptr += "hint:true,\n";
 ptr += "joystick:false,\n";
 ptr += "hidden:false,\n";
 ptr += "buttons :[\n";
 ptr += "{name:\"→\", \"key\":\"d\"},\n";
 ptr += "{name:\"↓\", \"key\":\"s\"},\n";
 ptr += "{name:\"↑\", \"key\":\"z\"},\n";
 ptr += "{name:\"←\", \"key\":\"q\"}\n";
 ptr += "]\n";
 ptr += "}\n";
 ptr += ");\n";
 ptr += "multikey.setup(CanvasGamepad.events, \"zqsdbv\", true);\n";
 ptr += "</script></body></html>\n";
 return ptr;
}
*/