Hugging Face's logo

Spaces:
victor
/
text-flow
Running

App Files Community
text-flow / index.html
victor's picture
victor HF Staff
Add 2 files
0b94f90 verified
raw
history blame contribute delete
14.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Text Flow Drawing Canvas</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
 body {
 overflow: hidden;
 touch-action: none;
 font-family: 'Georgia', serif;
 }
 canvas {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 }
 .controls {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 10;
 background: rgba(255, 255, 255, 0.9);
 padding: 15px;
 border-radius: 15px;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 backdrop-filter: blur(5px);
 max-width: 90%;
 }
 .text-palette {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 15px;
 justify-content: center;
 }
 .text-option {
 cursor: pointer;
 padding: 8px 12px;
 border-radius: 8px;
 background: white;
 border: 1px solid #e2e8f0;
 transition: all 0.2s;
 font-size: 14px;
 white-space: nowrap;
 }
 .text-option:hover, .text-option.active {
 background: #3b82f6;
 color: white;
 transform: translateY(-2px);
 }
 .color-picker {
 display: flex;
 gap: 10px;
 margin-bottom: 15px;
 justify-content: center;
 }
 .color-option {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 cursor: pointer;
 border: 2px solid white;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 transition: transform 0.2s;
 }
 .color-option:hover, .color-option.active {
 transform: scale(1.2);
 }
 .controls-group {
 display: flex;
 gap: 15px;
 justify-content: center;
 margin-bottom: 15px;
 flex-wrap: wrap;
 }
 .control-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 }
 .control-label {
 font-size: 12px;
 margin-bottom: 5px;
 color: #4b5563;
 font-weight: 500;
 }
 .title {
 position: absolute;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 10;
 background: rgba(255, 255, 255, 0.9);
 padding: 12px 25px;
 border-radius: 30px;
 font-family: 'Playfair Display', serif;
 font-weight: 600;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 color: #1e40af;
 }
 .custom-text {
 width: 100%;
 padding: 8px 12px;
 border-radius: 8px;
 border: 1px solid #e2e8f0;
 margin-bottom: 10px;
 font-size: 14px;
 }
 .btn {
 padding: 8px 16px;
 border-radius: 8px;
 font-weight: 500;
 transition: all 0.2s;
 border: none;
 cursor: pointer;
 }
 .btn-primary {
 background: #3b82f6;
 color: white;
 }
 .btn-primary:hover {
 background: #2563eb;
 transform: translateY(-1px);
 }
 .btn-danger {
 background: #ef4444;
 color: white;
 }
 .btn-danger:hover {
 background: #dc2626;
 transform: translateY(-1px);
 }
 .btn-group {
 display: flex;
 gap: 10px;
 justify-content: center;
 }
 </style>
</head>
<body class="bg-gray-50">
 <div class="title">Text Flow Drawing Canvas</div>
<canvas id="drawingCanvas"></canvas>
<div class="controls">
 <input type="text" id="customText" class="custom-text" placeholder="Type your own text here..." value="Love is patient, love is kind">
<div class="text-palette">
 <div class="text-option active">Love is patient</div>
 <div class="text-option">Be the change</div>
 <div class="text-option">Dream big</div>
 <div class="text-option">Stay curious</div>
 <div class="text-option">Create magic</div>
 <div class="text-option">Find joy</div>
 <div class="text-option">Never give up</div>
 <div class="text-option">You matter</div>
 </div>
<div class="color-picker">
 <div class="color-option active" style="background-color: #3b82f6;" data-color="#3b82f6"></div>
 <div class="color-option" style="background-color: #ef4444;" data-color="#ef4444"></div>
 <div class="color-option" style="background-color: #10b981;" data-color="#10b981"></div>
 <div class="color-option" style="background-color: #f59e0b;" data-color="#f59e0b"></div>
 <div class="color-option" style="background-color: #8b5cf6;" data-color="#8b5cf6"></div>
 <div class="color-option" style="background-color: #000000;" data-color="#000000"></div>
 </div>
<div class="controls-group">
 <div class="control-item">
 <span class="control-label">Font Size</span>
 <input type="range" id="sizeSlider" min="12" max="36" value="18" class="w-24">
 <span id="sizeValue" class="text-xs mt-1">18px</span>
 </div>
 <div class="control-item">
 <span class="control-label">Spacing</span>
 <input type="range" id="spacingSlider" min="0.5" max="2" step="0.1" value="1" class="w-24">
 <span id="spacingValue" class="text-xs mt-1">1.0</span>
 </div>
 <div class="control-item">
 <span class="control-label">Opacity</span>
 <input type="range" id="opacitySlider" min="0.2" max="1" step="0.1" value="0.8" class="w-24">
 <span id="opacityValue" class="text-xs mt-1">80%</span>
 </div>
 </div>
