ADD: new music page, babyyy! :D using covers embedded in music file tags will not work without the jizz script though :(

app/db_connector.php

@@ -26,9 +26,37 @@ function get_images($pdo, $search='%', $sort='img_date', $sdir='DESC') {
     $img_list .= '<li>';
     $img_list .= '<img src=\''.$block['img_path'].'\'><br>';
     $img_list .= '<h4>'.$block['img_title']."<br></h4>";
-    $img_list .= '<p>'.$block['img_desc']."</p>";
+    $img_list .= '<p class="list_text">'.$block['img_desc']."</p>";
     $img_list .= '</li>';
   }
   $img_list .= '</ul>';
   echo $img_list;
 }
+
+function get_audio($pdo, $search='%', $sort='aud_date', $sdir='DESC') {
+  if ($sort != 'aud_date' && $sdir != 'ASC') {
+    if ($sort != 'aud_title' && $sdir != 'DESC') {
+      echo('Ey boss, database request is kinda f*cked up. Maybe you want to try that again, hey...<br>'.$sort.' '.$sdir);
+      die();
+    }
+  }
+  $params = array('search' => $search);
+  $stmt = $pdo->prepare("SELECT * FROM audio WHERE aud_title LIKE CONCAT('%', :search ,'%') ORDER BY $sort $sdir;");
+  $stmt->execute($params);
+  // $stmt->debugDumpParams();
+  $data = $stmt->fetchAll();
+
+  $aud_list = '<ul class="aud_list">';
+  foreach ($data as $block) {
+    $aud_list .= '<li>';
+    $aud_list .= '<audio controls>';
+    $aud_list .= '<source src=\''.$block['aud_path'].'\' type="audio/mpeg">';
+    $aud_list .= 'There would be an awesome music player here if you weren\'t such a weirdo...';
+    $aud_list .= '</audio>';
+    $aud_list .= '<h4>'.$block['aud_title']."<br></h4>";
+    $aud_list .= '<p class="list_text">'.$block['aud_desc']."</p>";
+    $aud_list .= '</li>';
+  }
+  $aud_list .= '</ul>';
+  echo $aud_list;
+}

app/db_utilities.php

@@ -0,0 +1,22 @@
+<?php
+
+$toolbar = <<<TOOLBAR
+<form class='db_utilities' method='POST'>
+    <label for='sel_order'>order by:</label>
+    <select name='sel_order' id='sel_order'>
+      <option value='new'>newest</option>
+      <option value='old'>oldest</option>
+      <option value='az'>A - Z</option>
+      <option value='za'>Z -A</option>
+    </select>
+    <label for='inp_search'>search:</label>
+    <input type='search' name='inp_search' id='inp_search'></input>
+    <label for='submit'> </label>
+    <input type='submit' name='submit'  value='&nbsp;filter&nbsp;'></input>
+  </form>
+TOOLBAR;
+
+function showToolbar() {
+  global $toolbar;
+  echo $toolbar;
+}

public/about.php

@@ -1,4 +1,4 @@
-<h1 class='cat_heading'>> chosen file type: person<br>&nbsp;&nbsp;getting to know me is futile...<br>&nbsp;&nbsp;listing files...<br><img src='./resources/img/shell_prompt.gif' class='pixelart' style='height: 1em;'></h1>
+<h1 class='cat_heading'>> chosen file type: person<br>&nbsp;&nbsp;getting to know me is futile...<br>&nbsp;&nbsp;listing files...<br>$<img src='./resources/img/cursor_blinking.gif' class='pixelart' style='height: 1em;'></h1>
 
 <h2>I am a human. Treat me as such. I will reciprocate.</h2>
 

public/audio.php

@@ -1,2 +1,35 @@
+<h1 class='cat_heading'>> chosen file type: audio<br>&nbsp;&nbsp;listing files...</h1>
+
 <?php
-  echo('<h1>bong</h1>');
+  include_once('../app/db_connector.php');
+  include_once('../app/db_utilities.php');
+
+  showToolbar();
+
+  if( isset($_POST['sel_order']) && isset($_POST['inp_search']) ) {
+    $sort = 'aud_date'; 
+    $sdir = 'DESC';
+    
+    switch($_POST['sel_order']) {
+      case 'new':
+        break;
+      case 'old':
+        $sdir = 'ASC';
+        break;
+      case 'az':
+        $sort = 'aud_title';
+        $sdir = 'ASC';
+        break;
+      case 'za':
+        $sort = 'aud_title';
+        break;
+      default:
+        break;
+    }
+      
+    get_audio($pdo, $_POST['inp_search'], $sort, $sdir);
+  }
+  else {
+    get_audio($pdo);
+  }
+?>

public/image.php

@@ -1,21 +1,10 @@
 <h1 class='cat_heading'>> chosen file type: image<br>&nbsp;&nbsp;listing files...</h1>
 
-<form class='db_utilities' method='POST'>
-  <label for='sel_order'>order by:</label>
-  <select name='sel_order' id='sel_order'>
-    <option value='new'>newest</option>
-    <option value='old'>oldest</option>
-    <option value='az'>A - Z</option>
-    <option value='za'>Z -A</option>
-  </select>
-  <label for='inp_search'>search:</label>
-  <input type='search' name='inp_search' id='inp_search'></input>
-  <label for='submit'> </label>
-  <input type='submit' name='submit'  value='&nbsp;filter&nbsp;'></input>
-</form>
-
 <?php
   include_once('../app/db_connector.php');
+  include_once('../app/db_utilities.php');
+
+  showToolbar();
 
   if( isset($_POST['sel_order']) && isset($_POST['inp_search']) ) {
     $sort = 'img_date'; 

public/index.php

@@ -72,7 +72,7 @@
     <a href='./index.php?el=privacy'>privacy policy</a>
     <a href='./index.php?el=contact'>contact</a>
   </p>
-  <p class='footer_element'><a href='https://layer-8.moe/'>layer-8.moe</a>: non-commercial homepage run by a private individual <?php echo date("Y"); ?></p>
+  <p class='footer_element'><a href='https://layer-8.moe/'>layer-8.moe</a> - non-commercial homepage run by a private individual <?php echo date("Y"); ?></p>
   <p class='footer_element'> 
     &nbsp;<a href='https://layer-8.moe/' target='_blank'><img src='./resources/img/site-ad.gif'></a>
     &nbsp;<a href='https://quintern.xyz/' target='_blank'><img src='./resources/img/site-ad-quintern.gif'></a>

public/resources/stylesheet.css

@@ -118,6 +118,23 @@ footer {
   margin: 1rem;
 }
 
+.aud_list {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 2rem;
+}
+
+.aud_list li {
+  list-style-type: none;
+  margin: 1rem;
+}
+
+.list_text {
+  width: 70vw;
+}
+
 .cat_heading {
   font-family: 'mono';
   font-size: 2rem;