rpg-dices/index.html

123 lines
5.2 KiB
HTML
Raw Permalink Normal View History

2024-05-03 19:45:07 +02:00
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
2024-05-05 18:48:54 +02:00
<title>Role Playing Game Dices</title>
<meta name="application-name" content="Role Playing Game Dices">
2024-05-06 18:29:08 +02:00
<meta name="application-version" content="v0.2.2">
2024-05-05 08:02:29 +02:00
2024-05-03 19:45:07 +02:00
<meta name="viewport" content="width=device-width,initial-scale=1">
2024-05-05 08:02:29 +02:00
<meta name="theme-color" content="#ffffff" />
<meta name="apple-mobile-web-app-status-bar" content="#ffffff" />
2024-05-05 18:48:54 +02:00
<link rel="icon" type="image/x-icon" href="assets/icons/icon.svg">
2024-05-05 08:02:29 +02:00
<link rel="apple-touch-icon" href="assets/icons/icon-72x72.png" />
<link rel="apple-touch-icon" href="assets/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="assets/icons/icon-128x128.png" />
<link rel="apple-touch-icon" href="assets/icons/icon-144x144.png" />
<link rel="apple-touch-icon" href="assets/icons/icon-152x152.png" />
<link rel="apple-touch-icon" href="assets/icons/icon-192x192.png" />
<link rel="apple-touch-icon" href="assets/icons/icon-384x384.png" />
<link rel="apple-touch-icon" href="assets/icons/icon-512x512.png" />
<link rel="manifest" href="manifest.json" />
2024-05-03 19:45:07 +02:00
<link rel="stylesheet" href="style.css">
2024-05-05 08:02:29 +02:00
2024-05-04 22:06:19 +02:00
<script src="js/libs/moment.js"></script>
2024-05-05 08:02:29 +02:00
2024-05-03 19:45:07 +02:00
<script src="js/libs/sidebar/sidebar.js"></script>
<link href="js/libs/sidebar/sidebar.css" type="text/css" rel="stylesheet" />
2024-05-05 08:02:29 +02:00
2024-05-03 19:45:07 +02:00
<body>
<label id="sidebar-toggle" class="sidebar-toggle" for="sidebar-toggle-input"><img src="./assets/menu.svg"></label>
<input id="sidebar-toggle-input" type="checkbox" role="button">
<div id="sidebar">
<label id="sidebar-toggle-close" class="sidebar-toggle text-fresh float-right" for="sidebar-toggle-input"><img
src="./assets/close.svg"></label>
<ul class="menu">
<li onclick="resetDices()"><img src="./assets/dices.svg"> Reset Dices</li>
<li onclick="clearHistory()"><img src="./assets/history.svg"> Clear History</li>
<li onclick="exportData()"><img src="./assets/export.svg"> Export Data</li>
<li><label><img src="./assets/import.svg"> Import Data
<input id="importFile" type="file" accept="application/json" />
</label>
</li>
</ul>
<ul class="menu">
2024-05-04 22:06:19 +02:00
<li onclick="toggleDarkMode()"><img id="dark-mode-icon" src="./assets/dark.svg"><span
id="dark-mode-text">Dark Mode</span></li>
2024-05-03 19:45:07 +02:00
</ul>
2024-05-06 18:29:08 +02:00
<ul class="menu">
<li onclick="clearAndRefresh()"><img id="dark-mode-icon" src="./assets/update.svg"><span>Try to Update</span></li>
</ul>
2024-05-03 19:45:07 +02:00
<script>
Sidebar();
</script>
</div>
<div class="container">
<div class="dices-container">
<div class="dices" id="dices"></div>
2024-05-05 18:48:54 +02:00
<div class="form-container">
<div class="actions">
<button id="roll-add-button" onclick="addSelected()"><img src="./assets/add.svg"> Add
Selected</button>
<button id="roll-button" onclick="rollSelected()"><img src="./assets/roll.svg"> Roll
Selected</button>
</div>
</div>
</div>
<div class="history-container">
<div class="actions">
2024-05-06 18:29:08 +02:00
<button id="history-undo-button" onclick="undo()"><img src="./assets/undo.svg"></button>
2024-05-05 18:48:54 +02:00
<button id="history-button" onclick="clearHistory()"><img src="./assets/history.svg"> Clear
History</button>
2024-05-06 18:29:08 +02:00
<button id="history-redo-button" onclick="redo()"><img src="./assets/redo.svg"></button>
2024-05-05 18:48:54 +02:00
</div>
2024-05-06 18:29:08 +02:00
<div class="history" id="history"></div>
2024-05-04 22:06:19 +02:00
<div class="form-container">
2024-05-05 18:48:54 +02:00
<div class="form">
<input type="text" id="inputText" placeholder="1D6+1 + 2W4">
</div>
<div class="actions">
2024-05-05 18:56:02 +02:00
<button onclick="addDicesText()"><img src="./assets/plus.svg"> New Dices</button>
2024-05-05 18:48:54 +02:00
<button onclick="rollText()"><img src="./assets/roll.svg"> Roll</button>
</div>
2024-05-04 22:06:19 +02:00
<div class="form">
<input min="1" value="1" type="number" id="inputCount">
D
<select value="6" id="inputSides" onchange="updateCustom()">
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
<option>12</option>
<option>20</option>
<option>100</option>
<option value="">custom</option>
</select>
<input class="hidden" min="2" value="2" type="number" id="inputCustom">
+
<input value="0" type="number" id="inputAddition">
&nbsp;
<input type="color" id="inputColor">
</div>
<div class="actions">
2024-05-05 18:56:02 +02:00
<button onclick="addDiceForm()"><img src="./assets/plus.svg"> New Dice</button>
2024-05-04 22:06:19 +02:00
<button onclick="rollForm()"><img src="./assets/roll.svg"> Roll</button>
</div>
2024-05-03 19:45:07 +02:00
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>