{% extends "base.html" %}
{% block content %}
<h1 id="datetime" data-time="{{now.isoformat()}}">{{now.strftime("%Y/%m/%d %H:%M:%S")}}</h1>
<!-- A bit of context for how this page was created -->
   <p>This page was created with the help of LLMs and the Flask framework. It's a great way to learn about how these technologies work together.</p>
<p>Here are some of the key components that were used:</p>
<ul>
<li><strong>LLMs</strong>: Language Model, which is a type of AI model that can generate human-like text based on input prompts.</li>
<li><strong>Flask</strong>: A lightweight web framework for Python. It's great for building simple web applications quickly.</li>
<li><strong>Jinja2</strong>: A templating engine used in Flask to dynamically render HTML templates with data from the server.</li>
<li><strong>Bootstrap</strong>: A popular CSS framework that provides responsive, mobile-first design and layout tools.</li>
<li><strong>Python</strong>: The programming language used for web development. It's a great choice for building dynamic websites.</li>
</ul>
<p>I hope you found this information helpful! If you have any questions or need further assistance, feel free to reach out.</p>
<p>Best of luck with your project!</p>
<script>
    // JavaScript to update the datetime dynamically
    function formatDateTime(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
        }
    function updateTime() {
        const dateElement = document.getElementById('datetime');
        const currentTime = new Date(dateElement.dataset.time);

        // Increment the datetime by 1 second
        currentTime.setSeconds(currentTime.getSeconds() + 1);

        // Format the datetime as a readable string
        const formattedTime = formatDateTime(currentTime);

        // Update the displayed datetime
        dateElement.textContent = formattedTime;

        // Update the data-time attribute for the next update
        dateElement.dataset.time = currentTime;
    }

    // Update the datetime every second
    setInterval(updateTime, 1000);
</script>
{% endblock %}