Formulaire : tentative JS de poster une réponse à la suite d'un sujet plutôt que d'en créer un nouveau

[Kaehlyth]

Rappel du premier message :

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir,

j'ai créé une page HTML à part qui fonctionne parfaitement bien.
Ce formulaire permet de créer une page de personnage, avec des données et des calculs automatiques.

Cela créé une nouvelle réponse, boom boom tout est parfait.

Mais lorsqu'on veut mettre à jour, le code HTML se déformant, ce qui est normal, j'ai pensé à l'idée de re-soumettre un nouveau formulaire A LA SUITE du sujet déjà créé , afin de voir l'évolution et que ça ne créé pas des tonnes de sujets...  :

> (lien caché)

Soucis : HTML fonctionnant. JS dynamique des joueurs fonctionnant... post impossible. En effet lorsqu'on change dynamiquement si necessaire "newpost" par "reply"... ça ne fonctionne pas.

Voici pour test deux sujets (vous n'avez pas accès en visiteurs )
> https://albastrya.bbactif.com/t123-feuille-de-elora-chante-brume
> https://albastrya.bbactif.com/t149-fiche-de-perso-manon

J'ai soutiré les : t123 et t149, sans succès...

Code:

   <div class="form">
        <form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
            <input type="hidden" name="lt" value="0" />
            <input type="hidden" name="mode" value="newtopic" /> <!-- Ce champ sera mis à jour en "reply" si nécessaire -->
            <input type="hidden" name="topictype" value="0" />
            <input type="hidden" name="message" value="" />
            <input type="hidden" name="f" value="18" />
            <input type="hidden" name="subject" id="titre" value="" />
            <input type="hidden" name="t" id="threadId" value="" /> <!-- ID du sujet à répondre -->


            <div id="characterForm">
                <!-- Liste déroulante pour choisir un personnage -->
                <div class="form-group">
                    <label for="characterSelect">Choisissez un personnage :</label>
                    <select id="characterSelect" name="character" onchange="handleSelectionChange(this)">
                        <option value="" selected>Sélectionnez votre joueur</option>
                        <!-- Les options seront ajoutées dynamiquement par JavaScript -->
                    </select>
                </div>
            </div>

LE JS :

Code:

       // Exemple de données simulées
        const personnages = [
            { id: '149', nom: 'Personnage 1', sujetId: '1001' },
            { id: '150', nom: 'Personnage 2', sujetId: '1002' },
            { id: '151', nom: 'Personnage 3', sujetId: '1003' }
        ];

        // Fonction pour peupler la liste déroulante avec les personnages
        function populateCharacterSelect() {
            const select = document.getElementById('characterSelect');
            select.innerHTML = ''; // Vider les options existantes
            personnages.forEach(personnage => {
                const option = document.createElement('option');
                option.value = personnage.id;
                option.textContent = personnage.nom;
                select.appendChild(option);
            });
        }

        // Fonction appelée lors du changement de sélection du personnage
        function handleSelectionChange(selectElement) {
            const characterId = selectElement.value;
            const personnage = personnages.find(p => p.id === characterId);

            if (personnage) {
                document.getElementById('threadId').value = personnage.sujetId;
                document.getElementById('titre').value = ""; // Définir le titre si nécessaire
                document.querySelector('input[name="mode"]').value = "reply"; // Changer le mode à "reply"
                console.log("Mode changé en reply et threadId mis à jour :", personnage.sujetId);
            } else {
                document.getElementById('threadId').value = "";
                document.getElementById('titre').value = "";
                document.querySelector('input[name="mode"]').value = "newtopic"; // Revenir au mode "newtopic"
                console.log("Mode changé en newtopic");
            }
        }
  
          // Initialiser la liste des personnages lorsque le document est prêt
        document.addEventListener('DOMContentLoaded', populateCharacterSelect);

Je voudrais donc savoir pourquoi dans un formulaire, lorsqu'on change le mode de "post", cela créé "Mode de réponse non spécifié" alors qu'indirectement, si, j'ai juste demandé de ne pas créer de nouveaux sujets mais de réponse à un sujet spécifique...  


Merci de votre aide !

[Scoubifitz]

J'ai un peu retravaillé et habillé le tableau ...

Code:

<style>.msotablegrid {margin:0 auto;border-collapse: separate;border-spacing:5px 10px;width:660px; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat;}.msotablegrid td{background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover;border: 2px solid rgb(237, 125, 49); padding: 0 7px;height: 30px; border-radius: 5px;}.msotablegrid .chiffres{color:#000000;background-image:none!important;background-color:#ffffff;width: 50px;}.msotablegrid div[align="center"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#ed7d31;margin:2px 0;}.msopercenttable{margin: 0 auto;}.MsoNormalTable td{width:76px}.msospectitle div[align="left"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#795548;margin:-10px 0 5px; padding:5px 3px;}.msotablegrid .msocomm{background-image:none!important;background-color:#423030;}</style>
[table class="msotablegrid"][tr][td style="width: 220px;" rowspan="3" valign="top" class="msospectitle"][left]Aspect psychologique et moral[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]71%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](A quoi vous pensez)[/size][/i][/center][/td][td style="width: 110px;" colspan="2"][center]Caractère[/center][/td][td class="chiffres"]26[/td][td style="width: 240px;" rowspan="3" valign="top"][/td][/tr]
[tr][td colspan="2"][center]Émotions[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td colspan="2"][center]Valeurs[/center][/td][td class="chiffres"]42[/td][/tr]
[tr][td rowspan="3" valign="top" class="msospectitle"][left]Aspect physique[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]22%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](A quoi vous ressemblez)[/size][/i][/center][/td][td colspan="2"][center]Puissance[/center][/td][td class="chiffres"]19[/td][td rowspan="3" valign="top"][/td][/tr]
[tr][td colspan="2"][center]Adresse[/center][/td][td class="chiffres"]0[/td][/tr]
[tr][td colspan="2"][center]Sens[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td rowspan="3" valign="top" class="msospectitle"][left]Aspect identitaire[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]15%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](D’où vous venez)[/size][/i][/center][/td][td colspan="2"][center]Statut familial[/center][/td][td class="chiffres"]11[/td][td rowspan="3" valign="top"][/td][/tr]
[tr][td colspan="2"][center]Revenus[/center][/td][td class="chiffres"]4[/td][/tr]
[tr][td colspan="2"][center]Possessions[/center][/td][td class="chiffres"]0[/td][/tr]
[tr][td rowspan="3" valign="top" class="msospectitle"][left]Aspect social et culturel[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]26%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](Comment vous présentez)[/size][/i][/center][/td][td colspan="2"][center]L’aisance[/center][/td][td class="chiffres"]19[/td][td rowspan="3" valign="top"][/td][/tr]
[tr][td colspan="2"][center]Empathie[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td colspan="2"][center]Culture[/center][/td][td class="chiffres"]4[/td][/tr]
[tr][td colspan="5" valign="top" class="msospectitle msocomm"][left]Commentaires :[/left]
[left]-Détendu : 45% vide, 5% ether, 50% feu
-Curieux : 29% feu, 29% absolu, 29% ether, 13% vide
-Mystique : 69% absolu, 11% eau, 10% glace, 10% air

Vide : (45+13)/3 :19
Ether : (5+29)/3:11
Feu : (50+29)/3:26
Absolu :(29+29+69)/3:42
eau : 11/3:4
Glace : 10/3:3
air : 10/3:3[/left]
[/td][/tr]
[tr][td colspan="5" valign="top" class="msospectitle msocomm"][left][size=13]Spécialités autres & secret(s) :[/size][/left]



[/td][/tr][/table]

la case "commentaires" ne serait donc pas préremplie ? mais remplie par le membre ?

[Kaehlyth]

Exactement, comme actuellement dans mon code, sur la page de formulaire, c'est le membre qui remplit la partie commentaire et celle-ci est appelée dans la div correspondante.

Je pense que vous ne devez pas vous en vouloir !
Le bbcode a des limites et je suis déjà très heureuse que vous releviez le défi.

Les cases à droite, qui servent à mettre les "compétences" et "spécialisations" sont remplies normalement à la main par le joueur.
J'ai trouvé complexe en HTML + CSS dans le formulaire de base de faire remplir cette case et l'appeler ensuite.

Comme dit, hélas, je suis novice et je m'aide d'outils pour arriver à mes fins...

---

EDIT :

J'adore votre tableau, il est magnifique !!!!

C'est précisément ce que j'avais en tête au tout début et que je n'arrivais pas à faire !
Il y aura des choses à peaufiner bien sûr (le textes en ombre noir sur case blanche), mais je ne me permettrais sûrement pas de les demander avant d'arriver à faire ça en formulaire.  

---

Simplement, lorsque je suis en mode source, mon texte est noir... Comment faire pour le passer en blanc ?

J'ai bien tenté ce code qui ne fonctionne pas...

Code:

