TaleRoll/index.html at main · Lul/TaleRoll · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaleRoll</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
</head>
<body class="bg-gray-900 p-4 min-h-screen">
    <div class="max-w-6xl mx-auto">
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <h1 class="text-3xl md:text-4xl font-bold text-center mb-6 text-white">TaleRoll</h1>

            <!-- Static "Roll:" text with dynamic roll result -->
            <div class="flex items-center">
                <h2 class="text-white mr-2">Roll:</h2>
                <span id="roll-display" class="text-white font-bold"></span> <!-- Updated roll result here -->
            </div>

            <!-- Dice Section -->
            <div class="mb-8">
                <h2 class="text-xl md:text-2xl font-semibold mb-4 text-white">Dice</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-2">
                    <button onclick="addDice(4)" class="cursor-pointer bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded text-sm md:text-base">Add D4</button>
                    <button onclick="addDice(6)" class="cursor-pointer bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded text-sm md:text-base">Add D6</button>
                    <button onclick="addDice(8)" class="cursor-pointer bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded text-sm md:text-base">Add D8</button>
                    <button onclick="addDice(10)" class="cursor-pointer bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded text-sm md:text-base">Add D10</button>
                    <button onclick="addDice(12)" class="cursor-pointer bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded text-sm md:text-base">Add D12</button>
                    <button onclick="addDice(20)" class="cursor-pointer bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded text-sm md:text-base">Add D20</button>
                    <button onclick="addDice(100)" class="cursor-pointer bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded text-sm md:text-base">Add D100</button>
                </div>
            </div>

            <!-- Modifiers Section -->
            <div class="mb-8">
                <h2 class="text-xl md:text-2xl font-semibold mb-4 text-white">Modifiers</h2>

                <label class="inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="negativeToggle" class="sr-only peer">
                    <div class="relative w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-700"></div>
                    <span class="ms-3 text-sm font-medium text-white">Negative</span>
                </label>

                <div id="modifiers-container" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-9 gap-2">
                    <button onclick="addModifier(1)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +1</button>
                    <button onclick="addModifier(2)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +2</button>
                    <button onclick="addModifier(3)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +3</button>
                    <button onclick="addModifier(4)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +4</button>
                    <button onclick="addModifier(5)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +5</button>
                    <button onclick="addModifier(6)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +6</button>
                    <button onclick="addModifier(7)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +7</button>
                    <button onclick="addModifier(8)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +8</button>
                    <button onclick="addModifier(9)" class="modifier-btn bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded text-sm cursor-pointer md:text-base">Add +9</button>
                </div>
            </div>

            <!-- Custom Throws Section -->
            <div class="mb-8">
                <h2 class="text-xl md:text-2xl font-semibold mb-4 text-white">Saved Throws</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-2" id="custom">

                </div>
            </div>

            <!-- Save Throw Section Modal-->
            <div id="popup-modal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-gray-900 bg-opacity-50">
                <div class="relative p-4 w-full max-w-md max-h-full mx-auto mt-16">
                    <div class="relative bg-gray-800 rounded-xl shadow-lg border border-gray-700">
                        <button type="button" class="absolute top-4 end-4 text-gray-400 bg-transparent hover:bg-gray-700 hover:text-gray-100 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center transition-colors duration-200" data-modal-hide="popup-modal">
                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                            </svg>
                            <span class="sr-only">Close modal</span>
                        </button>
                        <div class="p-6 md:p-8 text-center">
                            <svg class="mx-auto mb-6 text-gray-300 w-14 h-14" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                            </svg>
                            <h3 class="mb-6 text-xl font-semibold text-gray-300">Are you sure you want to save this throw?</h3>
                            <div class="mb-6 space-y-4">
                                <label class="block text-sm font-medium text-gray-300 mb-2">Enter a name for the throw:</label>
                                <input type="text" id="throw-name" class="w-full px-4 py-2 border border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-700 text-white transition-colors duration-200" required>
                            </div>
                            <div class="flex flex-col sm:flex-row justify-center gap-3">
                                <button data-modal-hide="popup-modal" onclick="saveThrow()" type="button" class="text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm px-6 py-3 text-center transition-colors duration-200">
                                    Yes, save throw
                                </button>
                                <button data-modal-hide="popup-modal" type="button" class="py-3 px-6 text-sm font-medium text-gray-300 focus:outline-none bg-gray-700 rounded-lg border border-gray-600 hover:bg-gray-600 hover:text-white focus:z-10 focus:ring-4 focus:ring-gray-700 transition-colors duration-200">
                                    Cancel
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Generate URL Section -->
            <div class="text-center">
                <button onclick="Roll()" class="bg-purple-700 hover:bg-purple-800 text-white font-bold py-3 px-6 rounded text-lg cursor-pointer md:text-xl">Roll Dice</button>
                <button data-modal-target="popup-modal" data-modal-toggle="popup-modal" onclick="setDefaultName()" class="bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2 px-6 rounded cursor-pointer text-md md:text-lg">Save Throw</button>
            </div>
        </div>
    </div>

<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
</body>
</html>