<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Aisky-coffee</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!-- popper.min.js 用于弹窗、提示、下拉菜单 --> <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <!--可用來建立使用者小圖示--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { margin:0; } .navbar-dark .navbar-nav .nav-link { color: white; cursor: pointer; text-decoration:none; width: 110px; height: 46px; } .nav-top { line-height:40px; background-color: #C4C4C4; } .website_title{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 30px; color: #000000; } .navbar-nav > li{ float: none; display: inline-block; width: 100px; margin: 0 auto; text-align: center; } .navbar-nav > li a{ font-size: 20px; } .main-page { margin-top: 150px; } .page-title { font-family: Roboto; font-style: normal; font-weight: bold; font-size: 36px; } .flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .set-link { display: inline-block; width: 350px; height: 100px; line-height: 100px; background: #008CBA; border: 1px solid #CFCFCF; box-sizing: border-box; color: #FFFFFF; border-radius: 10px; font-size: 36px; } @media(max-width:373px){ .card { margin-right: 0px; } } @media(max-width:577px){ } @media(min-width:576px){ } @media(min-width:768px){ .navbar-nav > li { margin-left: 0px; } .navbar-nav .li-block { display:none; } } @media(min-width:991px){ .navbar-nav > li { margin-left: 20px; } .navbar-nav .li-block { display:none; } } @media(min-width:1200px){ .navbar-nav > li { margin-left: 50px; } .navbar-nav .li-block { display: inline-block; width: 100px; } } @media(min-width:1400px){ .navbar-nav .li-block { display: inline-block; width: 200px; } } @media(min-width:1689px) { .navbar-nav > li { margin-left: 50px; } .navbar-nav .li-block { display: inline-block; width: 500px; } } </style> <script> $(function(){ console.log('使用者權限: {{status}}') }) </script> </head> <body> <nav class="fixed-top"> <div id="user_status_disabled_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;"> Smart Coffee </div> <div class="main-page" style="text-align: center;"> <p style="font-size: 24px;">Oops!請先登入(⊙﹏⊙)</p> <a href="/logout">我要登入</a> </div> </body> </html>