update

app/App.svelte

@@ -1,7 +1,7 @@
-<page actionBarHidden="true">
+<page actionBarHidden="true" class="page">
     <stackLayout padding="5">
         <label text="Farhang.im durchsuchen"></label>
-        <textField bind:text="{term}" hint="Deutsch oder persisch" />
+        <textField bind:text="{term}" hint="Hier deutsch oder persisch eingeben" />
         <listView items="{lemmas}" style="height:100%" on:itemTap="{showLemma}">
             <Template let:item>
                 {#if item.id === selectedItem.id}
@@ -31,7 +31,8 @@
     $:  if (term.length > 1) {
         persian = checkPersian(term)
         const normalized = persian ? term.replace(/([\u064B-\u0655])/g, '') : term
-        http.getJSON(`https://api.farhang.im/a/${normalized}`)
+        const uri = encodeURI(`https://api.farhang.im/a/${normalized}`)
+        http.getJSON(uri)
             .then(res => setLemmas(res))
     }
     $: if (term.length === 0) lemmas = []
@@ -40,7 +41,8 @@
     }
     function showLemma (lemma) {
         selectedItem = lemma.view.bindingContext;
-        http.getJSON(`https://api.farhang.im/g/${selectedItem.id}`)
+        const uri = encodeURI(`https://api.farhang.im/g/${selectedItem.id}`)
+        http.getJSON(uri)
             .then(res => {
                 translations = res
                 lemmas = Array.from(lemmas)
@@ -53,20 +55,27 @@
 </script>
 
 <style>
+    page {
+        background-color: black;
+    }
     textField {
-    font-size: 20;
-    color:black;
-    margin: 5;
+        font-size: 20;
+        color:white;
+        placeholder-color: gray;
+        margin: 5;
+    }
+    label {
+        color: white;
     }
     .list-item {
-    font-size: 20;
-    color: black;
-    /* margin-left: 20; */
-    padding-top: 5;
-    padding-bottom: 10;
+        font-size: 20;
+        color: white;
+        /* margin-left: 20; */
+        padding-top: 5;
+        padding-bottom: 10;
     }
     .list-item.active {
-    font-weight: bold;
-    color: black;
+        font-weight: bold;
+        color: white;
     }
 </style>