thelounge/client/index.html

<!doctype html>
<html>
	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no">

	<link rel="preload" as="script" href="js/bundle.vendor.js">
	<link rel="preload" as="script" href="js/bundle.js">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/primer-tooltips.css">
	<link rel="stylesheet" href="css/style.css">
	<link id="theme" rel="stylesheet" href="<%- theme %>">
	<style id="user-specified-css"></style>

	<title>The Lounge</title>

	<link rel="shortcut icon" href="img/favicon.png" data-other="img/favicon-notification.png" data-toggled="false" id="favicon">
	<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
	<link rel="mask-icon" href="img/logo.svg" color="<%- themeColor %>">
	<link rel="manifest" href="manifest.json">

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="theme-color" content="<%- themeColor %>">

	</head>
	<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">

	<div id="wrap">
	<div id="viewport">
		<aside id="sidebar">
			<div class="networks"></div>
			<div class="empty">
				You're not connected to any networks yet.
			</div>
		</aside>
		<footer id="footer">
			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in"></button></span>
			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network"></button></span>
			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"><button class="icon settings" data-target="#settings" aria-label="Settings"></button></span>
			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help"></button></span>
			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
		</footer>
		<div id="main">
			<div id="windows">
				<div id="loading" class="window active">
					<div class="container">
						<div class="row">
							<div class="col-xs-12">
								<h1 class="title" id="loading-title">The Lounge is loading…</h1>
							</div>
							<div class="col-xs-12">
								<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank" rel="noopener">Make sure to have JavaScript enabled.</a></p>
								<p id="loading-slow">
									This is taking longer than it should, there might be
									connectivity issues.
								</p>
								<button id="loading-reload" class="btn">Reload page</button>
								<script async src="js/loading-error-handlers.js"></script>
							</div>
						</div>
					</div>
				</div>
				<div id="chat-container" class="window">
					<div id="chat"></div>
					<div id="connection-error"></div>
					<form id="form" method="post" action="">
						<div class="input">
							<span id="nick">
								<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements
								--><span id="set-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Change nick…"><button id="set-nick" type="button" aria-label="Change nick…"></button></span><!--
								--><span id="cancel-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Cancel"><button id="cancel-nick" type="button" aria-label="Cancel"></button></span><!--
								--><span id="save-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Save"><button id="submit-nick" type="button" aria-label="Save"></button></span>
							</span>
							<textarea id="input" class="mousetrap"></textarea>
							<span id="submit-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Send message">
								<button id="submit" type="submit" aria-label="Send message"></button>
							</span>
						</div>
					</form>
				</div>
				<div id="sign-in" class="window"></div>
				<div id="connect" class="window"></div>
				<div id="settings" class="window"></div>
				<div id="help" class="window"></div>
				<div id="changelog" class="window"></div>
			</div>
		</div>
	</div>
	</div>

	<div id="context-menu-container">
		<ul id="context-menu"></ul>
	</div>

	<div id="image-viewer"></div>

	<script src="js/bundle.vendor.js"></script>
	<script src="js/bundle.js"></script>

	</body>
</html>
Minor changes 2014-08-15 17:05:37 -07:00			`<!doctype html>`
			`<html>`
			`<head>`

			`<meta charset="utf-8">`
Update image files 2014-09-28 15:46:32 -07:00			`<meta name="viewport" content="width=device-width, user-scalable=no">`
Minor changes 2014-08-15 17:05:37 -07:00
Preload scripts as soon as possible 2017-04-14 21:10:17 +03:00			`<link rel="preload" as="script" href="js/bundle.vendor.js">`
			`<link rel="preload" as="script" href="js/bundle.js">`
Minor changes 2014-08-15 17:05:37 -07:00			`<link rel="stylesheet" href="css/bootstrap.css">`
Update to primer on npm, set tooltipped-no-delay for all tooltips 2017-12-18 17:59:35 -08:00			`<link rel="stylesheet" href="css/primer-tooltips.css">`
Minor changes 2014-08-15 17:05:37 -07:00			`<link rel="stylesheet" href="css/style.css">`
Remove express-handlebars, read manifest.json to get theme-color 2017-11-12 20:24:21 +02:00			`<link id="theme" rel="stylesheet" href="<%- theme %>">`
Add an ability to customise CSS on the client 2016-02-28 09:54:10 +02:00			`<style id="user-specified-css"></style>`
Minor changes 2014-08-15 17:05:37 -07:00
Preload scripts as soon as possible 2017-04-14 21:10:17 +03:00			`<title>The Lounge</title>`

