diff --git a/index.html b/index.html
index 404612b..222f869 100644
--- a/index.html
+++ b/index.html
@@ -2,239 +2,339 @@
   <head>
     <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
+    <style type="text/css">
+      input[type='text'][readonly] {
+        background: transparent;
+        color: white;
+        border-collapse: collapse;
+        border: none;
+      }
+    </style>
+
     <script type="text/javascript">
-      function loadLocale(){
-        var commitHash = "b7138ae7f7f7f78da042edc8496d012ad4058334";
-        var sourceUrl = "https://raw.githubusercontent.com/organicmaps/organicmaps/"+commitHash+"/data/sound-strings/"+$("#localeSelect").val()+".json/localize.json";
-        var fancyUrl = "https://github.com/organicmaps/organicmaps/blob/"+commitHash+"/data/sound-strings/"+$("#localeSelect").val()+".json/localize.json"
+      function parseSoundTxt(raw) {
+        var lines = raw.split("\n");
+        var thisSection = "";
+        var out = {};
 
-        $("#sourceUrl").attr("href", fancyUrl).text($("#localeSelect").val()+".json");
+        for (var i=0;i<lines.length;i++) {
+          var line = lines[i];
 
-        $.getJSON(sourceUrl, function(data){
+          var sectionMatch = line.match(/\s+\[(\w+)\]/);
+          var stringMatch = line.match(/\s+([\w\-]+) = (.+)/);
 
-          const distance = [
-            "in_50_meters",
-            "in_100_meters",
-            "in_200_meters",
-            "in_250_meters",
-            "in_300_meters",
-            "in_400_meters",
-            "in_500_meters",
-            "in_600_meters",
-            "in_700_meters",
-            "in_750_meters",
-            "in_800_meters",
-            "in_900_meters",
-            "in_1_kilometer",
-            "in_1_5_kilometers",
-            "in_2_kilometers",
-            "in_2_5_kilometers",
-            "in_3_kilometers",
-            "in_50_feet",
-            "in_100_feet",
-            "in_200_feet",
-            "in_300_feet",
-            "in_400_feet",
-            "in_500_feet",
-            "in_600_feet",
-            "in_700_feet",
-            "in_800_feet",
-            "in_900_feet",
-            "in_1000_feet",
-            "in_1500_feet",
-            "in_2000_feet",
-            "in_2500_feet",
-            "in_3000_feet",
-            "in_3500_feet",
-            "in_4000_feet",
-            "in_4500_feet",
-            "in_5000_feet",
-            "in_1_mile",
-            "in_1_5_miles",
-            "in_2_miles"
-          ];
-
-          const direction = [
-            "take_the_1_exit",
-            "take_the_2_exit",
-            "take_the_3_exit",
-            "take_the_4_exit",
-            "take_the_5_exit",
-            "take_the_6_exit",
-            "take_the_7_exit",
-            "take_the_8_exit",
-            "take_the_9_exit",
-            "take_the_10_exit",
-            "take_the_11_exit",
-            "make_a_slight_right_turn",
-            "make_a_right_turn",
-            "make_a_sharp_right_turn",
-            "enter_the_roundabout",
-            "leave_the_roundabout",
-            "make_a_slight_left_turn",
-            "make_a_left_turn",
-            "make_a_sharp_left_turn",
-            "make_a_u_turn",
-            "go_straight",
-            "exit",
-            "destination"
-          ];
-
-          const nextStreets = [
-            "Main Street",
-            "Highway 99",
-            "Exit 12, Main Street, London",
-          ];
-
-          // dist_direction_onto_street
-          // then
-          // you_have_reached_the_destination
-          // unknown_camera
-
-          $("#out-a").html("");
-          $("#out-b").html("");
-          $("#out-c").html("");
-          $("#out-d").html("");
-          $("#out-e").html("");
-          $("#out-f").html("");
-          $("#out-g").html("");
-
-          var inputPre = "<div class='input-group mb-3'><button type='button' class='playtts btn btn-outline-secondary'>🔊</button><button class='editbutton btn btn-secondary' type='button'>Edit</button><button class='savebutton btn btn-success' style='display: none;' type='button'>Save</button><input class='form-control' disabled='disabled' type='text' value='";
-          var inputPost = "' /></div>";
-
-          $.each(direction, function(i, dir){
-            // can't "you'll arrive" in the present tense
-            if (dir != "destination") {
-              $("#out-a").append(inputPre + data[dir] + inputPost);
+          if (sectionMatch && sectionMatch.length > 1) {
+            thisSection = sectionMatch[1];
+          } else if (stringMatch && stringMatch.length > 2) {
+            if (!out[stringMatch[1]]) {
+              out[stringMatch[1]] = {};
             }
-          });
+            out[stringMatch[1]][thisSection] = stringMatch[2];
+          } else {
+            console.log("no match:", line);
+          }
+        }
 
-          $.each(direction, function(i, dir){
-            // can't "then" past your destination
-            if (dir != "destination") {
-              var nextDir = direction[(i + 1) % direction.length];
-              $("#out-b").append(inputPre + data[dir] + " " + data['then'] + " " + data[nextDir] + inputPost);
-            }
-          });
+        return out;
+      }
 
-          $.each(distance, function(i, dist){
-            var dir = direction[i % direction.length];
-            $("#out-c").append(inputPre + data[dist] + " " + data[dir] + inputPost);
-          });
+      function buildTranStringInput(key, value) {
+        return "<span class='tranString badge text-bg-primary'><input type='text' class='stringTxt' readonly data-key='"+
+          key +
+          "' value='" +
+          value +
+          "'>&nbsp;&nbsp;<button class='editbutton btn btn-xs btn-light' type='button' style='display:none;'>✏️</button><button class='savebutton btn btn-xs btn-success' style='display: none;' type='button'>Save</button></span>";
+      }
 
-          $.each(distance, function(i, dist){
-            var dir = direction[i % direction.length];
-            // can't "then" past your destination
-            if (dir != "destination") {
-              var nextDir = direction[(i + 1) % direction.length];
-              $("#out-d").append(inputPre + data[dist] + " " + data[dir] + " " + data['then'] + " " + data[nextDir] + inputPost);
-            }
-          });
+      function showData(){
+        var locale = $("#localeSelect").val();
+        var data = parseSoundTxt(window.soundTxtRaw)[locale];
 
-          $.each(distance, function(i, dist){
-            var dir = direction[i % direction.length];
-            var nextDir = direction[(i + 1) % direction.length];
-            var ttsFmt = data['dist_direction_onto_street'];
-            var streetDir = data[dir];
-            if (data[dir+"_street"]) {
-              streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
-            }
+        window.originalSoundData = data;
 
-            ttsFmt = ttsFmt.replace("%1$s", data[dist].replace(/[\.。।]/g, "")); // no full stops
-            ttsFmt = ttsFmt.replace("%2$s", streetDir.replace(/[\.。।]/g, "")); // no full stops
-            ttsFmt = ttsFmt.replace("%3$s", nextStreets[(i+1) % nextStreets.length]);
+        const distance = [
+          "in_50_meters",
+          "in_100_meters",
+          "in_200_meters",
+          "in_250_meters",
+          "in_300_meters",
+          "in_400_meters",
+          "in_500_meters",
+          "in_600_meters",
+          "in_700_meters",
+          "in_750_meters",
+          "in_800_meters",
+          "in_900_meters",
+          "in_1_kilometer",
+          "in_1_5_kilometers",
+          "in_2_kilometers",
+          "in_2_5_kilometers",
+          "in_3_kilometers",
+          "in_50_feet",
+          "in_100_feet",
+          "in_200_feet",
+          "in_300_feet",
+          "in_400_feet",
+          "in_500_feet",
+          "in_600_feet",
+          "in_700_feet",
+          "in_800_feet",
+          "in_900_feet",
+          "in_1000_feet",
+          "in_1500_feet",
+          "in_2000_feet",
+          "in_2500_feet",
+          "in_3000_feet",
+          "in_3500_feet",
+          "in_4000_feet",
+          "in_4500_feet",
+          "in_5000_feet",
+          "in_1_mile",
+          "in_1_5_miles",
+          "in_2_miles"
+        ];
 
-            $("#out-e").append(inputPre + ttsFmt + inputPost);
-          });
+        const direction = [
+          "take_the_1_exit",
+          "take_the_2_exit",
+          "take_the_3_exit",
+          "take_the_4_exit",
+          "take_the_5_exit",
+          "take_the_6_exit",
+          "take_the_7_exit",
+          "take_the_8_exit",
+          "take_the_9_exit",
+          "take_the_10_exit",
+          "take_the_11_exit",
+          "make_a_slight_right_turn",
+          "make_a_right_turn",
+          "make_a_sharp_right_turn",
+          "enter_the_roundabout",
+          "leave_the_roundabout",
+          "make_a_slight_left_turn",
+          "make_a_left_turn",
+          "make_a_sharp_left_turn",
+          "make_a_u_turn",
+          "go_straight",
+          "exit",
+          "destination" // exception: shouldn't have a street afterwards
+        ];
 
-          $.each(distance, function(i, dist){
-            var dir = direction[i % direction.length];
-            var nextDir = direction[(i + 1) % direction.length];
-            var ttsFmt = data['dist_direction_onto_street'];
-            var streetDir = data[dir];
-            if (data[dir+"_street"]) {
-              streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
-            }
+        const nextStreets = [
+          "Main Street",
+          "Highway 99",
+          "Exit 12, Main Street, London",
+        ];
 
-            ttsFmt = ttsFmt.replace("%1$s", data[dist].replace(/[\.。।]/g, "")); // no full stops
-            ttsFmt = ttsFmt.replace("%2$s", streetDir.replace(/[\.。।]/g, "")); // no full stops
-            ttsFmt = ttsFmt.replace("%3$s", nextStreets[(i+1) % nextStreets.length]);
+        // dist_direction_onto_street
+        // then
+        // you_have_reached_the_destination
+        // unknown_camera
 
-            $("#out-f").append(inputPre + ttsFmt + " " + data['then'] + " " + data[nextDir] + inputPost);
-          });
+        $("#out-a").html("");
+        $("#out-b").html("");
+        $("#out-c").html("");
+        $("#out-d").html("");
+        $("#out-e").html("");
+        $("#out-f").html("");
+        $("#out-g").html("");
 
-          $("#out-g").append(inputPre + data['you_have_reached_the_destination'] + inputPost);
-          $("#out-g").append(inputPre + data['unknown_camera'] + inputPost);
+        var inputPre = "<div class='input-group mb-3'><button type='button' class='playtts btn btn-outline-secondary'>🔊</button><div class='form-control'>";
+        var inputPost = "</div></div>";
+        var tranStringTtsPre = "<span class='tranString badge text-bg-secondary'>";
 
-          $(".editbutton").click(function(){
-            var sibling = $($(this).siblings(".form-control")[0]);
-            // console.log(sibling);
-            // console.log(sibling.val());
-            sibling.data("orig-value", sibling.val());
-            // console.log(sibling.data("orig-value"));
-            sibling.prop( "disabled", false );
-            sibling.focus();
-            $(this).hide();
-            $(this).siblings(".savebutton").show();
-          });
-          $(".savebutton").click(function(){
-            var changes = [];
-            var thisSaveButton = $(this);
-            var thisSibling = $($(this).siblings(".form-control")[0]);
-            thisSibling.prop( "disabled", true );
-            thisSaveButton.hide();
-            thisSaveButton.siblings(".editbutton").show();
-
-            $("div.output .form-control").each(function(i,o){
-              var sibling = $(o);
-              // console.log("orig",sibling.data("orig-value"));
-              // console.log("val",sibling.val());
-              if (sibling.data("orig-value") && sibling.data("orig-value") != sibling.val()) {
-                // console.log("got",sibling.val());
-                changes.push([sibling.data("orig-value"), sibling.val()]);
-              }
-            });
-
-            if (changes.length > 0){
-              var out = "";
-              var locale = $("#localeSelect").val();
-
-              $.each(changes, function(x,y){
-                // console.log(x,y);
-                out += "-    "+locale+" = "+y[0]+"\n"+
-                       "+    "+locale+" = "+y[1]+"\n"
-              });
-
-              // console.log("writing", out);
-              $("#submitpopup textarea").text("Translation change request:\n```\n"+
-                  "# data/strings/sound.txt\n"+
-                  out+"```"
-                );
-              $("#submitpopup").show();
-            }
-
-          });
-          // $("#closesubmitpopup").click(function(){
-          //   $("#submitpopup").hide();
-          // });
-          $('.copyToClipboard').click(function () {
-              $('#submitpopup textarea').select();
-              document.execCommand('copy');
-              $(this).addClass("btn-success").text("Copied!");
-          });
-
-          $(".playtts").click(function(){
-            var text = $($(this).siblings(".form-control")[0]).val();
-            const msg = new SpeechSynthesisUtterance(
-              text
-            );
-            msg.voice = voices[$("#voiceSelect").val()];
-            synth.speak(msg);
-          });
-          if (window.hideTts) {
-            $(".playtts").hide();
+        $.each(direction, function(i, dir){
+          // can't "you'll arrive" in the present tense
+          if (dir != "destination") {
+            $("#out-a").append(inputPre +
+              buildTranStringInput(dir, data[dir]) +
+              inputPost);
           }
         });
+
+        /*
+
+        $.each(data, function(i, d){
+          $("#out-a").append(i+":"+d+"<br/>");
+        });
+
+
+        $.each(direction, function(i, dir){
+          // can't "then" past your destination
+          if (dir != "destination") {
+            var nextDir = direction[(i + 1) % direction.length];
+            $("#out-b").append(inputPre +
+              tranStringPre + data[dir] + tranStringPost +
+              tranStringPre + data['then'] + tranStringPost +
+              tranStringPre + data[nextDir] + tranStringPost +
+              inputPost);
+          }
+        });
+
+        $.each(distance, function(i, dist){
+          var dir = direction[i % direction.length];
+          $("#out-c").append(inputPre +
+            tranStringPre + data[dist] + tranStringPost +
+            tranStringPre + data[dir] + tranStringPost +
+            inputPost);
+        });
+
+        $.each(distance, function(i, dist){
+          var dir = direction[i % direction.length];
+          // can't "then" past your destination
+          if (dir != "destination") {
+            var nextDir = direction[(i + 1) % direction.length];
+            $("#out-d").append(inputPre +
+              tranStringPre + data[dist] + tranStringPost +
+              tranStringPre + data[dir] + tranStringPost +
+              tranStringPre + data['then'] + tranStringPost +
+              tranStringPre + data[nextDir] + tranStringPost +
+              inputPost);
+          }
+        });
+
+        $.each(distance, function(i, dist){
+          var dir = direction[i % direction.length];
+          var nextDir = direction[(i + 1) % direction.length];
+          var ttsFmt = data['dist_direction_onto_street'];
+          var streetDir = data[dir];
+          if (data[dir+"_street"]) {
+            streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
+          }
+
+          ttsFmt = ttsFmt.replace("%1$s", tranStringPre + data[dist].replace(/[\.。।]/g, "") + tranStringPost); // no full stops
+          ttsFmt = ttsFmt.replace("%2$s", tranStringPre + streetDir.replace(/[\.。।]/g, "") + tranStringPost); // no full stops
+          ttsFmt = ttsFmt.replace("%3$s", tranStringPre + nextStreets[(i+1) % nextStreets.length] + tranStringPost);
+
+          $("#out-e").append(inputPre +
+            tranStringTtsPre + ttsFmt + tranStringPost +
+            inputPost);
+        });
+
+        $.each(distance, function(i, dist){
+          var dir = direction[i % direction.length];
+          var nextDir = direction[(i + 1) % direction.length];
+          var ttsFmt = data['dist_direction_onto_street'];
+          var streetDir = data[dir];
+          if (data[dir+"_street"]) {
+            streetDir = data[dir+"_street"]; // overwrite the direction string if present for street TTS
+          }
+
+          ttsFmt = ttsFmt.replace("%1$s", tranStringPre + data[dist].replace(/[\.。।]/g, "") + tranStringPost); // no full stops
+          ttsFmt = ttsFmt.replace("%2$s", tranStringPre + streetDir.replace(/[\.。।]/g, "") + tranStringPost); // no full stops
+          ttsFmt = ttsFmt.replace("%3$s", tranStringPre + nextStreets[(i+1) % nextStreets.length] + tranStringPost);
+
+          $("#out-f").append(inputPre +
+            tranStringTtsPre + ttsFmt + tranStringPost +
+            tranStringPre + data['then'] + tranStringPost +
+            tranStringPre + data[nextDir] + tranStringPost +
+            inputPost);
+        });
+
+        $("#out-g").append(inputPre +
+          tranStringPre + data['you_have_reached_the_destination'] + tranStringPost +
+          inputPost);
+        $("#out-g").append(inputPre +
+          tranStringPre + data['unknown_camera'] + tranStringPost +
+          inputPost);
+        */
+
+        $(".tranString").hover(function(){
+          let editBtn = $(this).children(".editbutton");
+          console.log(editBtn);
+          if (editBtn.prop("disabled") == false) {
+            editBtn.show(); // only show when not disabled
+          }
+        }, function(){
+          $(this).children(".editbutton").hide();
+        });
+
+        $(".editbutton")
+        .click(function(){
+          $(this).siblings(".stringTxt").prop("readonly",false);
+          $(this).prop("disabled",true).hide();
+          $(this).siblings(".savebutton").show();
+        });
+        $(".savebutton").click(function(){
+          var changes = [];
+
+          $(this).siblings(".stringTxt").prop("readonly",true);
+          $(this).hide();
+          $(this).siblings(".editbutton").prop("disabled",false).show();
+
+          var stringTxt = $(this).siblings(".stringTxt")[0];
+
+          window.originalSoundData[$(stringTxt).data("key")] = $(stringTxt).val();
+
+          $("#submitpopup textarea").text("Translation change request:\n```\n"+
+              "# data/strings/sound.txt\n"+
+              JSON.stringify(window.originalSoundData)+"```"
+            );
+          $("#submitpopup").show();
+
+          /*
+          $("div.output .form-control").each(function(i,o){
+            var sibling = $(o);
+            // console.log("orig",sibling.data("orig-value"));
+            // console.log("val",sibling.val());
+            if (sibling.data("orig-value") && sibling.data("orig-value") != sibling.val()) {
+              // console.log("got",sibling.val());
+              changes.push([sibling.data("orig-value"), sibling.val()]);
+            }
+          });
+
+          if (changes.length > 0){
+            var out = "";
+            var locale = $("#localeSelect").val();
+
+            $.each(changes, function(x,y){
+              // console.log(x,y);
+              out += "-    "+locale+" = "+y[0]+"\n"+
+                     "+    "+locale+" = "+y[1]+"\n"
+            });
+
+            // console.log("writing", out);
+          }
+          */
+
+        });
+        // $("#closesubmitpopup").click(function(){
+        //   $("#submitpopup").hide();
+        // });
+        $('.copyToClipboard').click(function () {
+            $('#submitpopup textarea').select();
+            document.execCommand('copy');
+            $(this).addClass("btn-success").text("Copied!");
+        });
+
+        $(".playtts").click(function(){
+          var text = $($(this).siblings(".form-control")[0]).val();
+          const msg = new SpeechSynthesisUtterance(
+            text
+          );
+          msg.voice = voices[$("#voiceSelect").val()];
+          synth.speak(msg);
+        });
+        if (window.hideTts) {
+          $(".playtts").hide();
+        }
+      }
+
+      function loadLocale(){
+        var commitHash = "b7138ae7f7f7f78da042edc8496d012ad4058334";
+        var sourceUrl = "https://raw.githubusercontent.com/organicmaps/organicmaps/"+commitHash+"/data/strings/sound.txt";
+
+        $("#sourceUrl").attr("href", sourceUrl).text("sound.txt");
+
+        if (!window.soundTxtRaw) {
+          $.get(sourceUrl, function(rawData){
+            window.soundTxtRaw = rawData;
+            showData();
+          });
+        } else {
+          showData();
+        }
       }
     </script>
     <style type="text/css">
@@ -244,6 +344,11 @@
         padding-bottom: 1em;
         border-bottom: 1px dashed;
       }
+      .btn.btn-xs {
+        --bs-btn-padding-y: .25rem;
+        --bs-btn-padding-x: .5rem;
+        --bs-btn-font-size: .5rem;
+      }
     </style>
   </head>
   <body style="padding: 1em;">
@@ -326,7 +431,7 @@
       const synth = window.speechSynthesis;
       var voices;
 
-      $(document).ready(function(){
+      function loadTts(){
         voices = synth.getVoices();
         $.each(voices, function(i, voice){
           $("#voiceSelect").append('<option value="'+i+'" lang="'+voice.lang+'">'+voice.name+'</option>');
@@ -377,17 +482,21 @@
         }
 
         $("#localeSelect").change(function(){
-          params.set('lang', $("#localeSelect").val());
-          document.location.search = params.toString();
+          showData();
+          // params.set('lang', $("#localeSelect").val());
+          // document.location.search = params.toString();
         });
 
         $("#voiceSelect").change(function(){
-          params.set('tts', $("#voiceSelect").val());
-          document.location.search = params.toString();
+          loadTts();
+          // params.set('tts', $("#voiceSelect").val());
+          // document.location.search = params.toString();
         });
 
         loadLocale();
-      });
+      }
+
+      $(document).ready(function(){ loadTts(); });
 
     </script>
   </body>
