Spaces:

PierreH
/

star

Running

App Files Files Community

PierreH commited on 11 days ago

Commit

83ee0e3

verified ·

1 Parent(s): 6eb3f7c

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +457 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Star
-emoji: 😻
 colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: star
+emoji: 🐳
 colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,457 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Toile Dynamique Minimaliste</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <style>
+        .target-container {
+            position: relative;
+            width: 100%;
+            aspect-ratio: 1/1;
+            border-radius: 50%;
+            overflow: visible;
+        }
+        .circle {
+            position: absolute;
+            border-radius: 50%;
+            z-index: 1;
+        }
+        .circle1 { background-color: #fecaca; width: 8%; height: 8%; top: 46%; left: 46%; }
+        .circle2 { background-color: #fed7aa; width: 20%; height: 20%; top: 40%; left: 40%; }
+        .circle3 { background-color: #fef08a; width: 35%; height: 35%; top: 32.5%; left: 32.5%; }
+        .circle4 { background-color: #bbf7d0; width: 55%; height: 55%; top: 22.5%; left: 22.5%; }
+        .circle5 { background-color: #bfdbfe; width: 75%; height: 75%; top: 12.5%; left: 12.5%; }
+        .label {
+            position: absolute;
+            font-weight: bold;
+            font-size: 0.75rem;
+            color: #333;
+            cursor: pointer;
+            user-select: none;
+            white-space: nowrap;
+            z-index: 7;
+            padding: 0.25rem 0.5rem;
+            background-color: rgba(255, 255, 255, 0.85);
+            border-radius: 0.25rem;
+            transition: all 0.2s ease;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
+        .label:hover {
+            transform: scale(1.05);
+            background-color: rgba(255, 255, 255, 0.95);
+        }
+        .label.selected {
+            background-color: #3b82f6;
+            color: white;
+            transform: scale(1.1);
+        }
+        #canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 6;
+            pointer-events: none;
+        }
+        .note-input {
+            resize: none;
+            font-size: 0.875rem;
+            text-align: center;
+            background-color: transparent;
+            border: none;
+            outline: none;
+        }
+        .note-input::placeholder {
+            color: #9ca3af;
+        }
+        .action-btn {
+            transition: all 0.2s ease;
+        }
+        .action-btn:hover {
+            transform: translateY(-1px);
+        }
+        .action-btn:active {
+            transform: translateY(1px);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="w-full max-w-md bg-white rounded-xl shadow-md p-6 space-y-6">
+        <h1 class="text-xl font-bold text-center text-gray-700">☆ Mon Étoile de Mots ☆</h1>
+        <textarea id="userNotes" class="note-input w-full p-2 rounded-lg bg-gray-50"
+                  placeholder="Écrivez vos notes ici... nom, date, objectifs etc." rows="2"></textarea>
+        <div class="target-container bg-white shadow-inner" id="target-container">
+            <canvas id="canvas"></canvas>
+            <div class="circle circle5"></div>
+            <div class="circle circle4"></div>
+            <div class="circle circle3"></div>
+            <div class="circle circle2"></div>
+            <div class="circle circle1"></div>
+        </div>
+        <div class="grid grid-cols-2 gap-3">
+            <input type="text" id="newKeyword" placeholder="Nouveau mot"
+                   class="col-span-2 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <div class="flex space-x-2">
+                <input type="text" id="editKeyword" placeholder="Modifier"
+                       class="flex-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                <button onclick="updateKeyword()" class="action-btn bg-blue-500 text-white px-3 py-2 rounded-lg hover:bg-blue-600">
+                    Modifier
+                </button>
+            </div>
+            <button onclick="deleteKeyword()" class="action-btn bg-red-500 text-white py-2 rounded-lg hover:bg-red-600">
+                Supprimer
+            </button>
+            <button onclick="addKeyword()" class="action-btn bg-green-500 text-white py-2 rounded-lg hover:bg-green-600">
+                Ajouter
+            </button>
+            <button onclick="saveAsImage()" class="action-btn bg-purple-500 text-white py-2 rounded-lg hover:bg-purple-600">
+                Enregistrer (Image)
+            </button>
+            <button onclick="saveAsPDF()" class="action-btn bg-indigo-500 text-white py-2 rounded-lg hover:bg-indigo-600">
+                Enregistrer (PDF)
+            </button>
+            <button onclick="resetKeywords()" class="action-btn bg-gray-500 text-white py-2 rounded-lg hover:bg-gray-600 col-span-2">
+                Réinitialiser
+            </button>
+        </div>
+    </div>
+    <script>
+        // Initialize jsPDF
+        const { jsPDF } = window.jspdf;
+        let keywords = [
+            { text: "Identification", x: null, y: null },
+            { text: "Gestion", x: null, y: null },
+            { text: "Adaptation", x: null, y: null },
+            { text: "Autonomie", x: null, y: null },
+            { text: "Connaissance", x: null, y: null },
+            { text: "Prévention", x: null, y: null },
+            { text: "Équilibre", x: null, y: null },
+            { text: "Stratégies", x: null, y: null },
+            { text: "Motivation", x: null, y: null },
+            { text: "Recours", x: null, y: null }
+        ];
+        let selectedKeywordIndex = null;
+        let isDragging = false;
+        let dragStartX, dragStartY;
+        let draggedLabel = null;
+        let draggedIndex = null;
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        function renderKeywords() {
+            const container = document.getElementById('target-container');
+            const centerX = container.offsetWidth / 2;
+            const centerY = container.offsetHeight / 2;
+            const radius = Math.min(centerX, centerY) * 0.35;
+            // Remove existing labels
+            container.querySelectorAll('.label').forEach(e => e.remove());
+            // Create new labels
+            keywords.forEach((word, index) => {
+                const labelWidth = word.text.length * 8 + 16;
+                const labelHeight = 24;
+                // Calculate position if not set
+                if (word.x === null || word.y === null) {
+                    const angleStep = (2 * Math.PI) / keywords.length;
+                    const angle = index * angleStep - Math.PI / 2;
+                    word.x = centerX + radius * Math.cos(angle) - labelWidth / 2;
+                    word.y = centerY + radius * Math.sin(angle) - labelHeight / 2;
+                }
+                const label = document.createElement('div');
+                label.className = 'label draggable';
+                label.style.left = `${word.x}px`;
+                label.style.top = `${word.y}px`;
+                label.textContent = word.text;
+                label.dataset.index = index;
+                label.addEventListener('mousedown', (e) => {
+                    startDrag(e, label, index);
+                });
+                if (index === selectedKeywordIndex) {
+                    label.classList.add('selected');
+                }
+                container.appendChild(label);
+            });
+            resizeCanvas();
+        }
+        function startDrag(e, label, index) {
+            isDragging = true;
+            draggedLabel = label;
+            draggedIndex = index;
+            dragStartX = e.clientX - parseFloat(label.style.left);
+            dragStartY = e.clientY - parseFloat(label.style.top);
+            // Select the label being dragged
+            selectKeyword(index);
+            document.addEventListener('mousemove', drag);
+            document.addEventListener('mouseup', stopDrag);
+            e.preventDefault();
+        }
+        function drag(e) {
+            if (!isDragging) return;
+            const container = document.getElementById('target-container');
+            const containerRect = container.getBoundingClientRect();
+            // Calculate new position
+            let newX = e.clientX - dragStartX;
+            let newY = e.clientY - dragStartY;
+            // Constrain to container bounds
+            newX = Math.max(0, Math.min(newX, container.offsetWidth - draggedLabel.offsetWidth));
+            newY = Math.max(0, Math.min(newY, container.offsetHeight - draggedLabel.offsetHeight));
+            draggedLabel.style.left = `${newX}px`;
+            draggedLabel.style.top = `${newY}px`;
+            // Update keyword position
+            keywords[draggedIndex].x = newX;
+            keywords[draggedIndex].y = newY;
+            resizeCanvas();
+        }
+        function stopDrag() {
+            isDragging = false;
+            draggedLabel = null;
+            draggedIndex = null;
+            document.removeEventListener('mousemove', drag);
+            document.removeEventListener('mouseup', stopDrag);
+        }
+        function selectKeyword(index) {
+            selectedKeywordIndex = index;
+            document.getElementById('editKeyword').value = keywords[index].text;
+            // Update UI
+            document.querySelectorAll('.label').forEach(label => {
+                label.classList.remove('selected');
+            });
+            const selectedLabel = document.querySelector(`.label[data-index='${index}']`);
+            if (selectedLabel) {
+                selectedLabel.classList.add('selected');
+            }
+        }
+        function resizeCanvas() {
+            const container = document.getElementById('target-container');
+            canvas.width = container.offsetWidth;
+            canvas.height = container.offsetHeight;
+            drawLines();
+        }
+        function drawLines() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (keywords.length < 2) return;
+            ctx.beginPath();
+            ctx.strokeStyle = '#3b82f6';
+            ctx.lineWidth = 1;
+            ctx.setLineDash([5, 3]);
+            const positions = keywords.map(k => {
+                return {
+                    x: k.x + (document.querySelector(`.label[data-index='${keywords.indexOf(k)}']`)?.offsetWidth / 2 || 0),
+                    y: k.y + (document.querySelector(`.label[data-index='${keywords.indexOf(k)}']`)?.offsetHeight / 2 || 0)
+                };
+            });
+            // Draw connecting lines
+            for (let i = 0; i < positions.length; i++) {
+                const next = positions[(i + 1) % positions.length];
+                ctx.moveTo(positions[i].x, positions[i].y);
+                ctx.lineTo(next.x, next.y);
+            }
+            ctx.stroke();
+        }
+        function addKeyword() {
+            const input = document.getElementById('newKeyword');
+            const text = input.value.trim();
+            if (text) {
+                keywords.push({ text: text, x: null, y: null });
+                input.value = '';
+                renderKeywords();
+            }
+        }
+        function updateKeyword() {
+            const input = document.getElementById('editKeyword');
+            const text = input.value.trim();
+            if (text && selectedKeywordIndex !== null) {
+                keywords[selectedKeywordIndex].text = text;
+                renderKeywords();
+                selectKeyword(selectedKeywordIndex);
+            }
+        }
+        function deleteKeyword() {
+            if (selectedKeywordIndex !== null) {
+                keywords.splice(selectedKeywordIndex, 1);
+                selectedKeywordIndex = null;
+                document.getElementById('editKeyword').value = '';
+                renderKeywords();
+            }
+        }
+        function resetKeywords() {
+            keywords.forEach(word => {
+                word.x = null;
+                word.y = null;
+            });
+            renderKeywords();
+        }
+        async function saveAsImage() {
+            const buttons = document.querySelectorAll('button, input');
+            buttons.forEach(btn => btn.style.visibility = 'hidden');
+            const note = document.getElementById('userNotes');
+            const originalStyles = {
+                textAlign: note.style.textAlign,
+                fontSize: note.style.fontSize,
+                fontWeight: note.style.fontWeight,
+                backgroundColor: note.style.backgroundColor,
+                border: note.style.border,
+                boxShadow: note.style.boxShadow
+            };
+            note.style.textAlign = 'center';
+            note.style.fontSize = '18px';
+            note.style.fontWeight = 'bold';
+            note.style.backgroundColor = 'transparent';
+            note.style.border = 'none';
+            note.style.boxShadow = 'none';
+            try {
+                const canvas = await html2canvas(document.querySelector('.w-full.max-w-md'), {
+                    scale: 2,
+                    backgroundColor: '#f9fafb',
+                    useCORS: true,
+                    logging: false
+                });
+                const link = document.createElement('a');
+                link.download = `etoile_mots_${new Date().toISOString().split('T')[0]}.png`;
+                link.href = canvas.toDataURL('image/png');
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } catch (err) {
+                console.error("Erreur lors de l'export:", err);
+            } finally {
+                buttons.forEach(btn => btn.style.visibility = 'visible');
+                Object.keys(originalStyles).forEach(style => {
+                    note.style[style] = originalStyles[style];
+                });
+            }
+        }
+        async function saveAsPDF() {
+            const buttons = document.querySelectorAll('button, input');
+            buttons.forEach(btn => btn.style.visibility = 'hidden');
+            const note = document.getElementById('userNotes');
+            const originalStyles = {
+                textAlign: note.style.textAlign,
+                fontSize: note.style.fontSize,
+                fontWeight: note.style.fontWeight,
+                backgroundColor: note.style.backgroundColor,
+                border: note.style.border,
+                boxShadow: note.style.boxShadow
+            };
+            note.style.textAlign = 'center';
+            note.style.fontSize = '18px';
+            note.style.fontWeight = 'bold';
+            note.style.backgroundColor = 'transparent';
+            note.style.border = 'none';
+            note.style.boxShadow = 'none';
+            try {
+                const canvas = await html2canvas(document.querySelector('.w-full.max-w-md'), {
+                    scale: 2,
+                    backgroundColor: '#f9fafb',
+                    useCORS: true,
+                    logging: false
+                });
+                const imgData = canvas.toDataURL('image/png');
+                const pdf = new jsPDF({
+                    orientation: 'portrait',
+                    unit: 'mm'
+                });
+                const imgWidth = 190;
+                const imgHeight = (canvas.height * imgWidth) / canvas.width;
+                pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
+                pdf.save(`etoile_mots_${new Date().toISOString().split('T')[0]}.pdf`);
+            } catch (err) {
+                console.error("Erreur lors de l'export PDF:", err);
+            } finally {
+                buttons.forEach(btn => btn.style.visibility = 'visible');
+                Object.keys(originalStyles).forEach(style => {
+                    note.style[style] = originalStyles[style];
+                });
+            }
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            renderKeywords();
+        });
+        window.addEventListener('resize', () => {
+            renderKeywords();
+        });
+    </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=PierreH/star" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>