Medical Banner Generator code

 

<!--

HTML / CSS / JS

<!--html2canvas Library (High Quality Export)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<div class="med-app-box">
  <div class="med-controls-card">
    <h2 style="color: #4a148c; font-weight: 800; margin: 0px 0px 10px;">Medical Banner Generator</h2>
    
    <div class="med-field">
      <label><strong>Aspect Ratio (Format):</strong></label>
      <select id="ratioSelect" onchange="updateRatio()">
        <option selected value="16-9">16:9 (Landscape Banner)</option>
        <option value="1-1">1:1 (Square Post)</option>
        <option value="9-16">9:16 (Shorts / Reels)</option>
      </select>
    </div>

    <div class="med-field">
      <label><strong>Paste Complete Raw Text Here:</strong></label>
      <textarea id="inRawText" oninput="renderBanner()" rows="7" placeholder="Paste your text here...">21. Cefixime (Taxim-O 200 / Zifi 200) | 3rd Generation Cephalosporin Antibiotic
Composition (क्या पाया जाता है): Cefixime Trihydrate 100mg / 200mg
Use (कब लेनी चाहिए): टाइफाइड बुखार, कान का इंफेक्शन (Otitis Media), गले में खराश, फेफड़ों का इंफेक्शन।
Side Effects (दुष्प्रभाव): दस्त (Diarrhea), पेट दर्द, बदहजमी, एलर्जिक रिएक्शन।
Dose / Treatment & Care: 200mg दिन में 2 बार (सुबह-शाम) खाना खाने के बाद (5-7 दिन)।</textarea>
    </div>

    <div class="btn-group-row">
      <button class="btn-clear" onclick="clearText()" type="button">🗑️ Clear Text</button>
      <button class="btn-download-4k" onclick="downloadBanner4K()" type="button">⚡ Download Ultra HD Banner</button>
    </div>
  </div>

  <!--Live Canvas Area-->
  <div class="med-preview-area">
    <div class="ratio-16-9" id="renderCanvas">
      
      <!-- Top Header Bar with Solid Background & White Text -->
      <div class="top-nav-bar">
        <div class="main-title" id="outTitle">21. Cefixime (Taxim-O 200 / Zifi 200)</div>
        <div class="gen-title" id="outGen">3rd Generation Cephalosporin Antibiotic</div>
      </div>

      <!-- Main Data Table Layout -->
      <div class="body-content">
        <div class="data-table">
          
          <div class="data-row" id="rowComp">
            <div class="label-col">Composition (क्या पाया जाता है):</div>
            <div class="val-col val-comp" id="outComp">-</div>
          </div>

          <div class="data-row" id="rowUse">
            <div class="label-col">Use (कब लेनी चाहिए):</div>
            <div class="val-col val-use" id="outUse">-</div>
          </div>

          <div class="data-row" id="rowSide">
            <div class="label-col">Side Effects (दुष्प्रभाव):</div>
            <div class="val-col val-side" id="outSide">-</div>
          </div>

          <div class="data-row" id="rowDose">
            <div class="label-col">Dose / Treatment & Care:</div>
            <div class="val-col val-dose" id="outDose">-</div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

<style>
/* Base Setup */
.med-app-box {
  max-width: 1100px;
  margin: 15px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #111;
}

.med-controls-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}

.med-field {
  margin-bottom: 12px;
}

.med-controls-card label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.med-controls-card select,
.med-controls-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
}

.btn-group-row {
  display: flex;
  gap: 12px;
}

.btn-clear {
  flex: 1;
  padding: 14px;
  background: #d32f2f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s;
}

.btn-clear:hover {
  background: #b71c1c;
}

.btn-download-4k {
  flex: 2;
  padding: 14px;
  background: #4a148c;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(74,20,140,0.3);
  transition: 0.2s;
}

.btn-download-4k:hover {
  background: #380d6b;
}

/* Canvas Viewport */
.med-preview-area {
  background: #e8ecf2;
  padding: 20px;
  border-radius: 12px;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

/* Render Card Frame */
#renderCanvas {
  background: #ffffff;
  border: 2px solid #ddd;
  border-left: 8px solid #6200ea;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ratio-16-9 {
  width: 1000px;
  height: 520px;
}

.ratio-1-1 {
  width: 750px;
  height: 750px;
}

.ratio-9-16 {
  width: 500px;
  height: 888px;
}

