<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuantiStat</title>
    <link rel="stylesheet" href="./stylesheets/main.scss"> 
    <link rel="stylesheet" href="./stylesheets/module.scss"> 
    <link rel="stylesheet" href="./stylesheets/sidebar.scss">
    <link rel="stylesheet" href="./stylesheets/welcome.scss">
    <script src="https://kit.fontawesome.com/4503a36730.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>
    <div class="sidebar">
        <div class="siteheader">
            <h1 class="application_name">QuantiStat</h1>
            <span>V2.1</span>
        </div>
        <nav>
            <div class="category">
                <h2>Density Map</h2>
                <div class="grid">
                    <button onclick="showTab('densityPrice')">
                        <span>
                            <i class="fa-solid fa-hand-holding-dollar"></i>
                        </span>
                        <p>Price Based</p>
                    </button>
                    <button onclick="showTab('densityTime')">
                        <span>
                            <i class="fa-solid fa-clock"></i>
                        </span>
                        <p>Time Based</p>
                    </button>
                    <button onclick="showTab('densityZone')">
                        <span>
                            <i class="fa-solid fa-table-cells-large"></i>
                        </span>
                        <p>Zone Based</p>
                    </button>
                </div>
            </div>
            <div class="category">
                <h2>Bias</h2>
                <div class="grid">
                    <button onclick="showTab('biasPrediction')">
                        <span>
                            <i class="fa-solid fa-arrow-down-up-across-line"></i>
                        </span>
                        <p>Prediction</p>
                    </button>
                    <button onclick="showTab('biasForecasting')">
                        <span>
                            <i class="fa-solid fa-arrow-trend-up"></i>
                        </span>
                        <p>Forecasting</p>
                    </button>
                </div>
            </div>
            <div class="category">
                <h2>Other</h2>
                <div class="grid">
                    <button onclick="showTab('levelValidator')">
                        <span>
                            <i class="fa-solid fa-check"></i>
                        </span>
                        <p>Level Validator</p>
                    </button>
                    <button onclick="window.open('https://finance.yahoo.com/markets/commodities/', '_blank')">
                        <span>
                            <i class="fa-solid fa-atom"></i>
                        </span>
                        <p>Symbol List</p>
                    </button>                    
                </div>
            </div>
        </nav>
    </div>
    

        <div class="welcome" id="welcome">
            <div class="info">
                <h1>Experience<br>The Power of <br>QuantiStat</h1>
                <p>Dive into our software and see how we're bringing the power of statistical data to orderflow.</p>
                <span>Note: This software is for informational purposes only and does not constitute financial advice. Please consult with a professional financial advisor before making any investment decisions.</span>
            </div>
        </div>
        <section>


        <div class="module" id="densityPrice">
            <div class="information">
                <div class="heading">
                    <p>Price Based</p>
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                </div>
                <h1>Density Map</h1>
                <p>Price based prediction is a module that predicts the highest and lowest price of a stock for the next day. It uses the historical data of the stock to predict the price.</p>
            </div>
            <div class="configuration">
                <div class="row">
                    <span>
                        <p>Symbol</p>
                    </span>
                    <input style="cursor:pointer" type="text" id="densityPrice_symbol" placeholder="(e.g. ES=F)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="row">
                    <p>The day before the prediction date</p>
                    <input class="date_input" type="date" id="densityPrice_enddate" placeholder="(e.g. 2024-12-11)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="button_container">
                    <button id="moduleButton_densityPrice" class="module_button" onclick="startBot('densityPrice')">Visualize</button>
                </div>
            </div>
        </div>

        <div class="module" id="densityTime">
            <div class="information">
                <div class="heading">
                    <p>Time Based</p>
                    <i class="fa-solid fa-clock"></i>
                </div>
                <h1>Density Map</h1>
                <p>Time based prediction is a module that predicts when the highest and lowest price of a stock occurs for the next day. It uses the historical data of the stock to predict when the high or low will take place.</p>
            </div>
            <div class="configuration">
                <div class="row">
                    <span>
                        <p>Symbol</p>
                    </span>
                    <input style="cursor:pointer" type="text" id="densityTime_symbol" placeholder="(e.g. ES=F)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="row">
                    <p>The day before the prediction date</p>
                    <input class="date_input" type="date" id="densityTime_enddate" placeholder="(e.g. 2024-12-11)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="button_container">
                    <button id="moduleButton_densityTime" class="module_button" onclick="startBot('densityTime')">Visualize</button>
                </div>
            </div>
        </div>

        <div class="module" id="densityZone">
            <div class="information">
                <div class="heading">
                    <p>Zone Based</p>
                    <i class="fa-solid fa-table-cells-large"></i>
                </div>
                <h1>Density Map</h1>
                <p>Zone based prediction is a module that predicts where the highest and lowest price of a stock will occur for the day. It uses the historical data of the stock to predict the price.</p>
            </div>
            <div class="configuration">
                <div class="row">
                    <span>
                        <p>Symbol</p>
                    </span>
                    <input style="cursor:pointer" type="text" id="densityZone_symbol" placeholder="(e.g. ES=F)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="row">
                    <span>
                        <p>Daily Open Price (00:00, UTC -5)</p>
                    </span>
                    <input style="cursor:pointer" type="text" id="densityZone_daily_opening_price" placeholder="(e.g. 6037.50)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="row">
                    <span>
                        <p>ATR period</p>
                    </span>
                    <input style="cursor:pointer" type="text" id="densityZone_atr" placeholder="(e.g. 3)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="row">
                    <p>Predict Date</p>
                    <input class="date_input" type="date" id="densityZone_enddate" placeholder="(e.g. 2024-12-11)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="button_container">
                    <button id="moduleButton_densityZone" class="module_button" onclick="startBot('densityZone')">Calculate</button>
                </div>
            </div>
        </div>

        <div class="module" id="levelValidator">
            <div class="information">
                <div class="heading">
                    <p>Price Based</p>
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                </div>
                <h1>Level Validator (coming soon)</h1>
                <p>The Price Based Level Validator module allows you to input your own levels for the day. It will verify if your levels align with the software's levels, and you can specify a margin of error for the range.</p>
            </div>
        </div>

        <div class="module" id="biasPrediction">
            <div class="information">
                <div class="heading">
                    <p>Trend Based</p>
                    <i class="fa-solid fa-arrow-down-up-across-line"></i>
                </div>
                <h1>Bias Prediction</h1>
                <p>Bias prediction is a module that predicts the trend that will occur for the next day. It will give out the probabilities in percentages.</p>
            </div>
            <div class="configuration">
                <div class="row">
                    <span>
                        <p>Symbol</p>
                    </span>
                    <input style="cursor:pointer" type="text" id="biasPrediction_symbol" placeholder="(e.g. ES=F)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="row">
                    <p>Predict Date</p>
                    <input class="date_input_bias" type="date" id="biasPrediction_enddate" placeholder="(e.g. 2024-12-11)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="button_container">
                    <button id="moduleButton_biasPrediction" class="module_button" onclick="startBot('biasPrediction')">Visualize</button>
                </div>
            </div>
        </div>

        <div class="module" id="biasForecasting">
            <div class="information">
                <div class="heading">
                    <p>Trend Based</p>
                    <i class="fa-solid fa-arrow-trend-up"></i>
                </div>
                <h1>Bias Forecasting</h1>
                <p>Bias Forecasting is a module that provides predictions for the high, low, and close prices.</p>
            </div>
            <div class="configuration">
                <div class="row">
                    <span>
                        <p>Symbol</p>
                    </span>
                    <input style="cursor:pointer" type="text" id="biasForecasting_symbol" placeholder="(e.g. ES=F)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="row">
                    <p>Predict Date</p>
                    <input class="date_input_bias" type="date" id="biasForecasting_enddate" placeholder="(e.g. 2024-12-11)" autocomplete="off" autocorrect="off" autocapitalize="off">
                </div>
                <div class="button_container">
                    <button id="moduleButton_biasForecasting" class="module_button" onclick="startBot('biasForecasting')">Visualize</button>
                </div>
            </div>
        </div>


    </section>

    <script type="text/javascript" src="/eel.js"></script>
    <script src="index.js"></script>
</body>
</html>
