File: site-mobile-screenshots/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- Unicode --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- mobile --> <style> body {font-family: Arial, Helvetica, sans-serif;} /* title etc. text */ td {font-family: arial; font-style: italic;} /* thumbs-table text */ html {-webkit-text-size-adjust: 100%;} /* ios landscape no zoom */ body { margin-left: 12px; /* offset the entire page for curved screens */ margin-right: 12px; /* or padding: inside a border (margin outside) */ } </style> <!-- plus analytics code, etc. --> <!-- anonymous analytics to prioritize work: enabled in online resources only --> <!-- Anonymous analytics to prioritize work, enabled in online resources only. Automatically inserted on demand by tweak-analytics.py. --> <!-- 1) Universal Analytics tag (custom): stops collecting data on Jul-1-2023 --> <SCRIPT> // Start async JS-file fetch, if not already cached (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // Queue actions to run in order after async JS-file fetch finished ga('create', 'UA-52579036-1', 'auto'); // Create tracker object (and queue) ga('set', 'anonymizeIp', true); // Anonymize IP addr (&aip) [Jun-2019] ga('send', 'pageview'); // Send page-view event now </SCRIPT> <!-- 2) Google Analytics 4 tag: added to site Oct-2022 (okay to keep UA tag) --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-J8CTEZHX3L"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-J8CTEZHX3L'); </script> <!-- End analytics insert --> <title>Mobile Screenshots</title> </head> <body> <h1>Mobile Screenshots</h1> <p> Scenes from this site's 2018 mobile-friendly conversion project. <I><A href="../thumbspage.html">thumbspage</A></I> usage note: this page uses both <A href="user_configs-changes.txt">user_configs.py</A> settings for colors and a custom <A href="../cgi/showcode.py?name=site-mobile-screenshots/HEADER.html">header file</A> for thumbs-table font, and was made like <A HREF="_publish.sh">this</A> (and earlier, <A HREF="how-made.txt">this</A>). Nit: a " quote filename character formerly used here for inches works on this site's server and is handled properly by thumbspage if <A href="../cgi/showcode.py?name=site-mobile-screenshots/index.html">present</A>, but was changed to "in" for portability to some platforms; avoid as needed. </p> <!-- ======================================================================= --> <!-- END CUSTOM HEADER --> <!-- ======================================================================= --> <!-- ======================================================================= --> <!-- START FLOATING TOP --> <!-- ======================================================================= --> <!-- HTML+styles+JavaScript for optional index floating Top button [2.0]. --> <!-- Formatting targets are replaced with user configs by Py build script. --> <!-- All inline, to avoid extra requirements for custom HEADER.html files, --> <!-- (though browsers allow <style> blocks in <body>, as does HTML 5.2+). --> <!-- Top goes to page top only: use custom headers or edit this for other. --> <!-- Clients using a custom FOOTER.html may also need something like this: .finalelement { /* add extra space above Top's bottom at end of page */ margin-bottom: 80px; /* else, text at end may be overlayed and unviewable */ } <P class=finalelement> <==on the last content line or item (or <div>+padding, <br>) --> </P> <button onclick="topClick();" id="topBtn" title="Go to index" style=" display: none; /* initially HIDDEN (changed on scroll iff JS) */ position: fixed; /* float/persist */ bottom: 36px; /* e.g., 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, default=white */ background-color: #999; /* background color, default=grey */ ">Top</button> <!-- Set up click/scroll callbacks iff JS is enabled --> <script> // Get and save the button in global (window) scope var topButton = document.getElementById("topBtn"); // i.e., "Top" above // 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 of page (but keep prior location in history for back). // Clear hover shading (else recessed color gets stuck on mobile)? // No: unhover doesn't work as tried for main site - punt on shading. // window.location.href = '#'; // go/scroll to top (no tag) //topButton.style.backgroundColor = '#999'; // no: unhover for mobile? } function scrollFunction() { // // Adapted from web examples; the odd || test is for browser interoperability: // see, for instance, https://dev.opera.com/articles/fixing-the-scrolltop-bug/. // // Clients can reset global topButtonShowAt for larger preambles; else Top // may appear above/before an actual #top tag if it's not top of page #. // 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> <!-- ======================================================================= --> <!-- END FLOATING TOP --> <!-- ======================================================================= --> <!-- ======================================================================= --> <!-- START THUMBS TABLE --> <!-- ======================================================================= --> <p> <div style="overflow-x: auto;"> <table style=" /* not used: table-layout:fixed; */ background-color: #123456; /* for fun (former 'white') */ width: 100%; /* expand table+borderlines */ margin-top: 8px; margin-bottom: 8px; /* above/below borderlines; 5=>8px [2.3] */ padding-top: 25px; padding-bottom: 5px; /* under/over borderlines */ border: 1px solid black; /* manual lines, _not_ <hr>s: [2.2] */ border-radius: 6px; /* chrome botches <hr> at zoom <= 90% [2.2] */ "> <tr> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/0-desktop-mac-chrome.png.html"> <img src="_thumbspage/0-desktop-mac-chrome.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">0-desktop-mac-chrome.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/1-desktop-small.png.html"> <img src="_thumbspage/1-desktop-small.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">1-desktop-small.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/2-android-6.2in-chrome.png.html"> <img src="_thumbspage/2-android-6.2in-chrome.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">2-android-6.2in-chrome.png</p> </td> </tr> <tr> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/3-android-nonav.png.html"> <img src="_thumbspage/3-android-nonav.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">3-android-nonav.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/4-android-landscape.png.html"> <img src="_thumbspage/4-android-landscape.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">4-android-landscape.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/5-android-blog.png.html"> <img src="_thumbspage/5-android-blog.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">5-android-blog.png</p> </td> </tr> <tr> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/6-android-addrbar.png.html"> <img src="_thumbspage/6-android-addrbar.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">6-android-addrbar.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/7-android-teachpy.png.html"> <img src="_thumbspage/7-android-teachpy.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">7-android-teachpy.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/8-ios-4in-safari.PNG.html"> <img src="_thumbspage/8-ios-4in-safari.PNG" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">8-ios-4in-safari.PNG</p> </td> </tr> <tr> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/9-ios-landscape.PNG.html"> <img src="_thumbspage/9-ios-landscape.PNG" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">9-ios-landscape.PNG</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/A-mergeall-userguide.png.html"> <img src="_thumbspage/A-mergeall-userguide.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">A-mergeall-userguide.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/B-mergeall-landscape.png.html"> <img src="_thumbspage/B-mergeall-landscape.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">B-mergeall-landscape.png</p> </td> </tr> <tr> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/C-pyedit-userguide.png.html"> <img src="_thumbspage/C-pyedit-userguide.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">C-pyedit-userguide.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/D-pyedit-landscape.png.html"> <img src="_thumbspage/D-pyedit-landscape.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">D-pyedit-landscape.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/E-trnpix-view-mobile.png.html"> <img src="_thumbspage/E-trnpix-view-mobile.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">E-trnpix-view-mobile.png</p> </td> </tr> <tr> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/F-more-about-lp.png.html"> <img src="_thumbspage/F-more-about-lp.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">F-more-about-lp.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/G-more-about-py.png.html"> <img src="_thumbspage/G-more-about-py.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">G-more-about-py.png</p> </td> <td style="text-align: center; width: 33%; padding: 4px; color: white;"> <A href="_thumbspage/H-more-about-tp.png.html"> <img src="_thumbspage/H-more-about-tp.png" style="border: thin solid white;" alt="Image thumbnail" title="View image"></A> <p style="white-space: nowrap; margin-top: 0px;">H-more-about-tp.png</p> </td> </tr> </table></div></p> <!-- ======================================================================= --> <!-- END THUMBS TABLE --> <!-- ======================================================================= --> <!-- Generated 2022-05-09 @16:04:46, by thumbspage 2.3: learning-python.com/thumbspage.html --> <!-- ======================================================================= --> <!-- START DEFAULT FOOTER --> <!-- ======================================================================= --> <p style="margin-bottom: 80px;"><i>Gallery built by <A HREF="https://learning-python.com/thumbspage.html">thumbspage.py</A></i></p> </body></html>