sheet: improved feed address output (w/ c/c)

www/sheet.xsl

@@ -24,13 +24,87 @@
 					font-family: sans;
 				}
 
-				#url {
-					background-color: rgba(255, 165, 0, 0.25);
-					padding: 1% 5%;
-					display: inline-block;
-					max-width: 100%;
+				input {
+					font-family: inherit;
+					font-size: inherit;
+					text-align: inherit;
 				}
 
+				.input-combo {
+					display: flex;
+					flex-flow: row;
+					align-items: stretch;
+
+					width: 800px;
+					max-width: 100%;
+					margin: auto;
+
+					border: 1px solid grey;
+
+					padding: .5em .5em;
+					background-color: #FFFAF4;
+				}
+
+				.input-combo * {
+					display: inline-block;
+					line-height: 2em;
+					border: 0;
+					background: transparent;
+				}
+
+				.input-combo > :not(.button) {
+					max-width: 100%;
+					flex-grow: 1;
+					flex-shrink 0;
+
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+
+				.input-combo .button {
+					flex-grow: 0;
+					flex-shrink 1;
+
+					cursor: pointer;
+					min-width: 2em;
+					text-align: center;
+					border-left: 1px solid silver;
+					color: #06f;
+				}
+
+				[onclick_title] {
+					cursor: pointer;
+					position: relative;
+				}
+
+				[onclick_title]::before {
+					opacity: 0;
+
+					content: attr(onclick_title);
+					font-weight: normal;
+
+					position: absolute;
+					left: -300%;
+
+					z-index: 1;
+
+					background: grey;
+					color: white;
+
+					border-radius: 0.5em;
+					padding: 0 1em;
+				}
+
+				[onclick_title]:not(:active)::before {
+					transition: opacity 1s ease-in-out;
+				}
+
+				[onclick_title]:active::before {
+					opacity: 1;
+				}
+
+
 				.item {
 					background-color: #FFFAF4;
 					border: 1px solid silver;
@@ -65,7 +139,15 @@
 			<p>Your RSS feed is <strong style="color: green">ready</strong>. You
 			can enter the following url in your newsreader:</p>
 
-			<div id="url"></div>
+			<div class="input-combo">
+				<input id="url" readonly="readonly"/>
+				<span class="button" onclick="copy_link()" title="Copy" onclick_title="Copied">
+					<svg width="16px" height="16px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+						<path fill-rule="evenodd" d="M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z" clip-rule="evenodd"/>
+						<path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3z" clip-rule="evenodd"/>
+					</svg>
+				</span>
+			</div>
 
 			<hr/>
 
@@ -103,6 +185,16 @@
 				if (!/:html/.test(window.location.href))
 					for (var content of document.querySelectorAll(".desc,.content"))
 						content.innerHTML = content.children.children ? content.innerHTML : content.innerText
+
+				function copy_content(input) {
+					input.focus()
+					input.select()
+					document.execCommand('copy')
+				}
+
+				function copy_link() {
+					copy_content(document.getElementById("url"))
+				}
 			</script>
 		</body>
 		</html>