aneury1 · January 24, 2025 09:45
diff --git a/webuilder.html b/webuilder.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Builder</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    #canvas {
      border: 1px solid #ccc;
      width: 100%;
      height: 80vh;
      position: relative;
      background: #f8f9fa;
      margin-top: 10px;
      overflow: auto;
    }
    .draggable {
      position: absolute;
      border: 1px dashed #666;
      padding: 10px;
      background: #fff;
      cursor: move;
    }
    #style-editor {
      position: fixed;
      top: 80px;
      right: 20px;
      background: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 10;
    }
  </style>
 </head>
 <body>
  <div class="container mt-3">
    <div class="row">
      <div class="col-12">
        <h1 class="text-center">Website Builder</h1>
        <div class="d-flex gap-2 justify-content-center">
          <button class="btn btn-primary tool" data-type="text">Add Text</button>
          <button class="btn btn-secondary tool" data-type="image">Add Image</button>
          <button class="btn btn-warning tool" data-type="button">Add Button</button>
          <button class="btn btn-info tool" data-type="container">Add Container</button>
          <button id="export-btn" class="btn btn-success">Export HTML</button>
          <button id="save-btn" class="btn btn-warning">Save Design</button>
          <button id="load-btn" class="btn btn-info">Load Design</button>
        </div>
      </div>
      <div class="col-12 mt-3">
        <div id="canvas"></div>
      </div>
    </div>
    <!-- Style Editor -->
    <div id="style-editor" class="shadow p-3 rounded">
      <h5>Style Editor</h5>
      <div class="mb-2">
        <label for="color-picker" class="form-label">Text Color</label>
        <input type="color" id="color-picker" class="form-control form-control-sm">
      </div>
      <div class="mb-2">
        <label for="font-size" class="form-label">Font Size</label>
        <input type="number" id="font-size" class="form-control form-control-sm" min="10" max="100">
      </div>
      <div class="mb-2">
        <label for="pos-x" class="form-label">Position X</label>
        <input type="number" id="pos-x" class="form-control form-control-sm">
      </div>
      <div class="mb-2">
        <label for="pos-y" class="form-label">Position Y</label>
        <input type="number" id="pos-y" class="form-control form-control-sm">
      </div>
    </div>
  </div>

  <!-- Bootstrap JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const toolbar = document.querySelector('.d-flex');
    const canvas = document.getElementById('canvas');
    const colorPicker = document.getElementById('color-picker');
    const fontSizeInput = document.getElementById('font-size');
    const posXInput = document.getElementById('pos-x');
    const posYInput = document.getElementById('pos-y');
    let selectedElement = null;

    // Add new elements to canvas
    toolbar.addEventListener('click', (e) => {
      if (e.target.classList.contains('tool')) {
        const type = e.target.getAttribute('data-type');
        const element = document.createElement(type === 'container' ? 'div' : 'div');
        element.classList.add('draggable');
        element.contentEditable = type === 'text';

        // Define element content and styles
        if (type === 'text') {
          element.textContent = 'Edit this text';
        } else if (type === 'image') {
          element.innerHTML = '<img src="https://via.placeholder.com/150" alt="Placeholder" class="img-fluid">';
        } else if (type === 'button') {
          element.innerHTML = '<button class="btn btn-primary">Click Me</button>';
        } else if (type === 'container') {
          element.style.padding = '20px';
          element.style.border = '1px solid #ccc';
          element.textContent = 'Container - Add your elements here';
        }

        element.style.top = '50px';
        element.style.left = '50px';
        canvas.appendChild(element);
        makeDraggable(element);
      }
    });

    // Make elements draggable
    function makeDraggable(element) {
      let isDragging = false;
      let offsetX, offsetY;

      element.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.offsetX;
        offsetY = e.offsetY;
        selectedElement = element;

        // Set position values in the editor
        posXInput.value = parseInt(element.style.left) || 0;
        posYInput.value = parseInt(element.style.top) || 0;
      });

      document.addEventListener('mousemove', (e) => {
        if (isDragging) {
          element.style.top = `${e.clientY - offsetY}px`;
          element.style.left = `${e.clientX - offsetX}px`;
        }
      });

      document.addEventListener('mouseup', () => {
        isDragging = false;
      });

      // Select the element when clicked
      element.addEventListener('click', () => {
        selectedElement = element;
      });
    }

    // Update styles dynamically
    colorPicker.addEventListener('input', (e) => {
      if (selectedElement) {
        selectedElement.style.color = e.target.value;
      }
    });

    fontSizeInput.addEventListener('input', (e) => {
      if (selectedElement) {
        selectedElement.style.fontSize = `${e.target.value}px`;
      }
    });

    posXInput.addEventListener('input', (e) => {
      if (selectedElement) {
        selectedElement.style.left = `${e.target.value}px`;
      }
    });

    posYInput.addEventListener('input', (e) => {
      if (selectedElement) {
        selectedElement.style.top = `${e.target.value}px`;
      }
    });

    // Export HTML
    document.getElementById('export-btn').addEventListener('click', () => {
      const canvasContent = canvas.innerHTML;
      const fullHTML = `
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generated Page</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  ${canvasContent}
 </body>
 </html>
      `;

      const blob = new Blob([fullHTML], { type: 'text/html' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'page.html';
      a.click();
    });

    // Save and load design
    document.getElementById('save-btn').addEventListener('click', () => {
      const canvasContent = canvas.innerHTML;
      localStorage.setItem('savedDesign', canvasContent);
    });

    document.getElementById('load-btn').addEventListener('click', () => {
      const savedContent = localStorage.getItem('savedDesign');
      if (savedContent) {
        canvas.innerHTML = savedContent;
        canvas.querySelectorAll('.draggable').forEach(makeDraggable);
      }
    });
  </script>
 </body>
 </html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Website Builder</title>
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	margin: 0;
	font-family: Arial, sans-serif;
	}
	#canvas {
	border: 1px solid #ccc;
	width: 100%;
	height: 80vh;
	position: relative;
	background: #f8f9fa;
	margin-top: 10px;
	overflow: auto;
	}
	.draggable {
	position: absolute;
	border: 1px dashed #666;
	padding: 10px;
	background: #fff;
	cursor: move;
	}
	#style-editor {
	position: fixed;
	top: 80px;
	right: 20px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	z-index: 10;
	}
	</style>
	</head>
	<body>
	<div class="container mt-3">
	<div class="row">
	<div class="col-12">
	<h1 class="text-center">Website Builder</h1>
	<div class="d-flex gap-2 justify-content-center">
	<button class="btn btn-primary tool" data-type="text">Add Text</button>
	<button class="btn btn-secondary tool" data-type="image">Add Image</button>
	<button class="btn btn-warning tool" data-type="button">Add Button</button>
	<button class="btn btn-info tool" data-type="container">Add Container</button>
	<button id="export-btn" class="btn btn-success">Export HTML</button>
	<button id="save-btn" class="btn btn-warning">Save Design</button>
	<button id="load-btn" class="btn btn-info">Load Design</button>
	</div>
	</div>
	<div class="col-12 mt-3">
	<div id="canvas"></div>
	</div>
	</div>
	<!-- Style Editor -->
	<div id="style-editor" class="shadow p-3 rounded">
	<h5>Style Editor</h5>
	<div class="mb-2">
	<label for="color-picker" class="form-label">Text Color</label>
	<input type="color" id="color-picker" class="form-control form-control-sm">
	</div>
	<div class="mb-2">
	<label for="font-size" class="form-label">Font Size</label>
	<input type="number" id="font-size" class="form-control form-control-sm" min="10" max="100">
	</div>
	<div class="mb-2">
	<label for="pos-x" class="form-label">Position X</label>
	<input type="number" id="pos-x" class="form-control form-control-sm">
	</div>
	<div class="mb-2">
	<label for="pos-y" class="form-label">Position Y</label>
	<input type="number" id="pos-y" class="form-control form-control-sm">
	</div>
	</div>
	</div>

	<!-- Bootstrap JS Bundle -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	<script>
	const toolbar = document.querySelector('.d-flex');
	const canvas = document.getElementById('canvas');
	const colorPicker = document.getElementById('color-picker');
	const fontSizeInput = document.getElementById('font-size');
	const posXInput = document.getElementById('pos-x');
	const posYInput = document.getElementById('pos-y');
	let selectedElement = null;

	// Add new elements to canvas
	toolbar.addEventListener('click', (e) => {
	if (e.target.classList.contains('tool')) {
	const type = e.target.getAttribute('data-type');
	const element = document.createElement(type === 'container' ? 'div' : 'div');
	element.classList.add('draggable');
	element.contentEditable = type === 'text';

	// Define element content and styles
	if (type === 'text') {
	element.textContent = 'Edit this text';
	} else if (type === 'image') {
	element.innerHTML = '<img src="https://via.placeholder.com/150" alt="Placeholder" class="img-fluid">';
	} else if (type === 'button') {
	element.innerHTML = '<button class="btn btn-primary">Click Me</button>';
	} else if (type === 'container') {
	element.style.padding = '20px';
	element.style.border = '1px solid #ccc';
	element.textContent = 'Container - Add your elements here';
	}

	element.style.top = '50px';
	element.style.left = '50px';
	canvas.appendChild(element);
	makeDraggable(element);
	}
	});

	// Make elements draggable
	function makeDraggable(element) {
	let isDragging = false;
	let offsetX, offsetY;

	element.addEventListener('mousedown', (e) => {
	isDragging = true;
	offsetX = e.offsetX;
	offsetY = e.offsetY;
	selectedElement = element;

	// Set position values in the editor
	posXInput.value = parseInt(element.style.left) \|\| 0;
	posYInput.value = parseInt(element.style.top) \|\| 0;
	});

	document.addEventListener('mousemove', (e) => {
	if (isDragging) {
	element.style.top = `${e.clientY - offsetY}px`;
	element.style.left = `${e.clientX - offsetX}px`;
	}
	});

	document.addEventListener('mouseup', () => {
	isDragging = false;
	});

	// Select the element when clicked
	element.addEventListener('click', () => {
	selectedElement = element;
	});
	}

	// Update styles dynamically
	colorPicker.addEventListener('input', (e) => {
	if (selectedElement) {
	selectedElement.style.color = e.target.value;
	}
	});

	fontSizeInput.addEventListener('input', (e) => {
	if (selectedElement) {
	selectedElement.style.fontSize = `${e.target.value}px`;
	}
	});

	posXInput.addEventListener('input', (e) => {
	if (selectedElement) {
	selectedElement.style.left = `${e.target.value}px`;
	}
	});

	posYInput.addEventListener('input', (e) => {
	if (selectedElement) {
	selectedElement.style.top = `${e.target.value}px`;
	}
	});

	// Export HTML
	document.getElementById('export-btn').addEventListener('click', () => {
	const canvasContent = canvas.innerHTML;
	const fullHTML = `
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Generated Page</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
	${canvasContent}
	</body>
	</html>
	`;

	const blob = new Blob([fullHTML], { type: 'text/html' });
	const a = document.createElement('a');
	a.href = URL.createObjectURL(blob);
	a.download = 'page.html';
	a.click();
	});

	// Save and load design
	document.getElementById('save-btn').addEventListener('click', () => {
	const canvasContent = canvas.innerHTML;
	localStorage.setItem('savedDesign', canvasContent);
	});

	document.getElementById('load-btn').addEventListener('click', () => {
	const savedContent = localStorage.getItem('savedDesign');
	if (savedContent) {
	canvas.innerHTML = savedContent;
	canvas.querySelectorAll('.draggable').forEach(makeDraggable);
	}
	});
	</script>
	</body>
	</html>