Uploaded code
This commit is contained in:
288
src/templates/index.html
Normal file
288
src/templates/index.html
Normal file
@@ -0,0 +1,288 @@
|
||||
<!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 application to prevent flash -->
|
||||
<script>
|
||||
// Apply theme 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');
|
||||
}
|
||||
})();
|
||||
</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="urlMode" class="toggle-button">URL Shortener</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>
|
||||
|
||||
<!-- Paste Expiry Selection -->
|
||||
<div class="expiry-section">
|
||||
<label for="pasteExpirySelect" class="expiry-label">⏰ Paste Expiry:</label>
|
||||
<select id="pasteExpirySelect" class="expiry-select">
|
||||
<option value="never">Never expires</option>
|
||||
<option value="1h">1 Hour</option>
|
||||
<option value="24h" selected>24 Hours</option>
|
||||
<option value="7d">7 Days</option>
|
||||
<option value="30d">30 Days</option>
|
||||
<option value="custom">Custom...</option>
|
||||
</select>
|
||||
<input type="datetime-local" id="customPasteExpiry" class="custom-expiry" style="display: none;">
|
||||
<p class="expiry-hint">Pastes will be automatically deleted after the expiry time</p>
|
||||
</div>
|
||||
|
||||
<button id="submitPaste" class="submit-button">Submit Paste</button>
|
||||
<div id="pasteResult" class="result-message"></div>
|
||||
</div>
|
||||
|
||||
<!-- URL Shortener Area (hidden by default) -->
|
||||
<div id="urlShortenerSection" class="section" style="display: none;">
|
||||
<div class="url-input-container">
|
||||
<label for="urlInput" class="url-label">🔗 Enter URL to shorten:</label>
|
||||
<input type="url" id="urlInput" class="url-input" placeholder="https://example.com/very-long-url" required>
|
||||
|
||||
<div class="url-options">
|
||||
<div class="option-group">
|
||||
<label for="customCode" class="option-label">Custom code (optional):</label>
|
||||
<input type="text" id="customCode" class="custom-code-input" placeholder="my-link" maxlength="20">
|
||||
<small class="option-hint">3-20 characters, letters, numbers, hyphens, underscores only</small>
|
||||
</div>
|
||||
|
||||
<div class="option-group">
|
||||
<label for="urlExpiry" class="option-label">⏰ Expires in:</label>
|
||||
<select id="urlExpiry" class="url-expiry-select">
|
||||
<option value="never">Never</option>
|
||||
<option value="1">1 Hour</option>
|
||||
<option value="24" selected>24 Hours</option>
|
||||
<option value="168">7 Days</option>
|
||||
<option value="720">30 Days</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="shortenUrl" class="submit-button">✨ Shorten URL</button>
|
||||
</div>
|
||||
|
||||
<div id="urlResult" class="result-message"></div>
|
||||
|
||||
<!-- URL Preview Container -->
|
||||
<div id="urlPreviewContainer" class="url-preview-container" style="display: none;">
|
||||
<h3>🔗 Short URL Created:</h3>
|
||||
<div id="urlPreview" class="url-preview">
|
||||
<div class="short-url-display">
|
||||
<input type="text" id="shortUrlInput" class="short-url-input" readonly>
|
||||
<button id="copyUrlButton" class="copy-button" title="Copy to clipboard">📋</button>
|
||||
</div>
|
||||
<div class="url-details">
|
||||
<p><strong>Target:</strong> <span id="targetUrl"></span></p>
|
||||
<p><strong>Clicks:</strong> <span id="clickCount">0</span></p>
|
||||
<p id="expiryInfo" style="display: none;"><strong>Expires:</strong> <span id="expiryDate"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</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>computertech@rizon.net</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:computertech@rizon.net">computertech@rizon.net</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 class="faq-section">
|
||||
<h3>🔗 How do I shorten a URL?</h3>
|
||||
<p>Use the URL Shortener tab to create short links:</p>
|
||||
<ul>
|
||||
<li><strong>Basic shortening:</strong> Enter any URL and get a short link like <code>sharey.org/abc123</code></li>
|
||||
<li><strong>Custom codes:</strong> Create memorable links like <code>sharey.org/my-project</code></li>
|
||||
<li><strong>Expiring links:</strong> Set links to expire automatically for security</li>
|
||||
<li><strong>Click tracking:</strong> See how many times your link has been clicked</li>
|
||||
</ul>
|
||||
<p><strong>API Usage:</strong></p>
|
||||
<pre><code>curl -X POST https://sharey.org/api/shorten \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"url": "https://example.com", "code": "my-link", "expires_in_hours": 24}'</code></pre>
|
||||
<p><em>Perfect for sharing long URLs, tracking clicks, or creating temporary access links!</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>
|
||||
Reference in New Issue
Block a user