1- $(function(){$(function(){$(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#fff!important;}</style>")})});

1- bis par Chatigre : $(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:red}");
  });
});

2- .sceditor-container iframe, .sceditor-container textarea {background:url(https://i.servimg.com/u/f44/20/41/07/60/fondme14.png)!important;
margin: 0 !important; width: 100% !important; box-sizing: border-box !important; padding: 5px !important; height:200px !important;color: #FFFFFF!important;}

Trop contente  !

[Scoubifitz]

euh.... le style que j'ai mis en début de code n'a pas l'air de fonctionner ...
Pouvez-vous copier le contenu entre les balises style (sans les balises) , et le coller dans la feuille de style du forum ?

[Kaehlyth]

 euh.... le style que j'ai mis en début de code n'a pas l'air de fonctionner ...
Pouvez-vous copier le contenu entre les balises style (sans les balises) , et le coller dans la feuille de style du forum ?

Il s'agit du mode source : wysiwyg

Lorsque je veux faire comme si j'étais un membre qui voulait éditer mon tableau, j'ai en effet votre code "CSS" en haut" et le code tableau qui s'affiche visuellement.

Je pensais que c'était normal ?

En tout cas une fois posté, votre code marche :
(Et même avec le style dans la feuille de CSS du forum, même rendu)

[Scoubifitz]

oups! je travaille uniquement en mode source , pas en mode WYSIWYG , mais une fois le style dans le CSS du forum , il faudrait voir s'il s'applique au WYSIWYG .

[Kaehlyth]

En fait je me met toujours en mode WYSIWYG parce que c'est là qu'on peut modifier "visuellement avec simplicité" les chiffres et les données.

En ayant mis le CSS dans la feuille de style, PENDANT le mode WYSIWYG, cela n'affecte pas...
De toute manière mon mode WYSIWYG est bugué tout en noir malgré les CSS et JS pour aider.

[Scoubifitz]

une autre image de fond plus claire pour l'éditeur de texte ?

[Kaehlyth]

une autre image de fond plus claire pour l'éditeur de texte ?

Seul le mode WYSIWYG en quickreply reste noir


(et le code en visuel aussi reste noir malgré le code de Chattigre) :

[Scoubifitz]

Comme je ne savais quoi faire des données des capacités et des statistiques que vous récoltez , j'ai rajouté 2 parties au tableau .

je vous donne le code du formulaire :

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formulaire de Création de Fiche de Personnage</title>
<style> /* Style pour le formulaire */ body {font-family: Caudex;text-align: center;color: #fbd6c0;display: flex;justify-content: center;align-items: center;min-width: 97vw;background: linear-gradient(to left, rgb(127 167 134 / 11%), rgb(163 78 92 / 20%)), url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png);} .custom-background {width: 96em; margin: 0 auto; padding: 20px;background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png); background-size: cover;background-position: center;background-repeat: no-repeat; border-radius: 0px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: relative;overflow: hidden;display: flex;flex-direction: column;justify-content: flex-end;} .container {display: flex;gap: 10px;flex-wrap: nowrap;z-index: 1;} .aspect {background-color: #fff;border: 1.5px solid #ED7D31;border-radius: 5px;padding: 10px;width: 190px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);} .aspect-header {background-color: #ED7D31;color: #fff;font-weight: bold;padding: 10px;text-align: center;border-radius: 3px;margin-bottom: 10px;} .aspect-content {display: flex;flex-direction: column;} .sub-category {display: flex;align-items: center;margin-bottom: 10px;} .category-name {font-weight: bold;width: 120px;color: #ab583a;} input[type="text"] {width: 60px;margin-left: 10px;border: 1px solid #ED7D31;padding: 5px;box-sizing: border-box;text-align: center;font-size: 1em;background-color: #fff;} input[type="text"]:focus {border-color: #ED7D31;outline: none;} .large-box {background-color: #fff;border: 1.5px solid #ED7D31;border-radius: 5px;padding: 10px;width: calc(100% - 40px);box-shadow: 0 2px 5px rgba(0,0,0,0.1);margin-top: 20px;} .large-box-header {background-color: #795548;color: #fff;font-weight: bold;padding: 10px;text-align: center;border-radius: 3px;margin-bottom: 10px;} .large-box-content {display: flex;flex-direction: column;gap: 10px;} .large-box-content textarea {width: 100%;height: 100px;border: 1px solid #ED7D31;padding: 10px;box-sizing: border-box;font-size: 1em;border-radius: 5px;resize: vertical;} .form {margin: 10px auto;max-width: 87%;z-index: 1;} center {display: block;text-align: center;margin-top: 20px;} #errormsg {color: red;} .form-group {display: flex;align-items: center;margin-bottom: 10px;width: 37.2em;} .form-group label {flex: 1 0 0px;font-weight: bold;text-align: left;margin-right: 25px;} .form-group input[type="text"] {flex: 1;padding: 5px;border: 1px solid #ED7D31;border-radius: 3px;margin-left: -3em;} .submit-btn {background-color: #ED7D31;color: #fff;border: none;padding: 10px 20px;font-size: 1em;font-weight: bold;border-radius: 5px;cursor: pointer;box-shadow: 0 2px 5px rgba(0,0,0,0.1);transition: background-color 0.3s ease;} .submit-btn:hover {background-color: #db6c27;} .responsive-image {max-width: 650px;height: auto;} .video-preview iframe {width: 79%;margin-left: 7em;height: 60px;} .content {display: none;} .show-content {display: flex;} #characterForm {margin: 10px auto;width: 30.4em;padding: 20px;background-color: #f9f9f9;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border: 1px solid #ED7D31;} #characterForm .form-group {display: flex;align-items: center;margin-bottom: 10px;margin-left: -7.4em;} #characterForm .form-group label {flex: 0 1 150px;font-weight: bold;text-align: left;margin-right: 25px;color: #ab583a;} #characterForm .form-group select {flex: 1;padding: 5px;border: 1px solid #ED7D31;border-radius: 3px;width: 100%;appearance: none;background-color: #fff;color: #333;font-size: 16px;} .background-g {z-index: 3;position: absolute;left: -0.4em;top: 1em;clip-path: inset(0 0 0 0);} .background-d {z-index: 3;position: absolute;right: -0.7em;clip-path: inset(0 0 0 0);top: 1em;} .background-h {z-index;position: absolute;top: 0.2em;right: -1.7em;clip-path: inset(0 0 84% 4.2%);} .background-b {z-index: 1;position: absolute;bottom: -3.9em;right: 1em;clip-path: inset(0 0 0 24.8%);z-index: 3;} .background-hh {z-index;position: absolute;top: 0.2em;left: -2.7em;clip-path: inset(0 0 84% 4.2%);} .background-bb {z-index: 1;position: absolute;bottom: -3.9em;left: 4em;width: 54em;clip-path: inset(0 0 0 0);z-index: 3;} .sparkle {position: absolute;z-index:2;width: 0.2em;height: 0.5em;border-radius: 50%;pointer-events: none;opacity: 0.6;transform: translateY(100%);animation: sparkle-animation 1.5s ease-in-out infinite;background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);} .base-theme .sparkle {background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);z-index:2;} #qeel {position: absolute;top: 0;left: 0;width: 100%;z-index: 0;opacity: 0.5;} .sparkle {position: absolute;z-index:2;width: 0.2em;height: 0.5em;border-radius: 50%;pointer-events: none;opacity: 0.6;transform: translateY(100%);animation: sparkle-animation 1.5s ease-in-out infinite;background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent); /* Orange */} .base-theme .sparkle {background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);z-index:2; /* Orange */} /* Variations pour les positions et les délais d'animation */ .sparkle1 { left: 54%; bottom: 6.6em; animation-delay: 1.9s; } .sparkle2 { left: 30%; bottom: 6.6em; animation-delay: 0.3s; } .sparkle3 { left: 50%; bottom: 6.6em; animation-delay: 0.5s; } .sparkle4 { left: 70%; bottom: 6.6m; animation-delay: 0.9s; } .sparkle5 { left: 90%; bottom: 0.5em; animation-delay: 1.2s; } .sparkle6 { right: 24%;bottom: 6.6em; animation-delay: 0.2s; } .sparkle7 { left: 42%; bottom: 6.6em; animation-delay: 0.4s; } .sparkle8 { left: 35%; bottom: 6.6em; animation-delay: 1.4s; } .sparkle9 { left: 62%; bottom: 6.6em; animation-delay: 0.6s; } .sparkle10 { left: 81%; bottom: 2em; animation-delay: 1.9s; } /* Animation des éclats */ @keyframes sparkle-animation { 0% {transform: translateY(100%) scale(0.5);opacity: 0.6;} 100% {transform: translateY(-100%) scale(1);opacity: 0;}} </style>
</head>
<body><div class="custom-background">
   <img src="https://i.servimg.com/u/f55/16/14/86/50/colonn18.png" class="background-g"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-h"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-hh"/>
   <img src="https://i.servimg.com/u/f55/16/14/86/50/colonn17.png" class="background-d"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-b"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-bb"/>
   <img src="https://i.servimg.com/u/f44/20/41/07/60/qeel1310.png" class="qeel" id="qeel"/>
   <div class="form">
      <form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
      <input type="hidden" name="mode" value="reply" />
<input type="hidden" name="topictype" value="0" checked="checked"/> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="t" value="" />
         <!-- ID du sujet à répondre -->
         <!-- Champ pour entrer le titre du sujet -->
         <div id="characterForm">
            <div class="form-group">
               <label for="pseudo"></label>
               <select id="t" name="t">
               <option value="" selected='selected'>Votre pseudo</option>
               <option value="123">Chante brume</option>
               <option value="149">Manon</option>
               </select>
            </div>
         </div>
         <!-- Champ pour entrer un lien d'image -->
         <div id="characterForm">
            <div class="form-group">
               <label for="imageURL"></label>
               <input type="text" name="imageURL" id="imageURL" placeholder="Entrez l'URL de l'image" oninput="updateImagePreview()"/>
            </div>
         </div>
         <!-- Champ pour entrer un lien vidéo -->
         <div id="characterForm">
            <div class="form-group">
               <label for="videoURL"></label>
               <input type="text" name="videoURL" id="videoURL" placeholder="Entrez l'URL de la vidéo" oninput="updateVideoPreview()"/>
            </div>
         </div>
         <div class="video-preview" id="videoPreview">
         </div>
         <div class="image-preview" id="imagePreview" style="text-align-last: center;">
         </div>
         <div class="container">
            <!-- Chaque aspect avec ses champs -->
            <div class="aspect">
               <div class="aspect-header">
                  Aspect psychologique et moral
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Caractère
                     </div>
                     <input type="text" name="psychologique_caractere" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Émotions
                     </div>
                     <input type="text" name="psychologique_emotions" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Valeurs
                     </div>
                     <input type="text" name="psychologique_valeurs" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_psychologique" readonly/>
                  </div>
               </div>
            </div>
            <div class="aspect">
               <div class="aspect-header">
                  Aspect physique
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Puissance
                     </div>
                     <input type="text" name="physique_puissance" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Adresse
                     </div>
                     <input type="text" name="physique_adresse" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Sens
                     </div>
                     <input type="text" name="physique_sens" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_physique" readonly/>
                  </div>
               </div>
            </div>
            <div class="aspect">
               <div class="aspect-header">
                  Aspect identitaire
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Statut familial
                     </div>
                     <input type="text" name="identitaire_statut_familial" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Revenus
                     </div>
                     <input type="text" name="identitaire_revenus" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Possessions
                     </div>
                     <input type="text" name="identitaire_possessions" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_identitaire" readonly/>
                  </div>
               </div>
            </div>
            <div class="aspect">
               <div class="aspect-header">
                  Aspect social et culturel
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Aisance
                     </div>
                     <input type="text" name="social_statut_social" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Empathie
                     </div>
                     <input type="text" name="social_education" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Culture
                     </div>
                     <input type="text" name="social_ethnie" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_social" readonly/>
                  </div>
               </div>
            </div>
            <div class="container">
               <!-- Section des Capacités -->
               <div class="aspect">
                  <div class="aspect-header">
                     Capacités
                  </div>
                  <div class="aspect-content">
                     <div class="sub-category">
                        <div class="category-name">
                           C. combat
                        </div>
                        <input type="text" name="combat" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. Magie
                        </div>
                        <input type="text" name="magie" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. d'Exploration
                        </div>
                        <input type="text" name="exploration" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. de Monte
                        </div>
                        <input type="text" name="monte" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. de Craft
                        </div>
                        <input type="text" name="craft" placeholder="0"/>
                     </div>
                  </div>
               </div>
               <!-- Section des Statistiques -->
               <div class="aspect">
                  <div class="aspect-header">
                     Statistiques
                  </div>
                  <div class="aspect-content">
                     <div class="sub-category">
                        <div class="category-name">
                           Point de vie
                        </div>
                        <input type="text" name="point_de_vie" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           Initiative
                        </div>
                        <input type="text" name="initiative" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           Point d'action par tour
                        </div>
                        <input type="text" name="point_action" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           Défense passive
                        </div>
                        <input type="text" name="defense_passive" placeholder="0"/>
                     </div>
                  </div>
               </div>
            </div>
            <div style="width: 100%; text-align: center;">
               <span style="color: red; display: inline-block; margin: auto;" id="errormsg"></span>
            </div>
         </div>
         <div class="large-box">
            <div class="large-box-header">
               Spécialités autres & secret(s) :
            </div>
            <div class="large-box-content">
               <textarea name="specialites_autres_secrets" placeholder="Entrez ici vos spécialités autres et secrets..."></textarea>
            </div>
         </div>
         <div class="large-box">
            <div class="large-box-header">
               Background et Commentaires
            </div>
            <div class="large-box-content">
               <textarea name="commentaires" placeholder="Entrez ici vos commentaires... avec votre BG"></textarea>
            </div>
         </div>
         <div class="sparkle sparkle1">
         </div>
         <div class="sparkle sparkle2">
         </div>
         <div class="sparkle sparkle3">
         </div>
         <div class="sparkle sparkle4">
         </div>
         <div class="sparkle sparkle5">
         </div>
         <div class="sparkle sparkle6">
         </div>
         <div class="sparkle sparkle7">
         </div>
         <div class="sparkle sparkle8">
         </div>
         <div class="sparkle sparkle9">
         </div>
         <div class="sparkle sparkle10">
         </div>
         <center>
         <br/><label><span style="color:brown;font-family: sans-serif;text-shadow: 0 0 2px #340e6a;">Le titre du sujet sera créé automatiquement !</span></label><br/><br/>
         <img src="https://zupimages.net/up/24/28/7oin.png"/><br/><br/>
         <input type="submit" name="post" value="Créer !" class="submit-btn"/><br/>
         </center>
      </form>
   </div>
</div>
</body>
</html>
<script>
// Calcul des totaux pour chaque aspect
function calculateTotals() {
const aspects = ['psychologique', 'physique', 'identitaire', 'social'];
aspects.forEach(aspect => {
let total = 0;
const inputs = document.querySelectorAll(`input[name^="${aspect}"]`);
inputs.forEach(input => {
total += parseFloat(input.value) || 0;
});
document.getElementById(`total_${aspect}`).value = total;
});
}
// Mise à jour de l'aperçu de l'image
function updateImagePreview() {
const url = document.getElementById('imageURL').value;
const imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = '';
if (url) {
const img = document.createElement('img');
img.src = url;
img.onload = () => {
imagePreview.appendChild(img);
};
img.onerror = () => {
imagePreview.innerHTML = 'Erreur de chargement de l\'image.';
};
}
}
// Prévisualisation de la vidéo YouTube
function updateVideoPreview() {
const url = document.getElementById('videoURL').value;
const videoPreview = document.getElementById('videoPreview');
const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const match = url.match(youtubeRegex);
if (match) {
const videoId = match[1];
videoPreview.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>`;
} else {
videoPreview.innerHTML = 'Veuillez entrer un lien YouTube valide.';
}
}
// Conversion des sauts de ligne en balises <br />
function nl2br(str) {
return str.replace(/\n/g, '<br />');
}
// Validation et préparation du message pour l'envoi
function envoiMessage(form) {
// Mise à jour des aperçus avant la soumission
updateImagePreview();
updateVideoPreview();
// Validation des champs requis
const requiredFields = [
'psychologique_caractere', 'psychologique_emotions', 'psychologique_valeurs',
'physique_puissance', 'physique_adresse', 'physique_sens',
'identitaire_statut_familial', 'identitaire_revenus', 'identitaire_possessions',
'social_statut_social', 'social_education', 'social_ethnie',
'commentaires', 'specialites_autres_secrets'
];
for (let field of requiredFields) {
if (!form[field].value.trim()) {
document.getElementById("errormsg").innerText = `Vous devez remplir le champ ${field.replace(/_/g, ' ').toUpperCase()}.`;
return false;
}
}
// Génération du message
const imageUrl = form.imageURL.value.trim();
    var element = document.getElementById('t');
    var pseudo = element.options[ element.selectedIndex ].text;
const videoUrl = form.videoURL.value.trim();
function toggleContent(id) {
var contentDiv = document.getElementById(id).querySelector('.content');
if (contentDiv.style.display === 'none' || contentDiv.style.display === '') {
contentDiv.style.display = 'flex';
} else {
contentDiv.style.display = 'none';
}
}
let txt_message = `
${imageUrl ? `<div style="text-align: center; margin-left: 15em; border-top-left-radius: 19px; border-top-right-radius: 19px; max-width: 61%;" class="fond_fiche_predef"><div class="titre_predef">${pseudo ? `${pseudo}` : ''}</div>
${videoUrl ? ` <iframe width="560" height="315" src="https://www.youtube.com/embed/${videoUrl.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)[1]}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
` : ''}
<img class="responsive-image" src="${imageUrl}"/>
</div>
` : ''}[table class="msotablegrid"][tr][td style="width: 220px;" rowspan="3" valign="top" class="msospectitle"][left]Aspect psychologique et moral[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_psychologique').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](A quoi vous pensez)[/size][/i][/center][/td]\n`
+`[td style="width: 110px;"][center]Caractère[/center][/td]\n`
+`[td class="chiffres"]${form.psychologique_caractere.value}[/td]\n`
+`[td style="width: 240px;" rowspan="3" valign="top"][/td][/tr]\n`
+`[tr][td][center]Émotions[/center][/td][td class="chiffres"]${form.psychologique_emotions.value}[/td][/tr]\n`
+`[tr][td][center]Valeurs[/center][/td][td class="chiffres"]${form.psychologique_valeurs.value}[/td][/tr]\n`
+`[tr][td rowspan="3" valign="top" class="msospectitle"][left]Aspect physique[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_physique').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](A quoi vous ressemblez)[/size][/i][/center][/td][td][center]Puissance[/center][/td][td class="chiffres"]${form.physique_puissance.value}[/td][td rowspan="3" valign="top"][/td][/tr]\n`
+`[tr][td][center]Adresse[/center][/td][td class="chiffres"]${form.physique_adresse.value}[/td][/tr]\n`
+`[tr][td][center]Sens[/center][/td][td class="chiffres"]${form.physique_sens.value}[/td][/tr]\n`
+`[tr][td rowspan="3" valign="top" class="msospectitle"][left]Aspect identitaire[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_identitaire').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](D’où vous venez)[/size][/i][/center][/td][td][center]Statut familial[/center][/td][td class="chiffres"]${form.identitaire_statut_familial.value}[/td][td rowspan="3" valign="top"][/td][/tr]\n`
+`[tr][td][center]Revenus[/center][/td][td class="chiffres"]${form.identitaire_revenus.value}[/td][/tr]\n`
+`[tr][td][center]Possessions[/center][/td][td class="chiffres"]${form.identitaire_possessions.value}[/td][/tr]\n`
+`[tr][td rowspan="3" valign="top" class="msospectitle"][left]Aspect social et culturel[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_social').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](Comment vous présentez)[/size][/i][/center][/td][td][center]L’aisance[/center][/td][td class="chiffres"]${form.social_statut_social.value}[/td][td rowspan="3" valign="top"][/td][/tr]\n`
+`[tr][td][center]Empathie[/center][/td][td class="chiffres"]${form.social_education.value}[/td][/tr]\n`
+`[tr][td][center]Culture[/center][/td][td class="chiffres"]${form.social_ethnie.value}[/td][/tr]\n`
+`[tr][td rowspan="5" valign="top" class="msospectitle"][left]Capacités[/left]\n\n\n`
+`[/td][td][center]combat[/center][/td][td class="chiffres"]${form.combat.value}[/td][td rowspan="5" valign="top"][/td][/tr]\n`
+`[tr][td][center]Magie[/center][/td][td class="chiffres"]${form.magie.value}[/td][/tr]\n`
+`[tr][td][center]Exploration[/center][/td][td class="chiffres"]${form.exploration.value}[/td][/tr]\n`
+`[tr][td][center]Monte[/center][/td][td class="chiffres"]${form.monte.value}[/td][/tr]\n`
+`[tr][td][center]Craft[/center][/td][td class="chiffres"]${form.craft.value}[/td][/tr]\n`
+`[tr][td rowspan="4" valign="top" class="msospectitle"][left]Statistiques[/left]\n\n\n`
+`[/td][td][center]Point de vie[/center][/td][td class="chiffres"]${form.point_de_vie.value}[/td][td rowspan="4" valign="top"][/td][/tr]\n`
+`[tr][td][center]Initiative[/center][/td][td class="chiffres"]${form.initiative.value}[/td][/tr]\n`
+`[tr][td][center]Point d'Action[/center][/td][td class="chiffres"]${form.point_action.value}[/td][/tr]\n`
+`[tr][td][center]Défense Passive[/center][/td][td class="chiffres"]${form.defense_passive.value}[/td][/tr]\n`
+`[tr][td colspan="4" valign="top" class="msospectitle msocomm"][left]Commentaires :[/left]\n`
+`[left]${nl2br(form.specialites_autres_secrets.value)}\n`
+`[/left][/td][/tr]\n`
+`[tr][td colspan="4" valign="top" class="msospectitle msocomm"][left][size=13]Spécialités autres & secret(s) :[/size][/left]\n`
+`[left]${nl2br(form.commentaires.value)}\n`
+`[/left][/td][/tr][/table]`;
form.message.value = txt_message;
form.subject.value = "Fiche de personnage " + pseudo;
return true;
}
</script>
</body>
</html>

Pour l'éditeur, rempacer ou éclaircir le fond (l'image avec les dés)

écriture blanche sur fond gris

écriture noire sur fond gris

[Kaehlyth]

Pour l'éditeur ça m'embête de changer une image quand on peut changer normalement la couleur d'écriture... Bizarre.

Comme je ne savais quoi faire des données des capacités et des statistiques que vous récoltez , j'ai rajouté 2 parties au tableau .

écriture blanche sur fond gris

écriture noire sur fond gris

Navrée, cette version je n'aime pas du tout.
Comme expliqué dans d'autres réponses plus haut, les statistiques sont dans "Commentaires" et les capacités sont dans les fameuses cases à droites. C'est pourquoi ce sont les joueurs qui doivent les rentrer.  

En mode édition source, il est impossible de cliquer sur les cases à droite et donc d'y remplir des choses ?

Des images parleront mieux !

---

EDIT 1 :

Je me suis permise de mettre les doigts dans le cambuis et de disposer selon votre logique. Je n'arrive pas à faire des espaces entre la section des commentaires, et la dernière des Aspects 






Et j'ai tenté une seconde itération avec les commentaires quand même en bas ... mais toujours pas l'espacement voulu pour bien détacher les catégories et avoir une taille de "case" similaire".

[Scoubifitz]

pour la couleur blanche dans l'éditeur , rajouter "textarea" dans le script , çà se tente ?

Code:

$(function(){$(function(){$(".sceditor-container iframe").contents().find("head").append("<style>body,html,textarea,code:before,p,table{color:#fff!important;}</style>")})});

question: quelle est la largeur minimale d'un message dans votre forum (pour connaitre la largeur maxi possible du tableau)

Pour l'écartement des cases du tableau , c'est dans le CSS que ça se passe , d'ailleurs maintenant qu'il est dans une feuille de style , autant le mettre proprement :

Code:

.msotablegrid {
   margin:0 auto;
   border-collapse:separate;
   border-spacing:5px 10px;
   width:660px;
   background-image:url(https://zupimages.net/up/24/29/dhid.jpg);
   background-repeat:repeat;
}
.msotablegrid td {
   background:linear-gradient(to left,rgba(184,145,113,0.21),rgba(23,19,45,0.66)),url(https://zupimages.net/up/24/28/g650.png) no-repeat center center;
   background-size:cover;
   border:2px solid rgb(237,125,49);
   padding:0 7px;
   height:30px;
   border-radius:5px;
}
.msotablegrid .chiffres {
   color:#000000;
   background-image:none!important;
   background-color:#ffffff;
   width:50px;
}
.msotablegrid div[align="center"]:first-child {
   border:2px solid rgb(237,125,49);
   border-radius:5px;
   background-color:#ed7d31;
   margin:2px 0;
}
.msopercenttable {
   margin:0 auto;
}
.MsoNormalTable td {
   width:76px
}
.msospectitle div[align="left"]:first-child {
   border:2px solid rgb(237,125,49);
   border-radius:5px;
   background-color:#795548;
   margin:-10px 0 5px;
   padding:5px 3px;
}
.msotablegrid .msocomm {
   background-image:none!important;
   background-color: #423030;
}

Dans cette partie :

Code:

.msotablegrid {
   margin:0 auto;
   border-collapse:separate;
   border-spacing:5px 10px;
   width:660px;
   background-image:url(https://zupimages.net/up/24/29/dhid.jpg);
   background-repeat:repeat;
}

... c'est le border-spacing qui écarte les cases , 5px horizontalement , 10px verticalement, on peut monter à 12px. Attention ! toutes les cases sont concernées .Ne pas oublier qu'il s'agit d'un tableau .

Dans cette partie :

Code:

.msospectitle div[align="left"]:first-child {
   border:2px solid rgb(237,125,49);
   border-radius:5px;
   background-color:#795548;
   margin:-10px 0 5px;
   padding:5px 3px;
}

le premier [left ][/ left] d'une cellule de tableau sera décalé vers le haut par une marge négative , on peut passer de -10 à -7 pour atténuer le dépassement.

Et j'ai tenté une seconde itération avec les commentaires quand même en bas ... mais toujours pas l'espacement voulu pour bien détacher les catégories et avoir une taille de "case" similaire".

Un tableau à des colonnes d'une certaine largeur fixée au départ , d'où ma question de départ pour créer plus de colonnes et répartir le contenu grace au colspan et rowspan .( voir un ancien sujet )

[Kaehlyth]

Je comprends parfaitement pour le tableau. Pour l'heure, j'admets que vous avez fait un excellent travail .
La seule chose est de savoir si la partie à droite qui est "sans rien", puisse automatiquement être remplie si le joueur rempli dans le formulaire la partie concernée (que je devrais rajouter) ?

Voici la taille de mon forum :

Code:

.bodylinewidth { width: 74em (ou 1200px);}

Concernant le JS, ça ne veut pas du tout ... je vais surement ouvrir un sujet à côté.

[Scoubifitz]

Concernant le JS, ça ne veut pas du tout ... je vais surement ouvrir un sujet à côté.

un autre tableau , cette fois-ci avec l'astuce des cellules vides qui ne s'afficheront pas. qui dit nouveau tableau , dit nouveau style :

Code:

<style>.msotablegrid1 {margin:0 auto;border-collapse: separate;border-spacing:5px 10px; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; empty-cells: hide;}.msotablegrid1 td{background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover;border: 2px solid rgb(237, 125, 49); padding: 0 5px;height: 30px;width:55px; border-radius: 5px;}.msotablegrid1 .chiffres{background-image:none!important;background-color:#423030;width: 50px;}.msotablegrid1 div[align="center"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#ed7d31;margin:2px 0;}.msopercenttable{margin: 0 auto;}.msospectitle div[align="left"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#795548;margin:-12px 0 5px; padding:5px 3px;}.msotablegrid1 .msocomm{background-image:none!important;background-color:#423030;}</style>

[table class="msotablegrid1"][tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect psychologique et moral[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](A quoi vous pensez)[/size][/i][/center]
[/td][td colspan="2"][center]Caractère[/center][/td][td class="chiffres"]1[/td][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Capacités :[/left]
5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td][/tr]
[tr][td colspan="2"][center]Émotions[/center][/td][td class="chiffres"]2[/td][/tr]
[tr][td colspan="2"][center]Valeurs[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect physique[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](A quoi vous ressemblez)[/size][/i][/center]
[/td][td colspan="2"][center]Puissance[/center][/td][td class="chiffres"]1[/td][td colspan="3" rowspan="3" valign="top"]5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td][/tr]
[tr][td colspan="2"][center]Adresse[/center][/td][td class="chiffres"]2[/td][/tr]
[tr][td colspan="2"][center]Sens[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect identitaire[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](D’où vous venez)[/size][/i][/center]
[/td][td colspan="2"][center]Statut familial[/center][/td][td class="chiffres"]1[/td][td colspan="3" rowspan="3" valign="top"]5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td][/tr]
[tr][td colspan="2"][center]Revenus[/center][/td][td class="chiffres"]2[/td][/tr]
[tr][td colspan="2"][center]Possessions[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect social et culturel[/left]

[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td][/tr][/table]
[center][i][size=13](Comment vous présentez)[/size][/i][/center]
[/td][td colspan="2"][center]L’aisance[/center][/td][td class="chiffres"]1[/td][td colspan="3" rowspan="3" valign="top"]5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td][/tr]
[tr][td colspan="2"][center]Empathie[/center][/td][td class="chiffres"]2[/td][/tr]
[tr][td colspan="2"][center]Culture[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td][/td][td colspan="2"][center]combat[/center][/td][td class="chiffres"]1[/td][td][/td][td colspan="2"][center]Point de vie[/center][/td][td class="chiffres"]1[/td][/tr]
[tr][td][/td][td colspan="2"][center]Magie[/center][/td][td class="chiffres"]2[/td][td][/td][td colspan="2"][center]Initiative[/center][/td][td class="chiffres"]2[/td][/tr]
[tr][td][/td][td colspan="2"][center]Exploration[/center][/td][td class="chiffres"]3[/td][td][/td][td colspan="2"][center]Point d'Action[/center][/td][td class="chiffres"]3[/td][/tr]
[tr][td][/td][td colspan="2"][center]Monte[/center][/td][td class="chiffres"]4[/td][td][/td][td colspan="2"][center]Défense Passive[/center][/td][td class="chiffres"]4[/td][/tr]
[tr][td][/td][td colspan="2"][center]Craft[/center][/td][td class="chiffres"]5[/td][td][/td][td colspan="2"][center]Songe[/center][/td][td class="chiffres"]4[/td][/tr]
[tr][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][/tr]
[tr][td colspan="8" valign="top" class="msospectitle msocomm"][left]Commentaires :[/left]
[left]Cette partie est décalée du haut grace à une ligne de cellules cachées,
et à droite grâce à un colspan inférieur au nombre de cellules (colonnes)
Cette partie se rallongera
au fur et à mesure
du remplissage
[/left][/td][/tr]
[tr][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][/tr]
[tr][td][/td][td colspan="8" valign="top" class="msospectitle msocomm"][left][size=13]Spécialités autres & secret(s) :[/size][/left]
[left]Cette partie est décalée grâce à une cellule cachée à gauche,
et grâce à un colspan inférieur au nombre de cellules (colonnes)
Cette partie se rallongera
au fur et à mesure
du remplissage
[/left][/td][/tr][/table]

[Kaehlyth]

Concernant le JS, ça ne veut pas du tout ... je vais surement ouvrir un sujet à côté.

un autre tableau , cette fois-ci avec l'astuce des cellules vides qui ne s'afficheront pas. qui dit nouveau tableau , dit nouveau style :

Un petit décalage, sinon, j'adhère !  
Et en effet, il n'y aura pas plus que 5 lignes de chaque !

[Scoubifitz]

si c'est bon , on peut mettre le style dans la feuille CSS du forum

Code:

.msotablegrid1 {
   margin:0 auto;
   border-collapse:separate;
   border-spacing:5px 10px;
   background-image:url(https://zupimages.net/up/24/29/dhid.jpg);
   background-repeat:repeat;
   empty-cells:hide;
}
.msotablegrid1 td {
   background:linear-gradient(to left,rgba(184,145,113,0.21),rgba(23,19,45,0.66)),url(https://zupimages.net/up/24/28/g650.png) no-repeat center center;
   background-size:cover;
   border:2px solid rgb(237,125,49);
   padding:0 5px;
   height:30px;
   width:55px;
   border-radius:5px;
}
.msotablegrid1 .chiffres {
   background-image:none!important;
   background-color:#423030;
   width:50px;
}
.msotablegrid1 div[align="center"]:first-child {
   border:2px solid rgb(237,125,49);
   border-radius:5px;
   background-color:#ed7d31;
   margin:2px 0;
}
.msopercenttable {
   margin:0 auto;
}
.msospectitle div[align="left"]:first-child {
   border:2px solid rgb(237,125,49);
   border-radius:5px;
   background-color:#795548;
   margin:-12px 0 5px;
   padding:5px 3px;
}
.msotablegrid1 .msocomm {
   background-image:none!important;
   background-color: #423030;
}

petit test pour vous : augmentez le width de cette partie pour voir jusqu’où on peut élargir le tableau sans déformer le sujet :

Code:

.msotablegrid1 td {
   background:linear-gradient(to left,rgba(184,145,113,0.21),rgba(23,19,45,0.66)),url(https://zupimages.net/up/24/28/g650.png) no-repeat center center;
   background-size:cover;
   border:2px solid rgb(237,125,49);
   padding:0 5px;
   height:30px;
   width:55px;
   border-radius:5px;
}

[Kaehlyth]

La feuille de style ne change rien concernant le dernier TD.

Même aspect que l'image plus haute que je vous ai donné.
Sûrement avec le colspan que vous décrivez ?

[Scoubifitz]

qui dit nouveau tableau , dit nouveau style :

il y a bien un "1" à "msotablegrid1" ? augmentez de 10 en 10 .

édit : 20:39:17

il faut aussi enlever style dans le message !

[Kaehlyth]

qui dit nouveau tableau , dit nouveau style :

il y a bien un "1" à "msotablegrid1" ? augmentez de 10 en 10 .

édit : 20:39:17

il faut aussi enlever style dans le message !

J'ai mis jusqu'à : width: 37em;

ça ne déforme pas le sujet mais au-delà, plus rien ne bouge.

Code:

.msotablegrid1 td {
    background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center;
    background-size: cover;
    border: 2px solid #ed7d31;
    padding: 0 5px;
    height: 30px;
    width: 37em;
    border-radius: 5px;
}

[Scoubifitz]

on peut (enfin) commencer à travailler sur le formulaire à partir de ce tableau ?

La seule chose est de savoir si la partie à droite qui est "sans rien", puisse automatiquement être remplie si le joueur rempli dans le formulaire la partie concernée (que je devrais rajouter) ?

c’est possible par un simple textarea  (à rajouter dans le formulaire) que postulant remplira , ou par une récolte automatique des données (à rajouter dans le formulaire)  que le postulant choisira.

[Kaehlyth]

on peut (enfin) commencer à travailler sur le formulaire à partir de ce tableau ?

La seule chose est de savoir si la partie à droite qui est "sans rien", puisse automatiquement être remplie si le joueur rempli dans le formulaire la partie concernée (que je devrais rajouter) ?

c’est possible par un simple textarea  (à rajouter dans le formulaire) que postulant remplira , ou par une récolte automatique des données (à rajouter dans le formulaire)  que le postulant choisira.

Oui tout à fait.

J'imagine que les espaces concernant les deux catégories du bas étaient faites exprès pour que vous puissiez tester des choses (les colspan) ?

Je suis navrée si je vous prends du temps avec ce tableau.

[Scoubifitz]

les cases "commentaire" et "spécialités" ? oui !
Si vous voulez toute la largeur , augmentez le colspan à 9 des deux cellules,et retirez le [ t d ] [ / t d ] devant la 2e cellule.

Code:


[tr][td colspan="8" valign="top" class="msospectitle msocomm"]
.../...
[tr][td][/td][td colspan="8" valign="top" class="msospectitle msocomm"]


[Kaehlyth]

D'accord je vais faire ça.

Merci beaucoup. C'est parfait comme ça.

[Scoubifitz]

renvoyez moi le code du tableau une fois qu'on n'y touchera plus , c'est à partir de là qu'on travaillera le formulaire.

[Kaehlyth]

Ce sera ainsi. Merci de votre patience.

Code:

[table class="msotablegrid1"]
[tr][td class="msospectitle" colspan="3" rowspan="3" valign="top"][left]Aspect psychologique et moral[/left]


[table class="msopercenttable"]
[tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td]
[/tr]
[/table]
[center][i][size=13](A quoi vous pensez)[/size][/i][/center]
[/td]
[td colspan="2"][center]Caractère[/center]
[/td]
[td class="chiffres"]1[/td]
[td class="msospectitle" colspan="3" rowspan="3" valign="top"][left]Capacités :[/left]
5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td]
[/tr]

[tr][td colspan="2"][center]Émotions[/center]
[/td]
[td class="chiffres"]2[/td]
[/tr]

[tr][td colspan="2"][center]Valeurs[/center]
[/td]
[td class="chiffres"]3[/td]
[/tr]

[tr][td class="msospectitle" colspan="3" rowspan="3" valign="top"][left]Aspect physique[/left]


[table class="msopercenttable"]
[tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td]
[/tr]
[/table]
[center][i][size=13](A quoi vous ressemblez)[/size][/i][/center]
[/td]
[td colspan="2"][center]Puissance[/center]
[/td]
[td class="chiffres"]1[/td]
[td colspan="3" rowspan="3" valign="top"]5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td]
[/tr]

[tr][td colspan="2"][center]Adresse[/center]
[/td]
[td class="chiffres"]2[/td]
[/tr]

[tr][td colspan="2"][center]Sens[/center]
[/td]
[td class="chiffres"]3[/td]
[/tr]

[tr][td class="msospectitle" colspan="3" rowspan="3" valign="top"][left]Aspect identitaire[/left]


[table class="msopercenttable"]
[tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td]
[/tr]
[/table]
[center][i][size=13](D’où vous venez)[/size][/i][/center]
[/td]
[td colspan="2"][center]Statut familial[/center]
[/td]
[td class="chiffres"]1[/td]
[td colspan="3" rowspan="3" valign="top"]5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td]
[/tr]

[tr][td colspan="2"][center]Revenus[/center]
[/td]
[td class="chiffres"]2[/td]
[/tr]

[tr][td colspan="2"][center]Possessions[/center]
[/td]
[td class="chiffres"]3[/td]
[/tr]

[tr][td class="msospectitle" colspan="3" rowspan="3" valign="top"][left]Aspect social et culturel[/left]


[table class="msopercenttable"]
[tr][td class="chiffres"][right][i][size=13]6%[/size][/i][/right]
[/td]
[/tr]
[/table]
[center][i][size=13](Comment vous présentez)[/size][/i][/center]
[/td]
[td colspan="2"][center]L’aisance[/center]
[/td]
[td class="chiffres"]1[/td]
[td colspan="3" rowspan="3" valign="top"]5 lignes maximum
bla bla bla
bla bla bla
bla bla bla
bla bla bla[/td]
[/tr]

[tr][td colspan="2"][center]Empathie[/center]
[/td]
[td class="chiffres"]2[/td]
[/tr]

[tr][td colspan="2"][center]Culture[/center]
[/td]
[td class="chiffres"]3[/td]
[/tr]

[tr][td][/td]
[td colspan="2"][center]combat[/center]
[/td]
[td class="chiffres"]1[/td]
[td][/td]
[td colspan="2"][center]Point de vie[/center]
[/td]
[td class="chiffres"]1[/td]
[/tr]

[tr][td][/td]
[td colspan="2"][center]Magie[/center]
[/td]
[td class="chiffres"]2[/td]
[td][/td]
[td colspan="2"][center]Initiative[/center]
[/td]
[td class="chiffres"]2[/td]
[/tr]

[tr][td][/td]
[td colspan="2"][center]Exploration[/center]
[/td]
[td class="chiffres"]3[/td]
[td][/td]
[td colspan="2"][center]Point d'Action[/center]
[/td]
[td class="chiffres"]3[/td]
[/tr]

[tr][td][/td]
[td colspan="2"][center]Monte[/center]
[/td]
[td class="chiffres"]4[/td]
[td][/td]
[td colspan="2"][center]Défense Passive[/center]
[/td]
[td class="chiffres"]4[/td]
[/tr]

[tr][td][/td]
[td colspan="2"][center]Craft[/center]
[/td]
[td class="chiffres"]5[/td]
[td][/td]
[td colspan="2"][center]Songe[/center]
[/td]
[td class="chiffres"]4[/td]
[/tr]

[tr][td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[/tr]

[tr][td class="msospectitle msocomm" colspan="9" valign="top"][left]Commentaires :[/left]
[left]Cette partie est décalée du haut grace à une ligne de cellules cachées,
et à droite grâce à un colspan inférieur au nombre de cellules (colonnes)
Cette partie se rallongera
au fur et à mesure
du remplissage
[/left]
[/td]
[/tr]

[tr][td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[/tr]

[tr][td class="msospectitle msocomm" colspan="9" valign="top"][left][size=13]Spécialités autres & secret(s) :[/size][/left]
[left]Cette partie est décalée grâce à une cellule cachée à gauche,
et grâce à un colspan inférieur au nombre de cellules (colonnes)
Cette partie se rallongera
au fur et à mesure
du remplissage
[/left]
[/td]
[/tr]
[/table]

[Scoubifitz]

bien . Petite pause jusqu'à demain , si vous le voulez bien.

En attendant , n'oubliez pas de lancer ce sujet :

Concernant le JS, ça ne veut pas du tout ... je vais surement ouvrir un sujet à côté.

[Kaehlyth]

C'est fait ici même : Le vilain texte noir


Bien entendu !
Une belle nuit.

[Scoubifitz]

on y est ... la minute de vérité .

le code du formulaire: j'ai mis quelques valeurs en "value" au lieu de "placeholder" pour ne pas avoir de cellule vide (qui disparaitrait à l'affichage)
je vous laisse découvrir ...

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire de Création de Fiche de Personnage</title>
<style> /* Style pour le formulaire */ body { font-family:Caudex; text-align:center; color:#fbd6c0; display:flex; justify-content:center; align-items:center; min-width:97vw; background:linear-gradient(to left,rgb(127 167 134 / 11%),rgb(163 78 92 / 20%)),url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png); } .custom-background { width:96em; margin:0 auto; padding:20px; background:linear-gradient(to left,rgba(184,145,113,0.21),rgba(23,19,45,0.66)),url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:0px; box-shadow:0 4px 8px rgba(0,0,0,0.2); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; } .container { display:flex; gap:10px; flex-wrap:nowrap; z-index:1; } .aspect { background-color:#fff; border:1.5px solid #ED7D31; border-radius:5px; padding:10px; margin:5px 0; width:230px; box-shadow:0 2px 5px rgba(0,0,0,0.1); } .aspect-header { background-color:#ED7D31; color:#fff; font-weight:bold; padding:10px; text-align:center; border-radius:3px; margin-bottom:10px; } .aspect-content { display:flex; flex-direction:column; } .sub-category { display:flex; align-items:center; margin-bottom:10px; } .category-name { font-weight:bold; width:120px; color:#ab583a; } input[type="text"] { width:60px; margin-left:10px; border:1px solid #ED7D31; padding:5px; box-sizing:border-box; text-align:center; font-size:1em; background-color:#fff; } input[type="text"]:focus { border-color:#ED7D31; outline:none; } .large-box { background-color:#fff; border:1.5px solid #ED7D31; border-radius:5px; padding:10px; width:calc(100% - 40px); box-shadow:0 2px 5px rgba(0,0,0,0.1); margin-top:20px; } .large-box-header { background-color:#795548; color:#fff; font-weight:bold; padding:10px; text-align:center; border-radius:3px; margin-bottom:10px; } .large-box-content { display:flex; flex-direction:column; gap:10px; } .large-box-content textarea { width:100%; height:100px; border:1px solid #ED7D31; padding:10px; box-sizing:border-box; font-size:1em; border-radius:5px; resize:vertical; } .textarea-content textarea { width:180px; height:120px; border:1px solid #ED7D31; padding:10px; box-sizing:border-box; font-size:1em; border-radius:5px; resize:vertical; } .form { margin:10px auto; max-width:87%; z-index:1; } center { display:block; text-align:center; margin-top:20px; } #errormsg { color:red; } .form-group { display:flex; align-items:center; margin-bottom:10px; width:37.2em; } .form-group label { flex:1 0 0px; font-weight:bold; text-align:left; margin-right:25px; } .form-group input[type="text"] { flex:1; padding:5px; border:1px solid #ED7D31; border-radius:3px; margin-left:-3em; } .submit-btn { background-color:#ED7D31; color:#fff; border:none; padding:10px 20px; font-size:1em; font-weight:bold; border-radius:5px; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.1); transition:background-color 0.3s ease; } .submit-btn:hover { background-color:#db6c27; } .responsive-image { max-width:650px; height:auto; } .video-preview iframe { width:79%; margin-left:7em; height:60px; } .content { display:none; } .show-content { display:flex; } #characterForm { margin:10px auto; width:30.4em; padding:20px; background-color:#f9f9f9; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,0.1); border:1px solid #ED7D31; } #characterForm .form-group { display:flex; align-items:center; margin-bottom:10px; margin-left:-7.4em; } #characterForm .form-group label { flex:0 1 150px; font-weight:bold; text-align:left; margin-right:25px; color:#ab583a; } #characterForm .form-group select { flex:1; padding:5px; border:1px solid #ED7D31; border-radius:3px; width:100%; appearance:none; background-color:#fff; color:#333; font-size:16px; } .background-g { z-index:3; position:absolute; left:-0.4em; top:1em; clip-path:inset(0 0 0 0); } .background-d { z-index:3; position:absolute; right:-0.7em; clip-path:inset(0 0 0 0); top:1em; } .background-h { z-index; position:absolute; top:0.2em; right:-1.7em; clip-path:inset(0 0 84% 4.2%); } .background-b { z-index:1; position:absolute; bottom:-3.9em; right:1em; clip-path:inset(0 0 0 24.8%); z-index:3; } .background-hh { z-index; position:absolute; top:0.2em; left:-2.7em; clip-path:inset(0 0 84% 4.2%); } .background-bb { z-index:1; position:absolute; bottom:-3.9em; left:4em; width:54em; clip-path:inset(0 0 0 0); z-index:3; } .sparkle { position:absolute; z-index:2; width:0.2em; height:0.5em; border-radius:50%; pointer-events:none; opacity:0.6; transform:translateY(100%); animation:sparkle-animation 1.5s ease-in-out infinite; background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); } .base-theme .sparkle { background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); z-index:2; } #qeel { position:absolute; top:0; left:0; width:100%; z-index:0; opacity:0.5; } .sparkle { position:absolute; z-index:2; width:0.2em; height:0.5em; border-radius:50%; pointer-events:none; opacity:0.6; transform:translateY(100%); animation:sparkle-animation 1.5s ease-in-out infinite; background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); /* Orange */ } .base-theme .sparkle { background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); z-index:2; /* Orange */ } /* Variations pour les positions et les délais d'animation */ .sparkle1 { left:54%; bottom:6.6em; animation-delay:1.9s; } .sparkle2 { left:30%; bottom:6.6em; animation-delay:0.3s; } .sparkle3 { left:50%; bottom:6.6em; animation-delay:0.5s; } .sparkle4 { left:70%; bottom:6.6m; animation-delay:0.9s; } .sparkle5 { left:90%; bottom:0.5em; animation-delay:1.2s; } .sparkle6 { right:24%; bottom:6.6em; animation-delay:0.2s; } .sparkle7 { left:42%; bottom:6.6em; animation-delay:0.4s; } .sparkle8 { left:35%; bottom:6.6em; animation-delay:1.4s; } .sparkle9 { left:62%; bottom:6.6em; animation-delay:0.6s; } .sparkle10 { left:81%; bottom:2em; animation-delay:1.9s; } /* Animation des éclats */ @keyframes sparkle-animation { 0% { transform:translateY(100%) scale(0.5); opacity:0.6; } 100% { transform:translateY(-100%) scale(1); opacity: 0; } }</style>
</head>
<body><div class="custom-background">
<img src="https://i.servimg.com/u/f55/16/14/86/50/colonn18.png" class="background-g"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-h"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-hh"/>
<img src="https://i.servimg.com/u/f55/16/14/86/50/colonn17.png" class="background-d"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-b"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-bb"/>
<img src="https://i.servimg.com/u/f44/20/41/07/60/qeel1310.png" class="qeel" id="qeel"/><div class="form">
<form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
<input type="hidden" name="mode" value="reply" />
<input type="hidden" name="topictype" value="0" checked="checked"/> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" />
<input type="hidden" name="t" value="" />
<!-- ID du sujet à répondre -->
<!-- Champ pour entrer le titre du sujet --><div id="characterForm"><div class="form-group">
<label for="pseudo"></label>
<select id="t" name="t">
<option value="" selected='selected'>Choisissez votre pseudo</option>
<option value="123">Chante brume</option>
<option value="149">Manon</option>
</select>
</div>
</div>
<!-- Champ pour entrer un lien d'image --><div id="characterForm"><div class="form-group">
<label for="imageURL"></label>
<input type="text" name="imageURL" id="imageURL" placeholder="Entrez l'URL de l'image" oninput="updateImagePreview()"/>
</div>
</div>
<!-- Champ pour entrer un lien vidéo --><div id="characterForm"><div class="form-group">
<label for="videoURL"></label>
<input type="text" name="videoURL" id="videoURL" placeholder="Entrez l'URL de la vidéo" oninput="updateVideoPreview()"/>
</div>
</div><div class="video-preview" id="videoPreview">
</div><div class="image-preview" id="imagePreview" style="text-align-last: center;">
</div><div class="container">
<!-- Chaque aspect avec ses champs --><div class="aspect"><div class="aspect-header">
Aspect psychologique <br />et moral
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Caractère
</div>
<input type="text" name="psychologique_caractere" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Émotions
</div>
<input type="text" name="psychologique_emotions" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Valeurs
</div>
<input type="text" name="psychologique_valeurs" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_psychologique" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />psychologique et moral
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_psychologique">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Aspect physique
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Puissance
</div>
<input type="text" name="physique_puissance" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Adresse
</div>
<input type="text" name="physique_adresse" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Sens
</div>
<input type="text" name="physique_sens" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_physique" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />physique
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_physique">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div>
<!-- Section des Capacités --><div class="aspect"><div class="aspect-header">
Autres capacités
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
C. combat
</div>
<input type="text" name="combat" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. Magie
</div>
<input type="text" name="magie" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. d'Exploration
</div>
<input type="text" name="exploration" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. de Monte
</div>
<input type="text" name="monte" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. de Craft
</div>
<input type="text" name="craft" value="0"/>
</div>
</div>
</div>
</div><div class="container">
<!-- Chaque aspect avec ses champs --><div class="aspect"><div class="aspect-header">
Aspect identitaire
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Statut familial
</div>
<input type="text" name="identitaire_statut_familial" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Revenus
</div>
<input type="text" name="identitaire_revenus" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Possessions
</div>
<input type="text" name="identitaire_possessions" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_identitaire" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />identitaire
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_identitaire">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Aspect social et culturel
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Aisance
</div>
<input type="text" name="social_aisance" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Empathie
</div>
<input type="text" name="social_empathie" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Culture
</div>
<input type="text" name="social_culture" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_social" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />social et culturel
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_social">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div>
<!-- Section des Statistiques --><div class="aspect"><div class="aspect-header">
Statistiques
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Point de vie
</div>
<input type="text" name="point_de_vie" value="0"/>
</div><div class="sub-category"><div class="category-name">
Initiative
</div>
<input type="text" name="initiative" value="0"/>
</div><div class="sub-category"><div class="category-name">
Point d'action par tour
</div>
<input type="text" name="point_action" value="0"/>
</div><div class="sub-category"><div class="category-name">
Défense passive
</div>
<input type="text" name="defense_passive" value="0"/>
</div><div class="sub-category"><div class="category-name">
Songe
</div>
<input type="text" name="songe" value="0"/>
</div>
</div>
</div>
</div><div style="width: 100%; text-align: center;">
<span style="color: red; display: inline-block; margin: auto;" id="errormsg"></span>
</div><div class="large-box"><div class="large-box-header">
Spécialités autres & secret(s) :
</div><div class="large-box-content">
<textarea name="specialites_autres_secrets" placeholder="Entrez ici vos spécialités autres et secrets...">
exmple :

-Détendu : 45% vide, 5% ether, 50% feu
-Curieux : 29% feu, 29% absolu, 29% ether, 13% vide
-Mystique : 69% absolu, 11% eau, 10% glace, 10% air

Vide : (45+13)/3 :19
Ether : (5+29)/3:11
Feu : (50+29)/3:26
Absolu :(29+29+69)/3:42
eau : 11/3:4
Glace : 10/3:3
air : 10/3:3</textarea>
</div>
</div><div class="large-box"><div class="large-box-header">
Background et Commentaires
</div><div class="large-box-content">
<textarea name="commentaires" placeholder="Entrez ici vos commentaires... avec votre BG">
</textarea>
</div>
</div><div class="sparkle sparkle1">
</div><div class="sparkle sparkle2">
</div><div class="sparkle sparkle3">
</div><div class="sparkle sparkle4">
</div><div class="sparkle sparkle5">
</div><div class="sparkle sparkle6">
</div><div class="sparkle sparkle7">
</div><div class="sparkle sparkle8">
</div><div class="sparkle sparkle9">
</div><div class="sparkle sparkle10">
</div>
<center>
<br/><label><span style="color:brown;font-family: sans-serif;text-shadow: 0 0 2px #340e6a;">Le titre du sujet sera créé automatiquement !</span></label><br/><br/>
<img src="https://zupimages.net/up/24/28/7oin.png"/><br/><br/>
<input type="submit" name="post" value="Créer !" class="submit-btn"/><br/>
</center>
</form>
</div>
</div>
</body>
</html>
<script>
// Calcul des totaux pour chaque aspect
function calculateTotals() {
const aspects = ['psychologique', 'physique', 'identitaire', 'social'];
aspects.forEach(aspect => {
let total = 0;
const inputs = document.querySelectorAll(`input[name^="${aspect}"]`);
inputs.forEach(input => {
total += parseFloat(input.value) || 0;
});
document.getElementById(`total_${aspect}`).value = total;
});
}
// Mise à jour de l'aperçu de l'image
function updateImagePreview() {
const url = document.getElementById('imageURL').value;
const imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = '';
if (url) {
const img = document.createElement('img');
img.src = url;
img.onload = () => {
imagePreview.appendChild(img);
};
img.onerror = () => {
imagePreview.innerHTML = 'Erreur de chargement de l\'image.';
};
}
}
// Prévisualisation de la vidéo YouTube
function updateVideoPreview() {
const url = document.getElementById('videoURL').value;
const videoPreview = document.getElementById('videoPreview');
const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const match = url.match(youtubeRegex);
if (match) {
const videoId = match[1];
videoPreview.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>`;
} else {
videoPreview.innerHTML = 'Veuillez entrer un lien YouTube valide.';
}
}
// Conversion des sauts de ligne en balises <br />
function nl2br(str) {
return str.replace(/\n/g, '<br />');
}
// Validation et préparation du message pour l'envoi
function envoiMessage(form) {
// Mise à jour des aperçus avant la soumission
updateImagePreview();
updateVideoPreview();
// Validation des champs requis
const requiredFields = [
'psychologique_caractere', 'psychologique_emotions', 'psychologique_valeurs', 'capacite_psychologique',
'physique_puissance', 'physique_adresse', 'physique_sens', 'capacite_physique',
'identitaire_statut_familial', 'identitaire_revenus', 'identitaire_possessions', 'capacite_identitaire',
'social_aisance', 'social_empathie', 'social_culture', 'capacite_social',
'commentaires', 'specialites_autres_secrets'
];
for (let field of requiredFields) {
if (!form[field].value.trim()) {
document.getElementById("errormsg").innerText = `Vous devez remplir le champ ${field.replace(/_/g, ' ').toUpperCase()}.`;
return false;
}
}
// Génération du message
const imageUrl = form.imageURL.value.trim();
var element = document.getElementById('t');
var pseudo = element.options[ element.selectedIndex ].text;
const videoUrl = form.videoURL.value.trim();
function toggleContent(id) {
var contentDiv = document.getElementById(id).querySelector('.content');
if (contentDiv.style.display === 'none' || contentDiv.style.display === '') {
contentDiv.style.display = 'flex';
} else {
contentDiv.style.display = 'none';
}
}
let txt_message = `
${imageUrl ? `<div style="text-align: center; margin-left: 15em; border-top-left-radius: 19px; border-top-right-radius: 19px; max-width: 61%;" class="fond_fiche_predef"><div class="titre_predef">${pseudo ? `${pseudo}` : ''}</div>
${videoUrl ? ` <iframe width="560" height="315" src="https://www.youtube.com/embed/${videoUrl.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)[1]}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
` : ''}<img class="responsive-image" src="${imageUrl}"/></div>` : ''}[table class="msotablegrid1"][tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect psychologique et moral[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_psychologique').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](A quoi vous pensez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]Caractère[/center][/td][td class="chiffres"]${form.psychologique_caractere.value}[/td][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Capacités :[/left]\n`
+` ${nl2br(form.capacite_psychologique.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Émotions[/center][/td][td class="chiffres"]${form.psychologique_emotions.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Valeurs[/center][/td][td class="chiffres"]${form.psychologique_valeurs.value}[/td][/tr]\n`
+`[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect physique[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_physique').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](A quoi vous ressemblez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]Puissance[/center][/td][td class="chiffres"]${form.physique_puissance.value}[/td][td colspan="3" rowspan="3" valign="top"]\n`
+` ${nl2br(form.capacite_physique.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Adresse[/center][/td][td class="chiffres"]${form.physique_adresse.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Sens[/center][/td][td class="chiffres"]${form.physique_sens.value}[/td][/tr]\n`
+`[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect identitaire[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_identitaire').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](D’où vous venez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]Statut familial[/center][/td][td class="chiffres"]${form.identitaire_statut_familial.value}[/td][td colspan="3" rowspan="3" valign="top"]\n`
+` ${nl2br(form.capacite_identitaire.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Revenus[/center][/td][td class="chiffres"]${form.identitaire_revenus.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Possessions[/center][/td][td class="chiffres"]${form.identitaire_possessions.value}[/td][/tr]\n`
+`[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect social et culturel[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_social').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](Comment vous présentez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]L’aisance[/center][/td][td class="chiffres"]${form.social_aisance.value}[/td][td colspan="3" rowspan="3" valign="top"]\n`
+` ${nl2br(form.capacite_social.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Empathie[/center][/td][td class="chiffres"]${form.social_empathie.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Culture[/center][/td][td class="chiffres"]${form.social_culture.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]combat[/center][/td][td class="chiffres"]${form.combat.value}[/td][td][/td][td colspan="2"][center]Point de vie[/center][/td][td class="chiffres"]${form.point_de_vie.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Magie[/center][/td][td class="chiffres"]${form.magie.value}[/td][td][/td][td colspan="2"][center]Initiative[/center][/td][td class="chiffres"]${form.initiative.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Exploration[/center][/td][td class="chiffres"]${form.exploration.value}[/td][td][/td][td colspan="2"][center]Point d'Action[/center][/td][td class="chiffres"]${form.point_action.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Monte[/center][/td][td class="chiffres"]${form.monte.value}[/td][td][/td][td colspan="2"][center]Défense Passive[/center][/td][td class="chiffres"]${form.defense_passive.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Craft[/center][/td][td class="chiffres"]${form.craft.value}[/td][td][/td][td colspan="2"][center]Songe[/center][/td][td class="chiffres"]${form.songe.value}[/td][/tr]\n`
+`[tr][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][/tr]\n`
+`[tr][td colspan="9" valign="top" class="msospectitle msocomm"][left][size=13]Spécialités autres & secret(s) :[/size][/left]\n`
+`[left] ${nl2br(form.specialites_autres_secrets.value)} \n`
+`[/left][/td][/tr]\n`
+`[tr][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][/tr]\n`
+`[tr][td colspan="9" valign="top" class="msospectitle msocomm"][left]Commentaires :[/left]\n`
+`[left] ${nl2br(form.commentaires.value)}\n`
+`[/left][/td][/tr][/table]`;
form.message.value = txt_message;
form.subject.value = "Fiche de personnage " + pseudo;
return true;
}
</script>
</body>
</html>

[Kaehlyth]

on y est ... la minute de vérité .

le code du formulaire: j'ai mis quelques valeurs en "value" au lieu de "placeholder" pour ne pas avoir de cellule vide (qui disparaitrait à l'affichage)
je vous laisse découvrir ...

Vous méritez des bisous mais comme ce n'est pas bien de l'imposer, je vous lance ce que vous souhaitez en guise de fan intemporelle .



Par contre, si une personne n'a pas créé sa fiche, est-ce qu'il existe une façon pour elle de la créer ?
Dans le même formulaire ?

Ou vous pensez que je devrais créer le sujet en amont et dire aux joueurs de se sélectionner ensuite après avoir prérempli les conditions select ?

[Scoubifitz]

Par contre, si une personne n'a pas créé sa fiche, est-ce qu'il existe une façon pour elle de la créer ?
Dans le même formulaire ?

Ou vous pensez que je devrais créer le sujet en amont et dire aux joueurs de se sélectionner ensuite après avoir prérempli les conditions select ?

Vous avez un formulaire pour ouvrir un nouveau sujet . vous désirer coller un message à la suite de ce sujet via un nouveau formulaire.
Alors, il est possible d'envoyer un message à la suite d'un sujet via un formulaire. On peut même faire un listing de topics pour choisir la destination.

donc , on retravaille le formulaire originel pour ouvrir un sujet dans " f18- " , à utiliser par un nouveau membre ,
et une fois le sujet posté , rajouter l'option "topic du membre" dans le 2e formulaire et prévenir le nouveau membre par MP qu'elle pourra utiliser le 2e formulaire.

le formulaire retravaillé pour ouvrir un nouveau sujet :

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formulaire de Création de Fiche de Personnage</title>
<style> /* Style pour le formulaire */ body { font-family:Caudex; text-align:center; color:#fbd6c0; display:flex; justify-content:center; align-items:center; min-width:97vw; background:linear-gradient(to left,rgb(127 167 134 / 11%),rgb(163 78 92 / 20%)),url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png); } .custom-background { width:96em; margin:0 auto; padding:20px; background:linear-gradient(to left,rgba(184,145,113,0.21),rgba(23,19,45,0.66)),url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:0px; box-shadow:0 4px 8px rgba(0,0,0,0.2); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; } .container { display:flex; gap:10px; flex-wrap:nowrap; z-index:1; } .aspect { background-color:#fff; border:1.5px solid #ED7D31; border-radius:5px; padding:10px; margin:5px 0; width:230px; box-shadow:0 2px 5px rgba(0,0,0,0.1); } .aspect-header { background-color:#ED7D31; color:#fff; font-weight:bold; padding:10px; text-align:center; border-radius:3px; margin-bottom:10px; } .aspect-content { display:flex; flex-direction:column; } .sub-category { display:flex; align-items:center; margin-bottom:10px; } .category-name { font-weight:bold; width:120px; color:#ab583a; } input[type="text"] { width:60px; margin-left:10px; border:1px solid #ED7D31; padding:5px; box-sizing:border-box; text-align:center; font-size:1em; background-color:#fff; } input[type="text"]:focus { border-color:#ED7D31; outline:none; } .large-box { background-color:#fff; border:1.5px solid #ED7D31; border-radius:5px; padding:10px; width:calc(100% - 40px); box-shadow:0 2px 5px rgba(0,0,0,0.1); margin-top:20px; } .large-box-header { background-color:#795548; color:#fff; font-weight:bold; padding:10px; text-align:center; border-radius:3px; margin-bottom:10px; } .large-box-content { display:flex; flex-direction:column; gap:10px; } .large-box-content textarea { width:100%; height:100px; border:1px solid #ED7D31; padding:10px; box-sizing:border-box; font-size:1em; border-radius:5px; resize:vertical; } .textarea-content textarea { width:180px; height:120px; border:1px solid #ED7D31; padding:10px; box-sizing:border-box; font-size:1em; border-radius:5px; resize:vertical; } .form { margin:10px auto; max-width:87%; z-index:1; } center { display:block; text-align:center; margin-top:20px; } #errormsg { color:red; } .form-group { display:flex; align-items:center; margin-bottom:10px; width:37.2em; } .form-group label { flex:1 0 0px; font-weight:bold; text-align:left; margin-right:25px; } .form-group input[type="text"] { flex:1; padding:5px; border:1px solid #ED7D31; border-radius:3px; margin-left:-3em; } .submit-btn { background-color:#ED7D31; color:#fff; border:none; padding:10px 20px; font-size:1em; font-weight:bold; border-radius:5px; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.1); transition:background-color 0.3s ease; } .submit-btn:hover { background-color:#db6c27; } .responsive-image { max-width:650px; height:auto; } .video-preview iframe { width:79%; margin-left:7em; height:60px; } .content { display:none; } .show-content { display:flex; } #characterForm { margin:10px auto; width:30.4em; padding:20px; background-color:#f9f9f9; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,0.1); border:1px solid #ED7D31; } #characterForm .form-group { display:flex; align-items:center; margin-bottom:10px; margin-left:-7.4em; } #characterForm .form-group label { flex:0 1 150px; font-weight:bold; text-align:left; margin-right:25px; color:#ab583a; } #characterForm .form-group select { flex:1; padding:5px; border:1px solid #ED7D31; border-radius:3px; width:100%; appearance:none; background-color:#fff; color:#333; font-size:16px; } .background-g { z-index:3; position:absolute; left:-0.4em; top:1em; clip-path:inset(0 0 0 0); } .background-d { z-index:3; position:absolute; right:-0.7em; clip-path:inset(0 0 0 0); top:1em; } .background-h { z-index; position:absolute; top:0.2em; right:-1.7em; clip-path:inset(0 0 84% 4.2%); } .background-b { z-index:1; position:absolute; bottom:-3.9em; right:1em; clip-path:inset(0 0 0 24.8%); z-index:3; } .background-hh { z-index; position:absolute; top:0.2em; left:-2.7em; clip-path:inset(0 0 84% 4.2%); } .background-bb { z-index:1; position:absolute; bottom:-3.9em; left:4em; width:54em; clip-path:inset(0 0 0 0); z-index:3; } .sparkle { position:absolute; z-index:2; width:0.2em; height:0.5em; border-radius:50%; pointer-events:none; opacity:0.6; transform:translateY(100%); animation:sparkle-animation 1.5s ease-in-out infinite; background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); } .base-theme .sparkle { background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); z-index:2; } #qeel { position:absolute; top:0; left:0; width:100%; z-index:0; opacity:0.5; } .sparkle { position:absolute; z-index:2; width:0.2em; height:0.5em; border-radius:50%; pointer-events:none; opacity:0.6; transform:translateY(100%); animation:sparkle-animation 1.5s ease-in-out infinite; background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); /* Orange */ } .base-theme .sparkle { background:radial-gradient(circle,rgba(255,165,0,0.8),transparent); z-index:2; /* Orange */ } /* Variations pour les positions et les délais d'animation */ .sparkle1 { left:54%; bottom:6.6em; animation-delay:1.9s; } .sparkle2 { left:30%; bottom:6.6em; animation-delay:0.3s; } .sparkle3 { left:50%; bottom:6.6em; animation-delay:0.5s; } .sparkle4 { left:70%; bottom:6.6m; animation-delay:0.9s; } .sparkle5 { left:90%; bottom:0.5em; animation-delay:1.2s; } .sparkle6 { right:24%; bottom:6.6em; animation-delay:0.2s; } .sparkle7 { left:42%; bottom:6.6em; animation-delay:0.4s; } .sparkle8 { left:35%; bottom:6.6em; animation-delay:1.4s; } .sparkle9 { left:62%; bottom:6.6em; animation-delay:0.6s; } .sparkle10 { left:81%; bottom:2em; animation-delay:1.9s; } /* Animation des éclats */ @keyframes sparkle-animation { 0% { transform:translateY(100%) scale(0.5); opacity:0.6; } 100% { transform:translateY(-100%) scale(1); opacity: 0; } }</style>

</head>
<body><div class="custom-background">
<img src="https://i.servimg.com/u/f55/16/14/86/50/colonn18.png" class="background-g"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-h"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-hh"/>
<img src="https://i.servimg.com/u/f55/16/14/86/50/colonn17.png" class="background-d"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-b"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-bb"/>
<img src="https://i.servimg.com/u/f44/20/41/07/60/qeel1310.png" class="qeel" id="qeel"/>
<div class="form">
<form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="f" value="18" />
<input type="hidden" name="subject" id="titre" value="" />


<!-- Champ pour entrer le titre du sujet --><div id="characterForm"><div class="form-group">
<label for="pseudo"></label>
<input type="text" name="pseudo" id="pseudo" placeholder="Entrez votre pseudo" required />
</div>
</div>
<!-- Champ pour entrer un lien d'image --><div id="characterForm"><div class="form-group">
<label for="imageURL"></label>
<input type="text" name="imageURL" id="imageURL" placeholder="Entrez l'URL de l'image" oninput="updateImagePreview()"/>
</div>
</div>
<!-- Champ pour entrer un lien vidéo --><div id="characterForm"><div class="form-group">
<label for="videoURL"></label>
<input type="text" name="videoURL" id="videoURL" placeholder="Entrez l'URL de la vidéo" oninput="updateVideoPreview()"/>
</div>
</div><div class="video-preview" id="videoPreview">
</div><div class="image-preview" id="imagePreview" style="text-align-last: center;">
</div><div class="container">
<!-- Chaque aspect avec ses champs --><div class="aspect"><div class="aspect-header">
Aspect psychologique <br />et moral
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Caractère
</div>
<input type="text" name="psychologique_caractere" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Émotions
</div>
<input type="text" name="psychologique_emotions" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Valeurs
</div>
<input type="text" name="psychologique_valeurs" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_psychologique" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />psychologique et moral
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_psychologique">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Aspect physique
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Puissance
</div>
<input type="text" name="physique_puissance" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Adresse
</div>
<input type="text" name="physique_adresse" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Sens
</div>
<input type="text" name="physique_sens" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_physique" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />physique
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_physique">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div>
<!-- Section des Capacités --><div class="aspect"><div class="aspect-header">
Autres capacités
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
C. combat
</div>
<input type="text" name="combat" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. Magie
</div>
<input type="text" name="magie" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. d'Exploration
</div>
<input type="text" name="exploration" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. de Monte
</div>
<input type="text" name="monte" value="0"/>
</div><div class="sub-category"><div class="category-name">
C. de Craft
</div>
<input type="text" name="craft" value="0"/>
</div>
</div>
</div>
</div><div class="container">
<!-- Chaque aspect avec ses champs --><div class="aspect"><div class="aspect-header">
Aspect identitaire
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Statut familial
</div>
<input type="text" name="identitaire_statut_familial" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Revenus
</div>
<input type="text" name="identitaire_revenus" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Possessions
</div>
<input type="text" name="identitaire_possessions" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_identitaire" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />identitaire
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_identitaire">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Aspect social et culturel
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Aisance
</div>
<input type="text" name="social_aisance" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Empathie
</div>
<input type="text" name="social_empathie" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Culture
</div>
<input type="text" name="social_culture" placeholder="0" oninput="calculateTotals()"/>
</div><div class="sub-category"><div class="category-name">
Total
</div>
<input type="text" id="total_social" readonly/>
</div>
</div>
</div><div class="aspect"><div class="aspect-header">
Capacité de cet aspect<br />social et culturel
</div><div class="aspect-content"><div class="textarea-content">
<textarea name="capacite_social">5 lignes maximum
Ne pas laisser cette case vide</textarea>
</div>
</div>
</div>
<!-- Section des Statistiques --><div class="aspect"><div class="aspect-header">
Statistiques
</div><div class="aspect-content"><div class="sub-category"><div class="category-name">
Point de vie
</div>
<input type="text" name="point_de_vie" value="0"/>
</div><div class="sub-category"><div class="category-name">
Initiative
</div>
<input type="text" name="initiative" value="0"/>
</div><div class="sub-category"><div class="category-name">
Point d'action par tour
</div>
<input type="text" name="point_action" value="0"/>
</div><div class="sub-category"><div class="category-name">
Défense passive
</div>
<input type="text" name="defense_passive" value="0"/>
</div><div class="sub-category"><div class="category-name">
Songe
</div>
<input type="text" name="songe" value="0"/>
</div>
</div>
</div>
</div><div style="width: 100%; text-align: center;">
<span style="color: red; display: inline-block; margin: auto;" id="errormsg"></span>
</div><div class="large-box"><div class="large-box-header">
Spécialités autres & secret(s) :
</div><div class="large-box-content">
<textarea name="specialites_autres_secrets" placeholder="Entrez ici vos spécialités autres et secrets...">
exmple :

-Détendu : 45% vide, 5% ether, 50% feu
-Curieux : 29% feu, 29% absolu, 29% ether, 13% vide
-Mystique : 69% absolu, 11% eau, 10% glace, 10% air

Vide : (45+13)/3 :19
Ether : (5+29)/3:11
Feu : (50+29)/3:26
Absolu :(29+29+69)/3:42
eau : 11/3:4
Glace : 10/3:3
air : 10/3:3</textarea>
</div>
</div><div class="large-box"><div class="large-box-header">
Background et Commentaires
</div><div class="large-box-content">
<textarea name="commentaires" placeholder="Entrez ici vos commentaires... avec votre BG">
</textarea>
</div>
</div><div class="sparkle sparkle1">
</div><div class="sparkle sparkle2">
</div><div class="sparkle sparkle3">
</div><div class="sparkle sparkle4">
</div><div class="sparkle sparkle5">
</div><div class="sparkle sparkle6">
</div><div class="sparkle sparkle7">
</div><div class="sparkle sparkle8">
</div><div class="sparkle sparkle9">
</div><div class="sparkle sparkle10">
</div>
<center>
<br/><label><span style="color:brown;font-family: sans-serif;text-shadow: 0 0 2px #340e6a;">Le titre du sujet sera créé automatiquement !</span></label><br/><br/>
<img src="https://zupimages.net/up/24/28/7oin.png"/><br/><br/>
<input type="submit" name="post" value="Créer !" class="submit-btn"/><br/>
</center>
</form>
</div>
</div>
</body>
</html>
<script>
// Calcul des totaux pour chaque aspect
function calculateTotals() {
const aspects = ['psychologique', 'physique', 'identitaire', 'social'];
aspects.forEach(aspect => {
let total = 0;
const inputs = document.querySelectorAll(`input[name^="${aspect}"]`);
inputs.forEach(input => {
total += parseFloat(input.value) || 0;
});
document.getElementById(`total_${aspect}`).value = total;
});
}
// Mise à jour de l'aperçu de l'image
function updateImagePreview() {
const url = document.getElementById('imageURL').value;
const imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = '';
if (url) {
const img = document.createElement('img');
img.src = url;
img.onload = () => {
imagePreview.appendChild(img);
};
img.onerror = () => {
imagePreview.innerHTML = 'Erreur de chargement de l\'image.';
};
}
}
// Prévisualisation de la vidéo YouTube
function updateVideoPreview() {
const url = document.getElementById('videoURL').value;
const videoPreview = document.getElementById('videoPreview');
const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const match = url.match(youtubeRegex);
if (match) {
const videoId = match[1];
videoPreview.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>`;
} else {
videoPreview.innerHTML = 'Veuillez entrer un lien YouTube valide.';
}
}
// Conversion des sauts de ligne en balises <br />
function nl2br(str) {
return str.replace(/\n/g, '<br />');
}
// Validation et préparation du message pour l'envoi
function envoiMessage(form) {
// Mise à jour des aperçus avant la soumission
updateImagePreview();
updateVideoPreview();
// Validation des champs requis
const requiredFields = [
'psychologique_caractere', 'psychologique_emotions', 'psychologique_valeurs', 'capacite_psychologique',
'physique_puissance', 'physique_adresse', 'physique_sens', 'capacite_physique',
'identitaire_statut_familial', 'identitaire_revenus', 'identitaire_possessions', 'capacite_identitaire',
'social_aisance', 'social_empathie', 'social_culture', 'capacite_social',
'commentaires', 'specialites_autres_secrets'
];
for (let field of requiredFields) {
if (!form[field].value.trim()) {
document.getElementById("errormsg").innerText = `Vous devez remplir le champ ${field.replace(/_/g, ' ').toUpperCase()}.`;
return false;
}
}

// Génération du message
const imageUrl = form.imageURL.value.trim();
const pseudo = form.pseudo.value.trim();
const videoUrl = form.videoURL.value.trim();

function toggleContent(id) {
var contentDiv = document.getElementById(id).querySelector('.content');
if (contentDiv.style.display === 'none' || contentDiv.style.display === '') {
contentDiv.style.display = 'flex';
} else {
contentDiv.style.display = 'none';
}
}
let txt_message = `
${imageUrl ? `<div style="text-align: center; margin-left: 15em; border-top-left-radius: 19px; border-top-right-radius: 19px; max-width: 61%;" class="fond_fiche_predef"><div class="titre_predef">${pseudo ? `${pseudo}` : ''}</div>
${videoUrl ? ` <iframe width="560" height="315" src="https://www.youtube.com/embed/${videoUrl.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)[1]}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
` : ''}<img class="responsive-image" src="${imageUrl}"/></div>` : ''}[table class="msotablegrid1"][tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect psychologique et moral[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_psychologique').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](A quoi vous pensez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]Caractère[/center][/td][td class="chiffres"]${form.psychologique_caractere.value}[/td][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Capacités :[/left]\n`
+` ${nl2br(form.capacite_psychologique.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Émotions[/center][/td][td class="chiffres"]${form.psychologique_emotions.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Valeurs[/center][/td][td class="chiffres"]${form.psychologique_valeurs.value}[/td][/tr]\n`
+`[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect physique[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_physique').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](A quoi vous ressemblez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]Puissance[/center][/td][td class="chiffres"]${form.physique_puissance.value}[/td][td colspan="3" rowspan="3" valign="top"]\n`
+` ${nl2br(form.capacite_physique.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Adresse[/center][/td][td class="chiffres"]${form.physique_adresse.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Sens[/center][/td][td class="chiffres"]${form.physique_sens.value}[/td][/tr]\n`
+`[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect identitaire[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_identitaire').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](D’où vous venez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]Statut familial[/center][/td][td class="chiffres"]${form.identitaire_statut_familial.value}[/td][td colspan="3" rowspan="3" valign="top"]\n`
+` ${nl2br(form.capacite_identitaire.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Revenus[/center][/td][td class="chiffres"]${form.identitaire_revenus.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Possessions[/center][/td][td class="chiffres"]${form.identitaire_possessions.value}[/td][/tr]\n`
+`[tr][td colspan="3" rowspan="3" valign="top" class="msospectitle"][left]Aspect social et culturel[/left]\n\n`
+`[table class="msopercenttable"][tr][td class="chiffres"][right][i][size=13]${document.getElementById('total_social').value}%[/size][/i][/right]\n`
+`[/td][/tr][/table]\n`
+`[center][i][size=13](Comment vous présentez)[/size][/i][/center]\n`
+`[/td][td colspan="2"][center]L’aisance[/center][/td][td class="chiffres"]${form.social_aisance.value}[/td][td colspan="3" rowspan="3" valign="top"]\n`
+` ${nl2br(form.capacite_social.value)} [/td][/tr]\n`
+`[tr][td colspan="2"][center]Empathie[/center][/td][td class="chiffres"]${form.social_empathie.value}[/td][/tr]\n`
+`[tr][td colspan="2"][center]Culture[/center][/td][td class="chiffres"]${form.social_culture.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]combat[/center][/td][td class="chiffres"]${form.combat.value}[/td][td][/td][td colspan="2"][center]Point de vie[/center][/td][td class="chiffres"]${form.point_de_vie.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Magie[/center][/td][td class="chiffres"]${form.magie.value}[/td][td][/td][td colspan="2"][center]Initiative[/center][/td][td class="chiffres"]${form.initiative.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Exploration[/center][/td][td class="chiffres"]${form.exploration.value}[/td][td][/td][td colspan="2"][center]Point d'Action[/center][/td][td class="chiffres"]${form.point_action.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Monte[/center][/td][td class="chiffres"]${form.monte.value}[/td][td][/td][td colspan="2"][center]Défense Passive[/center][/td][td class="chiffres"]${form.defense_passive.value}[/td][/tr]\n`
+`[tr][td][/td][td colspan="2"][center]Craft[/center][/td][td class="chiffres"]${form.craft.value}[/td][td][/td][td colspan="2"][center]Songe[/center][/td][td class="chiffres"]${form.songe.value}[/td][/tr]\n`
+`[tr][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][/tr]\n`
+`[tr][td colspan="9" valign="top" class="msospectitle msocomm"][left][size=13]Spécialités autres & secret(s) :[/size][/left]\n`
+`[left] ${nl2br(form.specialites_autres_secrets.value)} \n`
+`[/left][/td][/tr]\n`
+`[tr][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][/tr]\n`
+`[tr][td colspan="9" valign="top" class="msospectitle msocomm"][left]Commentaires :[/left]\n`
+`[left] ${nl2br(form.commentaires.value)}\n`
+`[/left][/td][/tr][/table]`;
form.message.value = txt_message;
form.subject.value = "Fiche de personnage " + form.pseudo.value;
return true;
}
</script>
</body>
</html>

[Kaehlyth]

Merci énormément Scoubifitz.

En effet, soit je passe par le formulaire de base et ensuite celui du sujet, soit je vais tout simplement créer un sujet pour chaque membre, et ils pourront poster dedans.

Merci pour votre patience et les différentes explications.
C'est !