better layout, better organization

html/index.php

@@ -156,11 +156,175 @@ function makelink($link, $img, $filename, $style="") {
 function linkorselect($link, $img, $filename) {
   if (isset($_REQUEST['select'])) {
     echo '<input type="checkbox" id="'.htmlentities($filename).'" name="elements[]" value="'.htmlentities($filename).'" />';
-    echo '<label for="'.htmlentities($filename).'"><img src="'.$img.'" alt="'.htmlentities($filename).'"/></label>';
+    echo '<label for="'.htmlentities($filename).'"><img class="thumbnail" src="'.$img.'" alt="'.htmlentities($filename).'"/></label>';
   } else {
     makelink($link, $img, $filename, 'class="thumbnail"');
   }
 }
+
+function pageheader($arrows=NULL) {
+  global $username, $subpath;
+?>
+  <div id="header">
+    <h1>Gallery: <?php echo htmlentities($username).($subpath?'@'.htmlentities($subpath):'') ?></h1>
+    <?php
+    if ($arrows) {
+    ?>
+      <span id="arrows"><?php echo $arrows ?></span>
+    <?php
+    }
+    ?>
+  </div>
+<?php
+}
+
+function gallery() {
+  global $subpath, $imagepath, $max_validity_days;
+  $arrows = '';
+  if (preg_match('/\//', $subpath)) {
+    $arrows = '<a href="?path='.urlencode(preg_replace('/\/[^\/]+$/', '', $subpath)).'" title="up">↑</a>';
+  } elseif ($subpath!="") {
+    $arrows = '<a href="?" title="up">↑</a>';
+  }
+  pageheader($arrows);
+  if (isset($_REQUEST['select'])) {
+    echo '<a href="?path='.urlencode($subpath).'">Normal-Modus</a>';
+    echo '<form method="POST">';
+    echo '<input type="hidden" name="path" value="'.htmlentities($subpath).'">';
+    echo '<label for="password">Passwort:</label>';
+    echo '<input type="text" size="5" name="password" value="'.substr(str_shuffle(strtolower(sha1(rand().time()."SeAG6"))),0,4).'">';
+    echo '<label for="valid-until">Gültig bis:</label>';
+    echo '<input type="date" size="10" name="valid-until" max="'.date('Y-m-d', time()+((int)$max_validity_days)*86400).'" value="'.date('Y-m-d', time()+14*86400).'"/>';
+    echo '<input type="submit" name="share" value="Teilen"/>';
+  } else {
+    echo '<a href="?path='.urlencode($subpath).'&select">Auswahl-Modus</a>';
+  }
+  echo '<div class="dirs">';
+  $objects = extractDir($imagepath);
+  foreach ($objects['dirs'] as $f)
+  makelink('?path='.urlencode($subpath.($subpath!=""?'/':'').$f), '?path='.urlencode($subpath).'&folder='.urlencode($f), $f, 'class="folder"');
+  echo '</div><div class="images">';
+  foreach ($objects['files'] as $f)
+  linkorselect('?path='.urlencode($subpath).'&file='.urlencode($f).'&view', '?path='.urlencode($subpath).'&file='.urlencode($f).'&thumb', $f);
+  echo '</div>';
+  if (isset($_REQUEST['select'])) echo '</form>';
+}
+
+function singleimage() {
+  global $subpath, $imagepath, $imgfile, $preview_num;
+  $objects = extractDir($imagepath);
+  $pos = array_search($imgfile, $objects['files']);
+  $arrows='';
+  if ($pos>0) 
+    $arrows .= '<a href="?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos-1]).'&view" title="previous">←</a>';
+  $arrows .= '<a href="?path='.urlencode($subpath).'" title="back">↑</a>';
+  if ($pos<count($objects['files'])-1) 
+    $arrows .= '<a href="?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos+1]).'&view" title="next">→</a>';
+  pageheader($arrows);
+  echo '<div class="image"><img class="image" src="?path='.urlencode($subpath).'&file='.urlencode($imgfile).'" alt="'.urlencode($imgfile).'"/></div>';
+  if ($pos!==NULL) {
+    $lower = max(0, $pos-floor(((int)$preview_num)/2));
+    $higher = min(count($objects['files']), $lower+((int)$preview_num));
+    for ($i=$lower; $i<$higher; ++$i)
+      makelink('?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$i]).'&view', '?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$i]).'&thumb', $objects['files'][$i], 'style="width: '.round(100/($higher-$lower), 3).'%" class="thumbnail"');
+  }
+}
+
+function share() {
+  global $subpath, $myurl, $email, $fullname, $default_mail_text, $default_mail_subject;
+  pageheader('<a href="?path='.urlencode($subpath).'">←</a>');
+  $key = $_REQUEST;
+  unset($key['password']);
+  unset($key['share']);
+  unset($key['select']);
+  $secret=urlencode(encrypt($key));
+  $default_mailto = "";
+  if (isset($_REQUEST['mailto'])) {
+    if (preg_match('/PASSWORD/', $_REQUEST['mailtext']))
+      $message = preg_replace('/PASSWORD/', $_REQUEST['password'], $_REQUEST['mailtext']);
+    else
+      $message = $_REQUEST['mailtext']."\n\npassword: ".$_REQUEST['password'];
+    $link = $myurl.'?secret='.$secret;
+    if (preg_match('/LINK/', $message))
+      $message = preg_replace('/LINK/', $link, $message);
+    else
+      $message .= "\n\n".$link;
+    if (mail($_REQUEST['mailto'], $_REQUEST['subject'], $message, 'From: '.$_REQUEST['replyto']."\r\n".'Reply-To: '.$_REQUEST['replyto'])) {
+      echo '<h2>Mail Successfully Sent</h2>';
+      echo '<p>Mail sent to '.$_REQUEST['mailto'].'.</p>';
+      echo '<p>You can send more mails, if you want ...</p>';
+    } else {
+      echo '<h2>Send Mail <strong>Failed</strong></h2>';
+      echo '<p>Try again ...</p>';
+    }
+  }
+  echo '<h2>Share Files</h2>';
+  echo '<p>Share files: Tell your friend the password on a separate channel and send this: <a href="?secret='.$secret.'">Link to Share</a></p>';
+?>
+<img src="<?php echo $myurl.'?qrcode='.$secret; ?>" />
+<p>or Send Link in E-Mail:</p>
+<form method="POST">
+  <table style="width: 100%"><tr>
+    <td><label for="replyto">From:</label></td><td><input name="replyto" type="text" value="<?php echo alt($_REQUEST['replyto'], $email[0], $fallback_mail_replyto); ?>" list="emails" style="width: 99%"/><datalist id="emails"><?php for ($i=0; $i<$email['count']; ++$i) echo '<option value="'.$email[$i].'">'; ?></datalist></td>
+  </tr><tr>
+    <td><label for="mailto">To:</label></td><td><input name="mailto" type="text" value="<?php echo alt($_REQUEST['mailto'], $default_mailto); ?>" style="width: 99%"/></td>
+  </tr><tr>
+    <td><label for="subject">Subject:</label></td><td><input name="subject" type="text" value="<?php echo alt($_REQUEST['subject'], $default_mail_subject) ?>" style="width: 99%"/></td>
+  </tr><tr>
+    <td colspan="2"><textarea name="mailtext" style="width: 99%; height: 15em"><?php echo preg_replace('/USERNAME/', $fullname, alt($_REQUEST['mailtext'], $default_mail_text)) ?></textarea></td>
+  </tr><tr>
+    <td colspan="2"><input type="submit" value="send email"/></td>
+  </tr></table>
+  <?php 
+  foreach ($_POST as $k => $v)
+  switch ($k) {
+    case 'replyto': case 'mailto': case 'subject': case 'mailtext': break;
+    default: 
+      if (is_array($v)) foreach ($v as $e) echo '<input type="hidden" name="'.$k.'[]" value="'.$e.'"/>';
+      else echo '<input type="hidden" name="'.$k.'" value="'.$v.'"/>';
+  }
+  ?>
+  </form>
+  <?php
+  if (isset($key['elements'])) foreach ($key['elements'] as $f)
+    makelink('?path='.urlencode($subpath).'&file='.urlencode($f).'&view',
+             '?path='.urlencode($subpath).'&file='.urlencode($f).'&thumb',
+             $f, 'class="thumbnail"');
+}
+
+function getpassword() {
+  ?>
+  <h1>Password Required</h2>
+    <p>Enter password to start download of images as a Tape-ARchive (tar) file.</p>
+    <form method="POST">
+      <input type="hidden" name="secret" value="<?php echo htmlentities($_REQUEST['secret']) ?>"/>
+      <input type="password" name="password"/>
+      <input type="submit" value="show"/>
+    </form>
+  <?php
+}
+
+function sharedfiles() {
+  global $subpath;
+  $secret = decrypt($_REQUEST['secret']) or error_die('bad password', '403 Forbidden'); ?>
+  <h1>Shared Files</h1>
+  <p>Download shared files as a <a href="http://de.wikipedia.org/wiki/Tar">Tape-ARchive</a> (tar) file.</p>
+  <p><form method="POST">
+    <input type="hidden" name="secret" value="<?php echo htmlentities($_REQUEST['secret']) ?>"/>
+    <input type="hidden" name="password" value="<?php echo htmlentities($_REQUEST['password']) ?>"/>
+    <input type="hidden" name="download"/>
+    <input type="submit" value="download"/>
+  </form></p>
+  <?php
+  foreach ($secret['elements'] as $f) {
+    $secret['path'] = $subpath;
+    $secret['file'] = $f;
+    $secret['valid-until'] = date('c', time()+30);
+    $password=str_shuffle(sha1(rand().time()."Js83aéa"));
+    echo '<img src="?secret='.urlencode(encrypt($secret, $password)).'&password='.urlencode($password).'" alt="'.htmlentities($f).'"/>';
+  }
+}
+
 if (!isset($_REQUEST['secret'])) {
   if ($username=="") error_die('not authorized', '403 Forbidden');
   if (isset($_REQUEST['qrcode'])) {
@@ -230,8 +394,9 @@ if (!isset($_REQUEST['secret'])) {
     }
   }
 }
