This commit is contained in:
jcheca 2024-08-08 15:54:58 +02:00
parent 4b82bbbfd1
commit b4dfc443a7
6 changed files with 997 additions and 8 deletions

7
pong/static/flags/de.svg Executable file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path id="black_stripe" fill="#000" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path id="red_stripe" fill="#D00" d="M8,419.25 C178.83,334.03 349.03,364.83 521.26,391.28 C676.47,415.12 833.42,435.85 992,356.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,419.25"/>
<path id="gold_stripe" fill="#FFCE00" d="M8,643.25 C178.83,558.03 349.03,588.83 521.26,615.28 C676.47,639.12 833.42,659.85 992,580.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,643.25"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

712
pong/static/flags/es.svg Executable file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 415 KiB

7
pong/static/flags/fr.svg Executable file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path fill="#ED2939" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path fill="#fff" d="M8,195.25 C225.32,86.83 440.27,166.96 664,185.41 L664,857.41 C448.6,839.65 229.72,756.65 8,867.25 L8,195.25"/>
<path fill="#002395" d="M8,195.25 C116.32,141.21 224.41,133.48 336,142.59 L336,814.59 C227.91,805.77 119.34,811.71 8,867.25 L8,195.25"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>

After

Width:  |  Height:  |  Size: 946 B

7
pong/static/flags/it.svg Executable file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path fill="#009246" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path fill="#fff" d="M336,142.59 C551.4,160.35 770.28,243.35 992,132.75 L992,804.75 C774.68,913.17 559.73,833.04 336,814.59 L336,142.59"/>
<path fill="#ce2b37" d="M664,185.41 C772.09,194.23 880.66,188.29 992,132.75 L992,804.75 C883.68,858.79 775.59,866.52 664,857.41 L664,185.41"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>

After

Width:  |  Height:  |  Size: 959 B

57
pong/static/flags/us.svg Executable file
View File

