From 17bd39df0017a48028e8445283c900e1bf9d5da2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20W=C3=A4ckerlin?= Date: Wed, 8 Mar 2017 19:43:24 +0000 Subject: [PATCH] better layout, better organization --- html/index.php | 323 ++++++++++++++++++++++++++++--------------------- html/style.css | 56 ++++++++- 2 files changed, 240 insertions(+), 139 deletions(-) diff --git a/html/index.php b/html/index.php index def8797..1744006 100644 --- a/html/index.php +++ b/html/index.php @@ -156,11 +156,175 @@ function makelink($link, $img, $filename, $style="") { function linkorselect($link, $img, $filename) { if (isset($_REQUEST['select'])) { echo ''; - echo ''; + echo ''; } else { makelink($link, $img, $filename, 'class="thumbnail"'); } } + +function pageheader($arrows=NULL) { + global $username, $subpath; +?> + +↑'; + } elseif ($subpath!="") { + $arrows = '↑'; + } + pageheader($arrows); + if (isset($_REQUEST['select'])) { + echo 'Normal-Modus'; + echo '
'; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + } else { + echo 'Auswahl-Modus'; + } + echo '
'; + $objects = extractDir($imagepath); + foreach ($objects['dirs'] as $f) + makelink('?path='.urlencode($subpath.($subpath!=""?'/':'').$f), '?path='.urlencode($subpath).'&folder='.urlencode($f), $f, 'class="folder"'); + echo '
'; + foreach ($objects['files'] as $f) + linkorselect('?path='.urlencode($subpath).'&file='.urlencode($f).'&view', '?path='.urlencode($subpath).'&file='.urlencode($f).'&thumb', $f); + echo '
'; + if (isset($_REQUEST['select'])) echo '
'; +} + +function singleimage() { + global $subpath, $imagepath, $imgfile, $preview_num; + $objects = extractDir($imagepath); + $pos = array_search($imgfile, $objects['files']); + $arrows=''; + if ($pos>0) + $arrows .= '←'; + $arrows .= '↑'; + if ($pos→'; + pageheader($arrows); + echo '
'.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"'); + } +} + +function share() { + global $subpath, $myurl, $email, $fullname, $default_mail_text, $default_mail_subject; + pageheader('←'); + $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 '

Mail Successfully Sent

'; + echo '

Mail sent to '.$_REQUEST['mailto'].'.

'; + echo '

You can send more mails, if you want ...

'; + } else { + echo '

Send Mail Failed

'; + echo '

Try again ...

'; + } + } + echo '

Share Files

'; + echo '

Share files: Tell your friend the password on a separate channel and send this: Link to Share

'; +?> + +

or Send Link in E-Mail:

+
+ + + + + + + + + + +
'; ?>
+ $v) + switch ($k) { + case 'replyto': case 'mailto': case 'subject': case 'mailtext': break; + default: + if (is_array($v)) foreach ($v as $e) echo ''; + else echo ''; + } + ?> +
+ +

Password Required

+

Enter password to start download of images as a Tape-ARchive (tar) file.

+
+ + + +
+ +

Shared Files

+

Download shared files as a Tape-ARchive (tar) file.

+

+ + + + +

+ '; + } +} + if (!isset($_REQUEST['secret'])) { if ($username=="") error_die('not authorized', '403 Forbidden'); if (isset($_REQUEST['qrcode'])) { @@ -230,149 +394,32 @@ if (!isset($_REQUEST['secret'])) { } } } + ?> - -
- - - -
- - -

Shared Files

-

Download shared files as a Tape-ARchive (tar) file.

-

- - - - -

- '; + +
+ + + +
+ + -

Password Required

-

Enter password to start download of images as a Tape-ARchive (tar) file.

-
- - - -
- -

Gallery:

←
'; - $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 '

Mail Successfully Sent

'; - echo '

Mail sent to '.$_REQUEST['mailto'].'.

'; - echo '

You can send more mails, if you want ...

'; - } else { - echo '

Send Mail Failed

'; - echo '

Try again ...

'; - } - } - echo '

Share Files

'; - echo '

Share files: Tell your friend the password on a separate channel and send this: Link to Share

'; - ?> - -

or Send Link in E-Mail:

-
- - - - - - - - - - -
'; ?>
- $v) - switch ($k) { - case 'replyto': case 'mailto': case 'subject': case 'mailtext': break; - default: - if (is_array($v)) foreach ($v as $e) echo ''; - else echo ''; - } - ?> -
- 0) - echo 'previous'; - echo 'up'; - if ($posnext'; - echo ''.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'])) { - echo 'Normal-Modus'; - echo '
'; - echo ''; - echo ''; - echo ''; - echo ''; - echo ''; - echo ''; - } else { - echo 'Auswahl-Modus'; - } - echo '
'; - if (preg_match('/\//', $subpath)) { - echo '↑'; - } elseif ($subpath!="") { - echo '↑'; - } - $objects = extractDir($imagepath); - foreach ($objects['dirs'] as $f) - makelink('?path='.urlencode($subpath.($subpath!=""?'/':'').$f), '?path='.urlencode($subpath).'&folder='.urlencode($f), $f, 'class="folder"'); - echo '
'; - foreach ($objects['files'] as $f) - linkorselect('?path='.urlencode($subpath).'&file='.urlencode($f).'&view', '?path='.urlencode($subpath).'&file='.urlencode($f).'&thumb', $f); - echo '
'; - if (isset($_REQUEST['select'])) echo '
'; + share(); + } else { + if (isset($_REQUEST['view'])) { // view single image + singleimage(); + } else { // gallery view + gallery(); } } } diff --git a/html/style.css b/html/style.css index 6f2807e..e68d45d 100644 --- a/html/style.css +++ b/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 {