jeanmichjeanmich | Bonjour à tous.
Pour le taf j'ai créé une map du RER A (avec la très grande aide d'un membre du forum) avec entre autre : - Un code couleur définissant l'état d'une gare : contenu CSS (1)
- Des informations relatives aux travaux d'une gare : contenu HTML (2)
Est-il possible en PHP de créer une interface utilisateur permettant à n'importe qui, sans passer par le code, de modifier (1) et (2) ?
Si oui, comment puis-je le faire.
Je peux également mettre mon code ici mais il est un peu long ( HTML : 600 lignes et CSS 200 lignes).
Voici le code HTML :
Code :
- <!DOCTYP<!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="" width=device-width, initial-scale="1.0, maximum-scale=1.0, minimal-ui"/>
- <link rel="stylesheet" href="app.css">
- <style type="text/css">
- .st0{fill:none;stroke:#000000;}
- .st1{fill:none;stroke:#E2231A;stroke-width:7.852;}
- .st2{stroke:#E2231A;stroke-width:7.852;}
- .st3{stroke:#000000;stroke-width:5;}
- .st4{font-family:'ArialMT';}
- .st5{font-size:31.4093px;}
- .st6{font-size:32px;}
- .st7{enable-background:new;}
- .st8{fill:#FFFFFF;}
- .st9{fill:#050D9E;}
- .st10{fill:#E2231A;}
- .st11{fill:none;}
- .st12{font-family:'Arial-BoldMT';}
- .st13{font-size:25.7578px;}
- .st14{font-size:48px;}
- .st15{fill:#FFFFFF;stroke:#000000;stroke-width:5;}
- .st16{fill:#1D1D1B;stroke:#000000;stroke-width:5;}
- </style>
- </head>
- <body>
- <div class="map" id="map">
- <div class="map__image">
- <svg version="1.1"
- id="svg2" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:version="0.92.3 (2405546, 2018-03-11)" sodipodi:docname="RER_ligne_A_Paris_plan.svg" sodipodi:version="0.32" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2938.7 1075"
- style="enable-background:new 0 0 2938.7 1075;" xml:space="preserve">
- <g id="layer2" transform="translate(-96.135793,207.65463)" inkscape:groupmode="layer" inkscape:label="ligne" sodipodi:insensitive="true">
- <path id="path15678" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M719.8,273.8v-96.7"/>
- <path id="path15680" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M799.8,273.8v-96.7"/>
- <path id="path3787" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1919.8,350.5v-83.7 c0.2-27.8,15.7-33.1,31.4-32.6h846.2"/>
- <path id="path16066" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st2" d="M1919.1,346.6h-719.3"/>
- <path id="path16070" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M2639.5,459h-686.2 c-17.8,0.6-33.3-4.8-33.5-32.6v-83.7"/>
- <path id="path14566" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1195.8,350.5v-83.7 c-0.2-27.8-15.7-33.1-31.4-32.6H879.8"/>
- <path id="path14568" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M638.1,459h524.2 c17.8,0.6,33.3-4.8,33.5-32.6v-83.7"/>
- <path id="path14820" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M877.6,234.2v-3.7 c-0.2-27.8-15.7-33.1-31.4-32.6H239.8"/>
- <path id="path14822" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M719.8,270.5h124.4 c17.8,0.6,33.3-4.8,33.5-32.6v-3.7"/>
- <path id="circle15644_2_" class="st3" d="M319.8,210.4"/>
- <path id="circle15644_1_" class="st3" d="M319.8,185.4"/>
- </g>
- <!--branche A1-->
- <!--gare de Saint Germain en laye-->
- <g class="ville">
- <text transform="matrix(0.5 -0.866 0.866 0.5 400 975)" class="st4 st5">Saint-Germain-en-Laye</text>
- <circle class="saint_germain_en_laye" cx="543.6" cy="666.6" r="12.5"/>
- <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
- <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
- <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
- <tspan x="1180" y="950"> Code REFPAT :</tspan>
- <tspan x="1180" y="1000"> Type baie : </tspan>
- <tspan x="1180" y="1050"> Type interface : </tspan>
- </text>
- </g>
- <!--gare de Vésinet-Le Pecq-->
- <g class="ville">
- <text transform="matrix(0.5 -0.866 0.866 0.5 495 945)" class="st4 st5">Le Vésinet - Le Pecq</text>
- <circle class= "vesinet_le_pecq" cx="623.6" cy="666.6" r="12.5"/>
- <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
- <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
- <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
- <tspan x="1180" y="950"> Code REFPAT :</tspan>
- <tspan x="1180" y="1000"> Type baie : </tspan>
- <tspan x="1180" y="1050"> Type interface : </tspan>
- </text>
- </g>
- <!--gare de Vésinet-Centre-->
- <g class="ville">
- <text transform="matrix(0.5 -0.866 0.866 0.5 590 915)" class="st4 st5">Le Vésinet-Centre</text>
- <circle class="vesinet_centre" cx="703.6" cy="666.6" r="12.5"/>
- <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
- <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
- <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
- <tspan x="1180" y="950"> Code REFPAT :</tspan>
- <tspan x="1180" y="1000"> Type baie : </tspan>
- <tspan x="1180" y="1050"> Type interface : </tspan>
- </text>
- </g>
- <!--gare de Chatou-Croissy-->
- <g class="ville">
- <text transform="matrix(0.5 -0.866 0.866 0.5 685 890)" class="st4 st5">Chatou-Croissy</text>
- <circle class="chatou_croissy" cx="783.6" cy="666.6" r="12.5"/>
- <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
- <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
- <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
- <tspan x="1180" y="950"> Code REFPAT :</tspan>
- <tspan x="1180" y="1000"> Type baie : </tspan>
- <tspan x="1180" y="1050"> Type interface : </tspan>
- </text>
- </g>
- <-- même chose pour les autres gares, je les ai enlevé pour que ça soit plus visible ici-->
- <g id="layer1" transform="translate(0,307.09595)" inkscape:groupmode="layer" inkscape:label="logo" sodipodi:insensitive="true">
- <g id="g13376" transform="translate(-21.330339,-1405.8168)" class="st7">
- <g id="g6194" transform="matrix(2.4285712,0,0,2.4285212,-2743.1034,-446.93566)">
- <circle id="circle6196" class="st8" cx="1163.7" cy="658.1" r="16"/>
- <path id="path6198" inkscape:connector-curvature="0" class="st9" d="M1181.2,658.2c0-9.7-8.1-17.6-17.5-17.6
- c-9.7,0-17.5,7.9-17.5,17.6c0,9.6,7.9,17.4,17.5,17.4C1173.4,675.6,1181.2,667.8,1181.2,658.2 M1178.8,658.2c0,8.2-6.8,15-15,15
- c-8.3,0-15.1-6.7-15.1-15c0-8.4,6.8-15.2,15.1-15.2C1172,642.9,1178.8,649.9,1178.8,658.2z M1176.2,655.4c0-2.4-1.8-3.5-3.5-3.5
- h-3.3c-0.6,0-1,0.5-1,1v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5
- c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9C1175.3,658.2,1176.2,657.2,1176.2,655.4L1176.2,655.4z M1167.3,663c0-0.5-0.4-1.1-1-1.1h-3.3v-3
- h2.8c0.6,0,1-0.5,1-1c0-0.5-0.3-1-1-1h-2.8v-2.8h3.1c0.6,0,1-0.6,1-1.1c0-0.5-0.4-1.1-1-1.1h-4.5c-0.6,0-1,0.5-1,1v10.2
- c0,0.6,0.6,0.9,1.2,0.9h4.5C1167,664.1,1167.3,663.5,1167.3,663z M1159.3,655.4c0-2.4-1.7-3.5-3.5-3.5h-3.3c-0.6,0-1,0.5-1,1
- v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9
- C1158.3,658.2,1159.3,657.2,1159.3,655.4L1159.3,655.4z M1173.8,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
- C1172.8,653.9,1173.8,654.4,1173.8,655.6z M1156.9,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
- C1155.9,653.9,1156.9,654.4,1156.9,655.6z"/>
- </g>
- <g id="g6200" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
- <path id="path6202" inkscape:connector-curvature="0" class="st10" d="M98.2,547.2c0-9.7-7.8-17.5-17.5-17.5
- c-9.7,0-17.5,7.8-17.5,17.5c0,9.7,7.8,17.5,17.5,17.5C90.3,564.7,98.2,556.8,98.2,547.2"/>
- <path id="path6204" inkscape:connector-curvature="0" class="st8" d="M95.7,547.2c0-8.3-6.7-15-15-15.1c-8.3,0-15.1,6.7-15,15
- c0,8.3,6.7,15.1,15,15.1C89,562.2,95.7,555.5,95.7,547.2"/>
- <path id="path6206" inkscape:connector-curvature="0" class="st10" d="M72.6,554.7l4,0l1.1-3.2h6.2l1,3.2l3.6,0l-5.9-16.8h-4
- L72.6,554.7 M78.5,548.7l1.7-5.3c0.2-0.7,0.4-1.6,0.4-2.1l0.1,0c0,0.6,0.2,1.4,0.4,2.1l1.7,5.3L78.5,548.7L78.5,548.7z"/>
- </g>
- </g>
- </g>
- <path id="circle15644_5_" class="st3" d="M556.1,405.6"/>
- <g id="g6200_1_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
- <path id="path6202_1_" inkscape:connector-curvature="0" class="st10" d="M210.7,347.6c0-5.7-4.6-10.3-10.3-10.3
- c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C206.1,357.9,210.7,353.3,210.7,347.6"/>
- <path id="path6204_1_" inkscape:connector-curvature="0" class="st8" d="M209.2,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
- c0,4.9,4,8.9,8.9,8.9C205.3,356.5,209.2,352.5,209.2,347.6"/>
- </g>
- <rect x="447.7" y="656.1" class="st11" width="35" height="22.3"/>
- <text transform="matrix(1 0 0 1 447.6845 674.4961)" class="st10 st12 st13">A1</text>
- <g id="g6200_2_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
- <path id="path6202_2_" inkscape:connector-curvature="0" class="st10" d="M1100.1,347.6c0-5.7-4.6-10.3-10.3-10.3
- c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1095.5,357.9,1100.1,353.3,1100.1,347.6"/>
- <path id="path6204_2_" inkscape:connector-curvature="0" class="st8" d="M1098.6,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
- c0,4.9,4,8.9,8.9,8.9C1094.7,356.5,1098.6,352.5,1098.6,347.6"/>
- </g>
- <rect x="2607.1" y="656.5" class="st11" width="35" height="22.3"/>
- <text transform="matrix(1 0 0 1 2607.1201 674.9199)" class="st10 st12 st13">A2</text>
- <g id="g6200_3_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
- <path id="path6202_3_" inkscape:connector-curvature="0" class="st10" d="M1166,255.1c0-5.7-4.6-10.3-10.3-10.3
- c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1161.3,265.4,1166,260.8,1166,255.1"/>
- <path id="path6204_3_" inkscape:connector-curvature="0" class="st8" d="M1164.5,255.1c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
- c0,4.9,4,8.9,8.9,8.9C1160.5,264,1164.5,260,1164.5,255.1"/>
- </g>
- <polygon class="st11" points="2802.1,455.1 2767.1,454.1 2767.1,431.7 2802.1,432.7 "/>
- <text transform="matrix(1 0 0 1 2767.1201 450.1821)" class="st10 st12 st13">A4</text>
- <rect x="1175.8" y="664" class="st11" width="555.8" height="115.6"/>
- <text transform="matrix(1 0 0 1 1251.1055 698.335)"><tspan x="20" y="-30" class="st12 st14">Migration Ligne A </tspan><tspan x="131.9" y="27.6" class="st12 st14">Phase 1</tspan></text>
- <g id="g6200_4_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
- <path id="path6202_4_" inkscape:connector-curvature="0" class="st10" d="M243.6,270.2c0-5.7-4.6-10.3-10.3-10.3
- c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C239,280.5,243.6,275.9,243.6,270.2"/>
- <path id="path6204_4_" inkscape:connector-curvature="0" class="st8" d="M242.2,270.2c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
- c0,4.9,4,8.9,8.9,8.9C238.2,279.1,242.2,275.1,242.2,270.2"/>
- </g>
- <rect x="526.7" y="469.1" class="st11" width="35" height="22.3"/>
- <text transform="matrix(1 0 0 1 526.6845 487.4961)" class="st10 st12 st13">A5</text>
- <g id="g6200_5_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
- <path id="path6202_5_" inkscape:connector-curvature="0" class="st10" d="M46,240.1c0-5.7-4.6-10.3-10.3-10.3
- c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C41.3,250.4,46,245.8,46,240.1"/>
- <path id="path6204_5_" inkscape:connector-curvature="0" class="st8" d="M44.5,240.1c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
- c0,4.9,4,8.9,8.9,8.9C40.5,249,44.5,245,44.5,240.1"/>
- </g>
- <rect x="46.7" y="396" class="st11" width="35" height="22.3"/>
- <text transform="matrix(1 0 0 1 46.6848 414.4251)" class="st10 st12 st13">A3</text>
- <rect x="102.7" y="1015" class="st11" width="163.7" height="35.8"></rect>
- <text transform="matrix(1 0 0 1 110 1038)" class="st4 st5">Rien</text>
- <rect x="316.7" y="1015" class="st11" width="158.2" height="37.1"></rect>
- <text transform="matrix(1 0 0 1 280 1038)" class="st4 st5">En travaux</text>
- <rect x="550.8" y="1015" class="st11" width="291.7" height="34.4"></rect>
- <text transform="matrix(1 0 0 1 540 1038)" class="st4 st5">En tests</text>
- <rect x="1001.6" y="1015" class="st11" width="286.2" height="46.8"></rect>
- <text transform="matrix(1 0 0 1 765 1038)" class="st4 st5">Gare basculée</text>
- <circle class="rien" cx="200.1" cy="1026.5" r="12.5"></circle>
- <circle class="en_travaux" cx="450" cy="1026.5" r="12.5"></circle>
- <circle class="en_tests" cx="675" cy="1026.5" r="12.5"></circle>
- <circle class="gare_basculee" cx="980" cy="1026.5" r="12.5"></circle>
- </svg>
- </div>
- <div class="map__list">
- </div>
- </div>
- </body>
- </html>
|
et le code en CSS :
Code :
- /* villes : text et circle au survol */
- svg g.ville{
- cursor:pointer;
- }
- svg g.ville:hover > text:not(.desc) {
- font-weight:bold;
- fill:red;
- }
- svg g.ville:hover > circle {
- font-weight:bold;
- stroke:red;
- stroke-width:6;
- }
- /* description */
- svg g.ville > text.desc {
- font-size:36px;
- fill:darkblue;
- display:none; /* on masque */
- }
- svg g.ville:hover > text.desc {
- display:block; /* on affiche */
- }
- /*
- svg g:before {
- position:absolute;
- display:block;
- content:attr(id);
- top:100%;
- left:0;
- width:150px;
- height:50px;
- color:green;
- background:#fff;
- padding:10px;
- border:1px solid grey;
- z-index:10;
- display:none;
- }
- svg g:hover::before {
- display:block;
- }
- */
- /*branche A1*/
- circle.saint_germain_en_laye{
- fill: white;
- stroke:#000000;
- stroke-width:5
- }
- circle.vesinet_le_pecq{
- fill: limegreen;
- stroke:#000000;
- stroke-width:5
- }
- circle.vesinet_centre{
- fill: deepskyblue;
- stroke:#000000;
- stroke-width:5
- }
- circle.chatou_croissy{
- fill: yellow;
- stroke:#000000;
- stroke-width:5
- }
- circle.rueil_malmaison{
- fill: white;
- stroke:#000000;
- stroke-width:5
- }
- <!-- etc etc etc pour toute les gares-->
|
Merci à vous |