File: cgi/showcode-template.txt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<!-- This is a template: use your browser's "View Source" to see its expanded form -->
<!-- Python string formatting expands "__X__" targets here: see the .py CGI script -->
<!-------------------------------------------------------------------------------------->
<HEAD>
<!-- Unicode -->
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- mobile -->
<META name="viewport" content="width=device-width, initial-scale=1.0">
<!-- [Q] START customized for quixotely.com -->
<!-- icon -->
<link rel="icon" type="image/png" href="https://quixotely.com/usbsync-round.png">
<!-- styles -->
<link rel="stylesheet" type="text/css" href="https://quixotely.com/+common.css">
<!-- Plus analytics code, custom styles, etc. (replace me) -->
<!-- inserted GA4-only key/code, ip anonymous, used only for prioritizing website work -->
<!-- Google tag (gtag.js); don't escape quotes: read from file, not in .py -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PTKZPTT134"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-PTKZPTT134'); /* tagged by insert-analytics.py */
</script>
<!-- [Q] END customized for quixotely.com -->
<STYLE>
LI {
margin-bottom: 3px; /* Space between listed items, to read and tap */
margin-top: 8px; /* [Q] Sep24: top=dflt 8px, else 12px from _common.css */
}
</STYLE>
<!-------------------------------------------------------------------------------------->
<!-- Jun-2021: style a floating jump-to-Top button, used/available iff JS enabled -->
<STYLE>
#topBtn {
display: none; /* initially hidden (change on scroll) */
position: fixed; /* float/persist */
bottom: 36px; /* above site toolbar */
right: 8px; /* left of scroll area */
z-index: 99; /* covering priority */
font-size: 15px;
border: none;
outline: none;
cursor: pointer; /* change on mouse-over */
padding: 10px;
border-radius: 4px; /* rounded corners */
color: white; /* foreground (text color) */
background-color: #999; /* which is #999999, which is rgb(153, 153, 153) */
}
.finalparagraph { /* if needed, extra space above Top bottom at end of page */
margin-bottom: 50px; /* else text at end may be overlayed and unviewable */
}
</STYLE>
<!-------------------------------------------------------------------------------------->
<!-- Sep-2024: add color themes to support dark mode, JS not required or used -->
<STYLE>
BODY { /* main display */
background: white; /* default is no support */
color: black; /* or use class=<.name> */
}
@media (prefers-color-scheme: dark) {
BODY {
background: #111;
color: white;
}
}
PRE {
background: ivory; /* code display */
color: black;
}
@media (prefers-color-scheme: dark) {
PRE {
background: black; /* or: #222; */
color: wheat; /* or: white; */
}
}
A { /* hyperlinks */
color: blue;
}
@media (prefers-color-scheme: dark) {
A {
color: cyan;
}
}
</STYLE>
<!-------------------------------------------------------------------------------------->
<TITLE>File: %(__NAME__)s</TITLE>
</HEAD>
<BODY>
<!-------------------------------------------------------------------------------------->
<!-- Jun-2021: build+configure the floating Top button, used/available iff JS enabled -->
<!-- Button: "display: none" in CSS makes this widget invisible initially, JS or not -->
<!-- Adapted from the more general website version, which goes to any #TOC tag instead-->
<!-- This is especially useful for mobile, where no ~top key/gesture may be available -->
<BUTTON onclick="topClick();"
id="topBtn"
title="Go to index">Top</button>
<!-- Set up click/scroll callbacks to jump/show, iff JS is enabled -->
<SCRIPT>
// Get and save the button in global (window) scope
var topButton = document.getElementById("topBtn"); // i.e., "Top"
// Set the default scroll constant: global so pages can change if needed
var topButtonShowAt = 500; // px from top, show Top below this cutoff
function topClick() {
//
// Go to the top, clear hover shading? (else recessed color gets stuck on mobile).
// Unhover failed as tried here: see the CSS code in website's version for details.
//
window.location.href = '#'; // go/scroll to page top (not toc tag)
}
function scrollFunction() {
//
// Adapted from a w3 example; the odd || test is for browser interoperability:
// see, for instance, https://dev.opera.com/articles/fixing-the-scrolltop-bug/.
//
var showat = topButtonShowAt; // local
// N pixels from the top after scroll?
if (document.body.scrollTop > showat || document.documentElement.scrollTop > showat) {
topButton.style.display = "block"; // show Top
} else {
topButton.style.display = "none"; // hide Top
}
}
// Show/hide button whenever user scrolls below/above N px from top
window.onscroll = scrollFunction; // source had "function() {scrollFunction()};"; why?
</SCRIPT>
<!-------------------------------------------------------------------------------------->
<P><B><I>File</I>: %(__NAME__)s</B> <!-- not H1: pathname may be long -->
<P>
<UL style="list-style-type: none;">
<!-- See urllib.[parse.]quote_plus for encoding, use 2 %% for 1 post formatting expr -->
<!-- Link to raw text-file content in "..": script sends plain text, inline or attachment -->
<LI>⇨ Raw text
<A HREF="showcode.py?name=%(__NAMEURL__)s&rawmode=view">view</A> and
<A HREF="showcode.py?name=%(__NAMEURL__)s&rawmode=save">save</A>
<!-- Show myself: cgi/showcode.py and cgi/showcode-template.txt, relative to ".." -->
<LI>⇨ Page
<A HREF="showcode.py?name=cgi%%2Fshowcode.py">script</A> and
<A HREF="showcode.py?name=cgi%%2Fshowcode-template.txt">template</A>
</UL>
<P>
<!-- Use site-wide <pre> styling with auto-scroll, add more top space -->
<!-- Code is HTML-escaped, decoded Unicode codepoints (to be sent as UTF8-encoded bytes) -->
<STYLE>
/* Jul-22: use more horizontal space on narrow mobiles (else 20px * 2 via _main.css) */
@media screen and (max-device-width: 640px) {
PRE {
margin-left: 3px; margin-right: 3px; /* for 0..640w viewports, only */
}
}
/* Jul-22: rounded corners, for s-n-g? no: inconsistent with other <pre> as is */
/*PRE {
border-radius: 6px;
}*/
</STYLE>
<DIV style="margin-top: 30px;" class=finalparagraph>
<PRE>%(__CODE__)s</PRE>
</DIV>
</P>
<!-------------------------------------------------------------------------------------->
<!-- Site-wide scrollable footer -->
<!-- This cgi subdir is outside the scope of the site's genhtml page generator, -->
<!-- and copying generated footer code here is a bad idea: requires future recopies. -->
<!-- Instead, grab a generated dummy in .. and prefix its links with ".." in the .py. -->
%(__FOOTER__)s
</BODY>
</HTML>