ske087/qr-code_manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final app for testing and deployment

Browse Source
This commit is contained in:
Scheianu Ionut
2025-07-16 20:45:12 +03:00
parent 729f64f411
commit e9a8f5e622
26 changed files with 1561 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
app/templates/edit_links.html
View File

@@ -141,12 +141,27 @@
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
}
.link-item.editing {
border-color: #667eea;
}
.link-content {
flex: 1;
}
.link-logo {
width: 32px;
height: 32px;
border-radius: 6px;
flex-shrink: 0;
}
.link-display {
display: block;
}
@@ -253,6 +268,13 @@
<div class="header">
<h1>✏️ Edit Links</h1>
<p>Manage your link collection: {{ page.title }}</p>
{% if page.short_url %}
<div style="margin-top: 15px; padding: 12px; background: rgba(255,255,255,0.2); border-radius: 8px; font-size: 0.9em;">
<strong>🔗 Page Short URL:</strong>
<a href="{{ page.short_url }}" target="_blank" style="color: #fff; text-decoration: underline;">{{ page.short_url }}</a>
<button onclick="copyToClipboard('{{ page.short_url }}')" style="margin-left: 10px; padding: 4px 8px; background: rgba(255,255,255,0.3); color: white; border: 1px solid rgba(255,255,255,0.5); border-radius: 3px; cursor: pointer; font-size: 0.8em;">Copy</button>
</div>
{% endif %}
</div>
<div class="alert alert-success" id="success-alert">
@@ -292,12 +314,21 @@
{% if page.links %}
{% for link in page.links %}
<div class="link-item" data-link-id="{{ link.id }}">
<div class="link-display">
<div class="link-title">{{ link.title }}</div>
{% if link.description %}
<div class="link-description">{{ link.description }}</div>
<div class="link-content">
<div class="link-display">
<div class="link-title">{{ link.title }}</div>
{% if link.description %}
<div class="link-description">{{ link.description }}</div>
{% endif %}
<div class="link-url" data-url="{{ link.url }}">{{ link.url }}</div>
{% if link.short_url %}
<div class="short-url-display" style="margin-top: 8px; padding: 8px; background: #e3f2fd; border-radius: 5px; border-left: 3px solid #2196f3;">
<small style="color: #1976d2; font-weight: 600;">🔗 Short URL:</small>
<br>
<a href="{{ link.short_url }}" target="_blank" style="color: #1976d2; text-decoration: none; font-family: monospace;">{{ link.short_url }}</a>
<button class="btn-copy" onclick="copyToClipboard('{{ link.short_url }}')" style="margin-left: 10px; padding: 2px 8px; background: #2196f3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8em;">Copy</button>
</div>
{% endif %}
<div class="link-url">{{ link.url }}</div>
<div class="link-actions">
<button class="btn btn-small btn-secondary" onclick="editLink('{{ link.id }}')">Edit</button>
<button class="btn btn-small btn-danger" onclick="deleteLink('{{ link.id }}')">Delete</button>
@@ -322,6 +353,7 @@
<button class="btn btn-small btn-secondary" onclick="cancelEdit('{{ link.id }}')">Cancel</button>
</div>
</div>
<img class="link-logo" src="" alt="" style="display: none;" onerror="this.style.display='none'">
</div>
{% endfor %}
{% else %}
@@ -344,6 +376,87 @@
<script>
const pageId = '{{ page.id }}';
// Social media and website logo detection
function getWebsiteLogo(url) {
try {
const urlObj = new URL(url.startsWith('http') ? url : 'https://' + url);
const domain = urlObj.hostname.toLowerCase().replace('www.', '');
// Logo mapping for popular sites
const logoMap = {
'facebook.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg',
'instagram.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg',
'twitter.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter.svg',
'x.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/x.svg',
'tiktok.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/tiktok.svg',
'youtube.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/youtube.svg',
'linkedin.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg',
'pinterest.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/pinterest.svg',
'snapchat.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/snapchat.svg',
'whatsapp.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/whatsapp.svg',
'telegram.org': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/telegram.svg',
'discord.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg',
'reddit.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/reddit.svg',
'github.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/github.svg',
'gmail.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/gmail.svg',
'google.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/google.svg',
'amazon.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/amazon.svg',
'apple.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/apple.svg',
'microsoft.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/microsoft.svg',
'spotify.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/spotify.svg',
'netflix.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/netflix.svg',
'twitch.tv': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitch.svg',
'dropbox.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/dropbox.svg',
'zoom.us': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/zoom.svg'
};
if (logoMap[domain]) {
return logoMap[domain];
}
// Fallback to favicon
return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
} catch (e) {
return null;
}
}
// Set logos for existing links
function setLogosForLinks() {
document.querySelectorAll('.link-url[data-url]').forEach(linkElement => {
const url = linkElement.getAttribute('data-url');
const logoImg = linkElement.closest('.link-item').querySelector('.link-logo');
const logoSrc = getWebsiteLogo(url);
if (logoSrc && logoImg) {
logoImg.src = logoSrc;
logoImg.style.display = 'block';
logoImg.alt = new URL(url.startsWith('http') ? url : 'https://' + url).hostname;
}
});
}
// Initialize logos when page loads
document.addEventListener('DOMContentLoaded', setLogosForLinks);
// Copy to clipboard function
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
// Show temporary success message
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = 'Copied!';
btn.style.background = '#4caf50';
setTimeout(() => {
btn.textContent = originalText;
btn.style.background = '#2196f3';
}, 1500);
}).catch(function(err) {
console.error('Could not copy text: ', err);
alert('Failed to copy to clipboard');
});
}
// Add new link
document.getElementById('add-link-form').addEventListener('submit', async function(e) {
e.preventDefault();
@@ -358,7 +471,11 @@
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title, url, description })
body: JSON.stringify({
title,
url,
description
})
});
const result = await response.json();
@@ -399,7 +516,11 @@
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title, url, description })
body: JSON.stringify({
title,
url,
description
})
});
const result = await response.json();

