|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="login-page">
|
|
|
<h1>Login</h1>
|
|
|
<form>
|
|
|
- <label for="username">Username:</label>
|
|
|
+ <label for="username">Username(input):</label>
|
|
|
<input id="username" type="text" v-model="username" />
|
|
|
<label for="password">Password:</label>
|
|
|
<input id="password" type="password" v-model="password" />
|
|
|
@@ -33,34 +33,35 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .login-page {
|
|
|
- background: linear-gradient(to right, #ff7e5f, #feb47b);
|
|
|
- padding: 20px;
|
|
|
- border-radius: 8px;
|
|
|
- animation: gradient 15s ease infinite;
|
|
|
- }
|
|
|
+.login-page {
|
|
|
+ background: linear-gradient(to right, #8e2de2, #4a00e0);
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ animation: gradient 15s ease infinite;
|
|
|
+ color: purple;
|
|
|
+}
|
|
|
|
|
|
- @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);
|
|
|
- }
|
|
|
+@keyframes gradient {
|
|
|
+ 0% {
|
|
|
+ background: linear-gradient(to right, #8e2de2, #4a00e0);
|
|
|
+ }
|
|
|
+ 16.66% {
|
|
|
+ background: linear-gradient(to right, #4a00e0, #8e2de2);
|
|
|
+ }
|
|
|
+ 33.33% {
|
|
|
+ background: linear-gradient(to right, #8e2de2, #4a00e0);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ background: linear-gradient(to right, #4a00e0, #8e2de2);
|
|
|
+ }
|
|
|
+ 66.66% {
|
|
|
+ background: linear-gradient(to right, #8e2de2, #4a00e0);
|
|
|
+ }
|
|
|
+ 83.33% {
|
|
|
+ background: linear-gradient(to right, #4a00e0, #8e2de2);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background: linear-gradient(to right, #8e2de2, #4a00e0);
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
genlitex