Major UI improvements and cleanup
✨ Features: - Add movable theme button with drag functionality - Theme button rotation animation on toggle - Position persistence across page reloads - Remove flash positioning on page load 🗑️ Cleanup: - Remove URL shortener functionality completely - Unify expiry dropdown (remove duplicate from pastebin) - Fix import issues in cleanup scripts and app.py - Remove unused CSS and JavaScript code 🔧 Technical: - Improve drag vs click detection - Add viewport boundary constraints for theme button - Clean up JavaScript event handlers - Optimize CSS animations and transitions
This commit is contained in:
@@ -11,9 +11,9 @@
|
||||
<!-- 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 -->
|
||||
<!-- Immediate theme and position application to prevent flash -->
|
||||
<script>
|
||||
// Apply theme immediately before page renders
|
||||
// Apply theme and button position immediately before page renders
|
||||
(function() {
|
||||
function getCookie(name) {
|
||||
const nameEQ = name + "=";
|
||||
@@ -31,6 +31,22 @@
|
||||
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>
|
||||
@@ -45,7 +61,6 @@
|
||||
<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) -->
|
||||
@@ -103,71 +118,11 @@
|
||||
<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;">
|
||||
@@ -263,21 +218,7 @@
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user