html-restaurant-game
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="restaurant.css">
</head>

<body>

    <div id='black-shadow'></div>

    <div>

        <div id='time'>
            <div class="shadow-time-money"></div>
            <div>
                <div id='WEEK'>W</div>
            </div>
            <div>
                <div id="DAY">D</div>
            </div>
        </div>

        <div id='money'>
            <div class="shadow-time-money"></div>
            <div id="money-value">
                <div id='MONEY'>MONEY</div>
            </div>
        </div>

        <div id='div-chef-block'>

            <div id='chef0' class="div-chef">
                <div class="shadow-chef-customer"></div>
                <div class="chef-img-block">
                    <img src="restaurant/iconfinder_Chef-2_379358.png" alt="厨师" class="chef-img">
                </div>
                <div id='cook-bar0' class="chef-bar">爆炒baidu</div>
                <div class='shadow-cook-bar'></div>
                <div class="add-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div class="delete-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div id="complete0" class="div-complete">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="就绪" class="img-complete">
                </div>
            </div>

            <div id='chef1' class="div-chef">
                <div class="shadow-chef-customer"></div>
                <div class="chef-img-block">
                    <img src="restaurant/iconfinder_Chef-2_379358.png" alt="厨师" class="chef-img">
                </div>
                <div id='cook-bar1' class="chef-bar">baidu</div>
                <div class='shadow-cook-bar'></div>
                <div class="add-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div class="delete-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div id="complete1" class="div-complete">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="就绪" class="img-complete">
                </div>
            </div>

            <div id='chef2' class="div-chef">
                <div class="shadow-chef-customer"></div>
                <div class="chef-img-block">
                    <img src="restaurant/iconfinder_Chef-2_379358.png" alt="厨师" class="chef-img">
                </div>
                <div id='cook-bar2' class="chef-bar">baidu</div>
                <div class='shadow-cook-bar'></div>
                <div class="add-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div class="delete-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div id="complete2" class="div-complete">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="就绪" class="img-complete">
                </div>
            </div>

            <div id='chef3' class="div-chef">
                <div class="shadow-chef-customer"></div>
                <div class="chef-img-block">
                    <img src="restaurant/iconfinder_Chef-2_379358.png" alt="厨师" class="chef-img">
                </div>
                <div id='cook-bar3' class="chef-bar">baidu</div>
                <div class='shadow-cook-bar'></div>
                <div class="add-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div class="delete-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div id="complete3" class="div-complete">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="就绪" class="img-complete">
                </div>
            </div>

            <div id='chef4' class="div-chef">
                <div class="shadow-chef-customer"></div>
                <div class="chef-img-block">
                    <img src="restaurant/iconfinder_Chef-2_379358.png" alt="厨师" class="chef-img">
                </div>
                <div id='cook-bar4' class="chef-bar">baidu</div>
                <div class='shadow-cook-bar'></div>
                <div class="add-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div class="delete-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div id="complete4" class="div-complete">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="就绪" class="img-complete">
                </div>
            </div>

            <div id='chef5' class="div-chef">
                <div class="shadow-chef-customer"></div>
                <div class="chef-img-block">
                    <img src="restaurant/iconfinder_Chef-2_379358.png" alt="厨师" class="chef-img">
                </div>
                <div id='cook-bar5' class="chef-bar ">baidu</div>
                <div class='shadow-cook-bar'></div>
                <div class="add-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div class="delete-block">
                    <div class="multiply-row"></div>
                    <div class="multiply-column"></div>
                </div>
                <div id="complete5" class="div-complete">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="就绪" class="img-complete">
                </div>
            </div>

        </div>

        <div id='div-customer-block'>

            <div id='seat0' class="div-seat">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='seat0-bar0' class="customer-bar bar0">baidu</div>
                <div id='seat0-bar1' class="customer-bar bar1">baidu</div>
                <div id='seat0-bar2' class="customer-bar bar2">baidu</div>
                <div id='seat0-bar0-line' class="customer-bar-line bar0-line"></div>
                <div id='seat0-bar1-line' class="customer-bar-line bar1-line"></div>
                <div id='seat0-bar2-line' class="customer-bar-line bar2-line"></div>
                <div class='shadow-seat-bar bar0'></div>
                <div class='shadow-seat-bar bar1'></div>
                <div class='shadow-seat-bar bar2'></div>
                <div id='dish-up00' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up01' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up02' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id="appease0" class="div-appease">
                    <img src="restaurant/iconfinder_Instagram_UI-07_2315589.png" alt="安抚" class="img-appease">
                </div>
                <div id="check0" class="div-check">
                    <img src="restaurant/iconfinder_Euro-Coin_379523.png" alt="结账" class="img-check">
                </div>
            </div>

            <div id='seat1' class="div-seat">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='seat1-bar0' class="customer-bar bar0">baidu</div>
                <div id='seat1-bar1' class="customer-bar bar1">baidu</div>
                <div id='seat1-bar2' class="customer-bar bar2">baidu</div>
                <div id='seat1-bar0-line' class="customer-bar-line bar0-line"></div>
                <div id='seat1-bar1-line' class="customer-bar-line bar1-line"></div>
                <div id='seat1-bar2-line' class="customer-bar-line bar2-line"></div>
                <div class='shadow-seat-bar bar0'></div>
                <div class='shadow-seat-bar bar1'></div>
                <div class='shadow-seat-bar bar2'></div>
                <div id='dish-up10' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up11' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up12' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id="appease1" class="div-appease">
                    <img src="restaurant/iconfinder_Instagram_UI-07_2315589.png" alt="安抚" class="img-appease">
                </div>
                <div id="check1" class="div-check">
                    <img src="restaurant/iconfinder_Euro-Coin_379523.png" alt="结账" class="img-check">
                </div>
            </div>

            <div id='seat2' class="div-seat">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='seat2-bar0' class="customer-bar bar0">baidu</div>
                <div id='seat2-bar1' class="customer-bar bar1">baidu</div>
                <div id='seat2-bar2' class="customer-bar bar2">baidu</div>
                <div id='seat2-bar0-line' class="customer-bar-line bar0-line"></div>
                <div id='seat2-bar1-line' class="customer-bar-line bar1-line"></div>
                <div id='seat2-bar2-line' class="customer-bar-line bar2-line"></div>
                <div class='shadow-seat-bar bar0'></div>
                <div class='shadow-seat-bar bar1'></div>
                <div class='shadow-seat-bar bar2'></div>
                <div id='dish-up20' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up21' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up22' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id="appease2" class="div-appease">
                    <img src="restaurant/iconfinder_Instagram_UI-07_2315589.png" alt="安抚" class="img-appease">
                </div>
                <div id="check2" class="div-check">
                    <img src="restaurant/iconfinder_Euro-Coin_379523.png" alt="结账" class="img-check">
                </div>
            </div>

            <div id='seat3' class="div-seat">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='seat3-bar0' class="customer-bar bar0">baidu</div>
                <div id='seat3-bar1' class="customer-bar bar1">baidu</div>
                <div id='seat3-bar2' class="customer-bar bar2">baidu</div>
                <div id='seat3-bar0-line' class="customer-bar-line bar0-line"></div>
                <div id='seat3-bar1-line' class="customer-bar-line bar1-line"></div>
                <div id='seat3-bar2-line' class="customer-bar-line bar2-line"></div>
                <div class='shadow-seat-bar bar0'></div>
                <div class='shadow-seat-bar bar1'></div>
                <div class='shadow-seat-bar bar2'></div>
                <div id='dish-up30' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up31' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id='dish-up32' class="dish-up">
                    <img src="restaurant/iconfinder_Food-Dome_379366.png" alt="上菜" class="img-dish-up">
                </div>
                <div id="appease3" class="div-appease">
                    <img src="restaurant/iconfinder_Instagram_UI-07_2315589.png" alt="安抚" class="img-appease">
                </div>
                <div id="check3" class="div-check">
                    <img src="restaurant/iconfinder_Euro-Coin_379523.png" alt="结账" class="img-check">
                </div>
            </div>

            <div>
                <div id='TIMEMS' style="z-index: 100;"></div>
            </div>


        </div>

        <div id='div-queue-block'>

            <div id='queue0' class="div-customer">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='queue-bar0' class="queue-bar">等位中</div>
                <div class='shadow-queue-bar'></div>
            </div>

            <div id='queue1' class="div-customer">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='queue-bar1' class="queue-bar">等位中</div>
                <div class='shadow-queue-bar'></div>
            </div>

            <div id='queue2' class="div-customer">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='queue-bar2' class="queue-bar">等位中</div>
                <div class='shadow-queue-bar'></div>
            </div>

            <div id='queue3' class="div-customer">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='queue-bar3' class="queue-bar">等位中</div>
                <div class='shadow-queue-bar'></div>
            </div>

            <div id='queue4' class="div-customer">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='queue-bar4' class="queue-bar">等位中</div>
                <div class='shadow-queue-bar'></div>
            </div>

            <div id='queue5' class="div-customer">
                <div class="shadow-chef-customer"></div>
                <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
                <div id='queue-bar5' class="queue-bar">等位中</div>
                <div class='shadow-queue-bar'></div>
            </div>

        </div>


    </div>

    <div id='food-menu'>

        <div id='order-img' class="div-customer">
            <div class="shadow-chef-customer"></div>
            <img src="restaurant/iconfinder_Boss-3_379348.png" alt="顾客" class="customer-img">
        </div>

        <div id="order-message"><b><span id='order-name'></span> 正在点菜，已点 <span id='order-price'>18</span> 元的菜</b></div>
        <div id='menu-board'>
            <b>
            <p class='all-dishes'>凉菜（二选一，可不点）</p>
            <p class='dishes'><input type="checkbox" class='dish'>凉拌baidu<span>...............￥ 10</span></p>
            <p class='dishes'><input type="checkbox" class='dish'>冰镇baidu<span>...............￥ 9</span></p>
            <p class='all-dishes'>主菜（五选一，必点）</p>
            <p class='dishes'><input type="checkbox" class='dish'>爆炒baidu<span>...............￥ 15</span></p>
            <p class='dishes'><input type="checkbox" class='dish'>蛋煎baidu<span>...............￥ 20</span></p>
            <p class='dishes'><input type="checkbox" class='dish'>清蒸baidu<span>...............￥ 21</span></p>
            <p class='dishes'><input type="checkbox" class='dish'>红烧baidu<span>...............￥ 19</span></p>
            <p class='dishes'><input type="checkbox" class='dish'>油炸baidu<span>...............￥ 14</span></p>
            <p class='all-dishes'>饮品（二选一，必点）</p>
            <p class='dishes'><input type="checkbox" class='dish'>可口baidu<span>...............￥ 10</span></p>
            <p class='dishes'><input type="checkbox" class='dish'>baidu快线<span>...............￥ 10</span></p>
            </b>
        </div>


        <div class="order-two-choice">
            <div id='order-yes'>
                <div class='shadow-time-money'></div>
                <div>点好了，快点上菜</div>
            </div>

            <div id='order-no'>
                <div class='shadow-time-money'></div>
                <div>不吃了</div>
            </div>
        </div>

    </div>

    <div id='start-window'>
        <div class="head">
            <b>WebMOOC餐厅开业啦!</b>
        </div>
        <div class='text'>
            WebMOOC餐厅即将开业，请认真经营你的餐厅吧经营餐厅需要做好下面几件事情! 加油!
        </div>
        <div class='text' style="width: 90%;">
            <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between;">
                <div>招聘厨师</div>
                <div>迎接客人</div>
                <div>烹饪美食</div>
            </div>
        </div>
        <div id="start-game">
            <div class='shadow-time-money'></div>
            <div>开始经营吧</div>
        </div>
    </div>

    <div class='recruit-window'>

        <div class="head">
            <b>招聘厨师</b>
        </div>
        <div class="text">招聘一名新厨师可以帮你更快地为顾客烹饪菜肴，
            <br> 增加餐厅收入。你最多可以拥有六名厨师。
            <br> 但每个厨师每周需要你支付工资￥140
            <br>请问你确认新招聘一名厨师吗
            <br>
        </div>

        <div class="two-choice">
            <div id='recruit-yes'>
                <div class='shadow-time-money'></div>
                <div>是的，确认招聘</div>
            </div>

            <div id='recruit-no'>
                <div class='shadow-time-money'></div>
                <div>先不了</div>
            </div>
        </div>

    </div>

    <div class='fire-window'>

        <div class="head">
            <b>解雇厨师</b>
        </div>
        <div class="text">解雇当前闲置的厨师可以帮你节省成本。
            <br> 解雇时会按厨师本周已经工作的日子结算工资，并会赔偿一周工资作为解约金。
            <br> 解雇当前厨师结算工资及解约金需要付出￥<span id='chef-pay'></span>
            <br>
        </div>

        <div class="two-choice">
            <div id='fire-yes'>
                <div class='shadow-time-money'></div>
                <div>是的，确认解雇</div>
            </div>

            <div id='fire-no'>
                <div class='shadow-time-money'></div>
                <div>先不了</div>
            </div>
        </div>

    </div>


    <script src="restaurant.js"></script>
</body>

</html>