Put things inside a template

dtinth · Apr 3, 2020 · 57e5d33 · 57e5d33
1 parent b0bebf5
commit 57e5d33
Showing 1 changed file with 63 additions and 57 deletions.
diff --git a/options.html b/options.html
@@ -7,66 +7,72 @@
     </style>
   </head>
   <body class="bg-353433 text-e9e8e7 p-8 text-base">
-    <h1 class="text-8b8685 text-4xl">
-      vx options
-    </h1>
-    <div class="max-w-lg" id="app">
-      <div class="flex items-center mt-6">
-        <div class="w-1/3">
-          <label
-            class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
-            for="first_language"
-          >
-            First language
-          </label>
-        </div>
-        <div class="w-2/3">
-          <input
-            class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
-            id="first_language"
-            type="text"
-            placeholder="Enter second language"
-            v-model="settings.language1"
-          />
-        </div>
-      </div>
+    <div id="app">
+      <h1 class="text-8b8685 text-4xl">
+        vx options
+      </h1>
+      <template v-if="true">
+        <div class="max-w-lg">
+          <h2 class="text-2xl text-bbeeff mt-6 mb-4">Language settings</h2>
 
-      <div class="flex items-center mt-4">
-        <div class="w-1/3">
-          <label
-            class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
-            for="second_language"
-          >
-            Second language
-          </label>
-        </div>
-        <div class="w-2/3">
-          <input
-            class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
-            id="second_language"
-            type="text"
-            placeholder="Enter second language"
-            v-model="settings.language2"
-          />
-        </div>
-      </div>
+          <div class="flex items-center mb-4">
+            <div class="w-1/3">
+              <label
+                class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
+                for="first_language"
+              >
+                First language
+              </label>
+            </div>
+            <div class="w-2/3">
+              <input
+                class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
+                id="first_language"
+                type="text"
+                placeholder="Enter second language"
+                v-model="settings.language1"
+              />
+            </div>
+          </div>
 
-      <div class="flex items-center mt-4">
-        <div class="w-1/3"></div>
-        <div>
-          <button
-            @click="save"
-            class="shadow text-090807 focus:shadow-outline focus:outline-none font-bold py-2 px-4 rounded"
-            :class="[changed ? 'bg-d7fc70' : 'bg-8b8685']"
-            type="button"
-          >
-            Save
-          </button>
-        </div>
-        <div class="ml-4">
-          {{status}}
+          <div class="flex items-center mb-4">
+            <div class="w-1/3">
+              <label
+                class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
+                for="second_language"
+              >
+                Second language
+              </label>
+            </div>
+            <div class="w-2/3">
+              <input
+                class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
+                id="second_language"
+                type="text"
+                placeholder="Enter second language"
+                v-model="settings.language2"
+              />
+            </div>
+          </div>
+
+          <div class="flex items-center mb-4">
+            <div class="w-1/3"></div>
+            <div>
+              <button
+                @click="save"
+                class="shadow text-090807 focus:shadow-outline focus:outline-none font-bold py-2 px-4 rounded"
+                :class="[changed ? 'bg-d7fc70' : 'bg-8b8685']"
+                type="button"
+              >
+                Save
+              </button>
+            </div>
+            <div class="ml-4">
+              {{status}}
+            </div>
+          </div>
         </div>
-      </div>
+      </template>
     </div>
 
     <script src="vendor/vue-2.6.11.js"></script>