129
app/templates/index.html
View File

@@ -148,7 +148,8 @@
.link-page-fields,
.email-fields,
.sms-fields,
.vcard-fields {
.vcard-fields,
.url-shortener-fields {
display: none;
}
@@ -156,7 +157,8 @@
.link-page-fields.active,
.email-fields.active,
.sms-fields.active,
.vcard-fields.active {
.vcard-fields.active,
.url-shortener-fields.active {
display: block;
}
@@ -212,14 +214,9 @@
}
.download-section {
display: none;
gap: 10px;
}
.download-section.active {
display: flex;
}
.btn-secondary {
background: #6c757d;
flex: 1;
@@ -230,6 +227,15 @@
flex: 1;
}
.btn-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
flex: 1;
}
.btn-success:hover {
background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
}
.qr-history {
margin-top: 30px;
padding: 25px;
@@ -322,6 +328,7 @@
<option value="text">Text</option>
<option value="url">URL/Website</option>
<option value="link_page">Dynamic Link Page</option>
<option value="url_shortener">URL Shortener</option>
<option value="wifi">WiFi</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
@@ -368,7 +375,32 @@
</div>
<div class="form-group">
<p style="background: #e3f2fd; padding: 15px; border-radius: 8px; color: #1565c0; font-size: 0.9em;">
<strong>💡 Dynamic Link Page:</strong> This creates a QR code that points to a web page where you can add, edit, and manage links. The QR code stays the same, but you can update the links anytime!
<strong>💡 Dynamic Link Page with Short URL:</strong> This creates a QR code with a short URL that points to a web page where you can add, edit, and manage links. The QR code stays the same, but you can update the links anytime!
<br><br>✨ <strong>Auto Short URL:</strong> Your link page will automatically get a short URL like <code>qr.moto-adv.com/s/abc123</code> making the QR code simpler and easier to scan!
</p>
</div>
</div>
<!-- URL Shortener fields -->
<div class="url-shortener-fields" id="url-shortener-fields">
<div class="form-group">
<label for="shortener-url">URL to Shorten</label>
<input type="url" id="shortener-url" placeholder="https://example.com/very/long/url">
</div>
<div class="form-group">
<label for="shortener-title">Title (optional)</label>
<input type="text" id="shortener-title" placeholder="My Website">
</div>
<div class="form-group">
<label for="shortener-custom-code">Custom Short Code (optional)</label>
<input type="text" id="shortener-custom-code" placeholder="mylink" maxlength="20">
<small style="color: #666; font-size: 0.8em;">
Leave empty for random code. Only letters and numbers allowed.
</small>
</div>
<div class="form-group">
<p style="background: #e3f2fd; padding: 15px; border-radius: 8px; color: #1565c0; font-size: 0.9em;">
<strong>🔗 URL Shortener:</strong> Creates a short URL that redirects to your original URL. The QR code will contain the short URL. Perfect for long URLs or tracking clicks!
</p>
</div>
</div>
@@ -478,8 +510,9 @@
</div>
<div class="download-section" id="download-section">
<button class="btn btn-primary" onclick="downloadQR()">Download PNG</button>
<button class="btn btn-secondary" onclick="copyToClipboard()">Copy Image</button>
<button class="btn btn-primary" onclick="downloadQR('png')">📥 Download PNG</button>
<button class="btn btn-success" onclick="downloadQR('svg')">🎨 Download SVG</button>
<button class="btn btn-secondary" onclick="copyToClipboard()">📋 Copy Image</button>
</div>
</div>
</div>
@@ -501,7 +534,7 @@
// Hide all specific fields
document.getElementById('text-field').style.display = 'none';
document.querySelectorAll('.wifi-fields, .link-page-fields, .email-fields, .sms-fields, .vcard-fields').forEach(el => {
document.querySelectorAll('.wifi-fields, .link-page-fields, .email-fields, .sms-fields, .vcard-fields, .url-shortener-fields').forEach(el => {
el.classList.remove('active');
});
@@ -570,6 +603,12 @@
email: document.getElementById('vcard-email').value,
website: document.getElementById('vcard-website').value
};
} else if (type === 'url_shortener') {
additionalData.shortener = {
url: document.getElementById('shortener-url').value,
title: document.getElementById('shortener-title').value,
custom_code: document.getElementById('shortener-custom-code').value
};
}
const requestData = {
@@ -583,7 +622,13 @@
};
try {
const endpoint = type === 'link_page' ? '/api/create_link_page' : '/api/generate';
let endpoint = '/api/generate';
if (type === 'link_page') {
endpoint = '/api/create_link_page';
} else if (type === 'url_shortener') {
endpoint = '/api/generate_shortened_qr';
}
const response = await fetch(endpoint, {
method: 'POST',
headers: {
@@ -606,10 +651,22 @@
if (type === 'link_page') {
previewHTML += `
<div style="margin-top: 15px; padding: 15px; background: #e3f2fd; border-radius: 8px; text-align: left;">
<h4 style="margin-bottom: 10px; color: #1565c0;">🎉 Dynamic Link Page Created!</h4>
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>Public URL:</strong> <a href="${result.page_url}" target="_blank">${result.page_url}</a></p>
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>Edit URL:</strong> <a href="${result.edit_url}" target="_blank">${result.edit_url}</a></p>
<p style="font-size: 0.9em; color: #666;">Share the QR code - visitors will see your link collection. Use the edit URL to manage your links!</p>
<h4 style="margin-bottom: 10px; color: #1565c0;">🎉 Dynamic Link Page Created with Short URL!</h4>
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>🔗 Short URL:</strong> <a href="${result.page_url}" target="_blank">${result.page_url}</a>
<button onclick="copyToClipboard('${result.page_url}')" style="margin-left: 10px; padding: 4px 8px; background: #1565c0; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8em;">Copy</button></p>
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>📝 Edit URL:</strong> <a href="${result.edit_url}" target="_blank">${result.edit_url}</a></p>
${result.original_url ? `<p style="margin-bottom: 10px; font-size: 0.8em; color: #666;"><strong>Original URL:</strong> ${result.original_url}</p>` : ''}
<p style="font-size: 0.9em; color: #666;">✨ QR code contains the short URL for easier scanning! Share it - visitors will see your link collection. Use the edit URL to manage your links!</p>
</div>
`;
} else if (type === 'url_shortener') {
previewHTML += `
<div style="margin-top: 15px; padding: 15px; background: #e8f5e8; border-radius: 8px; text-align: left;">
<h4 style="margin-bottom: 10px; color: #2e7d32;">🔗 Short URL Created!</h4>
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>Short URL:</strong> <a href="${result.short_url}" target="_blank">${result.short_url}</a></p>
<p style="margin-bottom: 10px; font-size: 0.9em;"><strong>Original URL:</strong> <a href="${result.original_url}" target="_blank">${result.original_url}</a></p>
<p style="font-size: 0.9em; color: #666;">The QR code contains your short URL. When scanned, it will redirect to your original URL!</p>
<button onclick="copyToClipboard('${result.short_url}')" style="margin-top: 10px; padding: 8px 15px; background: #2e7d32; color: white; border: none; border-radius: 5px; cursor: pointer;">Copy Short URL</button>
</div>
`;
}
@@ -629,9 +686,13 @@
}
}
async function downloadQR() {
async function downloadQR(format = 'png') {
if (currentQRId) {
window.open(`/api/download/${currentQRId}`, '_blank');
if (format === 'svg') {
window.open(`/api/download/${currentQRId}/svg`, '_blank');
} else {
window.open(`/api/download/${currentQRId}`, '_blank');
}
}
}
@@ -650,6 +711,23 @@
}
}
// Copy to clipboard function
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = 'Copied!';
btn.style.background = '#4caf50';
setTimeout(() => {
btn.textContent = originalText;
btn.style.background = '#2e7d32';
}, 1500);
}).catch(function(err) {
console.error('Could not copy text: ', err);
alert('Failed to copy to clipboard');
});
}
async function loadQRHistory() {
try {
const response = await fetch('/api/qr_codes');
@@ -670,9 +748,10 @@
<p>Created: ${new Date(qr.created_at).toLocaleDateString()}</p>
</div>
<div class="qr-item-actions">
<button class="btn btn-small btn-primary" onclick="downloadQRById('${qr.id}')">Download</button>
${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openLinkPage('${qr.id}')" style="background: #28a745;">Manage</button>` : ''}
<button class="btn btn-small btn-secondary" onclick="deleteQR('${qr.id}')">Delete</button>
<button class="btn btn-small btn-primary" onclick="downloadQRById('${qr.id}', 'png')" title="Download PNG">📥 PNG</button>
<button class="btn btn-small btn-success" onclick="downloadQRById('${qr.id}', 'svg')" title="Download SVG">🎨 SVG</button>
${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openLinkPage('${qr.id}')" style="background: #28a745;" title="Manage Links">📝 Manage</button>` : ''}
<button class="btn btn-small btn-secondary" onclick="deleteQR('${qr.id}')" title="Delete QR Code">🗑️</button>
</div>
</div>
`).join('');
@@ -681,8 +760,12 @@
}
}
async function downloadQRById(qrId) {
window.open(`/api/download/${qrId}`, '_blank');
async function downloadQRById(qrId, format = 'png') {
if (format === 'svg') {
window.open(`/api/download/${qrId}/svg`, '_blank');
} else {
window.open(`/api/download/${qrId}`, '_blank');
}
}
async function deleteQR(qrId) {

145
app/templates/link_page.html
View File

@@ -90,7 +90,10 @@
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
display: block;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
color: inherit;
}
@@ -100,14 +103,22 @@
border-color: #667eea;
}
.link-content {
flex: 1;
}
.link-title {
font-size: 1.3em;
font-weight: 600;
color: #333;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.link-logo {
width: 36px;
height: 36px;
border-radius: 8px;
flex-shrink: 0;
}
.link-icon {
@@ -153,31 +164,6 @@
color: #333;
}
.footer {
background: #f8f9fa;
padding: 20px;
text-align: center;
border-top: 1px solid #e9ecef;
color: #666;
font-size: 0.9em;
}
.footer a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.footer a:hover {
text-decoration: underline;
}
.last-updated {
margin-top: 10px;
font-size: 0.8em;
opacity: 0.7;
}
@media (max-width: 768px) {
.header {
padding: 30px 20px;
@@ -232,15 +218,19 @@
{% if page.links %}
<h2>📚 Available Links</h2>
{% for link in page.links %}
<a href="{{ link.url }}" target="_blank" class="link-item">
<div class="link-title">
<div class="link-icon">🔗</div>
{{ link.title }}
<a href="{{ link.short_url if link.short_url else link.url }}" target="_blank" class="link-item" data-url="{{ link.url }}">
<div class="link-content">
<div class="link-title">
{{ link.title }}
{% if link.short_url %}<span style="background: #2196f3; color: white; font-size: 0.7em; padding: 2px 6px; border-radius: 10px; margin-left: 8px;">SHORT</span>{% endif %}
</div>
{% if link.description %}
<div class="link-description">{{ link.description }}</div>
{% endif %}
<div class="link-url">{{ link.short_url if link.short_url else link.url }}</div>
</div>
{% if link.description %}
<div class="link-description">{{ link.description }}</div>
{% endif %}
<div class="link-url">{{ link.url }}</div>
<img class="link-logo" src="" alt="" style="display: none;" onerror="this.style.display='none'">
<div class="link-icon" style="display: block;">🔗</div>
</a>
{% endfor %}
{% else %}
@@ -252,18 +242,81 @@
{% endif %}
</div>
</div>
<div class="footer">
<p>Powered by <a href="/">QR Code Manager</a></p>
{% if page.updated_at %}
<div class="last-updated">
Last updated: {{ page.updated_at[:10] }} at {{ page.updated_at[11:19] }}
</div>
{% endif %}
</div>
</div>
<script>
// Social media and website logo detection
function getWebsiteLogo(url) {
try {
const urlObj = new URL(url.startsWith('http') ? url : 'https://' + url);
const domain = urlObj.hostname.toLowerCase().replace('www.', '');
// Logo mapping for popular sites
const logoMap = {
'facebook.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg',
'instagram.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg',
'twitter.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter.svg',
'x.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/x.svg',
'tiktok.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/tiktok.svg',
'youtube.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/youtube.svg',
'linkedin.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg',
'pinterest.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/pinterest.svg',
'snapchat.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/snapchat.svg',
'whatsapp.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/whatsapp.svg',
'telegram.org': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/telegram.svg',
'discord.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg',
'reddit.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/reddit.svg',
'github.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/github.svg',
'gmail.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/gmail.svg',
'google.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/google.svg',
'amazon.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/amazon.svg',
'apple.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/apple.svg',
'microsoft.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/microsoft.svg',
'spotify.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/spotify.svg',
'netflix.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/netflix.svg',
'twitch.tv': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitch.svg',
'dropbox.com': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/dropbox.svg',
'zoom.us': 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/zoom.svg'
};
if (logoMap[domain]) {
return logoMap[domain];
}
// Fallback to favicon
return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
} catch (e) {
return null;
}
}
// Set logos for links
function setLogosForLinks() {
document.querySelectorAll('.link-item[data-url]').forEach(linkElement => {
const url = linkElement.getAttribute('data-url');
const logoImg = linkElement.querySelector('.link-logo');
const fallbackIcon = linkElement.querySelector('.link-icon');
const logoSrc = getWebsiteLogo(url);
if (logoSrc && logoImg) {
logoImg.src = logoSrc;
logoImg.style.display = 'block';
logoImg.alt = new URL(url.startsWith('http') ? url : 'https://' + url).hostname;
// Hide the fallback icon when logo is shown
logoImg.onload = function() {
if (fallbackIcon) fallbackIcon.style.display = 'none';
};
logoImg.onerror = function() {
this.style.display = 'none';
if (fallbackIcon) fallbackIcon.style.display = 'flex';
};
}
});
}
// Initialize logos when page loads
document.addEventListener('DOMContentLoaded', setLogosForLinks);
// Add click tracking (optional)
document.querySelectorAll('.link-item').forEach(link => {
link.addEventListener('click', function() {

25
app/templates/login.html
View File

@@ -134,22 +134,6 @@
font-size: 0.9em;
}
.default-credentials {
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
font-size: 0.9em;
}
.default-credentials strong {
display: block;
margin-bottom: 5px;
}
@media (max-width: 480px) {
.login-container {
margin: 10px;
@@ -199,12 +183,6 @@
{% endif %}
{% endwith %}
<div class="default-credentials">
<strong>Default Login Credentials:</strong>
Username: admin<br>
Password: admin123
</div>
<form method="POST">
<div class="form-group">
<label for="username">Username</label>
@@ -222,9 +200,6 @@
<div class="login-footer">
<p>🔒 Secure QR Code Management System</p>
<p style="margin-top: 5px; font-size: 0.8em; opacity: 0.7;">
Change default credentials in production
</p>
</div>
</div>