HTML Code for Sentence post creator

-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>English Hindi Instagram Post Creator</title>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Laila:wght@400;600&family=Baloo+2:wght@400;600&display=swap" rel="stylesheet">

<style>
body {
  font-family: 'Baloo 2', cursive;
  background:#f2f2f2;
  margin:0;
  padding:10px;
}

.container {
  max-width:420px;
  margin:auto;
  background:#fff;
  padding:12px;
  border-radius:12px;
}

textarea {
  width:100%;
  height:70px;
  margin-bottom:8px;
  padding:8px;
  font-size:16px;
}

.controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}

.controls label {
  font-size:14px;
}

button {
  width:100%;
  padding:10px;
  background:#000;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
}

canvas {
  width:100%;
  max-width:360px;
  display:block;
  margin:12px auto;
  border-radius:0;
}
</style>
</head>

<body>

<div class="container">

<h3>English Text</h3>
<textarea id="engText" placeholder="Enter English sentence"></textarea>

<h3>Hindi Text</h3>
<textarea id="hinText" placeholder="यहाँ हिंदी वाक्य लिखें"></textarea>

<div class="controls">
<label>English Color <input type="color" id="engColor" value="#000000"></label>
<label>Hindi Color <input type="color" id="hinColor" value="#000000"></label>

<label>Background <input type="color" id="bgColor" value="#ffffff"></label>
<label>Gradient <input type="checkbox" id="useGradient"></label>

<label>Border Style
<select id="borderStyle">
<option value="solid">Solid</option>
<option value="dashed">Dashed</option>
<option value="dotted">Dotted</option>
</select>
</label>

<label>Shape
<select id="shape">
<option value="square">Square</option>
<option value="round">Rounded</option>
</select>
</label>
</div>

<button onclick="createImage()">Create Image</button>
<button onclick="downloadImage()">Download HD Image</button>

<canvas id="postCanvas" width="1080" height="1080"></canvas>

</div>

<script>
const canvas = document.getElementById("postCanvas");
const ctx = canvas.getContext("2d");

function fitText(text, maxWidth, maxHeight, fontFamily) {
  let size = 80;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  while (size > 10) {
    ctx.font = size + "px " + fontFamily;
    let metrics = ctx.measureText(text);
    if (metrics.width <= maxWidth && size <= maxHeight) {
      return size;
    }
    size--;
  }
  return size;
}

function createImage() {
  const eng = document.getElementById("engText").value;
  const hin = document.getElementById("hinText").value;
  const engColor = document.getElementById("engColor").value;
  const hinColor = document.getElementById("hinColor").value;
  const bg = document.getElementById("bgColor").value;
  const gradient = document.getElementById("useGradient").checked;
  const borderStyle = document.getElementById("borderStyle").value;
  const shape = document.getElementById("shape").value;

  // Background
  if (gradient) {
    let g = ctx.createLinearGradient(0,0,1080,1080);
    g.addColorStop(0,bg);
    g.addColorStop(1,"#dddddd");
    ctx.fillStyle = g;
  } else {
    ctx.fillStyle = bg;
  }
  ctx.fillRect(0,0,1080,1080);

  // Shape
  canvas.style.borderRadius = shape === "round" ? "24px" : "0px";

  // English Text
  let engSize = fitText(eng, 900, 400, "Laila");
  ctx.fillStyle = engColor;
  ctx.font = engSize + "px Laila";
  ctx.fillText(eng, 540, 270);

  // Hindi Text
  let hinSize = fitText(hin, 900, 400, "Laila");
  ctx.fillStyle = hinColor;
  ctx.font = hinSize + "px Laila";
  ctx.fillText(hin, 540, 810);

  // Border
  ctx.lineWidth = 8;
  ctx.setLineDash(borderStyle==="dashed"?[20,10]:borderStyle==="dotted"?[5,10]:[]);
  ctx.strokeStyle = "#000";
  ctx.strokeRect(20,20,1040,1040);
}

function downloadImage() {
  const link = document.createElement("a");
  link.download = "post_" + Date.now() + ".png";
  link.href = canvas.toDataURL("image/png");
  link.click();
}
</script>

</body>
</html>

इस ब्लॉग से लोकप्रिय पोस्ट

High Level Advance Random English Words

-
Adversity Prosperity Struggle Transformation Evolution Redemption Downfall Ascension Resilience Endurance Perseverance Triumph Defeat Suffering Growth Maturity Awakening Enlightenment Disillusionment Acceptance Rejection Isolation Belonging Alienation Fulfillment Emptiness Ambition Obsession Sacrifice Commitment Betrayal Loyalty Reconciliation Regret Remorse Redirection Reinvention Self-discovery Self-realization Identity Purpose Destiny Fate Misfortune Fortune Breakthrough Collapse Reconstruction Rebirth Renewal Adaptation Adjustment Survival Vulnerability Strength Wisdom Ignorance Awareness Realization Reflection Introspection Confusion Clarity Conflict Resolution Acceptance Resistance Liberation Oppression Fear Courage Hope Despair Motivation Exhaustion Burnout Recovery Healing Restoration Closure Transition Stagnation Progress Regression Achievement Failure Legacy
और पढ़ें

The History of the World – A Simple and Long Article for English Learners

-
ठीक है, अब मैं आपको अगला बड़ा और आसान इंग्लिश आर्टिकल दे रहा हूँ। इस बार का विषय है — 🇺🇳 The United Nations (UN) – A Simple and Long English Article for English Learners The United Nations , also called the UN , is an international organization. It was created to maintain peace, help countries work together, and solve world problems. The UN was formed after World War 2 , when countries realized they needed a system to prevent such big wars in the future. 📅 When and Where Was the UN Founded? Date: 24 October 1945 Place: San Francisco, USA Started with: 51 member countries Today: 193 member countries The headquarters of the UN is in New York City, USA . 🎯 Main Goals of the UN Maintain World Peace – Stop wars and conflicts. Protect Human Rights – Ensure fairness and freedom for all people. Help in Development – Support poor countries in education, health, and jobs. Provide Humanitarian Aid – Help during natural disasters or wars. Promote International...
और पढ़ें

1. The Art of Self-Discipline

-
 The Art of Self-Discipline: A Complete, Practical, and Inspiring Guide Overview Self-discipline is the quiet architecture of a meaningful life. It is not punishment. It is not self-hatred. It is a rational, compassionate structure that lets you act on your best judgment—especially when you do not “feel like it.” Motivation is a spark; self-discipline is the wiring, the switch, and the circuit breaker that keep the lights on. This guide blends psychology, philosophy, neuroscience, and real-world practice. The language is advanced but the sentences are simple and direct. Use it as a handbook, not a lecture. Part I — Foundations What Self-Discipline Actually Is Definition: The consistent ability to align daily actions with chosen values and long-term goals, under a system of clear rules, supportive environments, and measured feedback. Key property: It is built, not found. It grows through repetition, design, and reflection—not through mood. Discipline vs. Motivation Motivation is vol...
और पढ़ें