|
|
|
@ -18,12 +18,13 @@ |
|
|
|
|
|
|
|
<body class="bg-gray-50 dark:bg-neutral-800"> |
|
|
|
<div id="app"> |
|
|
|
<div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0 mt-6"> |
|
|
|
<div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0 mt-4 xs:mt-6"> |
|
|
|
<div v-if="authenticated === true"> |
|
|
|
<div class="flex flex-row flex-auto items-center items-end gap-3"> |
|
|
|
<h1 class="text-4xl dark:text-neutral-200 font-medium flex-grow mb-4"> |
|
|
|
<div class="flex flex-col-reverse xxs:flex-row flex-auto items-center items-end gap-3"> |
|
|
|
<h1 class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4"> |
|
|
|
<img src="./img/logo.png" width="32" class="inline align-middle dark:bg mr-2" /><span class="align-middle">WireGuard</span> |
|
|
|
</h1> |
|
|
|
<div class="flex items-center grow-0 gap-3 items-end self-end xxs:self-center"> |
|
|
|
<!-- Dark / light theme --> |
|
|
|
<button @click="toggleTheme" |
|
|
|
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition" :title="$t(`theme.${uiTheme}`)"> |
|
|
|
@ -47,7 +48,7 @@ |
|
|
|
</svg> |
|
|
|
</button> |
|
|
|
<!-- Show / hide charts --> |
|
|
|
<label v-if="uiChartType > 0" class="inline-flex items-center justify-center cursor-pointer w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition group" :title="$t('toggleCharts')"> |
|
|
|
<label v-if="uiChartType > 0" class="inline-flex items-center justify-center cursor-pointer w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 whitespace-nowrap transition group" :title="$t('toggleCharts')"> |
|
|
|
<input type="checkbox" value="" class="sr-only peer" v-model="uiShowCharts" @change="toggleCharts"> |
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" fill="currentColor" |
|
|
|
class="w-5 h-5 peer fill-gray-400 peer-checked:fill-gray-600 dark:fill-neutral-600 peer-checked:dark:fill-neutral-400 group-hover:dark:fill-neutral-500 transition"> |
|
|
|
@ -65,6 +66,7 @@ |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="text-sm text-gray-400 dark:text-neutral-400 mb-5"></div> |
|
|
|
<div v-if="latestRelease" |
|
|
|
class="bg-red-800 dark:bg-red-100 p-4 text-white dark:text-red-600 text-sm font-small mb-10 rounded-md shadow-lg" |
|
|
|
|
Sergei Birukov
1 year ago