    <html>
        <head>
            <title>Lottery</title>

            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no" />

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

        </head>

        @php
            foreach($configData as $key => $value) {
                $config[$value->name]  = $value->value ;
            }
            $agt_name = "Agt 001";
            $cur_t = date('H:i');
            $time1 = "11:30";
            $time2 = "4:30";
            $time = 1;
            $show_time = "00:00";
            if ($cur_t < $time1)
            {
                $show_time = $time1;
                $time = 1;
            }
            elseif($cur_t < $time2)
            {
                $show_time = $time2;
                $time = 1;
            }
            else $time = 3;
        @endphp
        <style>
            #main-table{
                width: 100% !important;
                background-color: #d5d5d5;
                border: solid black 1px;
            }
            table{
                margin-bottom: 0 !important;
            }
            #seconder-header{
                padding: 0;
                padding-right: 12px;
            }

            #seconder-header > div{
                padding: auto;
                height: 38px !important;
            }
            #seconder-header > div > div{
                padding-top: 8px;
                font-weight: 500;
            }
            #first-header , #first-header > td{
                height: 11px !important;
                padding: 3px !important;
            }
            #table-num{
                margin: 0px;
                padding: 0px;
                border:solid black 1px ;
            }
            .no-pad{
                padding: 0 !important;
            }
            .no-mar{
                margin: 0 !important;
            }

            #table-num > tbody > tr , #table-num > tbody > tr > td{
                height: 11px !important;
                padding: 3px !important;
                font-size: 12px;
            }
            #table-num > tbody > tr > td:hover {
                background-color: #fff !important;
                font-weight: 500 !important;
                color: #ff4444;
            }

            .row{
                height: 100%;
            }
            .text-ce{
                text-align: center;
            }
            .pointer{
                cursor: pointer;
            }
            .footer-table{
                /* width:auto; */
            }
            .col-total{
                width: 40% !important;
            }
            .col-percent{
                width: 20% !important;
            }
            .col-lucky{
                width: 20% !important;
            }
            .footer-table > tbody > tr > td {
                font-weight: 500;
            }
            .btn-set-size{
                /* width: 100% !important; */
            }
            #settingModal > .modal-dialog{
                width: 90% !important;
                max-width: 90% !important;
                height: 100% !important;
                margin: auto !important;
            }
            #settingModal > .modal-dialog> .modal-content{
                height: 100% !important;

            }
            .form-control_{
                /* display: block; */
                /* width: 100%; */
                padding: .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                color: #212529;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid #ced4da;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border-radius: .375rem;
                transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
                margin: 2px;
            }

            #agent , #daily,#weekly,#clear, #block {
                padding:  2%;
            }
            .no-border-tr >td {

                border-style : hidden!important;
            }
            .weekly-table, .agent-table, .daily-table > tbody > tr > td{
                font-size: 12px !important;
            }

            .tbl-added-num{
                overflow:  scroll !important;
                scroll-behavior: auto !important;
            }
            .tbl-added-num > tbody > tr > td{
                height: 23px !important;
                width: 33.3333% !important;
                padding-inline: 5px !important;
                font-size: 14px !important;
                /* font-family: 'Brush Script MT', fantasy ; */
                /* font-weight: 600; */
                transform: scale(1, 1.2);
            }

            .tbl-added-num > tbody > tr > td span:last-child{ /*not compatible with <=IE8*/
                color:#333;
                float:right;
                /* font-family: 'Brush Script MT', fantasy ; */
                /* font-weight: 600; */
            }
            #added-tbl-td{
                /* max-height: 100% !important;
                overflow: scroll !important; */
            }
            #main-upper-div{
                max-height: 660px !important;
                overflow: scroll !important;
                scroll-behavior:  auto;
            }
        </style>

        <body>
            <div id="root">
                <div id="header">

                </div>

                <div id="main-body">
                    <div class="container_" id="main_">
                        <div class="table-responsive" id="main-upper-div">
                            <table class="table table-bordered"  id="main-table">
                                <tr id="first-header">
                                    <td colspan="4" class="bg-info text-center">no.5</td>
                                    <td width="20%" class="bg-info text-ce" onclick="location.href=location.href">25/01/2023</td>

                                </tr>
                                <tr>
                                    <td colspan="4" class="text-center" id="seconder-header">

                                        <div class="row">
                                                <div class="col bg-info text-ce">{{$show_time}}</div>
                                                <div class="col bg-primary text-ce  pointer btn-setting">Setting</div>
                                                <div class="col bg-body text-ce pointer btn-user" >User 0001</div>
                                                <div class="col bg-danger text-ce" >Total</div>
                                                <div class="col bg-warning text-ce" id="total_amt">1000000</div>
                                                <!-- <div class="col bg-danger text-ce">ON/OFF</div>  -->
                                        </div>

                                    </td>
                                    <td width="20%" class="bg-info text-ce pointer" id="on-off">ON/OFF</td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="no-pad no-mar" id="added-tbl-td" >
                                        <table class="table table-bordered tbl-added-num" id="table-num">
                                            <tbody>
                                                {{-- echo '<td>'.$value->digit.' - '.$value->t_amt.'</td>'; --}}
                                                @php
                                                    $data  = json_decode(json_encode($bet), true);
                                                    $total_amt = 0;
                                                @endphp
                                                @for ($x = 0; $x <= 100; $x++)
                                                    @if($x%3 == 0 && $x != 0)
                                                        </tr><tr>
                                                    @elseif($x == 0)
                                                        <tr>
                                                    @endif
                                                    @if(count($data)> $x)
                                                        <td><span>{{$data[$x]["digit"]}}</span><span>{{$data[$x]["t_amt"]}}</span></td>
                                                        @php $total_amt += ($data[$x]["t_amt"]*1) ; @endphp
                                                    @else
                                                        <td></td>
                                                    @endif

                                                @endfor
                                            </tbody>
                                            {{-- <tr><td id="n00">00</td>	<td id="25"> 25 </td>	<td id="n50">50</td> <td id="n75">75</td> </tr>
                                            <tr><td id="n01">01</td>	<td id="26"> 26 </td>	<td id="n51">51</td> <td id="n76">76</td> </tr>
                                            <tr><td id="n02">02</td>	<td id="27"> 27 </td>	<td id="n52">52</td> <td id="n77">77</td> </tr>
                                            <tr><td id="n03">03</td>	<td id="28"> 28 </td>	<td id="n53">53</td> <td id="n78">78</td> </tr>
                                            <tr><td id="n04">04</td>	<td id="29"> 29 </td>	<td id="n54">54</td> <td id="n79">79</td> </tr>
                                            <tr><td id="n05">05</td>	<td id="30"> 30 </td>	<td id="n55">55</td> <td id="n80">80</td> </tr>
                                            <tr><td id="n06">06</td>	<td id="31"> 31 </td>	<td id="n56">56</td> <td id="n81">81</td> </tr>
                                            <tr><td id="n07">07</td>	<td id="32"> 32 </td>	<td id="n57">57</td> <td id="n82">82</td> </tr>
                                            <tr><td id="n08">08</td>	<td id="33"> 33 </td>	<td id="n58">58</td> <td id="n83">83</td> </tr>
                                            <tr><td id="n09">09</td>	<td id="34"> 34 </td>	<td id="n59">59</td> <td id="n84">84</td> </tr>
                                            <tr><td id="n10">10</td>	<td id="35"> 35 </td>	<td id="n60">60</td> <td id="n85">85</td> </tr>
                                            <tr><td id="n11">11</td>	<td id="36"> 36 </td>	<td id="n61">61</td> <td id="n86">86</td> </tr>
                                            <tr><td id="n12">12</td>	<td id="37"> 37 </td>	<td id="n62">62</td> <td id="n87">87</td> </tr>
                                            <tr><td id="n13">13</td>	<td id="38"> 38 </td>	<td id="n63">63</td> <td id="n88">88</td> </tr>
                                            <tr><td id="n14">14</td>	<td id="39"> 39 </td>	<td id="n64">64</td> <td id="n89">89</td> </tr>
                                            <tr><td id="n15">15</td>	<td id="40"> 40 </td>	<td id="n65">65</td> <td id="n90">90</td> </tr>
                                            <tr><td id="n16">16</td>	<td id="41"> 41 </td>	<td id="n66">66</td> <td id="n91">91</td> </tr>
                                            <tr><td id="n17">17</td>	<td id="42"> 42 </td>	<td id="n67">67</td> <td id="n92">92</td> </tr>
                                            <tr><td id="n18">18</td>	<td id="43"> 43 </td>	<td id="n68">68</td> <td id="n93">93</td> </tr>
                                            <tr><td id="n19">19</td>	<td id="44"> 44 </td>	<td id="n69">69</td> <td id="n94">94</td> </tr>
                                            <tr><td id="n20">20</td>	<td id="45"> 45 </td>	<td id="n70">70</td> <td id="n95">95</td> </tr>
                                            <tr><td id="n21">21</td>	<td id="46"> 46 </td>	<td id="n71">71</td> <td id="n96">96</td> </tr>
                                            <tr><td id="n22">22</td>	<td id="47"> 47 </td>	<td id="n72">72</td> <td id="n97">97</td> </tr>
                                            <tr><td id="n23">23</td>	<td id="48"> 48 </td>	<td id="n73">73</td> <td id="n98">98</td> </tr>
                                            <tr><td id="n24">24</td>	<td id="49"> 49 </td>	<td id="n74">74</td> <td id="n99">99</td> </tr> --}}
                                        </table>
                                    </td>
                                    <td colspan="4" class="no-pad no-mar" >
                                        <table class="table table-bordered" id="table-num">
                                            <tr><td>00</td></tr>
                                            <tr><td>01</td></tr>
                                            <!-- <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr>
                                            <tr><td></td></tr> -->
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <table class="table table-bordered footer-table" >
                            <tr>
                                <!-- <td colspan="1"  > q  </td> -->
                                <!-- <td > 1 </td>    -->
                                <td class="col-total bg-info text-ce"> 200000 </td>
                                <td class="text-ce bg-warning col-percent pointer"> % </td>
                                <td class="text-ce  bg-primary col-lucky pointer btn-lucky"> Lucky </td>
                                <td class="text-ce  bg-danger pointer" > BALANCE </td>
                            </tr>
                        </table>
                    </div>

                </div>
            </div>
        </body>

        <div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <!-- <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Setting</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div> -->
                <div class="modal-body">
                    <!-- <button type="button" class="btn btn-primary btn-set-size">Agent</button>
                    <button type="button" class="btn btn-primary btn-set-size">Agent Daily </button>
                    <button type="button" class="btn btn-primary btn-set-size">Agent Weekly </button>
                    <button type="button" class="btn btn-primary btn-set-size">Clear Agent Data</button>
                    <button type="button" class="btn btn-primary btn-set-size">Block Number/Day</button>  -->
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="agent-tab" data-bs-toggle="tab" data-bs-target="#agent" type="button" role="tab" aria-controls="agent" aria-selected="true">Agent Setup</button>
                        </li>
                        <li class="nav-item" role="presentation">
                        <button class="nav-link" id="daily-tab" data-bs-toggle="tab" data-bs-target="#daily" type="button" role="tab" aria-controls="daily" aria-selected="false">Daily List</button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button class="nav-link" id="weekly-tab" data-bs-toggle="tab" data-bs-target="#weekly" type="button" role="tab" aria-controls="weekly" aria-selected="false">Weekly List</button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button class="nav-link" id="clear-tab" data-bs-toggle="tab" data-bs-target="#clear" type="button" role="tab" aria-controls="clear" aria-selected="false">Clear Data</button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button class="nav-link" id="block-tab" data-bs-toggle="tab" data-bs-target="#block" type="button" role="tab" aria-controls="block" aria-selected="false">Block Number/Day</button>
                        </li>
                      </ul>
                      <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="agent" role="tabpanel" aria-labelledby="agent-tab">
                            <!-- <h3>Agent Setup</h3> -->
                             <div>
                                <div>
                                    <div class="">
                                        <label class="col-2" >Agent Name</label>
                                        <input type="text" class="form-control_ col-8" placeholder="Enter Agent Name" autocomplete="off" >
                                    </div>
                                    <div class="">
                                        <label class="col-2" >User Name</label>
                                        <input type="text" class="form-control_ col-8" placeholder="Enter User Name" autocomplete="off" >
                                    </div>
                                    <div class="">
                                        <label class="col-2" >Password</label>
                                        <input type="text" class="form-control_ col-8" placeholder="Enter Password" autocomplete="off" >
                                    </div>
                                    <div class="">
                                        <label class="col-2" >Commission</label>
                                        <input type="text" class="form-control_ col-8" placeholder="Enter Commission" autocomplete="off" >
                                    </div>
                                    <div class="">
                                        <label class="col-2" >Ph No.</label>
                                        <input type="text" class="form-control_ col-8" placeholder="Enter Ph No." autocomplete="off" >
                                    <button class="btn btn-info">Add Agent</button>

                                    </div>
                                </div>
                                <br>
                                <table class="table table-bordered agent-table">
                                    <tr>
                                        <th>Agent Name</th>
                                        <th>UserName</th>
                                        <th>Password</th>
                                        <th>Commission</th>
                                        <th>Ph No.</th>
                                    </tr>
                                   @foreach($userData as $user)

                                    <tr>
                                        <td>{{$user->name}} </td>
                                        <td>{{$user->userName}} </td>
                                        <td>{{$user->pass}} </td>
                                        <td>{{$user->commi}} </td>
                                        <td>{{$user->ph}} </td>
                                    </tr>
                                    @endforeach
                                </table>
                             </div>
                            @php
                                // print_r($userData);

                             @endphp
                        </div>
                        <div class="tab-pane fade" id="daily" role="tabpanel" aria-labelledby="daily-tab">
                            <p>
                                Date : 25/12/2022
                            </p>
                            <table class="table table-bordered  daily-table">
                                <tr>
                                    <th>Agent Name</th>
                                    <th>Amount</th>
                                    <th>C-rate</th>
                                    <th>L-Amount </th>
                                    <th>Rate</th>
                                    <th>Balance Total</th>
                                </tr>
                                <tr>
                                    <td>User 001</td>
                                    <td>1200</td>
                                    <td>0</td>
                                    <td>1000</td>
                                    <td>0</td>
                                    <td>1212200.00</td>
                                </tr>
                                <tr>
                                    <td>User 001</td>
                                    <td>1200</td>
                                    <td>0</td>
                                    <td>1000</td>
                                    <td>0</td>
                                    <td>1212200.00</td>
                                </tr>
                                <tr>
                                    <td>User 001</td>
                                    <td>1200</td>
                                    <td>0</td>
                                    <td>1000</td>
                                    <td>0</td>
                                    <td>1212200.00</td>
                                </tr>
                                <tr></tr>
                                <tr  class="no-border-tr">
                                    <td colspan="2" class="text-end">1200</td>
                                    <td colspan="2" class="text-end">1000</td>
                                    <td colspan="2" class="text-end">1212200.00</td>
                                </tr>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="weekly" role="tabpanel" aria-labelledby="weekly-tab">
                            <p> from date: 1/12/2022 to 5/12/2022</p>
                            <table class="table table-bordered weekly-table">
                                <tr>
                                    <th></th>
                                    <th colspan="3" class="text-center">12:00</th>
                                    <th colspan="3" class="text-center">04:00</th>
                                    <th rowspan="2" class="text-center">Total</th>
                                </tr>
                                <tr>
                                    <th>Date</th>
                                    <th>Amount</th>
                                    <th colspan="2">Lucky</th>
                                    <th>Amount</th>
                                    <th colspan="2">Lucky</th>
                                </tr>
                                <tr>
                                    <td colspan="8">Name : User 001</td>
                                </tr>
                                <tr>
                                    <td>11/12/2022</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>127000</td>
                                </tr>
                                <tr>
                                    <td>11/12/2022</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>127000</td>
                                </tr>
                                <tr>
                                    <td>11/12/2022</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>127000</td>
                                </tr>
                                <tr>
                                    <td colspan="8">Name : User 002</td>
                                </tr>
                                <tr>
                                    <td>11/12/2022</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>127000</td>
                                </tr>
                                <tr>
                                    <td>11/12/2022</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>127000</td>
                                </tr>
                                <tr>
                                    <td>11/12/2022</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>62900</td>
                                    <td>800</td>
                                    <td>62900</td>
                                    <td>127000</td>
                                </tr>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="clear" role="tabpanel" aria-labelledby="clear-tab">
                            <div class="">
                                <label class="col-2" >User Name</label>
                                <input type="text" class="form-control_ col-8" placeholder="Enter User Name" autocomplete="off" >
                            </div>
                            <div class="">
                                <label class="col-2" >Date</label>
                                <input type="date" class="form-control_ col-4" placeholder="Enter From Date" autocomplete="off" >
                                <input type="date" class="form-control_ col-4" placeholder="Enter To Date" autocomplete="off" >
                            </div>
                            <button class="btn btn-sm btn-info" >Clear</button>


                        </div>
                        <div class="tab-pane fade" id="block" role="tabpanel" aria-labelledby="block-tab">
                            Block Number :<input type="text" class="form-control_" placeholder="Enter Block Number">
                            <button class="btn btn-sm btn-info" >Add</button>
                            <table class="table table-bordered ">
                                <tr>
                                    <th>Block No.</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <td>44</td>
                                    <td  class="pointer text-danger">remove</td>
                                </tr>
                                <tr>
                                    <td>00</td>
                                    <td class="pointer text-danger">remove</td>
                                </tr>
                                <tr>
                                    <td>23</td>
                                    <td class="pointer text-danger">remove</td>
                                </tr>
                            </table>
                        </div>
                      </div>

                </div>
                <!-- <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
              </div>
            </div>
        </div>
        <!-- onOffModal -->
        <div class="modal fade" id="onOffModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                <h3 class="text-danger">System will off temporarily.</h3>
              </div>
            </div>
          </div>
        </div>
        <!-- luckyModal -->
        <div class="modal fade" id="luckyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Lucky Number</h5>
                  <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"> -->
                    <!-- <span aria-hidden="true">&times;</span> -->
                  </button>
                </div>
              <div class="modal-body">
                    <!-- <p>Lucky Number</p> -->
                    <div class="row">
                        <div class="col-5">
                    <input class=" form-control input input-sm" type="text">
                </div><br><br>
                <div class="col-5">
                    <button class=" col-2 form-control btn btn-primary m-1 col-2"> Save</button>
                   </div></div>

              </div>
            </div>
          </div>
        </div>
        <!--  agentModal -->
        <div class="modal fade" id="agentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Choose  Agent</h5>
                  <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"> -->
                    <!-- <span aria-hidden="true">&times;</span> -->
                  </button>
                </div>
               <div class="modal-body">
                    <!-- <p>Lucky Number</p> -->
                    <div>
                        <table class="table table-bordered">
                            <tr>
                                <th>
                                    Agent Name
                                </th>
                            </tr>
                            <tr>
                                <td class="pointer text-info">
                                    User 001
                                </td>
                            </tr>
                            <tr>
                                <td class="pointer text-info">
                                    User 002
                                </td>
                            </tr>
                            <tr>
                                <td class="pointer text-info">
                                    User 003
                                </td>
                            </tr>
                            <tr>
                                <td class="pointer text-info">
                                    User 004
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!-- <button class=" col-2 form-control btn btn-primary m-1 col-2"> Choose</button> -->
                </div>
            </div>
          </div>
        </div>
        <script>
            var total_ = "<?php echo number_format($total_amt); ?>";
            $("#total_amt").html(total_);


        </script>
  <script>
    $(document).ready(function(){

        $(".btn-setting").click(function(){
            $('#settingModal').modal('toggle');
        });
        $("#on-off").click(function(){
            $('#onOffModal').modal('toggle');
        });
        $(".btn-lucky").click(function(){
            $('#luckyModal').modal('toggle');
        });
        $(".btn-user").click(function(){
            $('#agentModal').modal('toggle');
        });

        // btn-setting
        // $(".btn-setting").click();
        console.log("asasas");

        // $("#block-tab").click();

        });
    </script>

    </html>
