{% extends 'base.html' %} {% block head %}

<style>
  @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

  * {
    box-sizing: border-box;
  }

  input[type="submit"] {
    width: 45%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Additional custom CSS */
  .github-badge {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
  }

  .twiter-badge{
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #14171A;
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
  }

  /* Responsive adjustments */
  @media (max-width: 576px) {
    .github-badge, twiter-badge {
      position: relative;
      width: 100%;
      top: 10px;
      right: 0;
      padding: 5px;
      font-size: 12px;
    }
    .twiter-badge{
        position: relative;
        margin-top: 10px;
        width: 100%;
        top: 10px;
        left: 0;
        padding: 5px;
        font-size: 12px;
    }
  }

  h1 {
    font-family: "Open Sans", sans-serif;
  }
</style>
{% endblock %} 
{% block body %}
<div class="container">
  <div class="row">  
    <div class="col-md-6 mx-auto"><br>
	<h1>QR Code Generator</h1><br>
      <form method="POST" class="">
		{% if mesage %}
			<div class="alert alert-warning">{{ mesage }}</div>
		{% endif %}
		<div class="form-group">
			<label>Write Text To Generate QR Code : </label><br />
			<input type="text" class="form-control" name="codeText" placeholder="write text here ...">
		</div>
		<br>
		<button type="submit" class="btn btn-primary">Generate</button>       
      </form>
    </div>
  </div>
</div>
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">     
        {% if generatedCode %}
		<div class="qr-code-container text-center p-4 rounded border bg-light">
			<div
			  class="alert alert-primary alert-dismissible fade show mb-3 text-center"
			  role="alert"
			>
			You can download the image by clicking on it.
			</div>
			<a href="{{ generatedCode }}" download="qrcode.png">
			  <img
				src="{{ generatedCode }}"
				alt="qr code"
				class="img-fluid rounded"
			  />
			</a>
		</div>
       {% endif %}     
    </div>
  </div>
</div>
{% endblock %}