<!DOCTYPE html>
<html>

<head>
  <title>红山开源 oauth2 认证</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%= javascript_include_tag :application, 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_link_tag "doorkeeper/application" %>
  <%= csrf_meta_tags %>
  <%= yield(:css) if content_for?(:css) %>
  <style>
      body {
          margin: 0;
          color: rgba(0, 0, 0, .65);
          font-size: 14px;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
          font-variant: tabular-nums;
          line-height: 1.5;
          background-color: #fff;
          -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
          background: url(https://ali-cdn.educoder.net/react/build/static/media/beijintulogontwo.41076faf.png) center center / 100% 100% no-repeat fixed;
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0px;
          bottom: 0px;
          min-height: 100%;
          padding-top: 40px;
      }

      #container {
          max-width: 500px;
      }

      .mt-20 {
          margin-top: 20px;
      }

      .login-form {
          margin-top: 10px;
      }

      .error {
          color: #ee4a1f;
          text-align: left;
          margin-bottom: 0px;
          min-height: 20px;
      }

      .app-name {
          color: #459be6;
      }

      .logo-wraper {
          text-align: center;
      }

      .auth-desc {
          margin: 20px;
          font-size: 20px;
      }

      .w {
          position: relative;
          width: 100%;
          max-width: 350px;
          margin: 0px auto;
      }

      .btn-login {
          width: 100%;
          text-align: center;
          color: #fff !important;
          display: block;
          background: #459be6;
          border-radius: 4px;
          letter-spacing: 2px;
          cursor: pointer;
      }

      input {
          font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          list-style: none;
          position: relative;
          display: inline-block;
          padding: 4px 11px;
          width: 100%;
          height: 38px;
          font-size: 14px;
          line-height: 1.5;
          color: rgba(0, 0, 0, 0.65);
          width: 100%;
          background-color: #fff;
          height: 45px;
          padding: 5px;
          background-image: none;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          -webkit-transition: all .3s;
          -o-transition: all .3s;
          transition: all .3s;
          margin-top: 10px;
      }

      .reg {
          text-align: center;
          margin-top: 20px;
      }

      .reg-link {
          font-size: 18px;
          color: #999;
      }
  </style>
</head>

<body>
<header class="page-header" role="banner">
  <div class="logo-wraper">
    <img src="/images/logo.png" style="cursor: pointer;width: 80px;">
  </div>
</header>
<div id="container">
  <%- if flash[:notice].present? %>
    <div class="alert alert-info">
      <%= flash[:notice] %>
    </div>
  <% end -%>

  <%= yield %>
</div>
</body>

</html>