125 lines
4.1 KiB
HTML
125 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>🥦 Légume</title>
|
|
<link href="https://fonts.cdnfonts.com/css/hey-kids" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="material-colors.css" />
|
|
<script src="https://unpkg.com/lucide@0"></script>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module" src="main.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta property="og:title" content="🥦 Légume">
|
|
<meta property="og:description" content="🧅 VJ Table Generator 🥕">
|
|
<meta property="org:url" content="https://legume.klemek.fr">
|
|
</head>
|
|
|
|
<body>
|
|
<main id="app" style="display: none">
|
|
<h1>
|
|
{{vegetable}} Légume
|
|
</h1>
|
|
<table class="config">
|
|
<colgroup>
|
|
<col style="width: 25%">
|
|
<col>
|
|
<col style="width: 25%">
|
|
</colgroup>
|
|
<tr>
|
|
<td><label for="start-time">Start time:</label></td>
|
|
<td><input v-model="config.startTime" id="start-time" type="time" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="end-time">End time:</label></td>
|
|
<td><input v-model="config.endTime" id="end-time" type="time" /></td>
|
|
<td>Total: {{getTime(totalDuration)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="duration">Slot duration:</label></td>
|
|
<td><input v-model="config.duration" id="duration" type="range" min="5" v-bind:max="totalDuration" step="5" />
|
|
</td>
|
|
<td>
|
|
<span v-if="slotTooBig" title="slot duration might be too big">
|
|
<i icon="triangle-alert"></i> {{config.duration}} minutes
|
|
</span>
|
|
<span v-else>
|
|
{{config.duration}} minutes
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="seed">Seed:</label></td>
|
|
<td><input v-model="config.seed" type="number" /></td>
|
|
<td><button @click="newSeed"><i icon="dices"></i></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="mix">Mix policy:</label></td>
|
|
<td><input v-model="config.mix" id="mix" type="range" min="0" max="100" /></td>
|
|
<td>
|
|
<span v-if="config.mix <= 0">None</span>
|
|
<span v-else>~{{config.mix}}%</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="candidates">Candidates:</label></td>
|
|
<td><textarea v-model="config.candidates" id="candidates" rows="8"></textarea></td>
|
|
<td>
|
|
<button @click="newVegetables"><i icon="dices"></i></button>
|
|
<br />
|
|
<span v-if="candidates.length <= 2" title="not enough candidates">
|
|
<i icon="triangle-alert"></i> <i icon="users-round"></i> {{candidates.length}}
|
|
</span>
|
|
<span v-else>
|
|
<i icon="users-round"></i> {{candidates.length}}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<button class="full" title="Ends event with all candidates (aka salad)"
|
|
@click="config.endWithAll = !config.endWithAll">🥗 With salad: {{
|
|
config.endWithAll ? '✅' : '❌' }}</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<template v-if="table.length">
|
|
<h2>{{vegetable2}} Output (Vege)Table</h2>
|
|
<table id="output" class="output">
|
|
<colgroup>
|
|
<col style="width: 25%">
|
|
<col>
|
|
</colgroup>
|
|
<tr v-for="row in table">
|
|
<td v-for="item in row">{{item}}</td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
<p>
|
|
<button @click="copyTable">
|
|
<i icon="table"></i>
|
|
<span v-if="copyTableOverride">{{copyTableOverride}}</span>
|
|
<span v-else>Copy table</span>
|
|
</button>
|
|
</p>
|
|
</template>
|
|
<h2 v-else>Add more vegetables !</h2>
|
|
<small class="footer">
|
|
<i icon="at-sign"></i> <a href="https://github.com/klemek" target="_blank">klemek</a>
|
|
-
|
|
<i icon="github"></i> <a href="https://github.com/klemek/legume" target="_blank">Repository</a>
|
|
- 2025
|
|
</small>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|