<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>گزارش دوم – کار با HTML Templates در Flask</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
    <script src="{{ url_for('static', filename='app.js') }}" defer></script>
  </head>
  <body>
    <main>
      <h1>My Info</h1>
      <p>Mohammad Amin Mirzaee - 04121129705027</p>

      <h2>
        What is <code>render_template</code> & What is the role of the
        <code>/templates</code> and <code>/static</code> folders?
      </h2>
      <ul>
        {% for title, description in features %}
        <li>
          <strong>{{ title }}:</strong>
          {{ description }}
        </li>
        {% endfor %}
      </ul>

      <div class="actions">
        <button type="button" data-js="highlight">Toggle highlight</button>
        <button type="button" data-js="timestamp">Update timestamp</button>
      </div>

      <p>
        The current (UTC) time was rendered by Flask:
        <strong data-js="timestamp-value">
          {{ current_time.strftime("%Y-%m-%d %H:%M:%S") }}Z
        </strong>
      </p>

      <footer>
        Commands ( already in venv )
        <ul>
          <li><code>cd examples/html-basic</code> وارد پروژه می شویم</li>
          <li>
            <code>pip install -r requirements.txt</code> نصب پکیج های مورد نیاز
          </li>
          <li><code>python app.py</code> اجرای برنامه</li>
        </ul>
        <h3>Before</h3>
        <img
          src="{{ url_for('static', filename='img/before.png') }}"
          alt="Before"
          width="600"
        />
        <h3>After</h3>
        <img
          src="{{ url_for('static', filename='img/after.png') }}"
          alt="After"
          width="600"
        />
        <h3>Hierarchy / Tree</h3>
        <img
          src="{{ url_for('static', filename='img/tree.png') }}"
          alt="After"
          width="600"
        />
        <p>
          Changes in <code>index.html</code> file: I changed the text of each
          elements, also added some html elements/tag like img, p, h2, h3, ...
          then using <code>/static</code> folder to put my images ( screenshots
          ) and using them in page with url_for function to find static
          folder and filename ( using flask in order to import media ) I also
          use ul and li tags to list commands I used for running the
          application.
        </p>
        <p>
          تغییرات در فایل ایندکس اچ تی ام ال: من متن های هر تگی را تغییر دادم و
          اضافه کردم یکسری تگ هایی مثل تگ آی ام جی، پی، تگ های اچ، .... و بعد از
          پوشه استاتیک برای قرار دادن عکس ها و اسکرین شات ها با تابع مخصوص فلسک
          برای پیدا کردن مسیر آن استفاده کردم در ادامه با تگ یو ال و ال آی لیستی
          از فرمان های اجرای برنامه را قرار دادم
        </p>
      </footer>
    </main>
  </body>
</html>
