Spaces:

Chasme
/

bloc-note

Running

App Files Files Community

bloc-note / index.html

Chasme

Add 2 files

769c9f5 verified over 1 year ago

Raw

History Blame Contribute Delete

22.3 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Notorium - Bloc-notes intelligent</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
	tailwind.config = {
	darkMode: 'class',
	theme: {
	extend: {
	colors: {
	dark: {
	900: '#0a0a0a',
	800: '#1a1a1a',
	700: '#2a2a2a',
	600: '#3a3a3a',
	},
	primary: {
	500: '#6366f1',
	600: '#4f46e5',
	}
	}
	}
	}
	}
	</script>
	<style>
	.note-content {
	min-height: 300px;
	line-height: 1.6;
	}
	.suggestion-item:hover {
	background-color: rgba(99, 102, 241, 0.2);
	}
	.fade-in {
	animation: fadeIn 0.3s ease-in-out;
	}
	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}
	.separator {
	border-top: 1px dashed rgba(255,255,255,0.1);
	margin: 1rem 0;
	}
	</style>
	</head>
	<body class="bg-dark-900 text-gray-200 min-h-screen">
	<div class="container mx-auto px-4 py-8 max-w-4xl">
	<!-- Header -->
	<header class="flex justify-between items-center mb-8">
	<div class="flex items-center space-x-3">
	<i class="fas fa-book-open text-primary-500 text-2xl"></i>
	<h1 class="text-2xl font-bold">Notorium</h1>
	</div>
	<div class="flex space-x-4">
	<button id="searchBtn" class="p-2 rounded-full hover:bg-dark-700 transition">
	<i class="fas fa-search"></i>
	</button>
	<button id="settingsBtn" class="p-2 rounded-full hover:bg-dark-700 transition">
	<i class="fas fa-cog"></i>
	</button>
	</div>
	</header>

	<!-- Search Modal -->
	<div id="searchModal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4">
	<div class="bg-dark-800 rounded-lg w-full max-w-md p-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold">Rechercher dans vos notes</h3>
	<button id="closeSearch" class="text-gray-400 hover:text-white">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<input type="text" placeholder="Tapez pour rechercher..." class="w-full bg-dark-700 border border-dark-600 rounded-md px-4 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
	<div class="flex space-x-2 mb-4">
	<select class="bg-dark-700 border border-dark-600 rounded-md px-3 py-1 text-sm">
	<option>Toutes les dates</option>
	<option>Aujourd'hui</option>
	<option>Cette semaine</option>
	<option>Ce mois</option>
	</select>
	<select class="bg-dark-700 border border-dark-600 rounded-md px-3 py-1 text-sm">
	<option>Tous les tags</option>
	<option>Professionnel</option>
	<option>Créatif</option>
	<option>Personnel</option>
	</select>
	</div>
	<div id="searchResults" class="max-h-60 overflow-y-auto">
	<!-- Results will appear here -->
	</div>
	</div>
	</div>

	<!-- Note Editor -->
	<div class="bg-dark-800 rounded-xl shadow-lg overflow-hidden mb-6">
	<!-- Toolbar -->
	<div class="flex items-center px-4 py-2 bg-dark-700 border-b border-dark-600">
	<div class="flex space-x-2">
	<button class="p-2 rounded hover:bg-dark-600" title="Gras" onclick="formatText('bold')">
	<i class="fas fa-bold"></i>
	</button>
	<button class="p-2 rounded hover:bg-dark-600" title="Italique" onclick="formatText('italic')">
	<i class="fas fa-italic"></i>
	</button>
	<button class="p-2 rounded hover:bg-dark-600" title="Liste à puces" onclick="formatText('insertUnorderedList')">
	<i class="fas fa-list-ul"></i>
	</button>
	</div>
	<div class="ml-auto flex space-x-2">
	<button id="suggestBtn" class="px-3 py-1 bg-dark-600 hover:bg-primary-500 rounded-md text-sm flex items-center space-x-1 transition">
	<i class="fas fa-lightbulb"></i>
	<span>Suggestions</span>
	</button>
	<button id="generateBtn" class="px-3 py-1 bg-primary-500 hover:bg-primary-600 rounded-md text-sm flex items-center space-x-1 transition">
	<i class="fas fa-magic"></i>
	<span>Générer</span>
	</button>
	</div>
	</div>

	<!-- Editor -->
	<div class="p-4">
	<div id="noteEditor" class="note-content outline-none" contenteditable="true" placeholder="Commencez à écrire ici..."></div>
	</div>
	</div>

	<!-- Suggestions Panel -->
	<div id="suggestionsPanel" class="hidden bg-dark-800 rounded-lg p-4 mb-6 fade-in">
	<div class="flex justify-between items-center mb-3">
	<h3 class="font-medium">Suggestions intelligentes</h3>
	<button id="closeSuggestions" class="text-gray-400 hover:text-white">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div id="suggestionsContent" class="space-y-2">
	<!-- Suggestions will appear here -->
	</div>
	</div>

	<!-- Generated Content -->
	<div id="generatedContent" class="hidden bg-dark-800 rounded-lg p-4 mb-6 fade-in">
	<div class="flex justify-between items-center mb-3">
	<h3 class="font-medium">Contenu optimisé</h3>
	<div class="flex space-x-2">
	<button id="copyAll" class="px-2 py-1 bg-dark-700 hover:bg-dark-600 rounded text-xs flex items-center space-x-1">
	<i class="fas fa-copy"></i>
	<span>Tout copier</span>
	</button>
	<button id="insertAll" class="px-2 py-1 bg-primary-500 hover:bg-primary-600 rounded text-xs flex items-center space-x-1">
	<i class="fas fa-plus"></i>
	<span>Insérer</span>
	</button>
	</div>
	</div>
	<div id="generatedText" class="whitespace-pre-line">
	<!-- Generated content will appear here -->
	</div>
	</div>

	<!-- Status Bar -->
	<div class="flex justify-between items-center text-sm text-gray-500">
	<div>
	<span id="charCount">0</span> caractères
	</div>
	<div class="flex space-x-4">
	<button id="saveBtn" class="hover:text-gray-300 flex items-center space-x-1">
	<i class="fas fa-cloud"></i>
	<span>Sauvegarder</span>
	</button>
	<button id="exportBtn" class="hover:text-gray-300 flex items-center space-x-1">
	<i class="fas fa-share"></i>
	<span>Exporter</span>
	</button>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const noteEditor = document.getElementById('noteEditor');
	const charCount = document.getElementById('charCount');
	const suggestBtn = document.getElementById('suggestBtn');
	const generateBtn = document.getElementById('generateBtn');
	const suggestionsPanel = document.getElementById('suggestionsPanel');
	const generatedContent = document.getElementById('generatedContent');
	const generatedText = document.getElementById('generatedText');
	const closeSuggestions = document.getElementById('closeSuggestions');
	const copyAll = document.getElementById('copyAll');
	const insertAll = document.getElementById('insertAll');
	const searchBtn = document.getElementById('searchBtn');
	const searchModal = document.getElementById('searchModal');
	const closeSearch = document.getElementById('closeSearch');
	const saveBtn = document.getElementById('saveBtn');
	const exportBtn = document.getElementById('exportBtn');

	// Update character count
	noteEditor.addEventListener('input', function() {
	charCount.textContent = noteEditor.textContent.length;
	});

	// Handle paste event to auto-detect and format title/description/hashtags
	noteEditor.addEventListener('paste', function(e) {
	e.preventDefault();
	const text = (e.clipboardData \|\| window.clipboardData).getData('text/plain');

	// Process the pasted text to detect and format elements
	setTimeout(() => {
	processPastedContent(text);
	}, 10);
	});

	function cleanText(text) {
	// Remove "Titre :", "Description :", "Hashtag :" and their variations
	return text
	.replace(/^(Titre\|titre)\s:\s/gmi, '')
	.replace(/^(Description\|description)\s:\s/gmi, '')
	.replace(/^(Hashtag\|hashtag\|Mots-clés\|mots-clés)\s:\s/gmi, '')
	.trim();
	}

	function processPastedContent(text) {
	// Clean the text first
	text = cleanText(text);

	// Try to detect title, description and hashtags in various formats
	let title = '';
	let description = '';
	let hashtags = '';

	// Common pattern detection
	if (text.includes('Titre:') \|\| text.includes('titre:')) {
	const parts = text.split(/\n\s*\n/);
	parts.forEach(part => {
	if (part.match(/^(Titre\|titre):/i)) {
	title = cleanText(part);
	} else if (part.match(/^(Description\|description):/i)) {
	description = cleanText(part);
	} else if (part.match(/^(Hashtags\|hashtags\|Mots-clés\|mots-clés):/i)) {
	hashtags = cleanText(part);
	}
	});
	} else {
	// Try to split by empty lines
	const parts = text.split(/\n\s*\n/);
	if (parts.length >= 3) {
	title = cleanText(parts[0]);
	description = cleanText(parts[1]);
	hashtags = cleanText(parts[2]);
	} else if (parts.length === 2) {
	title = cleanText(parts[0]);
	description = cleanText(parts[1]);
	} else if (parts.length === 1) {
	description = cleanText(parts[0]);
	}
	}

	// Format the content with empty line separation
	let formattedContent = '';
	if (title) formattedContent += title + '\n\n';
	if (description) formattedContent += description + '\n\n';
	if (hashtags) {
	// Ensure hashtags start with #
	hashtags = hashtags.split(/\s+/).map(tag => {
	return tag.startsWith('#') ? tag : '#' + tag;
	}).join(' ');
	formattedContent += hashtags;
	}

	// Insert the formatted content
	noteEditor.innerHTML = formattedContent;
	}

	// Generate optimized content
	generateBtn.addEventListener('click', function() {
	const content = noteEditor.textContent.trim();
	if (!content) return;

	// Simulate content generation (in a real app, this would use AI/NLP)
	const generated = generateOptimizedContent(content);
	generatedText.textContent = generated;
	generatedContent.classList.remove('hidden');
	});

	function generateOptimizedContent(text) {
	// Extract main ideas for title
	const sentences = text.split(/[.!?]\s+/);
	const firstSentence = sentences[0];
	const keywords = extractKeywords(text);

	// Generate title
	let title = '';
	if (firstSentence.length < 60) {
	title = firstSentence;
	} else {
	title = keywords.slice(0, 3).join(' ') + '...';
	}

	// Generate description
	let description = '';
	if (sentences.length > 1) {
	description = sentences.slice(1).join('. ') + '.';
	} else {
	description = firstSentence;
	}

	// Generate hashtags
	let hashtags = keywords.slice(0, 5).map(word => '#' + word.toLowerCase()).join(' ');

	// Format with empty lines between sections
	return `${title}\n\n${description}\n\n${hashtags}`;
	}

	function extractKeywords(text) {
	// Simple keyword extraction (in a real app, this would be more sophisticated)
	const words = text.toLowerCase().split(/\s+/);
	const commonWords = ['le', 'la', 'les', 'un', 'une', 'des', 'et', 'ou', 'mais', 'pour', 'dans', 'avec', 'sur', 'par'];

	const wordCount = {};
	words.forEach(word => {
	word = word.replace(/[^a-zéèêëàâùûîïôöç]/g, '');
	if (word.length > 3 && !commonWords.includes(word)) {
	wordCount[word] = (wordCount[word] \|\| 0) + 1;
	}
	});

	return Object.entries(wordCount)
	.sort((a, b) => b[1] - a[1])
	.map(entry => entry[0]);
	}

	// Show suggestions
	suggestBtn.addEventListener('click', function() {
	const content = noteEditor.textContent.trim();
	if (!content) return;

	// Simulate intelligent suggestions
	const suggestions = generateSuggestions(content);
	displaySuggestions(suggestions);
	suggestionsPanel.classList.remove('hidden');
	});

	function generateSuggestions(text) {
	// Simulate suggestion generation based on content
	const suggestions = [];
	const keywords = extractKeywords(text);

	if (keywords.length > 0) {
	suggestions.push({
	type: 'keywords',
	content: `Mots-clés pertinents: ${keywords.slice(0, 5).join(', ')}`
	});

	suggestions.push({
	type: 'hashtags',
	content: `Hashtags suggérés: ${keywords.slice(0, 5).map(k => '#' + k).join(' ')}`
	});
	}

	if (text.length > 100) {
	suggestions.push({
	type: 'summary',
	content: `Résumé possible: ${text.substring(0, 100)}...`
	});
	}

	// Add some generic suggestions
	suggestions.push({
	type: 'question',
	content: "Pourriez-vous développer ce point davantage ?"
	});

	suggestions.push({
	type: 'example',
	content: "Un exemple concret pourrait renforcer votre argument."
	});

	return suggestions;
	}

	function displaySuggestions(suggestions) {
	const container = document.getElementById('suggestionsContent');
	container.innerHTML = '';

	suggestions.forEach(suggestion => {
	const item = document.createElement('div');
	item.className = 'suggestion-item p-3 bg-dark-700 rounded-md cursor-pointer';
	item.innerHTML = `
	<div class="flex items-start">
	<div class="mt-1 mr-3 text-primary-500">
	${getSuggestionIcon(suggestion.type)}
	</div>
	<div>${suggestion.content}</div>
	</div>
	`;
	item.addEventListener('click', () => {
	applySuggestion(suggestion);
	});
	container.appendChild(item);
	});
	}

	function getSuggestionIcon(type) {
	switch(type) {
	case 'keywords': return '<i class="fas fa-tags"></i>';
	case 'hashtags': return '<i class="fas fa-hashtag"></i>';
	case 'summary': return '<i class="fas fa-align-left"></i>';
	case 'question': return '<i class="fas fa-question-circle"></i>';
	case 'example': return '<i class="fas fa-lightbulb"></i>';
	default: return '<i class="fas fa-comment"></i>';
	}
	}

	function applySuggestion(suggestion) {
	// In a real app, this would be more sophisticated
	const selection = window.getSelection();
	if (!selection.rangeCount) return;

	const range = selection.getRangeAt(0);
	const node = document.createTextNode(suggestion.content + ' ');
	range.insertNode(node);

	// Move cursor to end of inserted text
	range.setStartAfter(node);
	range.setEndAfter(node);
	selection.removeAllRanges();
	selection.addRange(range);

	suggestionsPanel.classList.add('hidden');
	}

	// Close suggestions panel
	closeSuggestions.addEventListener('click', function() {
	suggestionsPanel.classList.add('hidden');
	});

	// Copy all generated content
	copyAll.addEventListener('click', function() {
	navigator.clipboard.writeText(generatedText.textContent)
	.then(() => {
	const originalText = copyAll.innerHTML;
	copyAll.innerHTML = '<i class="fas fa-check"></i> <span>Copié</span>';
	setTimeout(() => {
	copyAll.innerHTML = originalText;
	}, 2000);
	});
	});

	// Insert all generated content
	insertAll.addEventListener('click', function() {
	noteEditor.innerHTML = generatedText.textContent;
	generatedContent.classList.add('hidden');
	});

	// Search functionality
	searchBtn.addEventListener('click', function() {
	searchModal.classList.remove('hidden');
	});

	closeSearch.addEventListener('click', function() {
	searchModal.classList.add('hidden');
	});

	// Save and export buttons (simulated)
	saveBtn.addEventListener('click', function() {
	alert('Note sauvegardée dans le cloud');
	});

	exportBtn.addEventListener('click', function() {
	alert('Exportation vers les réseaux sociaux');
	});
	});

	// Text formatting functions
	function formatText(command, value = null) {
	document.execCommand(command, false, value);
	}
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Chasme/bloc-note" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>