145 lines
8.1 KiB
HTML
145 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title> Trivabble </title>
|
|
<link rel="stylesheet" href="trivabble.css" />
|
|
<link rel="stylesheet" href="alert.css" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="format-detection" content="telephone=no" />
|
|
<script src="config.js"></script>
|
|
<script src="dict/list.js"></script>
|
|
<script src="l10n.js"></script>
|
|
<script src="alert.js"></script>
|
|
<script src="touch2click.js"></script>
|
|
<script src="trivabble.js"></script>
|
|
<link rel="icon" type="image/svg+xml" href="logo/path.svg" />
|
|
<link rel="icon" type="image/png" href="logo/16.png" sizes="16x16" />
|
|
<link rel="icon" type="image/png" href="logo/32.png" sizes="32x32" />
|
|
<link rel="icon" type="image/png" href="logo/86.png" sizes="86x86" />
|
|
<link rel="icon" type="image/png" href="logo/180.png" sizes="180x180" />
|
|
<link rel="icon" type="image/png" href="logo/192.png" sizes="192x192" />
|
|
</head>
|
|
<body>
|
|
<div id="menu" class="panel">
|
|
<button data-l10n="text-content" id="join-game">Join adversaries</button>
|
|
<p id="p-name"> <span data-l10n="text-content">You are:</span> <span id="name" data-l10n="text-content">(name to give)</span><br /><button class="minibutton" id="change-name" data-l10n="text-content">Change</button></p>
|
|
<button id="clear-game" data-l10n="text-content">Put back all the tiles in the bag</button>
|
|
<p id="p-name"><span data-l10n="text-content">Number of your game:</span><br /><span id="number" data-l10n="text-content">(pending)</span></p>
|
|
<div id="chat-messages"></div>
|
|
<textarea id="chat-ta" placeholder="Write a message to your adversaries here" data-l10n="placeholder"></textarea>
|
|
<button id="chat-btn" class="minibutton" data-l10n="text-content">Send message</button>
|
|
<div id="lang-selection">
|
|
<p>
|
|
<label for="select-lang" data-l10n="text-content">Interface language: </label>
|
|
<select id="select-lang">
|
|
<option value="en">English</option>
|
|
<option value="fr">Français</option>
|
|
<option value="br">Brezhoneg</option>
|
|
<option value="ro">Română</option>
|
|
</select>
|
|
</p>
|
|
<p id="board-lang-selection" hidden="true">
|
|
<label for="board-lang" data-l10n="text-content">Board language: </label>
|
|
<select id="board-lang">
|
|
<option value="fr">French</option>
|
|
</select>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="modal" id="modal-settings-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 data-l10n="text-content">Settings</h1>
|
|
<button class="modal-button" id="btn-settings-close">×</button>
|
|
</div>
|
|
<div>
|
|
<p><label><input type="checkbox" id="tiles-sound" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
|
|
<p><label><input type="checkbox" id="msg-sound" /><span data-l10n="text-content">Sound of messages</span></label></p>
|
|
</div>
|
|
<div>
|
|
<p id="disable-spell-checker-p" hide="true">
|
|
<label>
|
|
<input type="checkbox" id="disable-spell-checker" />
|
|
<span data-l10n="text-content">Disable the spell checker</span>
|
|
</label>
|
|
</p>
|
|
<p id="no-spell-checker-p" hide="false">
|
|
<span data-l10n="text-content">Spell checking is not available for this language.</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>
|
|
<label for="double-tap-duration" data-l10n="text-content">Double tap duration:</label>
|
|
<span class="span-range">
|
|
<span data-l10n="text-content">(fast)</span>
|
|
<input type="range" min="0" max="0" id="double-tap-duration" />
|
|
<span data-l10n="text-content">(slow)</span><br/>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>
|
|
<label for="flash-light-duration" data-l10n="text-content">Flash light duration:</label>
|
|
<span class="span-range">
|
|
<span data-l10n="text-content">(fast)</span>
|
|
<input type="range" min="0" max="0" id="flash-light-duration" />
|
|
<span data-l10n="text-content">(slow)</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p id="flash-light-color-p">
|
|
<label>
|
|
<input type="color" size="6" id="flash-light-color" />
|
|
<span data-l10n="text-content">Flash light color</span>
|
|
</label>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="content">
|
|
<table id="board">
|
|
<tr><td class="corner"></td></tr>
|
|
</table>
|
|
<div id="rack-outer">
|
|
<div id="rack"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="panel" class="panel">
|
|
<div id="btn-settings-wrapper">
|
|
<button id="btn-settings" data-l10n="text-content">Settings</button>
|
|
</div>
|
|
<div id="bag"></div>
|
|
<p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span></p>
|
|
<table id="participants">
|
|
<tr><th data-l10n="text-content">Participant</th><th data-l10n="text-content">Rack</th><th data-l10n="text-content">Score</th><th data-l10n="text-content">Turn</th></tr>
|
|
<tr id="participants-placeholder"><td colspan="4" data-l10n="text-content">Waiting for other participants…</td></tr>
|
|
</table>
|
|
<div id="panel-buttons">
|
|
<button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of your rack in the bag</button>
|
|
<button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
|
|
<button id="check-spelling" class="minibutton" data-l10n="text-content" hidden="true">Check spelling for new words</button>
|
|
</div>
|
|
<div id="help-box">
|
|
<p id="help-box-title" data-l10n="text-content">Tip!</p>
|
|
<div id="help-box-inner">
|
|
<div id="help-messages">
|
|
<p data-l10n="text-content" hidden="true">Click on the bag to take one tile.</p>
|
|
<p data-l10n="text-content" hidden="true">Click on someone's score to change it.</p>
|
|
<p data-l10n="text-content" hidden="true">Who's turn? Click on the Turn button!</p>
|
|
<p data-l10n="text-content" hidden="true">Click on (+) to increase someone's score.</p>
|
|
<p data-l10n="text-content" hidden="true">Show a cell to everyone by double-clicking on it.</p>
|
|
</div>
|
|
<button id="next-help-msg" class="minibutton" data-l10n="title" title="Next tip">→</button>
|
|
</div>
|
|
</div>
|
|
<p id="info-spell-checking" hidden="true"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
|
|
</div>
|
|
</body>
|
|
</html>
|