<!DOCTYPE html>
<html lang="en">
<head><title>{% block title %}SonosphereAI - The Sound of Intelligence{% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap"
          rel="stylesheet">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/style.css') }}"> {% block head_extra %}{% endblock %} </head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
            <a class="navbar-brand" href="#myPage">SonosphereAI</a></div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#myPage">HOME</a></li>
                <li><a href="#tools">TOOLS</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="main-content"> {% block content %}{% endblock %} </div>
{% block body_scripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="{{ url_for('static', filename='features/InstrumentOptions.jsx') }}"></script>
    <script type="text/babel" src="{{ url_for('static', filename='features/VocalOptions.jsx') }}"></script>
    <script type="text/babel" src="{{ url_for('static', filename='features/NoiseReduction.jsx') }}"></script>
    <script type="text/babel" src="{{ url_for('static', filename='features/LyricsGenerator.jsx') }}"></script>
    <script type="text/babel" src="{{ url_for('static', filename='App.jsx') }}"></script>
{% endblock %}
<footer class="bg-light py-4 mt-auto">
    <div class="container">
        <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP"> <span
                    class="glyphicon glyphicon-chevron-up"></span> </a>
        <p>&copy; 2025 SonosphereAI. All rights reserved.</p></div>
</footer>
</body>
</html>