webservices
/
sharing-gallery
1
0
Fork 0
Code Issues Pull Requests Releases Activity

better layout, better organization

Browse Source
master
Marc Wäckerlin 7 years ago
parent 44b36032ea
commit 17bd39df00
2 changed files with 240 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 323
      html/index.php
  2. 56
      html/style.css

323
html/index.php
Unescape View File

@ -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,149 +394,32 @@ if (!isset($_REQUEST['secret'])) {
}
}
}
?><!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</header>
<body>
<?php
if ($username=="") {
if (isset($_REQUEST['password'])) {
?>
<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).'"/>';
<html>
<header>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</header>
<body>
<?php
if ($username=="") {
if (isset($_REQUEST['password'])) {
sharedfiles();
} else {
getpassword();
}
} 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/>';
$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);
$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'])) {
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>';
share();
} else {
if (isset($_REQUEST['view'])) { // view single image
singleimage();
} else { // gallery view
gallery();
}
}
}

56
html/style.css
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save