{"id":3365,"date":"2025-04-24T19:47:49","date_gmt":"2025-04-24T19:47:49","guid":{"rendered":"https:\/\/www.foilenvie.fr\/?page_id=3365"},"modified":"2025-09-15T18:44:38","modified_gmt":"2025-09-15T18:44:38","slug":"gpx-analizer","status":"publish","type":"page","link":"https:\/\/www.foilenvie.fr\/en\/resources\/gpx-analizer\/","title":{"rendered":"GPX Analyzer"},"content":{"rendered":"<style>\n.gpx-title {\n    background-color: #f8f8f8;\n    border: 1px solid #ddd;\n    padding: 15px;\n    margin-bottom: 20px;\n    border-radius: 5px;\n}\n.gpx-title h3 {\n    margin: 0 0 10px 0;\n    color: #00ADB5;\n    text-align: center;\n    font-weight: bold;\n}\n.gpx-title p {\n    margin: 5px 0;\n    font-weight: bold;\n    text-align: center;\n    color: #00ADB5;\n}\n\n\/* Responsive Form Layout *\/\n.gpx-form-inline {\n    display: flex;\n    gap: 20px;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-bottom: 10px;\n}\n\n.gpx-form-group {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    flex-wrap: wrap;\n}\n\n\/* File upload section *\/\n.gpx-upload-section {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    margin-bottom: 10px;\n    flex-wrap: wrap;\n}\n\n\/* Results container *\/\n.gpx-results-container {\n    display: flex;\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.segment-table-container {\n    flex: 1;\n    max-height: 600px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n    padding: 10px;\n}\n\n.gpx-map-container {\n    flex: 1;\n    height: 600px;\n\toverflow: visible !important; \/* Force l'affichage du contenu, annule tout 'overflow: hidden' externe *\/\n    position: relative; \/* Assure un contexte de positionnement correct *\/\n}\n\n.segment-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n.segment-table th, .segment-table td {\n    border: 1px solid #ccc;\n    padding: 6px;\n    text-align: center;\n}\n.segment-table th {\n    position: sticky;\n    top: 0;\n    background-color: #f0f0f0;\n    z-index: 2;\n}\n\n\/* Mobile Responsive Styles *\/\n@media screen and (max-width: 768px) {\n    .gpx-form-inline {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 15px;\n    }\n    \n    .gpx-form-group {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 8px;\n    }\n    \n    .gpx-form-group label {\n        font-size: 14px;\n        margin-bottom: 5px;\n    }\n    \n    .gpx-form-group input,\n    .gpx-form-group select {\n        width: 100%;\n        padding: 8px;\n        font-size: 16px; \/* \u00c9vite le zoom sur iOS *\/\n        border: 1px solid #ccc;\n        border-radius: 4px;\n    }\n    \n    .gpx-upload-section {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n    \n    .gpx-upload-section input[type=\"file\"] {\n        width: 100%;\n        padding: 8px;\n        font-size: 16px;\n    }\n    \n    .gpx-upload-section button {\n        width: 100%;\n        padding: 12px;\n        font-size: 16px;\n        border: none;\n        border-radius: 4px;\n        background-color: #00ADB5;\n        color: white;\n        cursor: pointer;\n    }\n    \n    .gpx-upload-section button:hover {\n        background-color: #008c94;\n    }\n    \n    \/* Stack table and map vertically on mobile *\/\n    .gpx-results-container {\n        flex-direction: column;\n        gap: 15px;\n    }\n    \n    .segment-table-container {\n        max-height: 400px;\n        order: 1; \/* Place la table en premier (comme PC) *\/\n    }\n    \n    .gpx-map-container {\n        height: 300px;\n        order: 2; \/* Place la carte apr\u00e8s le tableau *\/\n        width: 100%;\n    }\n    \n    \/* Improve table readability on mobile *\/\n    .segment-table {\n        font-size: 12px;\n    }\n    \n    .segment-table th,\n    .segment-table td {\n        padding: 4px 2px;\n        word-wrap: break-word;\n    }\n    \n    \/* Make buttons more touch-friendly *\/\n    .segment-table button {\n        padding: 6px 12px;\n        font-size: 12px;\n        border: none;\n        border-radius: 3px;\n        background-color: #00ADB5;\n        color: white;\n        cursor: pointer;\n        min-width: 50px;\n    }\n    \n    .segment-table button:hover {\n        background-color: #008c94;\n    }\n    \n    .gpx-title h3 {\n        font-size: 16px;\n    }\n    \n    .gpx-title p {\n        font-size: 12px;\n    }\n}\n\n@media screen and (max-width: 768px) {\n    \/* ... (votre CSS existant pour les m\u00e9dias queries) ... *\/\n    .gpx-map-container {\n        height: 300px;\n        order: 2; \/* Place la carte apr\u00e8s le tableau *\/\n        width: 100%;\n    }\n    \/* ... (reste de votre CSS pour les m\u00e9dias queries) ... *\/\n}\n\n\/* Very small screens *\/\n@media screen and (max-width: 480px) {\n    .segment-table {\n        font-size: 10px;\n    }\n    \n    .gpx-map-container {\n        height: 250px;\n    }\n    \n    .segment-table-container {\n        max-height: 300px;\n    }\n}\n<\/style>\n<form method=\"post\" enctype=\"multipart\/form-data\" style=\"margin-bottom: 20px;\">\n    <div class=\"gpx-upload-section\">\n        <input type=\"file\" name=\"gpx_file\" accept=\".gpx\" required>\n        <button type=\"submit\">Analyze<\/button>\n        <button type=\"button\" onclick=\"location.href=location.href\">Reset Page<\/button>\n    <\/div>\n    <div class=\"gpx-form-inline\">\n        <div class=\"gpx-form-group\">\n            <label><strong>Min Speed to trigger segment: <\/strong><\/label>\n            <input type=\"number\" name=\"min_speed\" step=\"0.1\" value=\"8\" required>\n            <select name=\"speed_unit\">\n                <option value=\"ms\">m\/s<\/option>\n                <option value=\"kmh\" selected>km\/h<\/option>\n                <option value=\"kn\">n\u0153uds<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"gpx-form-group\">\n            <label><strong>Min Segment lenght to display it:<\/strong><\/label>\n            <input type=\"number\" name=\"min_duration\" value=\"10\" required>\n            <select name=\"duration_unit\">\n                <option value=\"seconds\" selected>secondes<\/option>\n                <option value=\"minutes\">minutes<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"gpx-form-group\">\n            <label><strong>Min Duration to count Max speed: <\/strong><\/label>\n            <input type=\"number\" name=\"vmax_duration\" step=\"1\" value=\"2\" required>\n            <select name=\"vmax_duration_unit\">\n                <option value=\"seconds\" selected>secondes<\/option>\n                <option value=\"minutes\">minutes<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"gpx-form-group\">\n            <label><strong>Foil Used :<\/strong><\/label>\n            <input type=\"text\" name=\"equipment\" value=\"\">\n        <\/div>\n    <\/div>\n<\/form>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":1769,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":""},"class_list":["post-3365","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/pages\/3365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/comments?post=3365"}],"version-history":[{"count":0,"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/pages\/3365\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/pages\/1769"}],"wp:attachment":[{"href":"https:\/\/www.foilenvie.fr\/en\/wp-json\/wp\/v2\/media?parent=3365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}