LinkedinSolver/index.html at main · MaxwellMetzner/LinkedinSolver · 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free solvers for LinkedIn's daily games: Zip, Tango, Queens, Patches, and Mini Sudoku. Enter your puzzle, solve instantly, and play smarter.">
    <meta property="og:title" content="LinkedIn Game Solvers | Zip, Tango, Queens, Patches, Mini Sudoku">
    <meta property="og:description" content="Free solvers for LinkedIn's daily games: Zip, Tango, Queens, Patches, and Mini Sudoku. Enter your puzzle, solve instantly, and play smarter.">
    <meta property="og:url" content="https://maxwellmetzner.github.io/LinkedinSolver/">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary">
    <title>LinkedIn Game Solvers | Zip, Tango, Queens, Patches, Mini Sudoku</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='18' fill='%230a66c2'/%3E%3Ctext x='50' y='62' font-size='42' font-family='Arial,sans-serif' text-anchor='middle' fill='white'%3ELS%3C/text%3E%3C/svg%3E">
</head>
<body>
    <header>
        <div class="header-container">
            <a href="#" class="logo">
                <span class="logo-text">LinkedIn Game Solvers</span>
            </a>

            <nav aria-label="Game selector" role="tablist">
                <button id="tab-zip" class="tab-button active" data-tab="zip" role="tab" aria-controls="zip-solver" aria-selected="true">
                    <span>Zip</span>
                </button>
                <button id="tab-tango" class="tab-button" data-tab="tango" role="tab" aria-controls="tango-solver" aria-selected="false">
                    <span>Tango</span>
                </button>
                <button id="tab-queens" class="tab-button" data-tab="queens" role="tab" aria-controls="queens-solver" aria-selected="false">
                    <span>Queens</span>
                </button>
                <button id="tab-patches" class="tab-button" data-tab="patches" role="tab" aria-controls="patches-solver" aria-selected="false">
                    <span>Patches</span>
                </button>
                <button id="tab-mini" class="tab-button" data-tab="mini" role="tab" aria-controls="mini-solver" aria-selected="false">
                    <span>Mini Sudoku</span>
                </button>
            </nav>

            <div class="header-actions">
                <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle theme">
                    <div class="theme-toggle-track">
                        <span>☀️</span>
                        <span>🌙</span>
                    </div>
                    <div class="theme-toggle-thumb"></div>
                </button>
            </div>
        </div>
    </header>

    <main>
        <!-- Zip Solver -->
        <div id="zip-solver" class="game-solver active" role="tabpanel" aria-labelledby="tab-zip">
            <div class="solver-card">
                <div class="solver-header">
                    <h2 class="solver-title">
                        Zip Solver
                    </h2>
                    <a href="https://www.linkedin.com/games/zip/" target="_blank" rel="noopener noreferrer" class="play-link">
                        Play on LinkedIn
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
                <div class="solver-body">
                    <div class="solver-layout">
                        <div class="controls-panel">
                            <div class="control-group">
                                <label for="zip-grid-size-slider">
                                    Grid Size: <span id="zip-grid-size-label" class="size-label">6×6</span>
                                </label>
                                <input type="range" id="zip-grid-size-slider" min="5" max="10" value="6">
                            </div>
                            <div class="button-group">
                                <button id="zip-clear-button" class="btn-secondary">Clear</button>
                                <button id="zip-solve-button" class="btn-primary">Solve</button>
                            </div>
                        </div>
                        <div class="grid-panel">
                            <div class="grid-container" id="zip-grid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="instructions">
                <div class="instructions-header">
                    <span class="instructions-icon" aria-hidden="true">i</span>
                    <h3>How to Use</h3>
                </div>
                <ol>
                    <li>Adjust the grid size using the slider (5×5 to 10×10).</li>
                    <li>Click on cells to select points in order. These will be numbered.</li>
                    <li>Right-click near a cell edge to place a block preventing the path from crossing. Right-click again to remove.</li>
                    <li>Click <strong>Solve</strong> to find the path. The solution will be highlighted with numbered steps.</li>
                    <li>Click <strong>Clear</strong> to reset the grid.</li>
                </ol>
            </div>
        </div>

        <!-- Tango Solver -->
        <div id="tango-solver" class="game-solver" role="tabpanel" aria-labelledby="tab-tango">
            <div class="solver-card">
                <div class="solver-header">
                    <h2 class="solver-title">
                        Tango Solver
                    </h2>
                    <a href="https://www.linkedin.com/games/tango/" target="_blank" rel="noopener noreferrer" class="play-link">
                        Play on LinkedIn
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
                <div class="solver-body">
                    <div class="solver-layout">
                        <div class="controls-panel">
                            <div class="button-group">
                                <button id="tango-clear-button" class="btn-secondary">Clear</button>
                                <button id="tango-solve-button" class="btn-primary">Solve</button>
                            </div>
                        </div>
                        <div class="grid-panel">
                            <div class="grid-container" id="tango-grid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="instructions">
                <div class="instructions-header">
                    <span class="instructions-icon" aria-hidden="true">i</span>
                    <h3>How to Use</h3>
                </div>
                <ol>
                    <li>Click on a cell to cycle through: ☀️ sun → 🌙 moon → empty.</li>
                    <li>Click between cells to set constraints: none → <strong>=</strong> (same) → <strong>×</strong> (opposite).</li>
                    <li>Click <strong>Solve</strong> to complete the puzzle, or <strong>Clear</strong> to reset.</li>
                </ol>
            </div>
        </div>

        <!-- Queens Solver -->
        <div id="queens-solver" class="game-solver" role="tabpanel" aria-labelledby="tab-queens">
            <div class="solver-card">
                <div class="solver-header">
                    <h2 class="solver-title">
                        Queens Solver
                    </h2>
                    <a href="https://www.linkedin.com/games/queens/" target="_blank" rel="noopener noreferrer" class="play-link">
                        Play on LinkedIn
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
                <div class="solver-body">
                    <div class="solver-layout">
                        <div class="controls-panel">
                            <div class="control-group">
                                <label for="queens-grid-size-slider">
                                    Grid Size: <span id="queens-grid-size-label" class="size-label">8×8</span>
                                </label>
                                <input type="range" id="queens-grid-size-slider" min="4" max="12" value="8">
                            </div>
                            <div class="control-group">
                                <label>Select Color:</label>
                                <div id="queens-color-palette" class="color-palette"></div>
                            </div>
                            <div class="button-group">
                                <button id="queens-clear-button" class="btn-secondary">Clear</button>
                                <button id="queens-solve-button" class="btn-primary">Solve</button>
                            </div>
                        </div>
                        <div class="grid-panel">
                            <div class="grid-container" id="queens-grid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="instructions">
                <div class="instructions-header">
                    <span class="instructions-icon" aria-hidden="true">i</span>
                    <h3>How to Use</h3>
                </div>
                <ol>
                    <li><strong>Select a Color:</strong> Tap a color from the palette, then tap or drag on the grid to paint regions.</li>
                    <li><strong>Erase:</strong> Select the eraser (✕) to remove cells from regions.</li>
                    <li><strong>Place Queens (Optional):</strong> Long-press or right-click a colored cell to place/remove a queen.</li>
                    <li>Click <strong>Solve</strong> to find the solution. You need exactly N regions for an N×N grid.</li>
                </ol>
            </div>
        </div>

        <!-- Mini Sudoku Solver -->
        <div id="patches-solver" class="game-solver" role="tabpanel" aria-labelledby="tab-patches">
            <div class="solver-card">
                <div class="solver-header">
                    <h2 class="solver-title">
                        Patches Solver
                    </h2>
                    <a href="https://www.linkedin.com/games/patches/" target="_blank" rel="noopener noreferrer" class="play-link">
                        Play on LinkedIn
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
                <div class="solver-body">
                    <div class="solver-layout">
                        <div class="controls-panel patches-controls-panel">
                            <div class="control-group">
                                <label for="patches-grid-size-slider">
                                    Grid Size: <span id="patches-grid-size-label" class="size-label">6×6</span>
                                </label>
                                <input type="range" id="patches-grid-size-slider" min="4" max="10" value="6">
                            </div>
                            <div class="control-group">
                                <label for="patches-area-input">Area (Optional)</label>
                                <input type="number" id="patches-area-input" min="0" step="1" placeholder="Blank if none">
                            </div>
                            <div class="control-group">
                                <label>Region Type</label>
                                <div id="patches-shape-buttons" class="patches-shape-buttons" role="group" aria-label="Patches region type">
                                    <button type="button" class="patches-shape-button" data-shape="horizontal">Horizontal</button>
                                    <button type="button" class="patches-shape-button" data-shape="vertical">Vertical</button>
                                    <button type="button" class="patches-shape-button" data-shape="square">Square</button>
                                    <button type="button" class="patches-shape-button" data-shape="free">Free</button>
                                </div>
                            </div>
                            <div class="button-group" id="patches-remove-button-group" hidden>
                                <button id="patches-remove-source-button" class="btn-secondary">Remove</button>
                            </div>
                            <div class="button-group">
                                <button id="patches-clear-button" class="btn-secondary">Clear</button>
                                <button id="patches-solve-button" class="btn-primary">Solve</button>
                            </div>
                        </div>
                        <div class="grid-panel">
                            <div class="grid-container" id="patches-grid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="instructions">
                <div class="instructions-header">
                    <span class="instructions-icon" aria-hidden="true">i</span>
                    <h3>How to Use</h3>
                </div>
                <ol>
                    <li>Click a tile, optionally enter its area, then press a region type button to set or update that source. Leave the area blank for unnumbered sources.</li>
                    <li>Horizontal, vertical, square, and free clues all create axis-aligned rectangles. Horizontal means width &gt; height, vertical means height &gt; width, and square means width = height.</li>
                    <li>Every source tile only needs to be contained somewhere inside its rectangle. It does not need to be on a corner.</li>
                    <li>Changing the area for the selected source updates it automatically. Right-click a source tile or use <strong>Remove</strong> to delete it.</li>
                    <li>Click <strong>Solve</strong> to color each rectangle. Click <strong>Clear</strong> to reset the board.</li>
                </ol>
            </div>
        </div>

        <!-- Mini Sudoku Solver -->
        <div id="mini-solver" class="game-solver" role="tabpanel" aria-labelledby="tab-mini">
            <div class="solver-card">
                <div class="solver-header">
                    <h2 class="solver-title">
                        Mini Sudoku Solver
                    </h2>
                    <a href="https://www.linkedin.com/games/mini-sudoku/" target="_blank" rel="noopener noreferrer" class="play-link">
                        Play on LinkedIn
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
                <div class="solver-body">
                    <div class="solver-layout">
                        <div class="controls-panel">
                            <div class="button-group">
                                <button id="mini-clear-button" class="btn-secondary">Clear</button>
                                <button id="mini-solve-button" class="btn-primary">Solve</button>
                            </div>
                        </div>
                        <div class="grid-panel">
                            <div class="grid-container" id="mini-grid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="instructions">
                <div class="instructions-header">
                    <span class="instructions-icon" aria-hidden="true">i</span>
                    <h3>How to Use</h3>
                </div>
                <ol>
                    <li>Left-click a cell to open the number picker and choose 1–6; right-click to clear.</li>
                    <li>Each row, column, and 3×2 region must contain each number from 1 to 6 once.</li>
                    <li>Click <strong>Solve</strong> to fill remaining cells. Solved cells will be highlighted differently.</li>
                    <li>Click <strong>Clear</strong> to reset the board.</li>
                </ol>
            </div>
        </div>
    </main>

    <footer>
        <p>
            Unofficial solvers for
            <a href="https://www.linkedin.com/games/" target="_blank" rel="noopener noreferrer">LinkedIn Games</a>
        </p>
    </footer>

    <script src="js/solvers/zipSolver.js"></script>
    <script src="js/solvers/tangoSolver.js"></script>
    <script src="js/solvers/queensSolver.js"></script>
    <script src="js/solvers/patchesSolver.js"></script>
    <script src="js/solvers/miniSudokuSolver.js"></script>
    <script src="js/main.js"></script>
    <script src="js/theme.js"></script>
</body>
</html>