/* Top Header Bar Styling */
.top-nav-bar {
  background: #4a148c; /* Solid Uniform Background Color */
  color: #ffffff;      /* White Text */
  padding: 14px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.main-title {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff; /* White Text */
  letter-spacing: -0.2px;
}

.gen-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffeb3b; /* Highlighted yellow/white on corner */
  text-align: right;
  white-space: nowrap;
}

/* Data Table Grid Layout */
.body-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0px 35px 25px 35px;
}

.data-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.data-row {
  display: flex;
  align-items: flex-start;
}

.label-col {
  width: 300px;
  font-size: 20px;
  font-weight: 800;
  color: #2c3e50;
  flex-shrink: 0;
}

.val-col {
  flex: 1;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

/* Colors */
.val-comp { color: #2c3e50; }
.val-use { color: #2e7d32; }
.val-side { color: #d32f2f; }
.val-dose { color: #1565c0; }
</style>

<script>
function updateRatio() {
  const r = document.getElementById("ratioSelect").value;
  const canvas = document.getElementById("renderCanvas");
  canvas.className = "";
  if (r === "16-9") canvas.classList.add("ratio-16-9");
  else if (r === "1-1") canvas.classList.add("ratio-1-1");
  else if (r === "9-16") canvas.classList.add("ratio-9-16");
}

function clearText() {
  document.getElementById("inRawText").value = "";
  renderBanner();
}

function renderBanner() {
  const rawText = document.getElementById("inRawText").value;
  const lines = rawText.split('\n');

  let title = "Medicine Name";
  let gen = "";
  let comp = "";
  let use = "";
  let side = "";
  let dose = "";

  lines.forEach((line, index) => {
    const trimmed = line.trim();
    if (!trimmed) return;

    if (index === 0 && !trimmed.includes(":")) {
      if (trimmed.includes("|")) {
        const parts = trimmed.split("|");
        title = parts[0].trim();
        gen = parts[1].trim();
      } else {
        title = trimmed;
      }
      return;
    }

    const lower = trimmed.toLowerCase();
    if (lower.includes("composition") || lower.includes("कम्पोजीशन")) {
      comp = trimmed.includes(":") ? trimmed.substring(trimmed.indexOf(":") + 1).trim() : trimmed;
    } else if (lower.includes("use") || lower.includes("उपयोग") || lower.includes("कब लेनी")) {
      use = trimmed.includes(":") ? trimmed.substring(trimmed.indexOf(":") + 1).trim() : trimmed;
    } else if (lower.includes("side") || lower.includes("दुष्प्रभाव")) {
      side = trimmed.includes(":") ? trimmed.substring(trimmed.indexOf(":") + 1).trim() : trimmed;
    } else if (lower.includes("dose") || lower.includes("treatment") || lower.includes("मात्रा")) {
      dose = trimmed.includes(":") ? trimmed.substring(trimmed.indexOf(":") + 1).trim() : trimmed;
    } else {
      if (!comp) comp = trimmed;
      else if (!use) use = trimmed;
      else if (!side) side = trimmed;
      else if (!dose) dose = trimmed;
    }
  });

  document.getElementById("outTitle").innerText = title;
  document.getElementById("outGen").innerText = gen;

  setRowData("outComp", "rowComp", comp, "N/A");
  setRowData("outUse", "rowUse", use, "N/A");
  setRowData("outSide", "rowSide", side, "N/A");
  setRowData("outDose", "rowDose", dose, "N/A");
}

function setRowData(outId, rowId, val, defaultVal) {
  const outElem = document.getElementById(outId);
  const rowElem = document.getElementById(rowId);
  if (val && val !== "") {
    outElem.innerText = val;
    rowElem.style.display = "flex";
  } else {
    outElem.innerText = defaultVal;
    rowElem.style.display = "flex";
  }
}

function downloadBanner4K() {
  const target = document.getElementById("renderCanvas");
  
  html2canvas(target, {
    scale: 3,
    useCORS: true,
    backgroundColor: "#ffffff",
    logging: false
  }).then(canvas => {
    const link = document.createElement("a");
    const filename = document.getElementById("outTitle").innerText.replace(/[^a-zA-Z0-9]/g, "_") || "medical_banner";
    link.download = filename + ".png";
    link.href = canvas.toDataURL("image/png", 1.0);
    link.click();
  });
}

// Initial Run
renderBanner();
</script>
 -->
<div class="example">
  <h1>Hello World!</h1>
</div>

-->

Hello World!