body.html
Changed around line 1
+
+
WordFlow
+
Transform your text into beautiful word clouds
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Made with passion by WordFlow
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://wordflow.scroll.pub
+ metaTags
+ editButton
+ title WordFlow - Beautiful Word Cloud Generator
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # wordflow.scroll.pub
+ Website generated from prompt: A wordcloud generator
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const textInput = document.getElementById('textInput');
+ const generateBtn = document.getElementById('generateBtn');
+ const downloadBtn = document.getElementById('downloadBtn');
+ const canvas = document.getElementById('cloudCanvas');
+ const ctx = canvas.getContext('2d');
+
+ function getWordFrequency(text) {
+ const words = text.toLowerCase()
+ .replace(/[^\w\s]/g, '')
+ .split(/\s+/)
+ .filter(word => word.length > 3);
+
+ const frequency = {};
+ words.forEach(word => {
+ frequency[word] = (frequency[word] || 0) + 1;
+ });
+
+ return Object.entries(frequency)
+ .sort((a, b) => b[1] - a[1])
+ .slice(0, 50);
+ }
+
+ function generateCloud() {
+ const text = textInput.value;
+ if (!text) return;
+
+ const words = getWordFrequency(text);
+
+ canvas.width = canvas.parentElement.offsetWidth - 40;
+ canvas.height = 400;
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+
+ const maxFreq = Math.max(...words.map(w => w[1]));
+
+ words.forEach(([word, freq], i) => {
+ const fontSize = Math.max(12, (freq / maxFreq) * 48);
+ const angle = Math.random() < 0.5 ? 0 : Math.PI / 2;
+
+ ctx.font = `${fontSize}px system-ui, sans-serif`;
+ ctx.fillStyle = `hsl(${230 + Math.random() * 60}, ${70 + Math.random() * 30}%, ${40 + Math.random() * 20}%)`;
+
+ const x = canvas.width/2 + (Math.random() - 0.5) * canvas.width/2;
+ const y = canvas.height/2 + (Math.random() - 0.5) * canvas.height/2;
+
+ ctx.save();
+ ctx.translate(x, y);
+ ctx.rotate(angle);
+ ctx.fillText(word, 0, 0);
+ ctx.restore();
+ });
+ }
+
+ function downloadCloud() {
+ const link = document.createElement('a');
+ link.download = 'wordcloud.png';
+ link.href = canvas.toDataURL();
+ link.click();
+ }
+
+ generateBtn.addEventListener('click', generateCloud);
+ downloadBtn.addEventListener('click', downloadCloud);
+
+ // Responsive canvas resize
+ window.addEventListener('resize', generateCloud);
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #6366f1;
+ --secondary-color: #818cf8;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --shadow-color: rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ header {
+ text-align: center;
+ padding: 3rem 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ }
+
+ h1 {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+ text-shadow: 2px 2px 4px var(--shadow-color);
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ }
+
+ main {
+ flex: 1;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ .input-section {
+ margin-bottom: 2rem;
+ }
+
+ textarea {
+ width: 100%;
+ height: 200px;
+ padding: 1rem;
+ border: 2px solid #e2e8f0;
+ border-radius: 8px;
+ resize: vertical;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+ }
+
+ textarea:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ }
+
+ .controls {
+ margin-top: 1rem;
+ display: flex;
+ gap: 1rem;
+ }
+
+ button {
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 6px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: transform 0.2s ease, opacity 0.2s ease;
+ }
+
+ button:hover {
+ transform: translateY(-2px);
+ }
+
+ button:active {
+ transform: translateY(0);
+ }
+
+ .primary-btn {
+ background: var(--primary-color);
+ color: white;
+ }
+
+ .secondary-btn {
+ background: white;
+ color: var(--primary-color);
+ border: 2px solid var(--primary-color);
+ }
+
+ .cloud-container {
+ background: white;
+ border-radius: 12px;
+ padding: 2rem;
+ box-shadow: 0 4px 6px var(--shadow-color);
+ min-height: 400px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ canvas {
+ max-width: 100%;
+ height: auto;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: white;
+ box-shadow: 0 -2px 4px var(--shadow-color);
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .controls {
+ flex-direction: column;
+ }
+
+ button {
+ width: 100%;
+ }
+ }