<!--This is the body -->
    
    <!--Here is the sidebar place-->
    <section class="sidebar">
        <!--Here is the left side of the body-->
        <div class="left">
            <!--The burger menu-->
            <div class="menu">
                <!--Menu options-->
                <div id="mySidenav" class="sidenav">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <a href="#" onclick="document.location.href= '/'">Landing Page</a>
                    <a href="#" onclick="document.location.href= 'modal_login.html'">Log In</a>
                    <a href="#" onclick="document.location.href= 'modal_signup.html'">Sign Up</a>
                  </div>
                <nav>
                <!--Hamburger menu icon-->
                    <i class="fa-solid fa-bars menu" 
                    style="
                        font-size: 4rem; 
                        padding: 0.5rem;
                        cursor: pointer;" onclick="openNav()">
                    </i>
                </nav>
            </div>
        </div>
    </section>	
    
    <section class="container todo-container">

        <!--this is the main part of the body-->
        <div class="main">

            <!--This is the header part of the main part of the body-->
            <div id="myDIV" class="main-header">

                <!--This is the text box for the container-->
                <div class="text-box">

                    <!--This is the header 2-->
                    <h2> 
                        <!--This is an icon for the container with classes-->
                        <i class="fa-solid fa-list-check fa-xl"></i> To-Do List
                    </h2>

                    <!--This is the input with a placeholder-->
                    <input type="text" id="inputBx" placeholder="What do you have planned . . . ?">
                    
                    <!--This is the add button for the container-->
                    <span onclick="newElement()" class="addBtn">Add</span>
                </div>

                <!--This is a body for the main part in the container-->
                <div class="main-body">

                    <!--This is where the list for the main part in the container -->
                    <ul id="list"></ul>
                </div>
            </div>
        </div>
    </div>
    
    <!--This is the right part of the body-->
    <div class="right">
        
        <!--This is the timer container in the right part of the body-->
        <div class="timer-container">

            <!--This is the section container in the right part of the body-->
            <div class="section-container">

                <!--This is a Focus button in the timer-->
                <button id="focus" class="btn btn-timer btn-focus">
                    Focus
                </button>

                <!--This is a Short Break button in the timer-->
                <button id="shortbreak" class="btn btn-shortbreak">
                    Short Break
                </button>

                <!--This is a Long Break button in the timer-->
                <button id="longbreak" class="btn btn-longbreak">
                    Long Break
                </button>
            </div>

            <!--This is a time button container-->
            <div class="time-btn-container">

                <!--This is where the coundown time is shown-->
                <spam id="time">
                </spam>

                <!--This is the button container div in the time button container div-->
                <div class="btn-container">

                    <!--This is a Start button in the button container div that's in the time button container div-->
                    <button id="btn-start" class="show">
                        Start
                    </button>

                    <!--This is a Pause button in the button container div that's in the time button containber div-->
                    <button id="btn-pause" class="hide">
                        Pause
                    </button>

                    <!--This is a Stop button in the button container div in time button container div-->
                    <button id="btn-stop" class="hide">

                        <!--This is a box icon for the stop button-->
                        <i class="fa-solid fa-stop"></i>
                    </button>
                </div>
            </div>
        </div>
</div>

</section>
<p><b>Choose what to do!</b></p>
</div>

<!--This is the canvas where blender model goes-->
<canvas>
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    const loader = new GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

	scene.add( gltf.scene );

}, undefined, function ( error ) {

	console.error( error );

} );
</canvas>
<div class="tiger">
    <img style="height: 400px;display: block;
    margin-left: auto;
    margin-right: auto;" src="/public/usedImg/tiger-waving-cute-animal-cartoon-icon-image-vector-illustration-design.jpg" alt="library sketch" class="illustration">
</div>