Add files via upload

pdwilso · Jun 18, 2023 · 258e299 · 258e299
1 parent 11c946b
commit 258e299
Show file tree

Hide file tree

Showing 17 changed files with 591 additions and 0 deletions.
diff --git a/template/catspaw.html b/template/catspaw.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <!-- https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_object_html -->
+  <title>Cat Paw</title>
+  <style>
+    body {
+	margin:0;
+	padding:0;
+	font-family:sans-serif;
+	font-size:14pt;
+	background-color:black;
+	color:lime;
+	text-decoration:none;
+    }
+    a { color: cyan; }
+    a:link { color:cyan; }
+    a:visited { color:cyan; }
+    a:active  { color:yellow; }
+    a:hover   { text-decoration: underline; }
+    h1 {
+	margin:10px; padding:10px;
+	border:1px solid cyan;
+    }
+    p {
+	margin:10px;padding:10px;
+	border:1px solid cyan;
+    }
+    #cat-paw {
+	padding:10px;
+	margin:10px;
+	width:25%;
+	height:25%;
+	border:1px solid cyan;
+	background-color:white;
+	color:black;
+    }
+  </style>
+  <body>
+
+    <h1>The <code>object</code> Element</h1>
+
+    <p>
+      In this example the HTML 5 <code>object</code> element is used
+      to display the SVG
+      file <a href="catspaw.svg"><code>catspaw.svg</code></a>
+    </p>
+    <p>
+      <object id="cat-paw" data='catspaw.svg'></object>
+    </p>
+
+  </body>
+</html>
diff --git a/template/catspaw.svg b/template/catspaw.svg
diff --git a/template/essentials.html b/template/essentials.html
@@ -0,0 +1,6 @@
+    <meta charset="utf-8">
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+    * { box-sizing: border-box; }
+    </style>
diff --git a/template/gl-body-elem.php b/template/gl-body-elem.php
@@ -0,0 +1,55 @@
+<?php
+/*
+    File: gl-body-elem.php
+    Desc: Grid Layout <body> element for grid layout Tempate
+    Date: 2023-04-17
+    Auth: sumkittehz.codes
+*/
+
+$phpmodules = array(
+    "gl-item-head.php",
+    "gl-item-menu.php",
+    "gl-item-main.php",
+    "gl-item-foot.php",
+);
+/* 
+   open the body element 
+   TODO: the HTML generated by this podule should be accumulated 
+         into an output string - This echo statement should be replaced 
+         by e.g. '$html_output_string .= <<<' - this means that the output string
+         must be declared at the top of the module, assignments to the output string
+         using '.=' should replace all echo statements.
+*/
+echo <<<'EOE'
+<body>
+  <details>
+    <summary><span class="info">#file-info</span></summary>
+    <pre class="file-info">
+      File: grid-layout.10.php
+      Desc: Responsive Grid Layout Template Example
+      Date: 2023-04-17
+      Auth: <a href="https://sumkittehz.codes/">sumkittehz.codes</a>
+    </pre>
+  </details>
+EOE;
+
+/* open grid-container -- this is the element that has the grid map 
+   in CSS (selector .gird-container  -- */
+echo('<div class="grid-container">'."\n");
+/* require each of the PHP modules required by the template */
+foreach($phpmodules as $fn) { require( $fn ); }
+echo( "  </div><!-- close DIV class grid-container -->\n" );  
+
+/*  Create source file listings */
+$srcfilelst = array( "grid-layout.10.css","grid-layout.10.php" );
+
+foreach ( array( "grid-layout.10.css","grid-layout.10.php" ) as $fn) {
+     echo '<details><summary><span class="info">'.$fn.'</summary>';
+     echo '<pre class="filelisting">Filename:  <a target="_blank" href="'.$fn.'">'.$fn.'</a>'."\n<hr/>\n";
+     highlight_file($fn);
+     echo "<hr>";
+     echo '<span>end of file '.$fn."</span></pre>\n";
+     echo "</details>";
+   }
+echo( "  </body>\n" );
+?>
diff --git a/template/gl-details.css b/template/gl-details.css
@@ -0,0 +1,16 @@
+    details p,
+    details pre {
+	font-size:14ppt;
+	margin-left:1em;
+	margin-right:1em;
+	margin-top:0.5em;
+	margin-bottom:0.5em;
+	padding:2px 4px 1px 4px;
+	border:1px solid cyan;
+	background-color:linen;
+	color:blue;
+    }
+    details pre {
+	background-color:white;
+	color:black;
+    }
diff --git a/template/gl-filelisting.css b/template/gl-filelisting.css
@@ -0,0 +1,12 @@
+    .filelisting {
+	font-family:Roboto Mono,monospace;
+	font-size:10pt;
+	width:90%;
+	margin:auto;
+	padding:1em;
+	background-color:linen;
+	color:rgb(32,32,32);
+	border:1px solid cyan;
+    }
+    .filelisting a { text-decoration:none; }
+    .filelisting a:hover { text-decoration:underline; }
diff --git a/template/gl-head-elem.php b/template/gl-head-elem.php
@@ -0,0 +1,65 @@
+<?php
+/* 
+   File:  gl-head-elem.php
+   Date:  2023-04-16
+   Auth:  sumkittehz.codes
+   Desc:  This module provides the <head></head> element for the grid-layout template
+          as a string.  The module constructs the HTML element as an output string,
+          then writes the accumulated HTML to std out.
+          Note that if this module is to be used as part of a live page, then the 
+          $DocumentTitleString should be set, below, and any additional <meta/> elements, 
+          stylesheet <link/> elements should be specified here.  Addition <style></style>
+          elements may also be added.
+*/
+$DocumentTitleString = "codez: Grid Layout Template Example";
+$metaelements = array (
+    '<meta name="viewport" content="width=device-width,initial-scale=1.0"/>',
+    '<meta charset="UTF-8"/>',
+);
+
+/* 
+$stylesheets is an array of stylesheet filenames 
+gl-details.css
+gl-filelisting.css
+gl-info.css
+gl-item-head.css
+gl-style.css
+grid-layout.10.css
+*/
+$stylesheets = array (
+    "grid-layout.10.css",
+    "gl-info.css",
+    "gl-details.css",
+    "gl-filelisting.css",
+    "gl-item-head.css",
+    "gl-style.css",
+);
+
+/* $html_output_string accumulates HTML for output */
+/* add the <head> element open tag to $output_sring*/
+$html_output_string = "<head>\n";
+
+/* add document's title string to $html_output_string */
+$html_output_string .= "  <title>$DocumentTitleString</title>\n";
+
+/* add <meta> elements to $html_output_string */
+foreach ($metaelements as $meta) {
+    $html_output_string .= "  $meta\n";
+}
+
+/* add stylesheet link elements to $html_output_string */
+foreach ($stylesheets as $fn) {
+    $html_output_string .= '<link rel="stylesheet" href="'.$fn.'"/>'."\n";
+}
+
+/* add additional <style> element */
+$html_output_string .= "    <style>\n  "
+    . "    .grid-container div { font-size:10pt; font-weight:normal; }\n"
+    . "  </style>\n";
+
+/* add closing head element tag */
+$html_output_string .= "</head>\n";
+
+/* Ouput the accomulated HTML */
+echo $html_output_string;
+?>
diff --git a/template/gl-info.css b/template/gl-info.css
@@ -0,0 +1,31 @@
+    .info {
+        border:1px solid blue;
+        padding-left: 3px;
+        padding-right:3px;
+        background-color:rgba(0,0,128,0.5);
+        color: black;
+        font-family:Verdana, sans-serif;
+        font-size:10pt;
+    }
+    .info {
+        font-family:Verdana, sans-serif;
+        font-size:10pt;
+        border:1px solid blue;
+        padding-left: 3px;
+        padding-right:3px;
+        background-color:rgba(0,0,128,0.5);
+        color: black;
+    }
+    .file-info {
+        font-size:10pt;
+        font-family:"Verdana", "sans-serif";
+        border:1px solid blue;
+        padding-top: 10px;
+        padding-bottom:0px;
+        padding-left: 6px;
+        padding-right:6px;
+        background-color:rgba(0,0,128,0.5);
+        color: blue;
+        line-height:1.1;
+    }
+
diff --git a/template/gl-item-foot.php b/template/gl-item-foot.php
@@ -0,0 +1,14 @@
+<?php
+$html_output_string = '
+    <div class="item-footer">
+      <details id="ga-footer">
+	<summary>
+	  <span class="divlabel">#item-footer</span>
+	</summary>
+	<p>This is the item-footer grid area block.</p>
+      </details>
+      <p style="margin:0 4em;">made by <cite>sumkittehz.codes</cite></p>
+    </div><!-- close class item-footer -->
+';
+echo $html_output_string;
+?>
diff --git a/template/gl-item-head.css b/template/gl-item-head.css
@@ -0,0 +1,30 @@
+/*
+	File:	gl-item-header.css
+	Date:	2023-04-16
+	Auth:	sumkittehz.codes
+	Desc:	This file contains CSS rules that apply to the '#item-header' element
+ */
+#clock {
+    border: 1px solid red;
+    display:inline-block;
+    border:1px solid purple;
+    padding:4px;
+}
+#UTC {
+    border: 1px solid green;
+    float:right;
+    clear:right;
+}
+#cat-paw {
+    width:64px;
+    height:64px;
+    float:left;
+}
+#item-header header {
+    paddding:10px;
+}
+#item-header header h1 {
+    margin:auto;
+    text-align:center;
+    border:1px solid blue;
+}
diff --git a/template/gl-item-head.php b/template/gl-item-head.php
@@ -0,0 +1,63 @@
+<?php
+/*
+  File:  gl-item-head.php
+  Date:  2023-04-17
+  Auth:  sumkittehz.codes
+  Desc:  This module is part of the grid-layout template.
+  Desc:  This module outputs HTML to create div.item-header element
+ */
+$html_output_string = '
+<div class="item-header">
+  <details id="ga-header">
+    <summary>
+      <span class="divlabel">#item-header</span>
+    </summary>
+    <p>
+      This is the <code><b>&lt;div class=&quot;#item-header&gt;</b></code>.
+      &mdash; this element occupies the grid map  area labelled &quot;head&quot;
+      &mdash;- this element area spans the entire grid on the top row.
+    </p>
+  </details>
+  <header>
+
+<!-- logo block start  -->
+    <div style="padding-top:5pt;border:1px solid red;">
+      <details id="catspaw">
+        <summary><span class="divlabel">#cat-paw</span></summary>
+        <pre>
+ HTML 5 object Element
+ id=&quot;cat-paw&quot;
+ data=&quot;<a target=&quot;_blank&quot; href="catspaw.svg">catspaw.svg</a>&quot;
+        </pre>
+      </details>
+      <object style="margin:5pt;;padding:5pt;border:1px solid #212121" id="cat-paw" data="catspaw.svg"></object>
+   </div>
+<!--  logo block end -->
+
+   <h1>Grid Layout Example</h1>
+   <p>Local System Time: <span id="localtime">00:00:00</span></p>
+   <div id="UTC">00:00:00</div>
+ </header>
+
+ <script>
+    function showTime() {
+      let time = new Date();
+      let hour = time.getHours();
+      let min  = time.getMinutes();
+      let sec  = time.getSeconds();
+      am_pm    = "AM";
+  
+      hour = hour < 10 ? "0" + hour : hour;
+      min  = min < 10 ? "0" + min : min;
+      sec  = sec < 10 ? "0" + sec : sec;
+ 
+      let currentTime = hour + ":" + min + ":" + sec;
+      document.getElementById("clock").innerHTML = time.toTimeString();;
+      document.getElementById("UTC").innerHTML = time.toUTCString();
+    }
+    setInterval(showTime, 1000);
+  </script>
+ </div><!-- close class item-header -->
+';
+echo $html_output_string;
+?>
diff --git a/template/gl-item-main.php b/template/gl-item-main.php
@@ -0,0 +1,30 @@
+<?php
+echo <<< 'EOBM'
+   <div class="item-main">
+      <details id="ga-main">
+	<summary><span class="divlabel">#item-main</span></summary>
+	<p>This is the item-main grid area block.</p>
+	<p>The CSS block shown below is used in the stylesheet
+	to create an area map of the grid.</p>
+	<pre>
+  grid-template-areas:
+    'header header header header header header'
+    'menu main main main main main'
+    'footer footer footer footer footer footer';
+	</pre>
+	<p>
+	  Each of the grid area blocks is identified
+	  by <code>id=&quot;item-[NAME]&quot;</code>,
+	  where <code>[NAME]</code> is replaced by one of the grid
+	  area names from the <code>grid-template-areas</code> value
+	  assigned in the <code>.grid-container</code>, above.
+	</p>
+      </details>
+      
+      <h2>Main Content</h2>
+      <p>This grid layout contains six columns and three rows.</p>
+      <p>This is a <i>Responsive CSS Grid Template Example</i> built
+      from the examples at w3schools.</p>
+    </div><!-- close class item-main -->
+EOBM;
+?>