What are good ideas for Instagram stories? - Bestis1: Free Online Tools for Life, Work & Finance

Instagram Template Generator
Template Type
Quote
Announcement
Tip
Story
Sale
Minimal
Main Text
Sub Text
Font Sizes Main Font Size
Sub Font Size
Colors
Background Color
Text Color
Font Style
When my stories finally started getting replies, it was because I shifted from polished posts to “in-the-moment” slices of life. A quick behind-the-scenes clip while setting up my workspace, a messy before/after of a room reset, or a 10-second “here’s what I’m reading/cooking/listening to” felt casual and real. I used polls and sliders constantly “Which outfit?” “Rate this idea,” — and people loved tapping. Mini-tutorials did well too: three frames showing a recipe step, a camera trick, or a productivity hack, capped with a link sticker.
On slower days, I leaned into series and storytelling. A “day-in-the-life” with timestamps, a “weekly wins/fails,” or a “challenge countdown” built momentum over time. Reposting follower DMs or tagging people who contributed ideas made it feel like a group chat. And when I had nothing at all, I’d do a 3-frame narrative: hook (“Here’s what almost went wrong today”), the scene (one photo, one clip), and a takeaway question to invite replies. The more it felt like a conversation, the more the stories carried themselves.
Feel free to copy and use this tool on your website.
If shared, keeping the source credit helps others find it.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Template Generator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1600px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.98);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
.header {
background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
color: white;
padding: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 15s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.header h1 {
font-size: 2.8em;
margin-bottom: 10px;
font-weight: 800;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
position: relative;
z-index: 1;
}
.header p {
font-size: 1.2em;
opacity: 0.95;
position: relative;
z-index: 1;
}
.main-content {
display: grid;
grid-template-columns: 380px 1fr;
min-height: 700px;
}
.controls {
background: #f8f9fc;
padding: 30px;
border-right: 1px solid #e9ecf5;
overflow-y: auto;
max-height: 800px;
}
.control-group {
margin-bottom: 25px;
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all 0.3s;
}
.control-group:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.control-group label {
display: block;
margin-bottom: 10px;
font-weight: 700;
color: #2c3e50;
font-size: 0.95em;
}
.template-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 15px;
}
.template-btn {
padding: 15px 10px;
border: 2px solid #e9ecf5;
background: white;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.85em;
font-weight: 700;
text-align: center;
color: #2c3e50;
}
.template-btn:hover {
border-color: #833ab4;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(131, 58, 180, 0.3);
}
.template-btn.active {
background: linear-gradient(135deg, #833ab4, #fd1d1d);
color: white;
border-color: transparent;
box-shadow: 0 4px 12px rgba(131, 58, 180, 0.3);
}
input[type="text"], textarea {
width: 100%;
padding: 12px;
border: 2px solid #e9ecf5;
border-radius: 10px;
font-size: 0.95em;
font-family: inherit;
transition: all 0.3s;
}
input[type="text"]:focus, textarea:focus {
outline: none;
border-color: #833ab4;
box-shadow: 0 0 0 3px rgba(131, 58, 180, 0.1);
}
textarea {
resize: vertical;
min-height: 80px;
}
input[type="color"] {
width: 100%;
height: 50px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
}
input[type="color"]:hover {
transform: scale(1.05);
}
input[type="range"] {
width: 100%;
margin: 10px 0;
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 5px;
background: #e9ecf5;
outline: none;
transition: all 0.3s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #833ab4, #fd1d1d);
cursor: pointer;
transition: all 0.3s;
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(131, 58, 180, 0.5);
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #833ab4, #fd1d1d);
cursor: pointer;
transition: all 0.3s;
}
input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(131, 58, 180, 0.5);
}
.range-container {
display: flex;
align-items: center;
gap: 10px;
}
.range-value {
min-width: 50px;
text-align: center;
font-weight: 600;
color: #833ab4;
background: #f0f2ff;
padding: 5px 8px;
border-radius: 6px;
font-size: 0.9em;
}
.color-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.color-item label {
font-size: 0.85em;
margin-bottom: 8px;
display: block;
}
select {
width: 100%;
padding: 12px;
border: 2px solid #e9ecf5;
border-radius: 10px;
font-size: 0.95em;
background: white;
cursor: pointer;
transition: all 0.3s;
}
select:focus {
outline: none;
border-color: #833ab4;
box-shadow: 0 0 0 3px rgba(131, 58, 180, 0.1);
}
.preview {
background: #f0f2f8;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
position: relative;
}
#canvas {
max-width: 100%;
max-height: 100%;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
transition: all 0.5s;
}
.action-buttons {
padding: 25px 35px;
background: #f8f9fc;
border-top: 2px solid #e9ecf5;
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.btn {
padding: 14px 28px;
border: none;
border-radius: 30px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.95em;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: left 0.5s;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, #833ab4, #fd1d1d);
color: white;
box-shadow: 0 4px 15px rgba(131, 58, 180, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-accent {
background: linear-gradient(135deg, #f093fb, #f5576c);
color: white;
box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.btn:active {
transform: translateY(0);
}
.notification {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 12px 24px;
border-radius: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s;
z-index: 1000;
}
.notification.show {
opacity: 1;
}
.footer {
background: #2c3e50;
color: white;
padding: 20px 35px;
text-align: center;
border-top: 2px solid #34495e;
}
.footer p {
font-size: 0.95em;
opacity: 0.9;
margin-bottom: 5px;
}
.footer a {
color: #fcb045;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
padding: 2px 5px;
border-radius: 4px;
}
.footer a:hover {
color: white;
background: rgba(252, 176, 69, 0.2);
text-decoration: underline;
}
.footer .tagline {
font-size: 0.85em;
opacity: 0.7;
font-style: italic;
}
@media (max-width: 1024px) {
.main-content {
grid-template-columns: 1fr;
}
.controls {
border-right: none;
border-bottom: 2px solid #e9ecf5;
max-height: none;
}
}
@media (max-width: 768px) {
.header h1 {
font-size: 2em;
}
.template-selector {
grid-template-columns: 1fr;
}
.footer {
padding: 15px 20px;
}
.footer p {
font-size: 0.85em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📱 Instagram Template Generator</h1>
<p>Create professional and attractive Instagram posts in seconds</p>
</div>
<div class="main-content">
<div class="controls">
<div class="control-group">
<label>Template Type</label>
<div class="template-selector">
<div class="template-btn active" data-template="quote">Quote</div>
<div class="template-btn" data-template="announcement">Announcement</div>
<div class="template-btn" data-template="tips">Tip</div>
<div class="template-btn" data-template="story">Story</div>
<div class="template-btn" data-template="sale">Sale</div>
<div class="template-btn" data-template="minimal">Minimal</div>
</div>
</div>

<div class="control-group">
<label>Main Text</label>
<input type="text" id="mainText" value="Success begins with a step" maxlength="50">
</div>

<div class="control-group">
<label>Sub Text</label>
<textarea id="subText" maxlength="100">Make every day a new opportunity for creativity</textarea>
</div>

<div class="control-group">
<label>Font Sizes</label>

<label style="font-size: 0.85em; margin-top: 15px;">Main Font Size</label>
<div class="range-container">
<input type="range" id="mainFontSize" min="30" max="120" value="70">
<span class="range-value" id="mainFontSizeValue">70</span>
</div>

<label style="font-size: 0.85em; margin-top: 15px;">Sub Font Size</label>
<div class="range-container">
<input type="range" id="subFontSize" min="20" max="60" value="38">
<span class="range-value" id="subFontSizeValue">38</span>
</div>
</div>

<div class="control-group">
<label>Colors</label>
<div class="color-grid">
<div class="color-item">
<label>Background Color</label>
<input type="color" id="bgColor" value="#833ab4">
</div>
<div class="color-item">
<label>Text Color</label>
<input type="color" id="textColor" value="#ffffff">
</div>
</div>
</div>

<div class="control-group">
<label>Font Style</label>
<select id="fontStyle">
<option value="bold">Bold</option>
<option value="normal">Normal</option>
<option value="light">Light</option>
</select>
</div>
</div>

<div class="preview">
<canvas id="canvas" width="1080" height="1080"></canvas>
</div>
</div>

<div class="action-buttons">
<button class="btn btn-primary" id="downloadBtn">Download Template</button>
<button class="btn btn-secondary" id="shareBtn">Share</button>
<button class="btn btn-accent" id="randomBtn">Random Design</button>
</div>

<div class="footer">
<p>This free tool is provided by <a href="https://bestis1.com" target="_blank" rel="noopener">https://bestis1.com</a></p>
<p class="tagline">— a website offering practical tools and calculators to help save time and money</p>
</div>
</div>

<div class="notification" id="notification"></div>

<script>
class InstagramTemplateGenerator {
constructor() {
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.currentTemplate = 'quote';
this.notification = document.getElementById('notification');
this.setupEventListeners();
this.generateTemplate();
}

setupEventListeners() {
document.querySelectorAll('.template-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
document.querySelector('.template-btn.active').classList.remove('active');
e.target.classList.add('active');
this.currentTemplate = e.target.dataset.template;
this.generateTemplate();
this.showNotification('Template changed');
});
});

// Font size controls
['mainFontSize', 'subFontSize'].forEach(id => {
const input = document.getElementById(id);
const value = document.getElementById(id + 'Value');
input.addEventListener('input', () => {
value.textContent = input.value;
this.generateTemplate();
});
});

['mainText', 'subText', 'bgColor', 'textColor', 'fontStyle'].forEach(id => {
document.getElementById(id).addEventListener('input', () => {
this.generateTemplate();
});
});

document.getElementById('downloadBtn').addEventListener('click', () => {
this.downloadImage();
});

document.getElementById('shareBtn').addEventListener('click', () => {
this.shareImage();
});

document.getElementById('randomBtn').addEventListener('click', () => {
this.randomize();
});
}

showNotification(message) {
this.notification.textContent = message;
this.notification.classList.add('show');
setTimeout(() => {
this.notification.classList.remove('show');
}, 2000);
}

getSettings() {
return {
mainText: document.getElementById('mainText').value,
subText: document.getElementById('subText').value,
bgColor: document.getElementById('bgColor').value,
textColor: document.getElementById('textColor').value,
fontStyle: document.getElementById('fontStyle').value,
mainFontSize: parseInt(document.getElementById('mainFontSize').value),
subFontSize: parseInt(document.getElementById('subFontSize').value)
};
}

generateTemplate() {
const settings = this.getSettings();

// Add animation effect
this.canvas.style.opacity = '0.7';
setTimeout(() => {
this.canvas.style.opacity = '1';
}, 100);

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

switch(this.currentTemplate) {
case 'quote':
this.drawQuoteTemplate(settings);
break;
case 'announcement':
this.drawAnnouncementTemplate(settings);
break;
case 'tips':
this.drawTipsTemplate(settings);
break;
case 'story':
this.drawStoryTemplate(settings);
break;
case 'sale':
this.drawSaleTemplate(settings);
break;
case 'minimal':
this.drawMinimalTemplate(settings);
break;
}
}

drawQuoteTemplate(settings) {
// Gradient background
const gradient = this.ctx.createLinearGradient(0, 0, this.canvas.width, this.canvas.height);
gradient.addColorStop(0, settings.bgColor);
gradient.addColorStop(1, this.adjustColor(settings.bgColor, -30));
this.ctx.fillStyle = gradient;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// Decorative circles
this.ctx.globalAlpha = 0.1;
this.ctx.fillStyle = settings.textColor;
this.ctx.beginPath();
this.ctx.arc(200, 200, 300, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.beginPath();
this.ctx.arc(880, 880, 400, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.globalAlpha = 1;

// Quote mark
this.ctx.fillStyle = settings.textColor;
this.ctx.globalAlpha = 0.3;
this.ctx.font = `bold ${settings.mainFontSize * 2.8}px Arial`;
this.ctx.textAlign = 'left';
this.ctx.fillText('"', 130, 350);
this.ctx.globalAlpha = 1;

// Main text
this.ctx.fillStyle = settings.textColor;
this.ctx.font = this.getFont(settings, 'main');
this.ctx.textAlign = 'center';
this.wrapText(settings.mainText, this.canvas.width / 2, 450, 900, settings.mainFontSize * 1.1);

// Sub text
this.ctx.font = this.getFont(settings, 'sub');
this.ctx.globalAlpha = 0.8;
this.wrapText(settings.subText, this.canvas.width / 2, 650, 800, settings.subFontSize * 1.2);
this.ctx.globalAlpha = 1;

// Decorative line
this.ctx.strokeStyle = settings.textColor;
this.ctx.lineWidth = 3;
this.ctx.globalAlpha = 0.5;
this.ctx.beginPath();
this.ctx.moveTo(340, 750);
this.ctx.lineTo(740, 750);
this.ctx.stroke();
this.ctx.globalAlpha = 1;
}

drawAnnouncementTemplate(settings) {
// Geometric pattern background
this.ctx.fillStyle = settings.bgColor;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// Geometric shapes
this.ctx.globalAlpha = 0.15;
this.ctx.fillStyle = settings.textColor;
for(let i = 0; i < 10; i++) {
const x = Math.random() * this.canvas.width;
const y = Math.random() * this.canvas.height;
const size = Math.random() * 150 + 50;
this.ctx.fillRect(x, y, size, size);
}
this.ctx.globalAlpha = 1;

// Frame
this.ctx.strokeStyle = settings.textColor;
this.ctx.lineWidth = 8;
this.ctx.strokeRect(80, 80, this.canvas.width - 160, this.canvas.height - 160);

// "Announcement" label
this.ctx.fillStyle = settings.textColor;
this.ctx.font = `bold ${settings.subFontSize}px Arial`;
this.ctx.textAlign = 'center';
this.ctx.fillText('🔔 Important Announcement', this.canvas.width / 2, 250);

// Main text
this.ctx.font = this.getFont(settings, 'main');
this.wrapText(settings.mainText, this.canvas.width / 2, 450, 850, settings.mainFontSize * 1.1);

// Sub text
this.ctx.font = this.getFont(settings, 'sub');
this.ctx.globalAlpha = 0.9;
this.wrapText(settings.subText, this.canvas.width / 2, 650, 800, settings.subFontSize * 1.2);
this.ctx.globalAlpha = 1;
}

drawTipsTemplate(settings) {
// Background
const gradient = this.ctx.createRadialGradient(
this.canvas.width/2, this.canvas.height/2, 0,
this.canvas.width/2, this.canvas.height/2, this.canvas.width/2
);
gradient.addColorStop(0, settings.bgColor);
gradient.addColorStop(1, this.adjustColor(settings.bgColor, -40));
this.ctx.fillStyle = gradient;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// Light bulb icon
this.ctx.fillStyle = settings.textColor;
this.ctx.globalAlpha = 0.2;
this.ctx.font = `bold ${settings.mainFontSize * 3.5}px Arial`;
this.ctx.textAlign = 'center';
this.ctx.fillText('💡', this.canvas.width / 2, 350);
this.ctx.globalAlpha = 1;

// "Tip of the Day" title
this.ctx.fillStyle = settings.textColor;
this.ctx.font = `bold ${settings.subFontSize * 1.3}px Arial`;
this.ctx.fillText('✨ Tip of the Day', this.canvas.width / 2, 200);

// Main text
this.ctx.font = this.getFont(settings, 'main');
this.wrapText(settings.mainText, this.canvas.width / 2, 500, 900, settings.mainFontSize * 1.1);

// Sub text
this.ctx.font = this.getFont(settings, 'sub');
this.ctx.globalAlpha = 0.85;
this.wrapText(settings.subText, this.canvas.width / 2, 700, 850, settings.subFontSize * 1.2);
this.ctx.globalAlpha = 1;
}

drawStoryTemplate(settings) {
// Diagonal gradient background
const gradient = this.ctx.createLinearGradient(0, 0, this.canvas.width, this.canvas.height);
gradient.addColorStop(0, settings.bgColor);
gradient.addColorStop(0.5, this.adjustColor(settings.bgColor, -20));
gradient.addColorStop(1, this.adjustColor(settings.bgColor, -40));
this.ctx.fillStyle = gradient;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// Decorative dots
this.ctx.fillStyle = settings.textColor;
this.ctx.globalAlpha = 0.15;
for(let i = 0; i < 50; i++) {
const x = Math.random() * this.canvas.width;
const y = Math.random() * this.canvas.height;
const size = Math.random() * 20 + 5;
this.ctx.beginPath();
this.ctx.arc(x, y, size, 0, Math.PI * 2);
this.ctx.fill();
}
this.ctx.globalAlpha = 1;

// Main text
this.ctx.fillStyle = settings.textColor;
this.ctx.font = this.getFont(settings, 'main');
this.ctx.textAlign = 'center';
this.wrapText(settings.mainText, this.canvas.width / 2, 400, 900, settings.mainFontSize * 1.1);

// Sub text
this.ctx.font = this.getFont(settings, 'sub');
this.ctx.globalAlpha = 0.9;
this.wrapText(settings.subText, this.canvas.width / 2, 600, 850, settings.subFontSize * 1.2);
this.ctx.globalAlpha = 1;

// Bottom bar
this.ctx.fillStyle = settings.textColor;
this.ctx.globalAlpha = 0.2;
this.ctx.fillRect(0, 900, this.canvas.width, 180);
this.ctx.globalAlpha = 1;
}

drawSaleTemplate(settings) {
// Fiery red background
this.ctx.fillStyle = settings.bgColor;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// Diagonal stripes
this.ctx.fillStyle = settings.textColor;
this.ctx.globalAlpha = 0.1;
for(let i = -500; i < this.canvas.width + 500; i += 100) {
this.ctx.save();
this.ctx.translate(i, 0);
this.ctx.rotate(Math.PI / 6);
this.ctx.fillRect(0, -200, 60, this.canvas.height + 400);
this.ctx.restore();
}
this.ctx.globalAlpha = 1;

// "Discount" badge
this.ctx.save();
this.ctx.translate(900, 180);
this.ctx.rotate(-Math.PI / 12);
this.ctx.fillStyle = '#ffeb3b';
this.ctx.beginPath();
for(let i = 0; i < 8; i++) {
const angle = (i / 8) * Math.PI * 2;
const radius = i % 2 === 0 ? 80 : 60;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
if(i === 0) this.ctx.moveTo(x, y);
else this.ctx.lineTo(x, y);
}
this.ctx.closePath();
this.ctx.fill();
this.ctx.fillStyle = '#d32f2f';
this.ctx.font = `bold ${settings.subFontSize}px Arial`;
this.ctx.textAlign = 'center';
this.ctx.fillText('SALE', 0, 10);
this.ctx.restore();

// Main text
this.ctx.fillStyle = settings.textColor;
this.ctx.font = this.getFont(settings, 'main');
this.ctx.textAlign = 'center';
this.wrapText(settings.mainText, this.canvas.width / 2, 450, 900, settings.mainFontSize * 1.2);

// Sub text
this.ctx.font = this.getFont(settings, 'sub');
this.wrapText(settings.subText, this.canvas.width / 2, 650, 850, settings.subFontSize * 1.2);

// "Limited time offer" text
this.ctx.font = `bold ${settings.subFontSize}px Arial`;
this.ctx.fillText('⏰ Limited Time Offer', this.canvas.width / 2, 850);
}

drawMinimalTemplate(settings) {
// Clean background
this.ctx.fillStyle = settings.bgColor;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// Top line
this.ctx.fillStyle = settings.textColor;
this.ctx.fillRect(150, 250, 780, 5);

// Main text
this.ctx.font = this.getFont(settings, 'main');
this.ctx.textAlign = 'center';
this.wrapText(settings.mainText, this.canvas.width / 2, 450, 900, settings.mainFontSize * 1.1);

// Bottom line
this.ctx.fillRect(150, 650, 780, 5);

// Sub text
this.ctx.font = this.getFont(settings, 'sub');
this.ctx.globalAlpha = 0.8;
this.wrapText(settings.subText, this.canvas.width / 2, 750, 850, settings.subFontSize * 1.2);
this.ctx.globalAlpha = 1;
}

getFont(settings, type) {
const weights = {
bold: '900',
normal: '600',
light: '400'
};

const weight = weights[settings.fontStyle];
const size = type === 'main' ? settings.mainFontSize : settings.subFontSize;

return `${weight} ${size}px Arial, sans-serif`;
}

wrapText(text, x, y, maxWidth, lineHeight) {
const words = text.split(' ');
let line = '';
let lines = [];

for(let word of words) {
const testLine = line + word + ' ';
const metrics = this.ctx.measureText(testLine);
if(metrics.width > maxWidth && line !== '') {
lines.push(line);
line = word + ' ';
} else {
line = testLine;
}
}
lines.push(line);

const startY = y - ((lines.length - 1) * lineHeight) / 2;
lines.forEach((line, i) => {
this.ctx.fillText(line.trim(), x, startY + (i * lineHeight));
});
}

adjustColor(hex, percent) {
const num = parseInt(hex.replace('#', ''), 16);
const amt = Math.round(2.55 * percent);
const R = (num >> 16) + amt;
const G = (num >> 8 & 0x00FF) + amt;
const B = (num & 0x0000FF) + amt;
return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
(G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
(B < 255 ? B < 1 ? 0 : B : 255))
.toString(16).slice(1);
}

randomize() {
const templates = ['quote', 'announcement', 'tips', 'story', 'sale', 'minimal'];
const randomTemplate = templates[Math.floor(Math.random() * templates.length)];

document.querySelector('.template-btn.active').classList.remove('active');
document.querySelector(`[data-template="${randomTemplate}"]`).classList.add('active');
this.currentTemplate = randomTemplate;

const colors = ['#833ab4', '#fd1d1d', '#fcb045', '#667eea', '#764ba2', '#f093fb', '#00c6ff'];
document.getElementById('bgColor').value = colors[Math.floor(Math.random() * colors.length)];

const textColors = ['#ffffff', '#000000', '#2c3e50'];
document.getElementById('textColor').value = textColors[Math.floor(Math.random() * textColors.length)];

// Random font sizes
document.getElementById('mainFontSize').value = Math.floor(Math.random() * 60) + 40;
document.getElementById('subFontSize').value = Math.floor(Math.random() * 30) + 20;

// Update displayed values
document.getElementById('mainFontSizeValue').textContent = document.getElementById('mainFontSize').value;
document.getElementById('subFontSizeValue').textContent = document.getElementById('subFontSize').value;

const randomTexts = {
main: [
"Success begins with a step",
"Dream big, work hard",
"Create your own path",
"Make it happen today",
"Believe in yourself"
],
sub: [
"Every day is a new opportunity for creativity",
"Turn your dreams into reality",
"The journey of a thousand miles begins with one step",
"Your limitation—it's only your imagination",
"Great things never come from comfort zones"
]
};

document.getElementById('mainText').value = randomTexts.main[Math.floor(Math.random() * randomTexts.main.length)];
document.getElementById('subText').value = randomTexts.sub[Math.floor(Math.random() * randomTexts.sub.length)];

this.generateTemplate();
this.showNotification('Random design created');
}

downloadImage() {
try {
const link = document.createElement('a');
link.download = `instagram-template-${Date.now()}.png`;
link.href = this.canvas.toDataURL('image/png', 1.0);
link.click();
this.showNotification('Image downloaded successfully');
} catch (e) {
console.error('Error downloading image:', e);
this.showNotification('Error downloading image');
}
}

async shareImage() {
try {
const blob = await new Promise(resolve => this.canvas.toBlob(resolve, 'image/png', 1.0));
const file = new File([blob], `instagram-template-${Date.now()}.png`, { type: 'image/png' });

if (navigator.canShare && navigator.canShare({ files: [file] })) {
await navigator.share({
files: [file],
title: 'Instagram Template',
text: 'Check out this amazing design!'
});
this.showNotification('Shared successfully');
} else if (navigator.clipboard) {
// Fallback to copying to clipboard
const item = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([item]);
this.showNotification('Image copied to clipboard');
} else {
this.downloadImage();
}
} catch (error) {
console.error('Error sharing:', error);
this.downloadImage();
}
}
}

window.addEventListener('load', () => {
new InstagramTemplateGenerator();
});
</script>
</body>
</html>
Instagram Template Generator
📱 Instagram Template Generator

Leave a Comment Cancel reply

🌿 Life Guidance Assistant
