<!DOCTYPE html>
<html lang="en">

<head>
    {% block head %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>ReadAlong Web Component</title>

    <!-- Bulma core CSS -->
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
     <!-- Bulma Extensions -->
     <link href="{{ url_for('static', filename='css/pageloader.css') }}" rel='stylesheet'>
    <!-- Font Awesome CSS -->
    <link href="{{ url_for('static', filename='css/all.min.css') }}" rel="stylesheet">
    <!-- Toastr -->
    <link href="{{ url_for('static', filename='css/toastr.min.css') }}" rel='stylesheet'>

    {% endblock %}
</head>

<body id="page-top">
    {% block content %}{% endblock %}
</body>
<!-- JQUery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Socket IO -->
<script src="{{ url_for('static', filename='js/socket.io.slim.js') }}"></script>
<!-- Toastr -->
<script src="{{ url_for('static', filename='js/toastr.min.js') }}"></script>
<!-- ReadAlong Web Component -->
<script type="module" src='https://unpkg.com/@roedoejet/readalong@latest/dist/read-along/read-along.esm.js'></script>
<script nomodule src='https://unpkg.com/@roedoejet/readalong@latest/dist/read-along/read-along.js'></script>
<!-- Main JS -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

</html>
