LOGO GENERATOR

Logo Generator

1. မိမိ site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages ကိုနှိပ်
3. ➕ New Page (or) ➕ အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်ပါ </> HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က ပေးထားတဲ့ Design code တွေကို copy ယူ၍ကူးထည့်
6. save ကိုနှိပ်ပြီးပါပြီ

<style>
#logo-preview {
     width: 320px;
     height: 300px;
     border: 1px solid #000;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: move;
     position: relative;
     overflow: hidden;
}
  
#logo-output {
     display: none;
     margin-top: 20px;
     position: relative;
}

#logo-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.dragging {
     opacity: 0.5;
}

#logo-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: move;
}
  
input[type="number"] {
    margin-top: 20px;
    color:#333;
    border:1px solid #333;
    width:100px;
    padding:8px;
    border-radius: 12px;
}
  
.draggable-text {
     position: absolute;
     cursor: move;
}

#generate-logo, #copy-logo, #download-logo {
     padding: 10px 10px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 20px;
     font-weight: bold;
     transition: background-color 0.3s;
}

#generate-logo:hover, #copy-logo:hover, #download-logo:hover {
     background-color: #0056b3;
}
</style>
<div>
<label>Enter Logo Text:</label>
<input id="logo-text" type="text" />
</div>

<div>
<label>Logo Text Color (HEX):</label>
<input id="logo-color" type="color" value="#FF0000" />
</div>

<div>
<label>Background Color (HEX):</label>
<input id="logo-bg-color" type="color" value="#000000" />
</div>

<div>
<label>Background Image URL (Optional):</label>
<input id="logo-image-url" placeholder="Enter Image URL (Optional)" type="text" />
</div>

<div>
<label>Logo Text Size (px):</label>
<input id="logo-size" type="number" value="40" />
</div>

<div>
<label>Logo Width (px):</label>
<input id="logo-width" type="number" value="200" />
</div>

<div>
<label>Logo Height (px):</label>
<input id="logo-height" type="number" value="100" />
</div>

<div>
<button id="generate-logo">Generate Logo</button>

<div id="logo-output">
<div class="dragging" id="logo-preview">
<div id="logo-container">
<span class="draggable-text" id="logo-text-container"></span>
</div>
</div>
<button id="copy-logo">Copy Logo Text</button>
<button id="download-logo">Download Logo</button>
</div>
</div>

<script>
document.getElementById('generate-logo').addEventListener('click', function () {
const logoText = document.getElementById('logo-text').value;
const logoColor = document.getElementById('logo-color').value;
const logoBgColor = document.getElementById('logo-bg-color').value;
const logoImageUrl = document.getElementById('logo-image-url').value;
const logoSize = document.getElementById('logo-size').value;
const logoWidth = document.getElementById('logo-width').value;
const logoHeight = document.getElementById('logo-height').value;

const logoOutput = document.getElementById('logo-output');
const logoPreview = document.getElementById('logo-preview');
const logoTextContainer = document.getElementById('logo-text-container');
const copyLogoButton = document.getElementById('copy-logo');
const downloadLogoButton = document.getElementById('download-logo');

            if (logoText) {
// Set up the preview with text and color
logoTextContainer.textContent = logoText;
logoTextContainer.style.color = logoColor;
logoTextContainer.style.fontSize = `${logoSize}px`;

// Set logo preview and text container width and height
logoPreview.style.width = `${logoWidth}px`;
logoPreview.style.height = `${logoHeight}px`;
logoTextContainer.style.width = `${logoWidth}px`;
logoTextContainer.style.height = `${logoHeight}px`;

// Set background color and image if provided
logoPreview.style.backgroundColor = logoBgColor;
                if (logoImageUrl) {
logoPreview.style.backgroundImage = `url(${logoImageUrl})`;
logoPreview.style.backgroundSize = 'cover';
logoPreview.style.backgroundPosition = 'center';
                }

// Show the output section
logoOutput.style.display = "block";

// Make the text draggable
logoTextContainer.draggable = true;
logoTextContainer.addEventListener('dragstart', function (event) {
event.dataTransfer.setData('text/plain', null); // Necessary for drag functionality
logoTextContainer.classList.add('dragging');
                });

logoTextContainer.addEventListener('dragend', function () {
logoTextContainer.classList.remove('dragging');
                });

// Copy logo text to clipboard
copyLogoButton.onclick = function () {
navigator.clipboard.writeText(logoText).then(function () {
alert("Logo text copied to clipboard!");
                    }).catch(function (error) {
console.error("Failed to copy text: ", error);
                    });
                };

// Download logo as text file
downloadLogoButton.onclick = function () {
const blob = new Blob([logoText], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = "logo.txt";
link.click();
                };

            } else {
logoOutput.innerHTML = "Please enter text for the logo!";
            }
        });

// Make logo text draggable within the preview area
const logoPreview = document.getElementById('logo-preview');
const logoTextContainer = document.getElementById('logo-text-container');

logoTextContainer.addEventListener('drag', function (event) {
const previewRect = logoPreview.getBoundingClientRect();
logoTextContainer.style.left = `${event.clientX - previewRect.left - logoTextContainer.offsetWidth / 2}px`;
logoTextContainer.style.top = `${event.clientY - previewRect.top - logoTextContainer.offsetHeight / 2}px`;
        });
</script>