Hugging Face's logo

Spaces:
Docfile
/
an
Sleeping

App Files Community
an / templates /base.html
Docfile's picture
Docfile
Upload 23 files
75ba54e verified
raw
history blame contribute delete
20.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" href="/static/images/icon.svg">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>{% block title %}GhostBoard{% endblock %}</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900 min-h-screen pb-20"> <!-- pb-20 for FAB space -->
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50 bg-opacity-90 backdrop-blur-sm">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="{{ url_for('index') }}" class="text-xl font-bold text-gray-900 tracking-tight">GhostBoard</a>
<div class="flex space-x-3 text-sm font-medium overflow-x-auto no-scrollbar">
{% for board in global_boards %}
<a href="{{ url_for('board', slug=board.slug) }}" class="text-gray-600 hover:text-blue-600 whitespace-nowrap">/{{ board.slug }}/</a>
{% endfor %}
</div>
</div>
</nav>
<main class="container mx-auto p-4">
{% block content %}{% endblock %}
</main>
<!-- Share App Button -->
<div class="container mx-auto px-4 mt-8 mb-4">
<button onclick="shareAppOnWhatsApp()" class="w-full sm:w-auto mx-auto block bg-[#25D366] hover:bg-[#128C7E] text-white font-bold py-4 px-8 rounded-full shadow-lg transform transition hover:scale-105 flex items-center justify-center space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 1.032 5.122 3.022 6.989 5.615.119 5.269 2.768 9.825 8.526 9.881-.14 0-.28 0-.42-.01l-.001-.001z"/>
</svg>
<span class="text-xl">Partager l'application</span>
</button>
</div>
<footer class="text-center text-gray-400 text-xs py-8 mt-8">
<p>GhostBoard &copy; 2025</p>
</footer>
<!-- Share Modal -->
<div id="share-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-40 backdrop-blur-sm p-4">
<div class="absolute inset-0" onclick="closeShareModal()"></div>
<div class="bg-white w-full max-w-sm rounded-2xl shadow-2xl transform transition-all relative z-10 overflow-hidden">
<div class="p-6 text-center">
<h3 class="text-xl font-bold text-gray-900 mb-6">Partager ce post</h3>
<div class="space-y-3">
<button onclick="copyCurrentLink()" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-4 rounded-xl flex items-center justify-center transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copier le lien
</button>
<button onclick="shareToWhatsApp()" class="w-full bg-[#25D366] hover:bg-[#128C7E] text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 1.032 5.122 3.022 6.989 5.615.119 5.269 2.768 9.825 8.526 9.881-.14 0-.28 0-.42-.01l-.001-.001z"/>
</svg>
Partager sur WhatsApp
</button>
</div>
<button onclick="closeShareModal()" class="mt-6 text-gray-500 hover:text-gray-700 text-sm font-medium">Fermer</button>
</div>
</div>
</div>
<script>
function shareAppOnWhatsApp() {
const url = window.location.origin;
const text = "Découvre GhostBoard, c'est génial ! " + url;
const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
window.open(whatsappUrl, '_blank');
}
let currentShareId = null;
let currentShareUrl = null;
function replyTo(id) {
const textarea = document.getElementById('content');
const formContainer = document.getElementById('post-form-container');
if (formContainer && formContainer.classList.contains('hidden')) {
togglePostForm();
}
if (textarea) {
const currentVal = textarea.value;
textarea.value = currentVal + (currentVal ? '\n' : '') + '>>' + id + '\n';
textarea.focus();
textarea.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
function togglePostForm() {
const container = document.getElementById('post-form-container');
const fab = document.getElementById('fab-button');
if (container.classList.contains('hidden')) {
container.classList.remove('hidden');
// Focus textarea
setTimeout(() => document.getElementById('content').focus(), 100);
if(fab) fab.classList.add('hidden');
} else {
container.classList.add('hidden');
if(fab) fab.classList.remove('hidden');
}
}
function highlightPost(id) {
const post = document.getElementById('post-' + id);
if (post) {
post.classList.add('bg-blue-50');
post.classList.add('ring-2');
post.classList.add('ring-blue-200');
setTimeout(() => {
post.classList.remove('bg-blue-50');
post.classList.remove('ring-2');
post.classList.remove('ring-blue-200');
}, 2000);
}
}
function sharePost(id, url) {
currentShareId = id;
currentShareUrl = url;
const modal = document.getElementById('share-modal');
modal.classList.remove('hidden');
}
function closeShareModal() {
document.getElementById('share-modal').classList.add('hidden');
currentShareId = null;
currentShareUrl = null;
}
async function copyCurrentLink() {
if (!currentShareUrl) return;
try {
await navigator.clipboard.writeText(currentShareUrl);
alert('Lien copié dans le presse-papier !');
closeShareModal();
} catch (err) {
console.error('Failed to copy: ', err);
alert('Impossible de copier le lien');
}
}
async function shareToWhatsApp() {
if (!currentShareId || !currentShareUrl) return;
const id = currentShareId;
const url = currentShareUrl;
// Close modal immediately to avoid capturing it or blocking UI
closeShareModal();
// Notify user generating image
const toast = document.createElement('div');
toast.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50';
toast.textContent = 'Génération de l\'image...';
document.body.appendChild(toast);
const originalPost = document.getElementById('post-' + id);
if (!originalPost) {
toast.remove();
return;
}
// Wrapper for style (NGL like background)
const wrapper = document.createElement('div');
wrapper.style.width = '600px';
wrapper.style.padding = '40px';
wrapper.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
wrapper.style.alignItems = 'center';
wrapper.style.justifyContent = 'center';
wrapper.style.position = 'absolute';
wrapper.style.top = '-9999px';
wrapper.style.left = '-9999px';
// Clone the post
const clone = originalPost.cloneNode(true);
// Remove actions/buttons from clone
const actions = clone.querySelectorAll('button, a[href^="#"], .no-capture');
actions.forEach(el => el.remove());
// Style clone card
clone.id = 'clone-capture';
clone.style.width = '100%';
clone.style.maxWidth = '100%';
clone.style.margin = '0';
clone.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
clone.style.borderRadius = '16px';
clone.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
clone.style.padding = '20px';
clone.style.position = 'relative';
clone.style.top = 'auto';
clone.style.left = 'auto';
// Add Branding
const branding = document.createElement('div');
branding.className = 'mt-4 pt-4 border-t border-gray-200 flex items-center justify-center text-gray-500 text-xs font-bold uppercase tracking-widest';
branding.innerHTML = 'GhostBoard';
const contentDiv = clone.querySelector('.flex-grow') || clone;
contentDiv.appendChild(branding);
wrapper.appendChild(clone);
document.body.appendChild(wrapper);
try {
const canvas = await html2canvas(wrapper, {
scale: 2,
backgroundColor: null,
useCORS: true,
logging: false
});
document.body.removeChild(wrapper);
toast.remove();
canvas.toBlob(async (blob) => {
if (!blob) return;
const file = new File([blob], `ghostboard-${id}.png`, { type: 'image/png' });
// Share data with text link
const shareData = {
files: [file],
title: 'GhostBoard',
text: url // Description text for WhatsApp
};
if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
try {
await navigator.share(shareData);
} catch (err) {
console.log('Share dismissed or failed', err);
}
} else {
// Fallback download if web share not available (e.g. desktop)
const link = document.createElement('a');
link.download = `ghostboard-${id}.png`;
link.href = canvas.toDataURL();
link.click();
alert("Partage natif non supporté sur cet appareil. L'image a été téléchargée. Vous pouvez maintenant la partager sur WhatsApp manuellement avec le lien : " + url);
}
});
} catch (err) {
console.error('Capture failed', err);
if (wrapper.parentNode) document.body.removeChild(wrapper);
toast.remove();
alert("Impossible de générer l'image. Veuillez réessayer.");
}
}
// Image expansion logic
document.querySelectorAll('img.post-image').forEach(img => {
img.addEventListener('click', function(e) {
if (this.dataset.full) {
e.preventDefault();
if (this.src === this.dataset.thumb) {
this.src = this.dataset.full;
this.style.maxWidth = '100%';
this.style.maxHeight = 'none';
} else {
this.src = this.dataset.thumb;
this.style.maxWidth = ''; // Reset to class default
this.style.maxHeight = '';
}
}
});
});
// Register Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW Registered'))
.catch(err => console.log('SW Registration Failed', err));
});
}
function previewFiles(input, previewId) {
const preview = document.getElementById(previewId);
if (!preview) return;
preview.innerHTML = '';
if (input.files) {
Array.from(input.files).forEach(file => {
const reader = new FileReader();
reader.onload = function(e) {
if (file.type.startsWith('image/')) {
const img = document.createElement('img');
img.src = e.target.result;
img.className = 'w-20 h-20 object-cover rounded shadow-sm';
preview.appendChild(img);
} else if (file.type.startsWith('video/')) {
const vid = document.createElement('video');
vid.src = e.target.result;
vid.className = 'w-20 h-20 object-cover rounded shadow-sm bg-black';
preview.appendChild(vid);
}
}
reader.readAsDataURL(file);
});
}
}
// User nickname management
function setNickname(event) {
event.preventDefault();
const nickname = document.getElementById('nickname-input').value.trim();
if (!nickname) {
alert('Veuillez entrer un pseudo');
return;
}
fetch('/api/set-nickname', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ nickname: nickname })
})
.then(response => response.json())
.then(data => {
if (data.success) {
localStorage.setItem('ghostboard_nickname', data.nickname);
closeNicknameModal();
location.reload(); // Refresh to update UI
} else {
alert(data.error || 'Erreur lors de la sauvegarde');
}
})
.catch(error => {
console.error('Error:', error);
alert('Erreur de connexion');
});
}
function getNickname() {
return localStorage.getItem('ghostboard_nickname');
}
function checkNicknameAndShowModal() {
// Check if user has a nickname
const nickname = getNickname();
if (!nickname) {
// Check with server if user exists
fetch('/api/me')
.then(response => response.json())
.then(data => {
if (data.nickname) {
localStorage.setItem('ghostboard_nickname', data.nickname);
} else {
// No nickname, show modal
document.getElementById('nickname-modal').classList.remove('hidden');
document.getElementById('nickname-input').focus();
}
})
.catch(error => {
console.error('Error checking user:', error);
// On error, show modal anyway
document.getElementById('nickname-modal').classList.remove('hidden');
document.getElementById('nickname-input').focus();
});
}
}
function closeNicknameModal() {
document.getElementById('nickname-modal').classList.add('hidden');
}
// Auto-fill nickname fields
function autoFillNickname() {
const nickname = getNickname();
if (nickname) {
// Fill nickname inputs
const inputs = document.querySelectorAll('input[name="nickname"]');
inputs.forEach(input => {
if (!input.value) {
input.value = nickname;
}
});
// Hide nickname fields since user has a nickname
const nicknameFields = document.querySelectorAll('#nickname-field, #nickname-input');
nicknameFields.forEach(field => {
if (field) field.style.display = 'none';
});
} else {
// Show nickname fields for anonymous users
const nicknameFields = document.querySelectorAll('#nickname-field, #nickname-input');
nicknameFields.forEach(field => {
if (field) field.style.display = 'block';
});
}
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
// Check nickname on index page
if (window.location.pathname === '/') {
checkNicknameAndShowModal();
}
// Auto-fill nickname fields
autoFillNickname();
});
</script>
</body>
</html>