dobble-algorithm/index.html at main · Lanthanum89/dobble-algorithm · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>My Dobble - Custom Photo Cards</title>
    <meta name="description" content="Create your own Dobble (Spot It!) card deck from your own photos. Installable, works offline.">
    <meta name="theme-color" content="#4338ca">
    <link rel="icon" href="/icons/icon-192.png">
    <link rel="apple-touch-icon" href="/icons/icon-192.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="My Dobble">
</head>
<body>
    <div class="app">
        <header class="app-header">
            <h1>🎯 My Dobble</h1>
            <p>Build your own Spot It! deck from your own photos — no internet required.</p>
        </header>

        <nav class="tabs">
            <button class="tab-btn active" data-view="setup">1. Setup</button>
            <button class="tab-btn" data-view="grid" disabled>2. View Deck</button>
            <button class="tab-btn" data-view="play" disabled>3. Play</button>
        </nav>

        <main>
            <section id="view-setup" class="view active">
                <div class="panel setup-section">
                    <h2><span class="step-num">1</span>Choose your deck size</h2>
                    <div id="sizeOptions" class="size-options"></div>
                </div>

                <div class="panel setup-section">
                    <h2><span class="step-num">2</span>Add your photos</h2>
                    <div id="dropzone" class="dropzone">
                        <div class="big">📸</div>
                        <div><strong>Tap to choose photos</strong> or drag &amp; drop / paste them here</div>
                    </div>
                    <input type="file" id="fileInput" accept="image/*" multiple>
                    <div class="progress-bar-wrap"><div id="progressBar" class="progress-bar"></div></div>
                    <div id="progressText" class="progress-text">0 photos added</div>
                    <div id="photoGrid" class="photo-grid"></div>
                </div>

                <div class="actions">
                    <button id="generateBtn" class="btn" disabled>Generate My Dobble Deck</button>
                    <button id="resetBtn" class="btn danger">Reset Everything</button>
                </div>
            </section>

            <section id="view-grid" class="view">
                <div class="panel">
                    <div id="gridStats" class="stats"></div>
                    <div class="grid-toolbar">
                        <div class="actions" style="margin:0;">
                            <button id="editPhotosBtn" class="btn secondary">Edit Photos</button>
                            <button id="reshuffleLayoutBtn" class="btn secondary">Shuffle Layout</button>
                            <button id="printBtn" class="btn secondary">🖨️ Print Cards</button>
                        </div>
                    </div>
                    <div id="cardsGrid" class="cards-grid"></div>
                </div>
            </section>

            <section id="view-play" class="view">
                <div class="panel">
                    <div class="play-stats">
                        <div class="play-stat"><div class="value" id="playCorrect">0</div><div class="label">Correct</div></div>
                        <div class="play-stat"><div class="value" id="playWrong">0</div><div class="label">Mistakes</div></div>
                        <div class="play-stat"><div class="value" id="playRemaining">0</div><div class="label">Cards Left</div></div>
                    </div>
                    <div class="actions" style="justify-content:center; margin-top:0; margin-bottom:20px;">
                        <button id="newGameBtn" class="btn secondary">New Game</button>
                    </div>
                    <div id="playArea" class="play-area"></div>
                    <div id="winBanner" class="win-banner" style="display:none;"></div>
                </div>
            </section>
        </main>
    </div>

    <div id="installBanner" class="install-banner" style="display:none;">
        <span>Install My Dobble for offline play</span>
        <button id="installBtn" class="btn" style="padding:8px 16px;">Install</button>
        <button id="installDismissBtn" class="btn secondary" style="padding:8px 16px;">✕</button>
    </div>

    <div id="toast"></div>

    <script type="module" src="/src/main.ts"></script>
</body>
</html>