Files
sharey/src/templates/index.html

230 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>Sharey</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<!-- QR Code generation library -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<!-- Immediate theme and position application to prevent flash -->
<script>
// Apply theme and button position immediately before page renders
(function() {
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
const savedTheme = getCookie('sharey-theme') || 'light';
if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
// Restore theme button position immediately
try {
const saved = localStorage.getItem('sharey-theme-button-position');
if (saved) {
const position = JSON.parse(saved);
// Store position data to be applied when DOM loads
window.shareyThemeButtonPosition = {
x: position.x,
y: position.y
};
}
} catch (error) {
// Silently fail if there's an issue with saved position
}
})();
</script>
</head>
<body>
<!-- Theme toggle button -->
<button id="themeToggle" class="theme-toggle" title="Switch to dark mode">🌙</button>
<div class="container">
<h1>Sharey~</h1>
<!-- Toggle button to switch between modes -->
<div class="toggle-container">
<button id="fileMode" class="toggle-button active">File Sharing</button>
<button id="pasteMode" class="toggle-button">Pastebin</button>
<button id="faqButton" class="toggle-button">FAQ</button>
<!-- File Expiry Selection (inline) -->
<div class="expiry-inline">
<label for="expirySelect" class="expiry-label"></label>
<select id="expirySelect" class="expiry-select-inline">
<option value="never">Never</option>
<option value="1h">1h</option>
<option value="24h">24h</option>
<option value="7d" selected>7d</option>
<option value="30d">30d</option>
<option value="90d">90d</option>
<option value="custom">Custom</option>
</select>
<input type="datetime-local" id="customExpiry" class="custom-expiry-inline" style="display: none;">
</div>
</div>
<!-- File Sharing Area -->
<div id="fileSharingSection" class="section">
<div id="dropArea" class="drop-area">
<div class="upload-icon">📁</div>
<p id="desktopInstructions" class="desktop-only">Drop files here, click to select, or press <kbd>Ctrl+V</kbd> to paste from clipboard</p>
<p id="mobileInstructions" class="mobile-only" style="display: none;">📱 Tap to select files or long-press for paste menu</p>
<input type="file" id="fileInput" multiple accept="*/*">
</div>
<!-- Mobile clipboard paste button (fallback) -->
<div id="mobileClipboardSection" class="mobile-clipboard-section" style="display: none;">
<button id="mobilePasteButton" class="mobile-paste-button">📋 Paste from Clipboard</button>
<p class="mobile-paste-hint">Fallback option for devices that don't support long-press</p>
</div>
<!-- Context menu for long-press -->
<div id="contextMenu" class="context-menu" style="display: none;">
<button id="contextPasteButton" class="context-menu-item">📋 Paste from Clipboard</button>
<button id="contextSelectButton" class="context-menu-item">📁 Select Files</button>
</div>
<div id="progressContainer" class="progress-bar">
<div id="progressBar" class="progress"></div>
<p id="progressText">Ready to upload</p>
</div>
<div id="result" class="result-message"></div>
<!-- File preview container -->
<div id="filePreviewContainer" class="file-preview-container" style="display: none;">
<h3>File Previews:</h3>
<div id="filePreviews" class="file-previews"></div>
</div>
</div>
<!-- Pastebin Area (hidden by default) -->
<div id="pastebinSection" class="section" style="display: none;">
<textarea id="pasteContent" placeholder="Enter your text here..." rows="10" cols="50"></textarea>
<button id="submitPaste" class="submit-button">Submit Paste</button>
<div id="pasteResult" class="result-message"></div>
</div>
<!-- FAQ Section (hidden by default) -->
<div id="faqSection" class="section" style="display: none;">
<h2>Terms of Service & Legal</h2>
<!-- Terms of Service Section -->
<div class="faq-section" style="border: 2px solid var(--border-color); background-color: var(--bg-accent); margin-bottom: 25px;">
<h3>📋 Terms of Service</h3>
<p><strong>By using Sharey, you agree to these terms:</strong></p>
<ul>
<li><strong>Content Responsibility:</strong> You are solely responsible for all content you upload and URLs you shorten. Sharey does not review, monitor, or control user content or redirect destinations.</li>
<li><strong>Prohibited Content:</strong> Do not upload illegal, copyrighted, harmful, or inappropriate content including malware, spam, harassment, or content violating applicable laws. Do not create redirects to illegal, malicious, or harmful websites.</li>
<li><strong>Takedown Policy:</strong> We respond promptly to valid takedown requests. To report content or malicious redirects, email: <strong>computertech312@gmail.com</strong></li>
<li><strong>Service Disclaimer:</strong> Sharey provides file hosting and URL shortening "as-is" without warranties. We reserve the right to remove content, disable redirects, and suspend access at our discretion.</li>
<li><strong>Privacy:</strong> Files may expire automatically. Shortened URLs may expire based on settings. We do not access private content except for legal compliance or security purposes.</li>
<li><strong>User Indemnification:</strong> You agree to indemnify Sharey against any claims arising from your use, content, or redirect destinations.</li>
</ul>
<p><strong>🚨 Report Abuse:</strong> Email <a href="mailto:computertech312@gmail.com">computertech312@gmail.com</a> with the file URL and reason for reporting.</p>
<p><em>Last updated: September 2025</em></p>
</div>
<h2>Frequently Asked Questions</h2>
<div class="faq-section">
<h3>How do I upload a file?</h3>
<p>To upload a file, send a POST request to the /api/upload endpoint. Example:</p>
<pre><code>curl -X POST https://sharey.org/api/upload \
-F "files[]=@/path/to/your/file.txt"</code></pre>
</div>
<div class="faq-section">
<h3>How do I create a paste?</h3>
<p>To create a paste, send a POST request to the /api/paste endpoint. Example:</p>
<pre><code>curl -X POST https://sharey.org/api/paste \
-H "Content-Type: application/json" \
-d '{"content": "This is the content of my paste."}'</code></pre>
</div>
<div class="faq-section">
<h3>🆕 Can I upload from clipboard?</h3>
<p>Yes! You can paste content directly from your clipboard:</p>
<ul class="desktop-only">
<li><strong>Keyboard:</strong> Press <kbd>Ctrl+V</kbd> (or <kbd>Cmd+V</kbd> on Mac) in File Sharing mode</li>
<li><strong>Images:</strong> Screenshots, copied images, photos - all work!</li>
<li><strong>Text:</strong> Copied text will prompt you to switch to Paste mode</li>
</ul>
<ul class="mobile-only" style="display: none;">
<li><strong>Long-press:</strong> Long-press the upload area and select "Paste from Clipboard"</li>
<li><strong>Screenshots:</strong> Take a screenshot, then long-press to paste</li>
<li><strong>Copied images:</strong> Copy any image, then long-press to paste</li>
<li><strong>Text content:</strong> Will prompt you to switch to Paste mode</li>
</ul>
<p><em>Perfect for quickly sharing screenshots, images from other websites, or text content!</em></p>
<div class="mobile-tutorial mobile-only" style="display: none;">
<h4>📱 Mobile Step-by-Step:</h4>
<ol>
<li>Copy an image or take a screenshot</li>
<li>Come to this page in File Sharing mode</li>
<li>Long-press the upload area</li>
<li>Select "📋 Paste from Clipboard" from the menu</li>
<li>Your content will be uploaded automatically!</li>
</ol>
</div>
<div class="desktop-tutorial desktop-only">
<h4>💻 Desktop Step-by-Step:</h4>
<ol>
<li>Copy an image or take a screenshot (<kbd>PrtScr</kbd>, <kbd>Cmd+Shift+4</kbd>, etc.)</li>
<li>Come to this page in File Sharing mode</li>
<li>Press <kbd>Ctrl+V</kbd> (or <kbd>Cmd+V</kbd> on Mac)</li>
<li>Your content will be uploaded automatically!</li>
</ol>
</div>
</div>
<div class="faq-section">
<h3>🆕 What's the URL format?</h3>
<p>Sharey now uses clean, short URLs for all new uploads:</p>
<ul>
<li><strong>New format:</strong> <code>sharey.org/ABC123</code> (files) or <code>sharey.org/XYZ789</code> (pastes)</li>
<li><strong>Old format:</strong> <code>sharey.org/files/ABC123.png</code> or <code>sharey.org/pastes/XYZ789</code> (still works!)</li>
</ul>
<p><em>All existing links continue to work - only new uploads use the cleaner format.</em></p>
</div>
<div class="faq-section">
<h3>⏰ Do files expire?</h3>
<p>Yes! You can set expiry times when uploading:</p>
<ul>
<li><strong>Files:</strong> Default 7 days, options from 1 hour to never</li>
<li><strong>Pastes:</strong> Default 24 hours, configurable expiry</li>
<li><strong>Custom expiry:</strong> Set any specific date and time</li>
<li><strong>Automatic cleanup:</strong> Expired content is automatically deleted</li>
</ul>
<p><em>Perfect for temporary shares or sensitive content that shouldn't persist!</em></p>
</div>
</div>
</div>
<!-- QR Code library for sharing -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>