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>

<!-- UTF8 for any non-ASCII Unicode in text -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Site-wide icon -->
<link rel="shortcut icon" type="image/x-icon" href="https://learning-python.com/favicon.ico" />

<!-- Site-wide styles: footer, code, border -->
<link rel="stylesheet" type="text/css" href="../_main.css">

<!-- Be mobile-friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Anonymous GA4 analytics JS to prioritize work -->
<!-- Removed Sep-2024 to protect reader privacy -->

<STYLE> 
LI {
    margin-bottom: 3px;    /* Space between listed items, to read and tap */
}
</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>&#x21E8; 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>&#x21E8; 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>



[Home page] Books Code Blog Python Author Train Find ©M.Lutz