|
|
@@ -0,0 +1,66 @@
|
|
|
+<template>
|
|
|
+ <div class="login-page">
|
|
|
+ <h1>Login</h1>
|
|
|
+ <form>
|
|
|
+ <label for="username">Username:</label>
|
|
|
+ <input id="username" type="text" v-model="username" />
|
|
|
+ <label for="password">Password:</label>
|
|
|
+ <input id="password" type="password" v-model="password" />
|
|
|
+ <label>
|
|
|
+ <input type="checkbox" v-model="rememberMe" /> Remember me
|
|
|
+ </label>
|
|
|
+ <button type="submit" @click.prevent="handleLogin">Login</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ rememberMe: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleLogin() {
|
|
|
+ // Implement login logic here
|
|
|
+ console.log(`Logging in with username: ${this.username}`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .login-page {
|
|
|
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ animation: gradient 15s ease infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes gradient {
|
|
|
+ 0% {
|
|
|
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
|
|
|
+ }
|
|
|
+ 16.66% {
|
|
|
+ background: linear-gradient(to right, #feb47b, #ff7e5f);
|
|
|
+ }
|
|
|
+ 33.33% {
|
|
|
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ background: linear-gradient(to right, #feb47b, #ff7e5f);
|
|
|
+ }
|
|
|
+ 66.66% {
|
|
|
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
|
|
|
+ }
|
|
|
+ 83.33% {
|
|
|
+ background: linear-gradient(to right, #feb47b, #ff7e5f);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
genlitex