Merge pull request #34 from SkwalExe/winmb

add winmb page

assets/css/tailwind.css

@@ -2,13 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
-html { 
+html {
     @apply font-inter md:text-lg break-words;
+    color-scheme: dark;
 }
-body { 
+body {
     background: url(/img/bg.svg) no-repeat center center fixed #1c1c1c;
 }
-#layout-body[theme="midnight-abyss"] {
+#layout-body[theme='midnight-abyss'] {
     --color-primary: 0 0 0;
     --color-secondary: 39 44 56;
     --accent-color: 29 161 146;
@@ -20,17 +21,52 @@ body {
     @apply md:pt-0 pt-16 scroll-smooth;
 }
 
-.box {
-    h1, p { @apply transition-colors duration-700; }
-    h1 { @apply text-xl md:text-2xl font-semibold text-accent/80 md:indent-10 pb-5; }
+h1, h2, h3, h4, h5, h6 {
+    @apply md:indent-16 indent-4;
 }
 
-.box-fancy {
-    h1 { @apply md:text-3xl text-2xl font-semibold pb-5 md:indent-16 text-accent; }
+h1 {
+    @apply md:text-3xl text-2xl font-semibold pb-5 text-accent;
 }
 
-hr { @apply border-accent/80 my-5; }
+h2 {
+    @apply md:text-2xl text-xl font-semibold text-orange-300 pb-4;
+}
+
+hr {
+    @apply border-accent/80 my-5;
+}
+
+input[type='text'] { 
+    @apply bg-black/20 rounded-lg py-2 px-5 outline-none w-full
+    border-[1px] border-white/10;
+}
+
+label {
+    @apply select-none flex gap-3;
+}
+
+.link {
+    @apply text-accent hover:text-opacity-100 
+    text-opacity-80 transition duration-150 cursor-pointer;
+}
+
+.fancy-button-blue {
+    @apply from-accent/80 to-violet-500/80
+    hover:shadow-accent/80 hover:shadow-lg;
+}
+
+.fancy-button-red {
+    @apply from-pink-900/80 to-red-900
+    hover:shadow-red-600/80 hover:shadow-lg;
+}
+
+.fancy-button-yellow {
+    @apply from-orange-800/80 to-yellow-700
+    hover:shadow-yellow-600/80 hover:shadow-lg;
+}
 
-.link { 
-    @apply text-accent hover:text-opacity-100 text-opacity-80 transition duration-150 cursor-pointer;
+.fancy-button-green {
+    @apply from-green-600/80 to-teal-900
+    hover:shadow-green-800 hover:shadow-lg;
 }

components/ButtonFancy.vue

@@ -1,8 +1,22 @@
 <template>
     <div
-        class="text-center text-white inline-flex bg-gradient-to-br from-accent/80 to-violet-500/80 border-white/40 border-[2px] hover:opacity-100 opacity-90 transition duration-300 rounded-md px-7 py-4 cursor-pointer hover:shadow-lg hover:shadow-accent/80">
+        :class="`fancy-button-${type} text-center text-white inline-flex bg-gradient-to-br border-white/40 border-[2px] hover:opacity-100 opacity-90 transition duration-300 rounded-md px-7 py-4 cursor-pointer`">
         <p class="w-full">
             <slot />
         </p>
     </div>
 </template>
+
+<script setup lang="ts">
+const { type } = defineProps({
+    type: {
+        type: String,
+        requird: true,
+        default: 'blue'
+    }
+})
+
+if (!['red', 'blue', 'yellow', 'green'].includes(type)) throw new Error('Invalid fancy button type')
+
+
+</script>

package.json

@@ -17,7 +17,7 @@
         "@nuxtjs/tailwindcss": "^6.11.4",
         "@pinia/nuxt": "^0.5.1",
         "@skwalexe/memz": "^0.1.0",
-        "@skwalexe/winmb": "^0.1.2",
+        "@skwalexe/winmb": "^0.1.3",
         "nuxt": "^3.11.1",
         "nuxt-icon-tw": "^0.1.3",
         "pinia": "^2.1.7",

pages/winmb.vue

@@ -0,0 +1,64 @@
+<template>
+    <BoxFancy>
+        <h1>🪟 WinMB.js</h1>
+        <p>
+            WinMB.js is a library that enables developers to create Windows-style message boxes directly on their
+            websites. This tool provides a way to integrate familiar dialog boxes by mimicking the native Windows
+            interface. You can find this library on GitHub, as well as its documentation.
+        </p>
+        <div class="mt-5">
+            <Lnk :new-tab="true" href="https://github.com/Skwalexe/WinMB.js">
+                <ButtonFancy class="w-full">Github & Documentation</ButtonFancy>
+            </Lnk>
+        </div>
+    </BoxFancy>
+    <BoxFancy>
+        <h1>🎥 Demonstration</h1>
+        <div class="justify-center inline-flex gap-4 flex-wrap">
+            <ButtonFancy type="red" @click="demo('error')">Error message</ButtonFancy>
+            <ButtonFancy @click="demo('info')">Information box</ButtonFancy>
+            <ButtonFancy type="yellow" @click="demo('warning')">Warning box</ButtonFancy>
+        </div>
+        <div class="mt-3">
+            <label for="randomize-position">
+                <input id="randomize-position" v-model="randomPosition" class="accent-teal-500" type="checkbox" />
+                <span>Randomize position</span>
+            </label>
+        </div>
+        <hr />
+        <h2>↩️ Return value</h2>
+        <input v-model="returnValue" type="text" placeholder="Return value" disabled />
+    </BoxFancy>
+</template>
+
+<script setup lang="ts">
+import WinMB from '@skwalexe/winmb'
+import Error from '~/error.vue'
+const returnValue: Ref<string> = ref('')
+
+const randomPosition: Ref<boolean> = ref(false)
+const wmb: Ref<null | WinMB> = ref(null)
+
+const messageBoxes: {[key: string]: string[]} = {
+    "error": ['CRITICAL ERROR', 'This is an error message!'],
+    "info": ['Information', 'This is a notice!'],
+    "warning": ['ATTENTION', 'This is a warning!!!!']
+}
+
+onMounted(() => {
+    wmb.value = new WinMB('https://cdn.jsdelivr.net/gh/SkwalExe/WinMB.js@0.1.2/src/assets/')
+})
+
+const demo = async (boxType: string): Promise<void> => {
+    if (wmb.value === null) throw new Error('wmb is not loaded yet (wmb null)')
+    if (!['error', 'info', 'warning'].includes(boxType)) throw new Error('boxType must be in [error, info, warning]')
+
+    returnValue.value = (await wmb.value.show(
+        messageBoxes[boxType][0], // title
+        messageBoxes[boxType][1], // message
+        boxType,
+        [{text: 'Hello'}, {text: 'World'}],
+        randomPosition.value ? 'random' : 'default'
+    )).toString()
+}
+</script>