python-task2/index.html at master · PremchandGat/python-task2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&subset=greek-ext');

body{
        background-image: url("https://images.pexels.com/photos/891252/pexels-photo-891252.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
        background-position: center;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
        min-height:100vh;
        font-family: 'Noto Sans', sans-serif;
}
.text-center{
        color:#fff;
        text-transform:uppercase;
    font-size: 23px;
    margin: -50px 0 80px 0;
    display: block;
    text-align: center;
}
.box{
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, 0.89);
        border-radius:3px;
        padding:70px 100px;
}
.input-container{
        position:relative;
        margin-bottom:25px;
}
.input-container label{
        position:absolute;
        top:0px;
        left:0px;
        font-size:16px;
        color:#fff;
    pointer-event:none;
        transition: all 0.5s ease-in-out;
}
.input-container input{
  border:0;
  border-bottom:1px solid #555;
  background:transparent;
  width:100%;
  padding:8px 0 5px 0;
  font-size:16px;
  color:#fff;
}
.input-container input:focus{
 border:none;
 outline:none;
 border-bottom:1px solid #e74c3c;
}
.btn{
        color:#fff;
        background-color:#e74c3c;
        outline: none;
    border: 0;
    color: #fff;
        padding:10px 20px;
        text-transform:uppercase;
        margin-top:50px;
        border-radius:2px;
        cursor:pointer;
        position:relative;
}
/*.btn:after{
        content:"";
        position:absolute;
        background:rgba(0,0,0,0.50);
        top:0;
        right:0;
        width:100%;
        height:100%;
}*/
.input-container input:focus ~ label,
.input-container input:valid ~ label{
        top:-12px;
        font-size:12px;

}
</style>
</head>
<body>
<div class="box">
        <form class="modal-content animate" action="http://192.168.43.168/cgi-bin/docker.py" method="post">
                <span class="text-center">login</span>
        <div class="input-container">
                <input type="text" name="uname" required=""/>
                <label>Username</label>
        </div>
        <div class="input-container">
                <input type="password" name="pwd" required=""/>
                <label>Password</label>
        </div>
                <button type="submit" class="btn">submit</button>
</form>
</div>
</body>
</html>