Replace favico.js with our simpler solution 2016-02-24 19:19:05 +02:00			`<link rel="shortcut icon" href="img/favicon.png" data-other="img/favicon-notification.png" data-toggled="false" id="favicon">`
Allow The Lounge to be proxied behind a /path/ url contains three small changes to use relative urls instead of absolute rooted at / * favicons in index.html * badge and pop sound in lounge.js * the url for the socket.io endpoint Typical use with nginx: location /path/ { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_pass http://localhost:9000/; } those trailing / are important. 2016-02-13 22:24:43 +01:00			`<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">`
Remove express-handlebars, read manifest.json to get theme-color 2017-11-12 20:24:21 +02:00			`<link rel="mask-icon" href="img/logo.svg" color="<%- themeColor %>">`
Add manifest.json for nicer mobile experience 2016-05-10 13:14:51 +03:00			`<link rel="manifest" href="manifest.json">`
Minor changes 2014-08-15 17:05:37 -07:00
Preload scripts as soon as possible 2017-04-14 21:10:17 +03:00			`<meta name="apple-mobile-web-app-capable" content="yes">`
			`<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">`
			`<meta name="mobile-web-app-capable" content="yes">`
Remove express-handlebars, read manifest.json to get theme-color 2017-11-12 20:24:21 +02:00			`<meta name="theme-color" content="<%- themeColor %>">`
Preload scripts as soon as possible 2017-04-14 21:10:17 +03:00
Minor changes 2014-08-15 17:05:37 -07:00			`</head>`
Remove express-handlebars, read manifest.json to get theme-color 2017-11-12 20:24:21 +02:00			`<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">`
Minor changes 2014-08-15 17:05:37 -07:00
			`<div id="wrap">`
			`<div id="viewport">`
Remove javascript scrollbar library, use hover appearing scrollbar instead 2016-06-22 23:05:25 +03:00			`<aside id="sidebar">`
			`<div class="networks"></div>`
			`<div class="empty">`
			`You're not connected to any networks yet.`
Minor changes 2014-08-15 17:05:37 -07:00			`</div>`
			`</aside>`
Custom scrollbar in the sidebar 2014-09-19 16:12:17 -07:00			`<footer id="footer">`
Only disable touch tooltips on certain buttons 2016-12-19 16:59:19 +02:00			`<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in"></button></span>`
			`<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network"></button></span>`
Rename "Client Settings" into "Settings" in tooltip, cleanup 2017-12-22 22:10:14 -05:00			`<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"><button class="icon settings" data-target="#settings" aria-label="Settings"></button></span>`
Only disable touch tooltips on certain buttons 2016-12-19 16:59:19 +02:00			`<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help"></button></span>`
			`<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>`
Custom scrollbar in the sidebar 2014-09-19 16:12:17 -07:00			`</footer>`
Minor changes 2014-08-15 17:05:37 -07:00			`<div id="main">`
			`<div id="windows">`
Make style of loading page similar to other pages - Move markup around to make the loading page a window of its own instead of a sub-window of `#chat` - Remove inline styling in loading page - Use same styling than other non-messages windows for title and text - Add a `z-index` to the loading page to hide the message input - Vertically align the sign in page title with all other titles - Make sure all `h1.title`s are bottom-margined consistently and remove negative margin on the Settings page title to align with the Connect page title (Reverting/Improving this should be done at the `h2` level instead) 2016-06-21 01:52:18 -04:00			`<div id="loading" class="window active">`
			`<div class="container">`
wip 2017-11-04 19:11:20 +02:00			`<div class="row">`
			`<div class="col-xs-12">`
Handle javascript errors while loading 2017-12-01 20:04:50 +02:00			`<h1 class="title" id="loading-title">The Lounge is loading…</h1>`
wip 2017-11-04 19:11:20 +02:00			`</div>`
			`<div class="col-xs-12">`
			`<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank" rel="noopener">Make sure to have JavaScript enabled.</a></p>`
Improve error page at loading - Display the "Reload page" instantly and not after 5 seconds - Remove stack trace, buggy anyway - Wrap the error details so it does not expand beyond boundaries (scrollbar would not show up either) - Do not show the slow-loading warning on error - Make zeeoe details selectable instead of editable - Label improvements 2017-12-16 16:19:51 -05:00			`<p id="loading-slow">`
			`This is taking longer than it should, there might be`
			`connectivity issues.`
			`</p>`
			`<button id="loading-reload" class="btn">Reload page</button>`
Rename the error handlers file at loading time 2017-12-16 18:18:43 -05:00			`<script async src="js/loading-error-handlers.js"></script>`
wip 2017-11-04 19:11:20 +02:00			`</div>`
			`</div>`
Display a loading message instead of blank page 2016-06-07 20:56:49 +03:00			`</div>`
			`</div>`
Fix window layout a bit 2016-07-05 19:23:46 -04:00			`<div id="chat-container" class="window">`
			`<div id="chat"></div>`
Display all the status changes in UI 2017-08-28 18:03:27 +03:00			`<div id="connection-error"></div>`
Fix window layout a bit 2016-07-05 19:23:46 -04:00			`<form id="form" method="post" action="">`
			`<div class="input">`
Make nick badge editable to set it in the UI 2016-07-29 02:10:29 -04:00			`<span id="nick">`
			`<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements`
Use an ellipsis for change nick and join channel tooltips 2017-12-21 13:11:49 -05:00			`--><span id="set-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Change nick…"><button id="set-nick" type="button" aria-label="Change nick…"></button></span><!--`
Add tooltips to nick editor buttons 2016-08-03 01:06:58 -04:00			`--><span id="cancel-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Cancel"><button id="cancel-nick" type="button" aria-label="Cancel"></button></span><!--`
			`--><span id="save-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Save"><button id="submit-nick" type="button" aria-label="Save"></button></span>`
Make nick badge editable to set it in the UI 2016-07-29 02:10:29 -04:00			`</span>`
Fix window layout a bit 2016-07-05 19:23:46 -04:00			`<textarea id="input" class="mousetrap"></textarea>`
Only disable touch tooltips on certain buttons 2016-12-19 16:59:19 +02:00			`<span id="submit-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Send message">`
Add tooltips to user list and submit buttons 2016-08-03 01:10:22 -04:00			`<button id="submit" type="submit" aria-label="Send message"></button>`
			`</span>`
Fix window layout a bit 2016-07-05 19:23:46 -04:00			`</div>`
			`</form>`
			`</div>`
wip 2017-11-04 19:11:20 +02:00			`<div id="sign-in" class="window"></div>`
Split connect and settings into templates 2017-11-04 19:19:12 +02:00			`<div id="connect" class="window"></div>`
Rename "Client Settings" into "Settings" in tooltip, cleanup 2017-12-22 22:10:14 -05:00			`<div id="settings" class="window"></div>`
Move help to view 2017-11-12 20:00:34 +02:00			`<div id="help" class="window"></div>`
Add changelog viewing and update checking 2017-07-13 21:32:18 +03:00			`<div id="changelog" class="window"></div>`
Minor changes 2014-08-15 17:05:37 -07:00			`</div>`
			`</div>`
			`</div>`
			`</div>`

Add context menus 2016-02-12 13:34:10 +02:00			`<div id="context-menu-container">`
			`<ul id="context-menu"></ul>`
			`</div>`

Add an image viewer for thumbnails and image previews 2017-07-12 02:55:41 -04:00			`<div id="image-viewer"></div>`

Webpack 2016-12-18 17:53:28 +02:00			`<script src="js/bundle.vendor.js"></script>`
			`<script src="js/bundle.js"></script>`
Minor changes 2014-08-15 17:05:37 -07:00
			`</body>`
			`</html>`