aboutsummaryrefslogtreecommitdiff
path: root/src/components/HelpModal.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/HelpModal.vue')
-rw-r--r--src/components/HelpModal.vue67
1 files changed, 33 insertions, 34 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 4a6168b..7a18c05 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,5 +1,37 @@
-<script lang="ts">
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
+ <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 p-4" :style="styles">
+ <close-icon @click.stop="onClose" ref="closeIcon"
+ class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
+ <h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
+ <hr class="mb-4 border-stone-400"/>
+ <div class="mb-4">
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore
+ et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.
+ </div>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore
+ et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure
+ dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur
+ sint occaecat cupidatat non proident, sunt
+ in culpa qui officia deserunt mollit anim id
+ est laborum.
+ </div>
+ <s-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
+ Start Tutorial
+ </s-button>
+ </div>
+</div>
+</template>
+<script lang="ts">
import {defineComponent, PropType} from 'vue';
import SButton from './SButton.vue';
import CloseIcon from './icon/CloseIcon.vue';
@@ -33,36 +65,3 @@ export default defineComponent({
emits: ['close', 'start-tutorial', ],
});
</script>
-
-<template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
- <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 p-4" :style="styles">
- <close-icon @click.stop="onClose" ref="closeIcon"
- class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
- <h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
- <hr class="mb-4 border-stone-400"/>
- <div class="mb-4">
- Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
- </div>
- <div>
- Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure
- dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur
- sint occaecat cupidatat non proident, sunt
- in culpa qui officia deserunt mollit anim id
- est laborum.
- </div>
- <s-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
- Start Tutorial
- </s-button>
- </div>
-</div>
-</template>