d6f3269d6c
Meinen Namen auf den Login und Registrieren und User Bearbeiten hinzugefügt. Damit jeder weis das das von mir designt wurde!
129 lines
3.8 KiB
Plaintext
129 lines
3.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel='stylesheet' href='/stylesheets/style.css' />
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-green.min.css" />
|
|
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
|
|
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id='vue-app'>
|
|
<div class="mdl-layout mdl-js-layout">
|
|
<div id="login-conatiner" class="mdl-card mdl-shadow--16dp">
|
|
<div class="mdl-card__supporting-text">
|
|
<div id="login-fab" class="mdl-color--accent mdl-color-text--white">
|
|
<i id="lock-icon" class="material-icons">lock</i>
|
|
</div>
|
|
<div id="card-heading">
|
|
User Login
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" v-model="email" id="email" type="email">
|
|
<label class="mdl-textfield__label" for="email">Email</label>
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" v-model="password" id="password" type="password">
|
|
<label class="mdl-textfield__label" for="password">Password</label>
|
|
</div>
|
|
<p>
|
|
<button id="login-button" @click="loginemail()" v-show="email && password"
|
|
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect mdl-color-text--white">
|
|
Login mit Email
|
|
</button>
|
|
</p>
|
|
<p>
|
|
<button id="login-button" @click="login()" v-show="!email && !password"
|
|
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect mdl-color-text--white">
|
|
Login mit Google
|
|
</button>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mdl-card__actions">
|
|
<a href="/register"><button class="mdl-button mdl-js-button mdl-button--primary">Email
|
|
Registrieren</button></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mdl-mega-footer__bottom-section">
|
|
<ul class="mdl-mega-footer__link-list">
|
|
<li>Created by Georg Reisinger</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
|
<script src="javascripts/login.js"></script>
|
|
|
|
<style>
|
|
* {
|
|
overflow-x: hidden;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
body {
|
|
background-color: rgba(0, 0, 0, 0.0392156862745098);
|
|
background: linear-gradient(-45deg, rgba(16, 0, 78, 0.3686274509803922), rgba(20, 4, 81, 0));
|
|
}
|
|
|
|
#login-conatiner {
|
|
margin: auto;
|
|
}
|
|
|
|
.mdl-card,
|
|
.mdl-card__supporting-text {
|
|
overflow: inherit !important;
|
|
}
|
|
|
|
.mdl-card {
|
|
overflow: visible !important;
|
|
z-index: auto !important;
|
|
}
|
|
|
|
#login-fab {
|
|
border-radius: 50%;
|
|
height: 56px;
|
|
margin: auto;
|
|
min-width: 56px;
|
|
width: 56px;
|
|
overflow: hidden;
|
|
background: rgba(158, 158, 158, .2);
|
|
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
|
|
position: absolute;
|
|
top: -30px;
|
|
text-align: center;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#lock-icon {
|
|
line-height: 56px;
|
|
}
|
|
|
|
#login-button {
|
|
width: 100%;
|
|
height: 40px;
|
|
min-width: initial;
|
|
}
|
|
|
|
#card-heading {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 32px;
|
|
height: 30px;
|
|
padding-top: 30px;
|
|
color: rgba(0, 0, 0, 0.31);
|
|
}
|
|
|
|
#forgotpassword {
|
|
float: right;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html> |