LimelightCommons/CommonWebComponents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add demo site
All checks were successful
CI / test-and-build (push) Successful in 9m37s
Details

Browse Source
This commit is contained in:
Marc Lorenz
2026-04-16 09:46:52 +02:00
parent 89459caca1
commit 805b553038
6 changed files with 214 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CommonWebComponents — Demo</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1
package.json
View File

@@ -40,6 +40,7 @@
"vue": "^3.5.0" "vue": "^3.5.0"
}, },
"scripts": { "scripts": {
"serve": "vite",
"prepare": "vite build", "prepare": "vite build",
"build": "vite build", "build": "vite build",
"dev": "vite build --watch", "dev": "vite build --watch",

193
src/App.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<div class="page">
<h1 class="title">CommonWebComponents</h1>
<p class="sub">Gaffer Tape Edge Demo — LimelightButton</p>
<!-- Before / After -->
<section class="section">
<p class="section-label">Before / After</p>
<div class="compare">
<div class="compare-box">
<span class="compare-box-label">Before — diagonal cut</span>
<button class="btn-old btn-old--primary">Primary</button>
<button class="btn-old btn-old--danger">Danger</button>
</div>
<div class="compare-box">
<span class="compare-box-label">After — torn tape</span>
<LimelightButton variant="primary">Primary</LimelightButton>
<LimelightButton variant="danger">Danger</LimelightButton>
</div>
</div>
</section>
<!-- All variants -->
<section class="section">
<p class="section-label">All Variants</p>
<div class="row">
<LimelightButton variant="primary">Primary</LimelightButton>
<LimelightButton variant="outline">Outline</LimelightButton>
<LimelightButton variant="ghost">Ghost</LimelightButton>
<LimelightButton variant="danger">Danger</LimelightButton>
<LimelightButton variant="primary" :disabled="true">Disabled</LimelightButton>
</div>
</section>
<!-- Interactive -->
<section class="section">
<p class="section-label">Interactive States</p>
<div class="row">
<LimelightButton variant="primary" @click="count++">
Clicked {{ count }}×
</LimelightButton>
<LimelightButton variant="danger" @click="armed = !armed">
{{ armed ? 'ARMED' : 'Arm' }}
</LimelightButton>
<LimelightButton variant="ghost" @click="live = !live">
{{ live ? 'Go Offline' : 'Go Live' }}
</LimelightButton>
<LimelightButton variant="outline" :disabled="!live">
{{ live ? 'Streaming' : 'Offline' }}
</LimelightButton>
</div>
</section>
<!-- Production board -->
<section class="section">
<p class="section-label">Production Board</p>
<div class="board">
<div v-for="ch in channels" :key="ch.name" class="board-row">
<span class="board-row-label">{{ ch.id }}</span>
<span class="board-chip" :class="ch.hot ? 'board-chip--hot' : ''">{{ ch.name }}</span>
<LimelightButton variant="ghost" class="btn-sm">Arm</LimelightButton>
<LimelightButton :variant="ch.muted ? 'danger' : 'outline'" class="btn-sm" @click="ch.muted = !ch.muted">
{{ ch.muted ? 'Muted' : 'Mute' }}
</LimelightButton>
</div>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import LimelightButton from './components/LimelightButton.vue'
const count = ref(0)
const armed = ref(false)
const live = ref(false)
const channels = reactive([
{ id: 'CH 01', name: 'Kick In', hot: false, muted: false },
{ id: 'CH 02', name: 'Kick Out', hot: false, muted: false },
{ id: 'CH 12', name: 'Vox Lead', hot: true, muted: false },
{ id: 'CH 16', name: 'DI Bass', hot: false, muted: true },
])
</script>
<style>
@reference "tailwindcss";
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0f0f0f;
color: #d0d0d0;
font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
min-height: 100vh;
padding: 3rem 2rem;
}
.title {
color: var(--color-primary);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.sub {
color: #3a3a3a;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 3rem;
}
.section { margin-bottom: 3rem; }
.section-label {
color: #3a3a3a;
font-size: 0.62rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 1rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid #1a1a1a;
}
.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
/* Before/after */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 560px; }
.compare-box {
background: #141414;
border: 1px solid #1e1e1e;
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.compare-box-label { color: #333; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.btn-old {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5rem;
height: 2.5rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border: none;
cursor: pointer;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-old--primary { background: var(--color-primary); color: var(--color-black); }
.btn-old--danger { background: var(--color-red); color: #fff; }
/* Board */
.board {
background: #111;
border: 1px solid #1a1a1a;
padding: 1.5rem;
max-width: 520px;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.board-row { display: flex; align-items: center; gap: 0.75rem; }
.board-row-label {
color: #2e2e2e;
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
width: 60px;
flex-shrink: 0;
}
.board-chip {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.75rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: #1a1a1a;
color: #444;
min-width: 90px;
}
.board-chip--hot { background: #2a2800; color: var(--color-primary); }
.btn-sm { font-size: 0.65rem !important; }
</style>

1
src/env.d.ts vendored
View File

@@ -1 +1,2 @@
/// <reference path="./utils/filemaker.d.ts" /> /// <reference path="./utils/filemaker.d.ts" />
/// <reference types="vite/client" />

5
src/main.ts Normal file
View File

@@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
createApp(App).mount('#app')

2
src/style.css Normal file
View File

@@ -0,0 +1,2 @@
@import "tailwindcss";
@import "../theme.css";