<div class="btn-group">
 <button id="clearBtn" class="btn btn-danger">Clear Canvas</button>
 <button id="saveBtn" class="btn btn-primary">Save as Image</button>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', () => {
 const canvas = document.getElementById('drawingCanvas');
 const ctx = canvas.getContext('2d');
 let isDrawing = false;
 let currentText = "Love is patient, love is kind";
 let currentColor = '#3b82f6';
 let currentSize = 18;
 let currentSpacing = 1;
 let currentOpacity = 0.8;
 let lastX = 0;
 let lastY = 0;
 let textPosition = 0;
// Set canvas to full window size
 function resizeCanvas() {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 // Add a subtle off-white background
 ctx.fillStyle = '#f8fafc';
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
resizeCanvas();
 window.addEventListener('resize', resizeCanvas);
// Drawing functions
 function startDrawing(e) {
 isDrawing = true;
 const pos = getPosition(e);
 lastX = pos.x;
 lastY = pos.y;
 textPosition = 0; // Reset text position for new stroke
 draw(e);
 }
function stopDrawing() {
 isDrawing = false;
 }
function getPosition(e) {
 let x, y;
 if (e.type.includes('touch')) {
 x = e.touches[0].clientX;
 y = e.touches[0].clientY;
 } else {
 x = e.clientX;
 y = e.clientY;
 }
 return { x, y };
 }
function draw(e) {
 if (!isDrawing) return;
const pos = getPosition(e);
 const x = pos.x;
 const y = pos.y;
// Calculate distance from last point
 const distance = Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2));
if (distance > currentSize / 3) {
 // Calculate angle for text rotation
 const angle = Math.atan2(y - lastY, x - lastX);
ctx.save();
 ctx.translate(x, y);
 ctx.rotate(angle);
// Set text style
 ctx.font = `${currentSize}px Georgia, serif`;
 ctx.fillStyle = currentColor;
 ctx.globalAlpha = currentOpacity;
// Draw the next character in the text
 const char = currentText[textPosition % currentText.length];
 ctx.fillText(char, 0, 0);
// Move forward in the text and position
 textPosition++;
 lastX = x;
 lastY = y;
// Move to next position based on spacing
 ctx.translate(currentSize * currentSpacing, 0);
 ctx.restore();
 }
 }
// Event listeners for drawing
 canvas.addEventListener('mousedown', startDrawing);
 canvas.addEventListener('mousemove', draw);
 canvas.addEventListener('mouseup', stopDrawing);
 canvas.addEventListener('mouseout', stopDrawing);
// Touch support
 canvas.addEventListener('touchstart', (e) => {
 e.preventDefault();
 startDrawing(e);
 });
 canvas.addEventListener('touchmove', (e) => {
 e.preventDefault();
 draw(e);
 });
 canvas.addEventListener('touchend', stopDrawing);
// Text selection
 document.querySelectorAll('.text-option').forEach(option => {
 option.addEventListener('click', () => {
 document.querySelectorAll('.text-option').forEach(opt => opt.classList.remove('active'));
 option.classList.add('active');
 currentText = option.textContent;
 });
 });
// Custom text input
 document.getElementById('customText').addEventListener('input', (e) => {
 currentText = e.target.value;
 // Also activate the custom text field
 document.querySelectorAll('.text-option').forEach(opt => opt.classList.remove('active'));
 });
// Color selection
 document.querySelectorAll('.color-option').forEach(option => {
 option.addEventListener('click', () => {
 document.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('active'));
 option.classList.add('active');
 currentColor = option.getAttribute('data-color');
 });
 });
// Size control
 const sizeSlider = document.getElementById('sizeSlider');
 const sizeValue = document.getElementById('sizeValue');
sizeSlider.addEventListener('input', () => {
 currentSize = parseInt(sizeSlider.value);
 sizeValue.textContent = `${currentSize}px`;
 });
// Spacing control
 const spacingSlider = document.getElementById('spacingSlider');
 const spacingValue = document.getElementById('spacingValue');
spacingSlider.addEventListener('input', () => {
 currentSpacing = parseFloat(spacingSlider.value);
 spacingValue.textContent = currentSpacing.toFixed(1);
 });
// Opacity control
 const opacitySlider = document.getElementById('opacitySlider');
 const opacityValue = document.getElementById('opacityValue');
opacitySlider.addEventListener('input', () => {
 currentOpacity = parseFloat(opacitySlider.value);
 opacityValue.textContent = `${Math.round(currentOpacity * 100)}%`;
 });
// Clear canvas
 document.getElementById('clearBtn').addEventListener('click', () => {
 if (confirm('Are you sure you want to clear the canvas?')) {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 // Reset background
 ctx.fillStyle = '#f8fafc';
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
 });
// Save canvas as image
 document.getElementById('saveBtn').addEventListener('click', () => {
 const link = document.createElement('a');
 link.download = 'text-drawing.png';
 link.href = canvas.toDataURL('image/png');
 link.click();
 });
// Prevent scrolling when touching canvas
 document.addEventListener('touchmove', (e) => {
 if (isDrawing) {
 e.preventDefault();
 }
 }, { passive: false });
 });
 </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=victor/text-flow" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>