+
 ?><!DOCTYPE html>
-<html>
+  <html>
     <header>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -241,138 +406,20 @@ if (!isset($_REQUEST['secret'])) {
       <?php 
       if ($username=="") {
         if (isset($_REQUEST['password'])) {
-    ?>
+          sharedfiles();
-        <h1>Shared Files</h1>
+        } else {
-        <p>Download shared files as a <a href="http://de.wikipedia.org/wiki/Tar">Tape-ARchive</a> (tar) file.</p>
+          getpassword();
-        <p><form method="POST">
-          <input type="hidden" name="secret" value="<?php echo htmlentities($_REQUEST['secret']) ?>"/>
-          <input type="hidden" name="password" value="<?php echo htmlentities($_REQUEST['password']) ?>"/>
-          <input type="hidden" name="download"/>
-          <input type="submit" value="download"/>
-        </form></p>
-        <?php
-        foreach ($secret['elements'] as $f) {
-          $secret['path'] = $subpath;
-          $secret['file'] = $f;
-          $secret['valid-until'] = date('c', time()+30);
-          $password=str_shuffle(sha1(rand().time()."Js83aéa"));
-          echo '<img src="?secret='.urlencode(encrypt($secret, $password)).'&password='.urlencode($password).'" alt="'.htmlentities($f).'"/>';
         }
       } else {
       ?>
-        <h1>Password Required</h2>
-          <p>Enter password to start download of images as a Tape-ARchive (tar) file.</p>
-          <form method="POST">
-            <input type="hidden" name="secret" value="<?php echo htmlentities($_REQUEST['secret']) ?>"/>
-            <input type="password" name="password"/>
-            <input type="submit" value="show"/>
-          </form>
-      <?php
-      }
-    } else {
-      ?>
-        <h1>Gallery: <?php echo htmlentities($username).($subpath?'@'.htmlentities($subpath):'') ?></h1>
         <?php
         if (isset($_REQUEST['share'])) {
-          echo '<a href="?path='.urlencode($subpath).'"><img src="?folder=←" alt="←"/></a><br/>';
+          share();
-          $key = $_REQUEST;
-          unset($key['password']);
-          unset($key['share']);
-          unset($key['select']);
-          $secret=urlencode(encrypt($key));
-          $default_mailto = "";
-          if (isset($_REQUEST['mailto'])) {
-            if (preg_match('/LINK/', $message))
-              $message = preg_replace('/PASSWORD/', $_REQUEST['password'], $_REQUEST['mailtext']);
-            else
-              $message = $_REQUEST['mailtext']."\n\npassword: ".$REQUEST['password'];
-            $link = $myurl.'?secret='.$secret;
-            if (preg_match('/LINK/', $message))
-              $message = preg_replace('/LINK/', $link, $message);
-            else
-              $message .= "\n\n".$link;
-            if (mail($_REQUEST['mailto'], $_REQUEST['subject'], $message, 'From: '.$_REQUEST['replyto']."\r\n".'Reply-To: '.$_REQUEST['replyto'])) {
-              echo '<h2>Mail Successfully Sent</h2>';
-              echo '<p>Mail sent to '.$_REQUEST['mailto'].'.</p>';
-              echo '<p>You can send more mails, if you want ...</p>';
-            } else {
-              echo '<h2>Send Mail <strong>Failed</strong></h2>';
-              echo '<p>Try again ...</p>';
-            }
-          }
-          echo '<h2>Share Files</h2>';
-          echo '<p>Share files: Tell your friend the password on a separate channel and send this: <a href="?secret='.$secret.'">Link to Share</a></p>';
-        ?>
-        <img src="<?php echo $myurl.'?qrcode='.$secret; ?>" />
-          <p>or Send Link in E-Mail:</p>
-          <form method="POST">
-            <table style="width: 100%"><tr>
-              <td><label for="replyto">From:</label></td><td><input name="replyto" type="text" value="<?php echo alt($_REQUEST['replyto'], $email[0], $fallback_mail_replyto); ?>" list="emails" style="width: 99%"/><datalist id="emails"><?php for ($i=0; $i<$email['count']; ++$i) echo '<option value="'.$email[$i].'">'; ?></datalist></td>
-            </tr><tr>
-              <td><label for="mailto">To:</label></td><td><input name="mailto" type="text" value="<?php echo alt($_REQUEST['mailto'], $default_mailto); ?>" style="width: 99%"/></td>
-            </tr><tr>
-              <td><label for="subject">Subject:</label></td><td><input name="subject" type="text" value="<?php echo alt($_REQUEST['subject'], $default_mail_subject) ?>" style="width: 99%"/></td>
-            </tr><tr>
-              <td colspan="2"><textarea name="mailtext" style="width: 99%; height: 15em"><?php echo preg_replace('/USERNAME/', $fullname, alt($_REQUEST['mailtext'], $default_mail_text)) ?></textarea></td>
-            </tr><tr>
-              <td colspan="2"><input type="submit" value="send email"/></td>
-            </tr></table>
-            <?php 
-            foreach ($_POST as $k => $v)
-            switch ($k) {
-              case 'replyto': case 'mailto': case 'subject': case 'mailtext': break;
-              default: 
-                if (is_array($v)) foreach ($v as $e) echo '<input type="hidden" name="'.$k.'[]" value="'.$e.'"/>';
-                else echo '<input type="hidden" name="'.$k.'" value="'.$v.'"/>';
-            }
-            ?>
-          </form>
-          <?php
-            foreach ($key['elements'] as $f)
-          makelink('?path='.urlencode($subpath).'&file='.urlencode($f).'&view', '?path='.urlencode($subpath).'&file='.urlencode($f).'&thumb', $f, 'class="thumbnail"');
         } else {
           if (isset($_REQUEST['view'])) { // view single image
-              $objects = extractDir($imagepath);
+            singleimage();
-              $pos = array_search($imgfile, $objects['files']);
-              if ($pos>0) 
-                echo '<a href="?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos-1]).'&view"><img src="?folder=←" alt="previous"/></a>';
-              echo '<a href="?path='.urlencode($subpath).'"><img src="?folder=↑" alt="up"/></a>';
-              if ($pos<count($objects['files'])-1) 
-                echo '<a href="?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$pos+1]).'&view"><img src="?folder=→" alt="next"/></a>';
-              echo '<img class="image" src="?path='.urlencode($subpath).'&file='.urlencode($imgfile).'" alt="'.urlencode($imgfile).'"/>';
-              if ($pos!==NULL) {
-                $lower = max(0, $pos-floor(((int)$preview_num)/2));
-                $higher = min(count($objects['files']), $lower+((int)$preview_num));
-                for ($i=$lower; $i<$higher; ++$i)
-                  makelink('?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$i]).'&view', '?path='.urlencode($subpath).'&file='.urlencode($objects['files'][$i]).'&thumb', $objects['files'][$i], 'style="width: '.round(100/($higher-$lower), 3).'%" class="thumbnail"');
-              }
           } else { // gallery view
-              if (isset($_REQUEST['select'])) {
+            gallery();
-                echo '<a href="?path='.urlencode($subpath).'">Normal-Modus</a>';
-                echo '<form method="POST">';
-                echo '<input type="hidden" name="path" value="'.htmlentities($subpath).'">';
-                echo '<label for="password">Passwort:</label>';
-                echo '<input type="text" size="5" name="password" value="'.substr(str_shuffle(strtolower(sha1(rand().time()."SeAG6"))),0,4).'">';
-                echo '<label for="valid-until">Gültig bis:</label>';
-                echo '<input type="date" size="10" name="valid-until" max="'.date('Y-m-d', time()+((int)$max_validity_days)*86400).'" value="'.date('Y-m-d', time()+14*86400).'"/>';
-                echo '<input type="submit" name="share" value="Teilen"/>';
-              } else {
-                echo '<a href="?path='.urlencode($subpath).'&select">Auswahl-Modus</a>';
-              }
-              echo '<div class="dirs">';
-              if (preg_match('/\//', $subpath)) {
-                echo '<a href="?path='.urlencode(preg_replace('/\/[^\/]+$/', '', $subpath)).'"><img src="?folder=↑" alt="↑"/></a>';
-              } elseif ($subpath!="") {
-                echo '<a href="?"><img src="?folder=↑" alt="↑"/></a>';
-              }
-              $objects = extractDir($imagepath);
-              foreach ($objects['dirs'] as $f)
-              makelink('?path='.urlencode($subpath.($subpath!=""?'/':'').$f), '?path='.urlencode($subpath).'&folder='.urlencode($f), $f, 'class="folder"');
-            echo '</div><div class="images">';
-            foreach ($objects['files'] as $f)
-              linkorselect('?path='.urlencode($subpath).'&file='.urlencode($f).'&view', '?path='.urlencode($subpath).'&file='.urlencode($f).'&thumb', $f);
-            echo '</div>';
-            if (isset($_REQUEST['select'])) echo '</form>';
           }
         }
     }

html/style.css

@@ -10,8 +10,13 @@ body {
   width: 100%;
 }
 
-h1 {
+div#header {
+  opacity: 1;
   position: fixed;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: flex-start;
   font-size: 150%;
   top: 0;
   left: 0;
@@ -23,6 +28,45 @@ h1 {
   color: white;
 }
 
+h1 {
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  display: inline;
+  flex: 1;
+  align-self: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+  overflow: hidden;
+}
+
+#arrows {
+  flex: 0 0 auto;
+}
+
+a:link, a:visited, a:active, a:hover {
+  text-decoration: inherit;
+  color: inherit;
+}
+
+input[type="checkbox"] {
+  display: none;
+}
+
+input[type="checkbox"] + label {
+  opacity: 0.5;
+  border: .25em solid black;
+  border-radius: 1em;
+}
+
+input[type="checkbox"]:checked + label {
+  opacity: 1;
+  border: .25em solid yellow;
+  border-radius: 1em;
+}
+
 img {
   width: auto;
   height: auto;
@@ -30,8 +74,18 @@ img {
   max-height: 100%;
 }
 
+div.image {
+  width: 100%;
+  height: calc(100% - 2.25em);
+  background-color: black;
+  text-align: center;
+}
+
 img.image {
+  display: block;
+  margin: auto;
   object-fit: contain;
+  object-position: 50% 50%;
 }
 
 div.images {