188 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			188 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!doctype html>
 | |
| <html>
 | |
| 	<head>
 | |
| 		<title>Tilde Friends</title>
 | |
| 		<link type="text/css" rel="stylesheet" href="/static/style.css" />
 | |
| 		<link type="text/css" rel="stylesheet" href="/static/w3.css" />
 | |
| 		<link type="image/svg+xml" rel="icon" href="/static/tildefriends.svg" />
 | |
| 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 | |
| 		<meta
 | |
| 			name="title"
 | |
| 			content="Tilde Friends - Make friends and apps from your web browser."
 | |
| 		/>
 | |
| 		<meta
 | |
| 			name="description"
 | |
| 			content="Tilde Friends is a Secure Scuttlebutt client and a platform for building, running, and sharing web applications. "
 | |
| 		/>
 | |
| 		<meta property="og:type" content="website" />
 | |
| 		<meta property="og:url" content="https://metatags.io/" />
 | |
| 		<meta
 | |
| 			property="og:title"
 | |
| 			content="Tilde Friends - Make friends and apps from your web browser."
 | |
| 		/>
 | |
| 		<meta
 | |
| 			property="og:description"
 | |
| 			content="Tilde Friends is a Secure Scuttlebutt client and a platform for building, running, and sharing web applications. "
 | |
| 		/>
 | |
| 		<meta property="og:image" content="/static/tildefriends.svg" />
 | |
| 
 | |
| 		<script>
 | |
| 			function set_access_key_title(event) {
 | |
| 				if (!event.srcElement.title) {
 | |
| 					event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || '⌨️' + event.srcElement.accessKey).toUpperCase()}]`;
 | |
| 				}
 | |
| 			}
 | |
| 		</script>
 | |
| 	</head>
 | |
| 	<body
 | |
| 		style="
 | |
| 			display: flex;
 | |
| 			flex-flow: column;
 | |
| 			width: 100vw;
 | |
| 			height: 100vh;
 | |
| 			position: absolute;
 | |
| 			max-width: 100%;
 | |
| 			max-height: 100%;
 | |
| 		"
 | |
| 	>
 | |
| 		<noscript>
 | |
| 			<div class="w3-container">
 | |
| 				<div class="w3-panel w3-red w3-padding w3-card-4">
 | |
| 					<h1>TildeFriends requires JavaScript.</h1>
 | |
| 					<p>
 | |
| 						It looks like JavaScript is disabled or unsupported. This isn't
 | |
| 						going to work.
 | |
| 					</p>
 | |
| 				</div>
 | |
| 			</div>
 | |
| 		</noscript>
 | |
| 		<tf-navigation></tf-navigation>
 | |
| 		<div id="content" class="hbox" style="flex: 1 0; overflow: auto">
 | |
| 			<div
 | |
| 				id="editPane"
 | |
| 				class="vbox"
 | |
| 				style="flex: 0 1 100%; display: none; overflow: auto"
 | |
| 			>
 | |
| 				<div class="navigation w3-bar" style="display: flex">
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="closeEditor"
 | |
| 						name="closeEditor"
 | |
| 						accesskey="c"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Close the editor"
 | |
| 					>
 | |
| 						Close
 | |
| 					</button>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="save"
 | |
| 						name="save"
 | |
| 						accesskey="s"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Save the app under the given path"
 | |
| 					>
 | |
| 						Save
 | |
| 					</button>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="icon"
 | |
| 						name="icon"
 | |
| 						accesskey="j"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Set an icon/emoji for the app"
 | |
| 					>
 | |
| 						📦
 | |
| 					</button>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="export"
 | |
| 						name="export"
 | |
| 						accesskey="e"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Export app to .zip file"
 | |
| 					>
 | |
| 						Export
 | |
| 					</button>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="import"
 | |
| 						name="import"
 | |
| 						accesskey="i"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Import app from .zip file"
 | |
| 					>
 | |
| 						Import
 | |
| 					</button>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="pretty"
 | |
| 						name="pretty"
 | |
| 						accesskey="p"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Clean up source formatting"
 | |
| 					>
 | |
| 						🧼
 | |
| 					</button>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="whitespace"
 | |
| 						name="whitespace"
 | |
| 						accesskey="w"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Toggle visible whitespace"
 | |
| 					>
 | |
| 						✨
 | |
| 					</button>
 | |
| 					<input
 | |
| 						class="w3-bar-item w3-input w3-border w3-blue"
 | |
| 						type="text"
 | |
| 						id="name"
 | |
| 						name="name"
 | |
| 						style="flex: 1 1; min-width: 1em"
 | |
| 					/>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="delete"
 | |
| 						name="delete"
 | |
| 						accesskey="d"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Delete the app"
 | |
| 					>
 | |
| 						Delete
 | |
| 					</button>
 | |
| 					<button
 | |
| 						class="w3-bar-item w3-button w3-blue"
 | |
| 						id="trace_button"
 | |
| 						accesskey="t"
 | |
| 						onmouseover="set_access_key_title(event)"
 | |
| 						data-tip="Open a performance trace for the server"
 | |
| 					>
 | |
| 						Trace
 | |
| 					</button>
 | |
| 				</div>
 | |
| 				<div class="hbox" style="flex: 1 1; overflow: auto">
 | |
| 					<div style="overflow: auto">
 | |
| 						<tf-files-pane style="overflow: auto"></tf-files-pane>
 | |
| 					</div>
 | |
| 					<div style="flex: 1 1; overflow: auto">
 | |
| 						<style id="editor_style"></style>
 | |
| 						<div id="editor" style="width: 100%; height: 100%"></div>
 | |
| 					</div>
 | |
| 				</div>
 | |
| 			</div>
 | |
| 			<div id="viewPane" class="vbox" style="flex: 0 1 100%; overflow: auto">
 | |
| 				<iframe
 | |
| 					id="document"
 | |
| 					sandbox="allow-forms allow-scripts allow-top-navigation allow-modals allow-popups allow-downloads"
 | |
| 					style="width: 100%; height: 100%; border: 0"
 | |
| 				></iframe>
 | |
| 			</div>
 | |
| 		</div>
 | |
| 		<script>
 | |
| 			window.litDisableBundleWarning = true;
 | |
| 		</script>
 | |
| 		<script src="/static/client.js" type="module"></script>
 | |
| 	</body>
 | |
| </html>
 |