@ -0,0 +1,57 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path fill="#b22234" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path fill="#fff" d="M8,246.94 C178.83,161.72 349.03,192.52 521.26,218.97 C676.47,242.82 833.42,263.54 992,184.44 L992,236.13 C821.17,321.36 650.97,290.56 478.74,264.1 C323.53,240.26 166.58,219.53 8,298.63 L8,246.94 M992,339.52 C821.17,424.74 650.97,393.94 478.74,367.49 C323.53,343.65 166.58,322.92 8,402.02 L8,350.33 C178.83,265.1 349.03,295.91 521.26,322.36 C676.47,346.2 833.42,366.93 992,287.83 L992,339.52 M8,453.71 C178.83,368.49 349.03,399.29 521.26,425.74 C676.47,449.58 833.42,470.31 992,391.21 L992,442.9 C821.17,528.13 650.97,497.32 478.74,470.87 C323.53,447.03 166.58,426.3 8,505.4 L8,453.71 M992,546.29 C821.17,631.51 650.97,600.71 478.74,574.26 C323.53,550.42 166.58,529.69 8,608.79 L8,557.1 C178.83,471.87 349.03,502.68 521.26,529.13 C676.47,552.97 833.42,573.7 992,494.6 L992,546.29 M8,660.48 C178.83,575.26 349.03,606.06 521.26,632.51 C676.47,656.35 833.42,677.08 992,597.98 L992,649.67 C821.17,734.9 650.97,704.09 478.74,677.64 C323.53,653.8 166.58,633.07 8,712.17 L8,660.48 M992,753.06 C821.17,838.28 650.97,807.48 478.74,781.03 C323.53,757.18 166.58,736.46 8,815.56 L8,763.87 C178.83,678.64 349.03,709.44 521.26,735.9 C676.47,759.74 833.42,780.47 992,701.37 L992,753.06"/>
<path fill="#3c3b6e" d="M8,195.25 C138.03,130.38 267.66,132.43 401.6,149.63 L401.6,511.47 C272,494.84 141.49,490.5 8,557.1 L8,195.25"/>
<path id="s" fill="#fff" d="M40.8,195.75 L50.17,229.37 C42.07,224.93 33.98,220.71 25.64,216.63 C35.65,212.1 45.65,207.94 55.96,204.02 L31.43,237.16 L40.8,195.75"/>
<path fill="#fff" d="M40.8,268.12 L50.17,301.74 C42.07,297.29 33.98,293.08 25.64,289 C35.65,284.47 45.65,280.3 55.96,276.39 L31.43,309.53 L40.8,268.12"/>
<path fill="#fff" d="M40.8,340.49 L50.17,374.11 C42.07,369.66 33.98,365.45 25.64,361.37 C35.65,356.84 45.65,352.67 55.96,348.76 L31.43,381.9 L40.8,340.49"/>
<path fill="#fff" d="M40.8,412.86 L50.17,446.48 C42.07,442.03 33.98,437.82 25.64,433.74 C35.65,429.2 45.65,425.04 55.96,421.13 L31.43,454.27 L40.8,412.86"/>
<path fill="#fff" d="M40.8,485.23 L50.17,518.85 C42.07,514.4 33.98,510.19 25.64,506.11 C35.65,501.57 45.65,497.41 55.96,493.5 L31.43,526.64 L40.8,485.23"/>
<path fill="#fff" d="M73.6,219.6 L82.97,253.95 C74.87,248.88 66.78,244.03 58.44,239.27 C68.45,235.55 78.45,232.18 88.76,229.04 L64.23,260.27 L73.6,219.6"/>
<path fill="#fff" d="M73.6,291.97 L82.97,326.32 C74.87,321.25 66.78,316.4 58.44,311.64 C68.45,307.92 78.45,304.54 88.76,301.41 L64.23,332.64 L73.6,291.97"/>
<path fill="#fff" d="M73.6,364.34 L82.97,398.69 C74.87,393.62 66.78,388.77 58.44,384.01 C68.45,380.29 78.45,376.91 88.76,373.78 L64.23,405.01 L73.6,364.34"/>
<path fill="#fff" d="M73.6,436.71 L82.97,471.06 C74.87,465.99 66.78,461.14 58.44,456.38 C68.45,452.66 78.45,449.28 88.76,446.15 L64.23,477.38 L73.6,436.71"/>
<path fill="#fff" d="M106.4,173.57 L115.77,208.59 C107.67,202.95 99.58,197.5 91.24,192.11 C101.25,189.15 111.25,186.5 121.56,184.09 L97.03,213.55 L106.4,173.57"/>
<path fill="#fff" d="M106.4,245.94 L115.77,280.96 C107.67,275.32 99.58,269.87 91.24,264.48 C101.25,261.52 111.25,258.87 121.56,256.46 L97.03,285.91 L106.4,245.94"/>
<path fill="#fff" d="M106.4,318.31 L115.77,353.33 C107.67,347.69 99.58,342.24 91.24,336.85 C101.25,333.89 111.25,331.24 121.56,328.83 L97.03,358.28 L106.4,318.31"/>
<path fill="#fff" d="M106.4,390.68 L115.77,425.7 C107.67,420.05 99.58,414.61 91.24,409.22 C101.25,406.26 111.25,403.61 121.56,401.2 L97.03,430.65 L106.4,390.68"/>
<path fill="#fff" d="M106.4,463.05 L115.77,498.07 C107.67,492.42 99.58,486.98 91.24,481.59 C101.25,478.63 111.25,475.98 121.56,473.57 L97.03,503.02 L106.4,463.05"/>
<path fill="#fff" d="M139.2,202.2 L148.57,237.84 L124.04,219.7 C134.05,217.44 144.05,215.46 154.36,213.71 L129.83,241.54 L139.2,202.2"/>
<path fill="#fff" d="M139.2,274.57 L148.57,310.21 L124.04,292.07 C134.05,289.81 144.05,287.83 154.36,286.08 L129.83,313.91 L139.2,274.57"/>
<path fill="#fff" d="M139.2,346.94 L148.57,382.58 L124.04,364.44 C134.05,362.17 144.05,360.2 154.36,358.45 L129.83,386.28 L139.2,346.94"/>
<path fill="#fff" d="M139.2,419.3 L148.57,454.95 L124.04,436.81 C134.05,434.54 144.05,432.57 154.36,430.82 L129.83,458.65 L139.2,419.3"/>
<path fill="#fff" d="M172,160.56 L181.37,196.76 L156.84,177.12 C166.85,175.49 176.85,174.12 187.16,172.98 L162.63,199.32 L172,160.56"/>
<path fill="#fff" d="M172,232.92 L181.37,269.13 L156.84,249.48 C166.85,247.85 176.85,246.49 187.16,245.35 L162.63,271.68 L172,232.92"/>
<path fill="#fff" d="M172,305.29 L181.37,341.5 L156.84,321.85 C166.85,320.22 176.85,318.86 187.16,317.72 L162.63,344.05 L172,305.29"/>
<path fill="#fff" d="M172,377.66 L181.37,413.87 L156.84,394.22 C166.85,392.59 176.85,391.23 187.16,390.09 L162.63,416.42 L172,377.66"/>
<path fill="#fff" d="M172,450.03 L181.37,486.24 L156.84,466.59 C166.85,464.96 176.85,463.6 187.16,462.45 L162.63,488.79 L172,450.03"/>
<path fill="#fff" d="M204.8,193.19 L214.17,229.91 L189.64,208.89 C199.65,207.84 209.65,207.03 219.96,206.43 L195.43,231.43 L204.8,193.19"/>
<path fill="#fff" d="M204.8,265.56 L214.17,302.28 L189.64,281.26 C199.65,280.21 209.65,279.4 219.96,278.8 L195.43,303.8 L204.8,265.56"/>
<path fill="#fff" d="M204.8,337.93 L214.17,374.65 L189.64,353.63 C199.65,352.58 209.65,351.77 219.96,351.17 L195.43,376.17 L204.8,337.93"/>
<path fill="#fff" d="M204.8,410.3 L214.17,447.02 L189.64,426 C199.65,424.95 209.65,424.14 219.96,423.54 L195.43,448.53 L204.8,410.3"/>
<path fill="#fff" d="M237.6,155.18 L246.97,192.35 L222.44,170.11 C232.45,169.58 242.45,169.27 252.76,169.15 L228.23,192.94 L237.6,155.18"/>
<path fill="#fff" d="M237.6,227.55 L246.97,264.72 L222.44,242.48 C232.45,241.95 242.45,241.63 252.76,241.52 L228.23,265.31 L237.6,227.55"/>
<path fill="#fff" d="M237.6,299.92 L246.97,337.09 L222.44,314.85 C232.45,314.32 242.45,314 252.76,313.89 L228.23,337.68 L237.6,299.92"/>
<path fill="#fff" d="M237.6,372.29 L246.97,409.46 L222.44,387.22 C232.45,386.69 242.45,386.37 252.76,386.26 L228.23,410.05 L237.6,372.29"/>
<path fill="#fff" d="M237.6,444.66 L246.97,481.83 L222.44,459.59 C232.45,459.06 242.45,458.74 252.76,458.63 L228.23,482.42 L237.6,444.66"/>
<path fill="#fff" d="M270.4,191.06 L279.77,228.64 L255.24,205.31 C265.25,205.25 275.25,205.37 285.56,205.67 L261.03,228.41 L270.4,191.06"/>
<path fill="#fff" d="M270.4,263.43 L279.77,301 L255.24,277.68 C265.25,277.61 275.25,277.74 285.56,278.04 L261.03,300.78 L270.4,263.43"/>
<path fill="#fff" d="M270.4,335.8 L279.77,373.37 L255.24,350.05 C265.25,349.98 275.25,350.11 285.56,350.41 L261.03,373.15 L270.4,335.8"/>
<path fill="#fff" d="M270.4,408.17 L279.77,445.74 L255.24,422.42 C265.25,422.35 275.25,422.47 285.56,422.78 L261.03,445.52 L270.4,408.17"/>
<path fill="#fff" d="M303.2,155.91 L312.57,193.83 L288.04,169.57 L318.36,171.08 L293.83,192.9 L303.2,155.91"/>
<path fill="#fff" d="M303.2,228.28 L312.57,266.2 L288.04,241.94 L318.36,243.45 L293.83,265.27 L303.2,228.28"/>
<path fill="#fff" d="M303.2,300.65 L312.57,338.57 L288.04,314.31 L318.36,315.82 L293.83,337.64 L303.2,300.65"/>
<path fill="#fff" d="M303.2,373.02 L312.57,410.94 L288.04,386.68 L318.36,388.19 L293.83,410.01 L303.2,373.02"/>
<path fill="#fff" d="M303.2,445.39 L312.57,483.31 L288.04,459.05 L318.36,460.56 L293.83,482.37 L303.2,445.39"/>
<path fill="#fff" d="M336,194.28 L345.37,232.49 L320.84,207.43 L351.16,209.91 L326.63,230.96 L336,194.28"/>
<path fill="#fff" d="M336,266.65 L345.37,304.86 L320.84,279.8 L351.16,282.28 L326.63,303.33 L336,266.65"/>
<path fill="#fff" d="M336,339.02 L345.37,377.23 L320.84,352.17 L351.16,354.65 L326.63,375.69 L336,339.02"/>
<path fill="#fff" d="M336,411.39 L345.37,449.6 L320.84,424.54 L351.16,427.02 L326.63,448.06 L336,411.39"/>
<path fill="#fff" d="M368.8,161.23 L378.17,199.68 L353.64,173.96 L383.96,177.24 L359.43,197.66 L368.8,161.23"/>
<path fill="#fff" d="M368.8,233.6 L378.17,272.05 L353.64,246.33 L383.96,249.61 L359.43,270.02 L368.8,233.6"/>
<path fill="#fff" d="M368.8,305.97 L378.17,344.42 L353.64,318.7 L383.96,321.98 L359.43,342.39 L368.8,305.97"/>
<path fill="#fff" d="M368.8,378.34 L378.17,416.79 L353.64,391.07 L383.96,394.35 L359.43,414.76 L368.8,378.34"/>
<path fill="#fff" d="M368.8,450.71 L378.17,489.16 L353.64,463.44 L383.96,466.72 L359.43,487.13 L368.8,450.71"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@ -1,6 +1,6 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8">
@ -10,10 +10,73 @@
<div class="logo">
<img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
</div>
<style>
.language-switcher {
position: absolute;
top: 10px;
right: 10px;
display: flex;
gap: 10px;
}
</head>
.language-switcher img {
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
<style>
body {
color: rgb(0, 255, 255); /* Valeur par défaut */
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
<style>
#settings-btn {
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
z-index: 1000;
border: none;
border-radius: 50%;
padding: 10px;
font-size: 18px;
}
#settings-menu {
position: fixed;
bottom: 50px;
right: 10px;
padding: 20px;
background-color: rgb(66, 63, 63);
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 250px;
z-index: 1000;
}
#close-settings {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
}
</style>
<body>
<div class="language-switcher">
<img src="{% static 'flags/fr.svg' %}" alt="Français" onclick="changeLanguage('fr')">
<img src="{% static 'flags/us.svg' %}" alt="English" onclick="changeLanguage('en')">
<img src="{% static 'flags/it.svg' %}" alt="Italiano" onclick="changeLanguage('it')">
<img src="{% static 'flags/es.svg' %}" alt="Español" onclick="changeLanguage('es')">
<img src="{% static 'flags/de.svg' %}" alt="Deutsch" onclick="changeLanguage('de')">
</div>
<div class="background">
<div class="stars" id="stars"></div>
</div>
@ -22,24 +85,43 @@
<div class="paddle paddle-right"></div>
<div class="ball_anim"></div>
</div>
<button id="settings-btn">⚙️ Réglages</button>
<div id="settings-menu" style="display: none;">
<button id="close-settings">✖️</button>
<h2>Réglages</h2>
<label for="color-picker">Couleur:</label>
<input type="color" id="color-picker">
<br>
<label for="font-selector">Police:</label>
<select id="font-selector">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
</select>
<br>
<label for="font-size-slider">Taille:</label>
<input type="range" id="font-size-slider" min="12" max="36" value="16">
</div>
<div class="container" id="block-form">
<h1>BIENVENUE DANS LE PONG 42</h1>
<h1 id="welcome">BIENVENUE DANS LE PONG 42</h1>
<div class="input-container">
<div id="auth-form">
<label for="nickname">Enter your nickname:</label>
<label for="nickname" id="label-nickname">Enter your nickname:</label>
<input type="text" id="nickname" name="nickname">
<button id="check-nickname">Check Nickname</button>
</div>
<div id="register-form" style="display: none;">
<label for="password">Enter your password:</label>
<label for="password" id="label-password">Enter your password:</label>
<input type="password" id="password" name="password">
<label for="confirm-password">Confirm your password:</label>
<label for="confirm-password" id="label-confirm-password">Confirm your password:</label>
<input type="password" id="confirm-password" name="confirm-password">
<button id="register">Register</button>
</div>
<div id="login-form" style="display: none;">
<label for="login-password">Enter your password:</label>
<label for="login-password" id="label-login-password">Enter your password:</label>
<input type="password" id="login-password" name="login-password">
<button id="login">Login</button>
</div>
@ -60,6 +142,52 @@
</div>
<script src="{% static 'game.js' %}"></script>
<script>
const translations = {
fr: {
welcome: "BIENVENUE DANS LE PONG 42",
labelNickname: "Entrez votre surnom:",
labelPassword: "Entrez votre mot de passe:",
labelConfirmPassword: "Confirmez votre mot de passe:",
labelLoginPassword: "Entrez votre mot de passe:"
},
en: {
welcome: "WELCOME TO PONG 42",
labelNickname: "Enter your nickname:",
labelPassword: "Enter your password:",
labelConfirmPassword: "Confirm your password:",
labelLoginPassword: "Enter your password:"
},
it: {
welcome: "BENVENUTO A PONG 42",
labelNickname: "Inserisci il tuo soprannome:",
labelPassword: "Inserisci la tua password:",
labelConfirmPassword: "Conferma la tua password:",
labelLoginPassword: "Inserisci la tua password:"
},
es: {
welcome: "BIENVENIDO A PONG 42",
labelNickname: "Introduce tu apodo:",
labelPassword: "Introduce tu contraseña:",
labelConfirmPassword: "Confirma tu contraseña:",
labelLoginPassword: "Introduce tu contraseña:"
},
de: {
welcome: "WILLKOMMEN BEI PONG 42",
labelNickname: "Geben Sie Ihren Spitznamen ein:",
labelPassword: "Geben Sie Ihr Passwort ein:",
labelConfirmPassword: "Bestätigen Sie Ihr Passwort:",
labelLoginPassword: "Geben Sie Ihr Passwort ein:"
}
};
function changeLanguage(lang) {
document.getElementById('welcome').innerText = translations[lang].welcome;
document.getElementById('label-nickname').innerText = translations[lang].labelNickname;
document.getElementById('label-password').innerText = translations[lang].labelPassword;
document.getElementById('label-confirm-password').innerText = translations[lang].labelConfirmPassword;
document.getElementById('label-login-password').innerText = translations[lang].labelLoginPassword;
}
const starsContainer = document.getElementById('stars');
for (let i = 0; i < 500; i++) {
const star = document.createElement('div');
@ -74,6 +202,77 @@
setInterval(createTrail, 100);
</script>
<script>
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days*24*60*60*1000));
const expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
function getCookie(name) {
const cname = name + "=";
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(cname) === 0) {
return c.substring(cname.length, c.length);
}
}
return "";
}
function changeLanguage(lang) {
setCookie('preferredLanguage', lang, 365); // Store the language preference for 1 year
document.getElementById('welcome').innerText = translations[lang].welcome;
document.getElementById('label-nickname').innerText = translations[lang].labelNickname;
document.getElementById('label-password').innerText = translations[lang].labelPassword;
document.getElementById('label-confirm-password').innerText = translations[lang].labelConfirmPassword;
document.getElementById('label-login-password').innerText = translations[lang].labelLoginPassword;
}
// Function to set the language based on the cookie
function setLanguageFromCookie() {
const preferredLanguage = getCookie('preferredLanguage');
if (preferredLanguage && translations[preferredLanguage]) {
changeLanguage(preferredLanguage);
} else {
changeLanguage('fr'); // Default to French if no cookie is found
}
}
// Set the language when the page loads
window.onload = setLanguageFromCookie;
</script>
<script>
document.getElementById('settings-btn').addEventListener('click', function() {
document.getElementById('settings-menu').style.display = 'block';
});
document.getElementById('close-settings').addEventListener('click', function() {
document.getElementById('settings-menu').style.display = 'none';
});
// Change the color of the text
document.getElementById('color-picker').addEventListener('input', function() {
document.body.style.color = this.value;
document.querySelectorAll('button').forEach(function(button) {
button.style.backgroundColor = this.value; // Change la couleur de fond des boutons
}, this);
});
document.getElementById('font-selector').addEventListener('change', function() {
document.body.style.fontFamily = this.value;
});
document.getElementById('font-size-slider').addEventListener('input', function() {
document.body.style.fontSize = this.value + 'px';
});
</script>
</body>
</html>
</html>