shell-scripts/template.html at development · tomasohara/shell-scripts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML>
<HTML lang="en">
  <!-- Template for simple HTML files -->
  <!-- TODO: revise based on changes in ~/technical/multiple-image-fading.html -->
  <HEAD>
    <META charset="UTF-8">
    <META name="viewport" content="width=device-width, initial-scale=1.0">
    <TITLE>TODO: Title</TITLE>

    <!-- Following is for debugging (e.g., console usage of $) -->
    <SCRIPT src="https://code.jquery.com/jquery-1.12.4.js"></SCRIPT>

    <STYLE>
      /* Styling for web page */
      body {
         /* Use a Sans-Serif font (so better on low resolutions) */
         font-family: Arial, Helvetica, sans-serif;
      }

      /* Styling for table */
      .my-table, .my-table th, .my-table td {
	  border: 1px solid black;
	  border-collapse: collapse;   /* ensure borders continuous */
      }

      /* For debugging, add border around each element */
      * {
         /* TODO: border: dotted 1px yellowgreen; */     /* #9ACD32 */
      }
    </STYLE>

  </HEAD>

  <BODY>

    <!--.....................................................................-->
    <H3>TODO: Title</H3>

    <P>
      TODO: para1

    <P>
      TODO: para2

      <!-- TODO: add optional table
           Notes:
           - Under emacs, use this regex replacement via query-replace-regexp
           for converting a tab-delimited file:
              from: ^\([^^Q<TAB>^Q<NEWLINE>\]+\)^Q<TAB>\([^Q<NEWLINE>]+\)
              to: <tr><td>\1</td> <td>\2</td></tr>
	   -or-:
              (query-replace-regexp (format "%s" "^\\([^\n\t]+\\)\t\\([^\n]+\\)\n")   (format "%s" "\t<tr><td>\\1</td> <td>\\2</td></tr>\n"))
	    TODO: fix tab and newline specification
           - Alternatively via Perl, use following:
             perl -pe 's@^([^\t]+)\t([^\n]+)@\t<tr><td>\1</td> <td>\2</td></tr>@;' < {input-file} > {temp-output-file}
        -->
      <TABLE class="my-table">
        <!-- TODO: See whether th should be used in place of td in thead -->
        <THEAD>
          <TR><TD>TODO:column-1</TD> <TD>TODO:column-2</TD></TR>
        </THEAD>
        <TBODY>
          <TR><TD>TODO:item-1-1</TD> <TD>TODO:item-1-2</TD></TR>
          <TR><TD>TODO:item-2-1</TD> <TD>TODO:item-2-2</TD></TR>
        </TBODY>
      </TABLE>

      <H3>Disclaimer</H3>
      TODO: All code is freely available in the <A HREF="http://www.gnu.org">GNU</A> sense.

      <!--...................................................................-->

      <SCRIPT>
        // Trace out screen and window dimensions
        console.debug("Browser window dimensions: " + $(window).width() + "x" + $(window).height());
        //
        console.debug("Screen dimensions: " + window.screen.height + "x" + window.screen.width);
      </SCRIPT>

  </BODY>
</HTML>