diff --git a/README.md b/README.md
index 33895ab..6b52678 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,62 @@
-# Vue 3 + TypeScript + Vite
+# OBS Overlay Widget
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
-
-
+
-
diff --git a/src/components/config/ClockConfig.vue b/src/components/config/ClockConfig.vue
new file mode 100644
index 0000000..da5be1a
--- /dev/null
+++ b/src/components/config/ClockConfig.vue
@@ -0,0 +1,224 @@
+
+
+
Clock Widget Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text Style
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Color Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Effects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modern
+ Neon
+ Elegant
+ Minimal
+
+
+
+
+
+
+
+
+
diff --git a/src/components/config/DateConfig.vue b/src/components/config/DateConfig.vue
new file mode 100644
index 0000000..a9ee736
--- /dev/null
+++ b/src/components/config/DateConfig.vue
@@ -0,0 +1,225 @@
+
+
+
Date Widget Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text Style
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Color Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Effects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modern
+ Elegant
+ Casual
+ Minimal
+
+
+
+
+
+
+
+
+
diff --git a/src/components/config/ImageConfig.vue b/src/components/config/ImageConfig.vue
new file mode 100644
index 0000000..112ac7d
--- /dev/null
+++ b/src/components/config/ImageConfig.vue
@@ -0,0 +1,175 @@
+
+
+
Image Widget Settings
+
+
+
+
+
+
+
+
![Preview]()
+
+
+
Text Widget Settings
+
+
+
+
+
+
+ Text Style
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Color Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Effects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modern
+ Neon
+ Retro
+ Minimal
+
+
+
+
+
+
+
+
+
diff --git a/src/main.ts b/src/main.ts
index 2425c0f..4b1bdff 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,12 @@
import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import router from './router'
import './style.css'
import App from './App.vue'
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(ElementPlus)
+app.use(router)
+app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..769cc89
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+const router = createRouter({
+ history: createWebHistory(),
+ routes: [
+ {
+ path: '/',
+ name: 'HomeView',
+ component: () => import('../views/HomeView.vue')
+ },
+ {
+ path: '/config',
+ name: 'ConfigView',
+ component: () => import('../views/ConfigView.vue')
+ },
+ {
+ path: '/preview',
+ name: 'PreviewView',
+ component: () => import('../views/PreviewView.vue')
+ }
+ ]
+});
+
+export default router;
diff --git a/src/style.css b/src/style.css
index f691315..f7fe674 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,7 +5,7 @@
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
+ background-color: transparent;
font-synthesis: none;
text-rendering: optimizeLegibility;
@@ -13,38 +13,24 @@
-moz-osx-font-smoothing: grayscale;
}
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
body {
margin: 0;
- display: flex;
- place-items: center;
+ padding: 0;
min-width: 320px;
min-height: 100vh;
+ background-color: transparent;
}
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
+/* Preview mode specific styles */
+.preview-view {
+ background-color: transparent !important;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: transparent;
+ }
}
button:hover {
border-color: #646cff;
diff --git a/src/utils/configUtils.ts b/src/utils/configUtils.ts
new file mode 100644
index 0000000..47001ef
--- /dev/null
+++ b/src/utils/configUtils.ts
@@ -0,0 +1,28 @@
+/**
+ * Utility functions for encoding and decoding widget configurations in URL
+ */
+
+/**
+ * Encodes widget configuration for URL sharing
+ * @param config The configuration object to encode
+ * @returns Encoded string for URL
+ */
+export const encodeConfig = (config: any): string => {
+ const jsonString = JSON.stringify(config);
+ return btoa(encodeURIComponent(jsonString));
+};
+
+/**
+ * Decodes widget configuration from URL parameter
+ * @param encodedString The encoded configuration string from URL
+ * @returns Decoded configuration object
+ */
+export const decodeConfig = (encodedString: string): any => {
+ try {
+ const jsonString = decodeURIComponent(atob(encodedString));
+ return JSON.parse(jsonString);
+ } catch (e) {
+ console.error('Failed to decode configuration', e);
+ throw new Error('Invalid configuration format');
+ }
+};
diff --git a/src/views/ConfigView.vue b/src/views/ConfigView.vue
new file mode 100644
index 0000000..ce28574
--- /dev/null
+++ b/src/views/ConfigView.vue
@@ -0,0 +1,248 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Configure Widgets
+
+ Design and customize widgets for your OBS streams with an interactive interface
+
+
+
+
+
+
+
+
Documentation
+
+ Learn how to use and integrate OBS Overlay Widgets into your streams
+
+
+
+
+
+
Available Widgets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/widgets/ClockWidget-new.vue b/src/widgets/ClockWidget-new.vue
new file mode 100644
index 0000000..44bc4ef
--- /dev/null
+++ b/src/widgets/ClockWidget-new.vue
@@ -0,0 +1,120 @@
+
+
+ {{ currentTime }}
+
+
+
+
+
+
diff --git a/src/widgets/ClockWidget.vue b/src/widgets/ClockWidget.vue
new file mode 100644
index 0000000..44bc4ef
--- /dev/null
+++ b/src/widgets/ClockWidget.vue
@@ -0,0 +1,120 @@
+
+
+ {{ currentTime }}
+
+
+
+
+
+
diff --git a/src/widgets/DateWidget.vue b/src/widgets/DateWidget.vue
new file mode 100644
index 0000000..b91d988
--- /dev/null
+++ b/src/widgets/DateWidget.vue
@@ -0,0 +1,130 @@
+
+
+ {{ currentDate }}
+
+
+
+
+
+
diff --git a/src/widgets/ImageWidget.vue b/src/widgets/ImageWidget.vue
new file mode 100644
index 0000000..7643ae4
--- /dev/null
+++ b/src/widgets/ImageWidget.vue
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
diff --git a/src/widgets/TextWidget.vue b/src/widgets/TextWidget.vue
new file mode 100644
index 0000000..f54ad12
--- /dev/null
+++ b/src/widgets/TextWidget.vue
@@ -0,0 +1,77 @@
+
+
+ {{ config.text }}
+
+
+
+
+
+
-
-
- 
-
-