Enhancements, Again :) (#14)

* Remove unnecessary exclamation mark.

* First attempt to add photo.

* Make the title consistent with others.

* Add a readme for a new folder.

* Make the ignorance under the files folder more strict.

* Bring Infinite Timer up in order since I use it more than T45MR.

* Add photos to the main pages!!

* Simplify name.

* Fix occasional formatting weirdness.

* Fix formatting issues, add comments.

* Fix background color.

* Add trailing slash for consistency.

.gitignore

@@ -105,4 +105,4 @@ dist
 
 ## Above is Github's recommendations for Node.js. Below are my additions. ##
 package-lock.json
-files/photos/*
+files/*

files/README.md

@@ -1,4 +1,4 @@
-# Hyperling.com - Files
+# Hyperling.com - files/
 
 Place files into this folder which should be used as static resources.
 Examples would be APKs, zip files, images, text files, etc.

files/media/README.md

@@ -0,0 +1,3 @@
+# Hyperling.com - files/media/
+
+Where other/miscellaneous files are stored for hidden reference or download.

pages/about.php

@@ -6,6 +6,11 @@
 		<div class="row">
 			<h1 class="col-12 title">Who Am I?</h1>
 		</div>
+		<div class="row">
+			<div class="col-12 header center" >
+				<img src="/files/photos/20231202_Picacho-Peak/20231202104115608_me-proving-that-I-made-it-to-the-top-;).shrunk20231204.jpg">
+			</div>
+		</div>
 		<div class="row">
 			<div class="col-12 text">
 				<p>

pages/contact.php

@@ -7,7 +7,12 @@
 			<h1 class="col-12 title">Contact</h1>
 		</div>
 		<div class="row">
-			<div class="col-12 header">
+			<div class="col-12 header center" >
+				<img src="/files/photos/20231118_Wizard-Friend-In-Arizona/20231121140823190_Apache-Lake,-Closer-Shot-Of-Our-Bay-From-Nearest-Hill.shrunk20231125.jpg">
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-12 title">
 				<p>
 					Timely responses are not guarenteed, as I spend a majority of
 					my time offline and enjoy traveling in signal-free zones.

pages/helpers/banner.php

@@ -1,5 +1,5 @@
 #!/usr/bin/php
-		<a href='/about'>
+		<a href='/about/'>
 			<div class="row col-12 header">
 				<div class="banner-top">Peace</div>
 				<div class="banner-middle">Love</div>

pages/home.php

@@ -9,6 +9,11 @@
 			<div class="row">
 				<h1 class="col-12 title">Welcome!</h1>
 			</div>
+			<div class="row">
+				<div class="col-12 header center" >
+					<img src="/files/media/icons/20230423165239277_Chad-on-the-mountains.shrunk20230831.resized20240125_16x9.jpg">
+				</div>
+			</div>
 			<div class="row">
 				<div class="col-12 text">
 					<p>

pages/photos.sh

@@ -28,7 +28,7 @@ echo "" >> $mainpage
 
 # Give the page a description.
 echo -e "\t\t<div class='row'>" >> $mainpage
-echo -e "\t\t\t<h1 class='col-12 title'>Media Albums</h1>" >> $mainpage
+echo -e "\t\t\t<h1 class='col-12 title'>Albums</h1>" >> $mainpage
 echo -e "\t\t</div>" >> $mainpage
 
 echo -e "\t\t<div class='row'>" >> $mainpage
@@ -74,7 +74,6 @@ ls $PHOTOS_DIR/ | sort -r | while read album; do
 	echo -e "\t\t\t<h1 class='col-12 title'>$album_name</h1>" >> $subpage
 	echo -e "\t\t</div>" >> $subpage
 
-	echo -e "\t\t<div class='row text'>" >> $subpage
 	ls $PHOTOS_DIR/$album/* | sort | while read photo; do
 		# Do not include the index page.
 		if [[ $photo == *"index.html" ]]; then
@@ -104,10 +103,20 @@ ls $PHOTOS_DIR/ | sort -r | while read album; do
 			echo -e "</a></li>" >> $mainpage
 		fi
 
-		# Put in the subpage HTML.
+		## Put in the subpage HTML ##
+		# Set the count if this is the first loop.
+		if [[ -z $count ]]; then
+			count=0
+		fi
+		# Add a row for the next 2 images.
+		if (( $count % 2 == 0 )); then
+			echo -e "\t\t<div class='row text'>" >> $subpage
+		fi
+		# Add the container for the image and its text.
 		echo -e "\t\t\t<div class='col-6 center'>" >> $subpage
 		echo -en "\t\t\t\t<a href=/$photo target='_blank' " >> $subpage
 		echo -e "rel='noopener noreferrer'>" >> $subpage
+		# Determine what type of media it is, and how to display it.
 		if [[ $photo == *".mp4" ]]; then
 			echo -e "\t\t\t\t\t<video width='320px' controls>" >> $subpage
 			echo -e "\t\t\t\t\t\t<source src='/$photo' type=video/mp4>" >> $subpage
@@ -118,13 +127,18 @@ ls $PHOTOS_DIR/ | sort -r | while read album; do
 		else
 			echo -e "\t\t\t\t\t<img src='/$photo'/>" >> $subpage
 		fi
-
+		# Check if it needs an extra descriptive detail.
-		# Add a descriptive link.
 		echo -en "\t\t\t\t\t<p>$filename" >> $subpage
 		if [[ $photo == *".mp4" ]]; then
 			echo -en " [VIDEO]" >> $subpage
 		fi
+		# Close the image description and its link.
 		echo -e "</p>\n\t\t\t\t</a>\n\t\t\t</div>" >> $subpage
+		# Close the row after an odd count.
+		if (( $count % 2 == 1 )); then
+			echo -e "\t\t</div>" >> $subpage
+		fi
+		count=$(( count + 1 ))
 	done
 	echo -e "\t\t</div>" >> $subpage
 

pages/subpages/home/apps.php

@@ -44,35 +44,6 @@
 				</figure>
 			</div>
 
-			<div class="col-6" id="sleep">
-				<figure>
-					<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.the45minuterule"
-						target="_blank" rel="noopener noreferrer">
-						<img loading="lazy" width="100%" height="100%" alt="45minuterule"
-							src="https://files.hyperling.com/media/t45mr.png"
-						/>
-						<figcaption>
-							<p>45 Minute Rule</p>
-						</a>
-						<p>
-							Determine a good bedtime for waking during light sleep.
-						</p>
-						<p>
-							[<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.the45minuterule"
-								target="_blank" rel="noopener noreferrer">Play Store</a>]
-							[<a href="https://files.hyperling.com/apks/45MinuteRule.apk">APK</a>]
-						</p>
-						<!--<p>
-							TBD:
-							<s>
-								[<a target="_blank" rel="noopener noreferrer">F-Droid</a>]
-								[<a target="_blank" rel="noopener noreferrer">Github</a>]
-							</s>
-						</p>-->
-					</figcaption>
-				</figure>
-			</div>
-
 			<div class="col-6" id="timer">
 				<figure>
 					<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.infinitetimer"
@@ -102,6 +73,37 @@
 					</figcaption>
 				</figure>
 			</div>
+		</div>
+
+		<div class="row text center">
+			<div class="col-6" id="sleep">
+				<figure>
+					<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.the45minuterule"
+						target="_blank" rel="noopener noreferrer">
+						<img loading="lazy" width="100%" height="100%" alt="45minuterule"
+							src="https://files.hyperling.com/media/t45mr.png"
+						/>
+						<figcaption>
+							<p>45 Minute Rule</p>
+						</a>
+						<p>
+							Determine a good bedtime for waking during light sleep.
+						</p>
+						<p>
+							[<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.the45minuterule"
+								target="_blank" rel="noopener noreferrer">Play Store</a>]
+							[<a href="https://files.hyperling.com/apks/45MinuteRule.apk">APK</a>]
+						</p>
+						<!--<p>
+							TBD:
+							<s>
+								[<a target="_blank" rel="noopener noreferrer">F-Droid</a>]
+								[<a target="_blank" rel="noopener noreferrer">Github</a>]
+							</s>
+						</p>-->
+					</figcaption>
+				</figure>
+			</div>
 
 			<div class="col-6" id="games">
 				<figure>

pages/support.php

@@ -10,6 +10,9 @@
 			<h1 class="col-12 title">Support</h1>
 		</div>
 		<div class="row">
+			<div class="col-12 header center" >
+				<img src="/files/photos/20231118_Wizard-Friend-In-Arizona/20231119161915782_Payson,-East-Verde-River,-Happy-Dog-Cleo.shrunk20231125.jpg">
+			</div>
 			<div class="col-12 text">
 				<p>
 					Your contributions are completely optional and very much

pages/videos.php

@@ -6,10 +6,15 @@
 	include "helpers/body_open.php";
 ?>
 
-<div class="row">
+		<div class="row">
 			<h1 class="col-12 title">Videos</h1>
-</div>
+		</div>
-<div class="row">
+		<div class="row">
+			<div class="col-12 header center" >
+				<img src="/files/photos/20230908_Chad_And_Cleo_Touring_Transition_Zone/20230909081850318.shrunk20230913.jpg">
+			</div>
+		</div>
+		<div class="row">
 			<div class="col-12 text">
 				<p>
 					For the best viewing experience, please go directly to my channel here:
@@ -38,22 +43,22 @@
 					</a>
 				</li></ul>
 			</div>
-</div>
+		</div>
 
-<div class="row">
+		<div class="row">
 			<h1 class="col-12 title">Personal Media</h1>
-</div>
+		</div>
-<div class="row">
+		<div class="row">
 			<div class="col-12 text">
 				<p>
 					I don't have social media, so where do my photos and videos go?
 					Try right here!
 				</p>
 				<ul class="indent"><li>
-			<a href="/photos">My Photos</a>
+					<a href="/photos/">My Photos</a>
 				</li></ul>
 			</div>
-</div>
+		</div>
 
 <?php
 	include "helpers/body_close.php";