Complete ircquotes application with all features
- Added copy quote functionality with clipboard integration - Implemented bulk moderation actions for admin - Created mobile responsive design with bash.org styling - Added API rate limiting per IP address - Implemented dark mode toggle with flash prevention - Enhanced error messages throughout application - Fixed all security vulnerabilities (SQL injection, XSS, CSRF) - Added comprehensive rate limiting on all endpoints - Implemented secure session configuration - Added input validation and length limits - Created centralized configuration system with config.json - Set up production deployment with Gunicorn - Added security headers and production hardening - Added password generation and config management tools
This commit is contained in:
@@ -105,8 +105,28 @@ input.button:hover {
|
||||
|
||||
.qa {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 8pt;
|
||||
font-size: 10pt;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #808080;
|
||||
padding: 1px 4px;
|
||||
margin: 0 1px;
|
||||
color: #000000;
|
||||
display: inline-block;
|
||||
min-width: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qa:hover {
|
||||
background-color: #e0e0e0;
|
||||
border-color: #606060;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.qa:active {
|
||||
background-color: #d0d0d0;
|
||||
border: 1px inset #808080;
|
||||
}
|
||||
|
||||
.quote {
|
||||
@@ -173,127 +193,332 @@ footer {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Body Styles */
|
||||
body {
|
||||
background-color: #121212; /* Deep dark background */
|
||||
color: #d1d1d1; /* Softer off-white for improved contrast */
|
||||
/* Dark Mode Toggle Button */
|
||||
#theme-toggle {
|
||||
background-color: #f0f0f0;
|
||||
border: 2px outset #c0c0c0;
|
||||
color: #000000;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#theme-toggle:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#theme-toggle:active {
|
||||
border: 2px inset #c0c0c0;
|
||||
}
|
||||
|
||||
/* Dark Mode Styles */
|
||||
body.dark-theme {
|
||||
background-color: #121212;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
|
||||
body.dark-theme a {
|
||||
color: #ffa500;
|
||||
}
|
||||
|
||||
body.dark-theme a:hover {
|
||||
color: #ffcc80;
|
||||
}
|
||||
|
||||
body.dark-theme .bodytext {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .qt {
|
||||
color: #ffffff;
|
||||
background-color: #1e1e1e;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #ffa500;
|
||||
}
|
||||
|
||||
body.dark-theme .qa {
|
||||
background-color: #2e2e2e;
|
||||
color: #ffffff;
|
||||
border: 1px solid #ffa500;
|
||||
}
|
||||
|
||||
body.dark-theme .qa:hover {
|
||||
background-color: #3e3e3e;
|
||||
color: #ffcc80;
|
||||
}
|
||||
|
||||
body.dark-theme table {
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid #ffa500;
|
||||
}
|
||||
|
||||
body.dark-theme td[bgcolor="#c08000"] {
|
||||
background-color: #c08000 !important;
|
||||
}
|
||||
|
||||
body.dark-theme td[bgcolor="#f0f0f0"] {
|
||||
background-color: #2e2e2e !important;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
|
||||
body.dark-theme #theme-toggle {
|
||||
background-color: #2e2e2e;
|
||||
border: 2px outset #555555;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-theme #theme-toggle:hover {
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
|
||||
body.dark-theme #theme-toggle:active {
|
||||
border: 2px inset #555555;
|
||||
}
|
||||
|
||||
body.dark-theme input[type="text"],
|
||||
body.dark-theme input[type="number"],
|
||||
body.dark-theme textarea,
|
||||
body.dark-theme select {
|
||||
background-color: #2e2e2e;
|
||||
color: #ffffff;
|
||||
border: 1px solid #555555;
|
||||
}
|
||||
|
||||
body.dark-theme input[type="submit"],
|
||||
body.dark-theme button {
|
||||
background-color: #2e2e2e;
|
||||
color: #ffffff;
|
||||
border: 2px outset #555555;
|
||||
}
|
||||
|
||||
body.dark-theme input[type="submit"]:hover,
|
||||
body.dark-theme button:hover {
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
|
||||
/* Override inline font colors in dark mode */
|
||||
body.dark-theme font[color="green"] {
|
||||
color: #90ee90 !important;
|
||||
}
|
||||
|
||||
body.dark-theme font {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Apply dark theme when class is on html element (prevents flash) */
|
||||
html.dark-theme body {
|
||||
background-color: #121212;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
|
||||
html.dark-theme a {
|
||||
color: #ffa500;
|
||||
}
|
||||
|
||||
html.dark-theme a:hover {
|
||||
color: #ffcc80;
|
||||
}
|
||||
|
||||
html.dark-theme .bodytext {
|
||||
color: #d1d1d1;
|
||||
}
|
||||
|
||||
html.dark-theme .qt {
|
||||
background-color: #2e2e2e;
|
||||
color: #ffffff;
|
||||
border-left: 3px solid #ffa500;
|
||||
}
|
||||
|
||||
html.dark-theme .qa {
|
||||
background-color: #333;
|
||||
color: #d1d1d1;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
html.dark-theme .qa:hover {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html.dark-theme table {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
html.dark-theme td[bgcolor="#c08000"] {
|
||||
background-color: #8b4513 !important;
|
||||
}
|
||||
|
||||
html.dark-theme td[bgcolor="#f0f0f0"] {
|
||||
background-color: #333 !important;
|
||||
}
|
||||
|
||||
html.dark-theme #theme-toggle {
|
||||
background-color: #333;
|
||||
color: #d1d1d1;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
html.dark-theme #theme-toggle:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
html.dark-theme #theme-toggle:active {
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
|
||||
html.dark-theme input[type="text"],
|
||||
html.dark-theme input[type="number"],
|
||||
html.dark-theme textarea,
|
||||
html.dark-theme select {
|
||||
background-color: #333;
|
||||
color: #d1d1d1;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
html.dark-theme input[type="submit"],
|
||||
html.dark-theme button {
|
||||
background-color: #444;
|
||||
color: #d1d1d1;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
html.dark-theme input[type="submit"]:hover,
|
||||
html.dark-theme button:hover {
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
|
||||
/* Override inline font colors in dark mode (for html element) */
|
||||
html.dark-theme font[color="green"] {
|
||||
color: #90ee90 !important;
|
||||
}
|
||||
|
||||
html.dark-theme font {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Mobile Responsive Design */
|
||||
@media screen and (max-width: 768px) {
|
||||
/* Make tables and content mobile-friendly while keeping bash.org aesthetic */
|
||||
table {
|
||||
width: 95%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
a {
|
||||
color: #ffa500;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
/* Navigation links - stack on small screens */
|
||||
.toplinks {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ffcc80; /* Subtle, warmer hover color */
|
||||
text-decoration: underline; /* Underline on hover for better accessibility */
|
||||
|
||||
/* Quote buttons - make them touch-friendly */
|
||||
.qa {
|
||||
padding: 8px 12px;
|
||||
margin: 2px;
|
||||
min-width: 35px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Body Text */
|
||||
.bodytext {
|
||||
line-height: 1.7; /* Increased line spacing for readability */
|
||||
font-size: 1rem; /* Consistent font size */
|
||||
color: #e0e0e0; /* Softer white for text */
|
||||
|
||||
/* Quote text - ensure readability */
|
||||
.qt {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Table, Input Fields, Textarea, Select Elements */
|
||||
table, td, input.text, textarea, select {
|
||||
background-color: #1a1a1a; /* Darker backgrounds for contrast */
|
||||
color: #d1d1d1; /* Softer white text */
|
||||
border-color: #ffa500; /* Keeping borders on accents */
|
||||
|
||||
/* Quote header - adjust spacing */
|
||||
.quote {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Submit Button */
|
||||
input.button {
|
||||
background-color: #ffa500;
|
||||
color: #121212; /* Darker button text for readability */
|
||||
border-radius: 6px; /* Slight rounding for modern design */
|
||||
padding: 8px 12px; /* Increased padding for better button size */
|
||||
font-weight: bold; /* More defined button text */
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
|
||||
/* Form elements - make touch-friendly */
|
||||
input[type="text"], input[type="number"], textarea, select {
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
input.button:hover {
|
||||
background-color: #ff8c00; /* Brighter hover color */
|
||||
color: #ffffff; /* White text on hover for better contrast */
|
||||
|
||||
input[type="submit"], button {
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
margin: 5px;
|
||||
min-height: 44px; /* iOS touch target */
|
||||
}
|
||||
|
||||
/* Headers, Footer, and Other Text Elements */
|
||||
.footertext, .toplinks, h2 {
|
||||
color: #ffa500; /* Accent color for headers */
|
||||
|
||||
/* Pagination - mobile friendly */
|
||||
#pagination {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem; /* Larger headers for better hierarchy */
|
||||
border-bottom: 2px solid #ffa500; /* Visual distinction for headers */
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Quote Box Borders */
|
||||
td.quote-box {
|
||||
border-color: #ffa500;
|
||||
background-color: #1e1e1e; /* Subtle background for quotes */
|
||||
padding: 15px; /* Improved padding for readability */
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: #181818; /* Consistent footer background */
|
||||
color: #d1d1d1; /* Softer text in footer */
|
||||
border-top: 2px solid #ffa500; /* Accent line to separate footer */
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Pagination Links */
|
||||
|
||||
#pagination a {
|
||||
border-color: #ffa500;
|
||||
color: #ffa500;
|
||||
background-color: transparent;
|
||||
padding: 8px 12px; /* Larger clickable area */
|
||||
border-radius: 4px; /* Rounded edges for pagination */
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
padding: 8px 12px;
|
||||
margin: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#pagination a:hover {
|
||||
background-color: #2e2e2e; /* Slightly brighter hover */
|
||||
color: #ffffff; /* White text for hover state */
|
||||
|
||||
/* ModApp table - horizontal scroll for wide tables */
|
||||
.modapp-table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Quote ID Links */
|
||||
.quote-id {
|
||||
color: #ffa500;
|
||||
font-weight: bold; /* Bold for emphasis */
|
||||
transition: color 0.3s ease;
|
||||
|
||||
.modapp-table-container table {
|
||||
min-width: 600px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.quote-id:hover {
|
||||
color: #ffcc80; /* Brighter hover for clarity */
|
||||
}
|
||||
|
||||
/* Other Element Styles */
|
||||
input.text, textarea, select {
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
input.button:disabled {
|
||||
background-color: #444444; /* Disabled button appearance */
|
||||
color: #aaaaaa; /* Disabled text color */
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Table and Layout Enhancements */
|
||||
table {
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid #ffa500;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 15px; /* More padding for larger table cells */
|
||||
|
||||
/* Hide less important columns on mobile */
|
||||
@media screen and (max-width: 480px) {
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qa {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.quote {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.qt {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly improvements for all screen sizes */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* This targets touch devices */
|
||||
.qa {
|
||||
padding: 10px 15px;
|
||||
margin: 3px;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
/* Ensure all interactive elements are large enough */
|
||||
button, input[type="submit"], input[type="button"] {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
44
static/theme.js
Normal file
44
static/theme.js
Normal file
@@ -0,0 +1,44 @@
|
||||
// Dark mode toggle functionality for ircquotes
|
||||
// Maintains bash.org aesthetic while providing dark theme option
|
||||
|
||||
function toggleDarkMode() {
|
||||
const body = document.body;
|
||||
const html = document.documentElement;
|
||||
const isDark = body.classList.contains('dark-theme') || html.classList.contains('dark-theme');
|
||||
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-theme');
|
||||
html.classList.remove('dark-theme');
|
||||
localStorage.setItem('theme', 'light');
|
||||
updateToggleButton(false);
|
||||
} else {
|
||||
body.classList.add('dark-theme');
|
||||
html.classList.add('dark-theme');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
updateToggleButton(true);
|
||||
}
|
||||
}
|
||||
|
||||
function updateToggleButton(isDark) {
|
||||
const toggleBtn = document.getElementById('theme-toggle');
|
||||
if (toggleBtn) {
|
||||
toggleBtn.textContent = isDark ? '☀' : '🌙';
|
||||
toggleBtn.title = isDark ? 'Switch to light mode' : 'Switch to dark mode';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize theme on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
||||
document.body.classList.add('dark-theme');
|
||||
document.documentElement.classList.add('dark-theme');
|
||||
updateToggleButton(true);
|
||||
} else {
|
||||
document.body.classList.remove('dark-theme');
|
||||
document.documentElement.classList.remove('dark-theme');
|
||||
updateToggleButton(false);
|
||||
}
|
||||
});
|
||||
217
static/voting.js
Normal file
217
static/voting.js
Normal file
@@ -0,0 +1,217 @@
|
||||
// AJAX voting functionality
|
||||
function vote(quoteId, action, buttonElement) {
|
||||
// Prevent multiple clicks
|
||||
if (buttonElement.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Disable button temporarily
|
||||
buttonElement.disabled = true;
|
||||
|
||||
// Make AJAX request
|
||||
fetch(`/vote/${quoteId}/${action}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Update vote count display
|
||||
const voteElement = document.getElementById(`votes-${quoteId}`);
|
||||
if (voteElement) {
|
||||
voteElement.textContent = data.votes;
|
||||
}
|
||||
|
||||
// Update button states based on user's voting history
|
||||
updateButtonStates(quoteId, data.user_vote);
|
||||
} else {
|
||||
alert(data.message || 'Sorry, your vote could not be recorded. Please try again.');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('Connection error while voting. Please check your internet connection and try again.');
|
||||
})
|
||||
.finally(() => {
|
||||
// Re-enable button
|
||||
buttonElement.disabled = false;
|
||||
});
|
||||
|
||||
return false; // Prevent default link behavior
|
||||
}
|
||||
|
||||
function updateButtonStates(quoteId, userVote) {
|
||||
const upButton = document.getElementById(`up-${quoteId}`);
|
||||
const downButton = document.getElementById(`down-${quoteId}`);
|
||||
|
||||
if (upButton && downButton) {
|
||||
// Reset button styles
|
||||
upButton.style.backgroundColor = '';
|
||||
downButton.style.backgroundColor = '';
|
||||
|
||||
// Highlight the voted button
|
||||
if (userVote === 'upvote') {
|
||||
upButton.style.backgroundColor = '#90EE90'; // Light green
|
||||
} else if (userVote === 'downvote') {
|
||||
downButton.style.backgroundColor = '#FFB6C1'; // Light pink
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flag quote functionality
|
||||
function flag(quoteId, buttonElement) {
|
||||
if (buttonElement.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!confirm('Are you sure you want to flag this quote as inappropriate?')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
buttonElement.disabled = true;
|
||||
|
||||
fetch(`/flag/${quoteId}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert(data.message || 'Thank you! This quote has been flagged for review by moderators.');
|
||||
buttonElement.style.backgroundColor = '#FFB6C1'; // Light pink
|
||||
buttonElement.textContent = '✓';
|
||||
} else {
|
||||
alert(data.message || 'Sorry, we could not flag this quote. Please try again.');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('Connection error while flagging. Please check your internet connection and try again.');
|
||||
})
|
||||
.finally(() => {
|
||||
buttonElement.disabled = false;
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Copy quote functionality
|
||||
function copyQuote(quoteId, buttonElement) {
|
||||
if (buttonElement.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Get the quote text
|
||||
const quoteElement = document.querySelector(`#quote-${quoteId} .qt, [data-quote-id="${quoteId}"] .qt`);
|
||||
let quoteText = '';
|
||||
|
||||
if (quoteElement) {
|
||||
quoteText = quoteElement.textContent || quoteElement.innerText;
|
||||
} else {
|
||||
// Fallback: look for quote text in any element after the quote header
|
||||
const allQuotes = document.querySelectorAll('.qt');
|
||||
const quoteHeaders = document.querySelectorAll('.quote');
|
||||
|
||||
for (let i = 0; i < quoteHeaders.length; i++) {
|
||||
const header = quoteHeaders[i];
|
||||
if (header.innerHTML.includes(`#${quoteId}`)) {
|
||||
if (allQuotes[i]) {
|
||||
quoteText = allQuotes[i].textContent || allQuotes[i].innerText;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!quoteText) {
|
||||
alert('Sorry, we could not find the quote text to copy. Please try selecting and copying the text manually.');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Format the text with quote number
|
||||
const formattedText = `#${quoteId}: ${quoteText.trim()}`;
|
||||
|
||||
// Copy to clipboard
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
// Modern approach
|
||||
navigator.clipboard.writeText(formattedText).then(() => {
|
||||
showCopySuccess(buttonElement);
|
||||
}).catch(() => {
|
||||
fallbackCopy(formattedText, buttonElement);
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
fallbackCopy(formattedText, buttonElement);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function fallbackCopy(text, buttonElement) {
|
||||
// Create temporary textarea
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
textArea.style.top = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showCopySuccess(buttonElement);
|
||||
} catch (err) {
|
||||
console.error('Could not copy text: ', err);
|
||||
alert('Copy to clipboard failed. Please manually select and copy the quote text using Ctrl+C (or Cmd+C on Mac).');
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
function showCopySuccess(buttonElement) {
|
||||
const originalText = buttonElement.textContent;
|
||||
buttonElement.textContent = '✓';
|
||||
buttonElement.style.backgroundColor = '#90EE90'; // Light green
|
||||
|
||||
setTimeout(() => {
|
||||
buttonElement.textContent = originalText;
|
||||
buttonElement.style.backgroundColor = '';
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Load user vote states when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get all vote elements and check their states
|
||||
const voteElements = document.querySelectorAll('[id^="votes-"]');
|
||||
|
||||
// Get user's voting history from cookies
|
||||
const votes = getCookie('votes');
|
||||
if (votes) {
|
||||
try {
|
||||
const voteData = JSON.parse(votes);
|
||||
|
||||
// Update button states for each quote
|
||||
voteElements.forEach(element => {
|
||||
const quoteId = element.id.replace('votes-', '');
|
||||
const userVote = voteData[quoteId];
|
||||
if (userVote) {
|
||||
updateButtonStates(quoteId, userVote);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.log('Could not parse vote cookie');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Helper function to get cookie value
|
||||
function getCookie(name) {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop().split(';').shift();
|
||||
}
|
||||
Reference in New Issue
Block a user