Hugging Face's logo

Spaces:
robocan
/
Rlab
Sleeping

App Files Community
robocan commited on
Commit
5c8c27f
·
1 Parent(s): 6ebfee3

Update login.html

Browse files
Files changed (1) hide show
  1. login.html +61 -60
login.html CHANGED
@@ -1,67 +1,68 @@
1
- {% extends "page.html" %}
 
 
 
 
 
 
 
 
 
2
 
 
 
 
 
 
 
 
3
 
4
- {% block stylesheet %}
5
- {% endblock %}
 
 
 
 
6
 
7
- {% block site %}
 
 
 
 
 
 
 
 
 
 
 
8
 
9
- <div id="jupyter-main-app" class="container">
10
-
11
- <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo">
12
- <h4>You can duplicate this Space to run it private.</h4>
13
- <br>
14
- <a class="duplicate-button" style="display:inline-block" target="_blank" href="https://huggingface.co/spaces/DockerTemplates/jupyterlab?duplicate=true">
15
- <img style="margin: 0" src="https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&amp;style=flat&amp;logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&amp;logoWidth=14" alt="Duplicate Space"></a>
16
- <br>
17
- <br>
18
- <h4>Token is <span style="color:orange;">huggingface</span></h4>
19
-
20
- {% if login_available %}
21
- {# login_available means password-login is allowed. Show the form. #}
22
- <div class="row">
23
- <div class="navbar col-sm-8">
24
- <div class="navbar-inner">
25
- <div class="container">
26
- <div class="center-nav">
27
- <form action="{{base_url}}login?next={{next}}" method="post" class="navbar-form pull-left">
28
- {{ xsrf_form_html() | safe }}
29
- {% if token_available %}
30
- <label for="password_input"><strong>{% trans %}Token:{% endtrans
31
- %}</strong></label>
32
- {% else %}
33
- <label for="password_input"><strong>{% trans %}Password:{% endtrans %}</strong></label>
34
- {% endif %}
35
- <input type="password" name="password" id="password_input" class="form-control">
36
- <button type="submit" class="btn btn-default" id="login_submit">{% trans %}Log in{% endtrans
37
- %}</button>
38
- </form>
39
- </div>
40
- </div>
41
- </div>
42
- </div>
43
- </div>
44
- {% else %}
45
- <p>{% trans %}No login available, you shouldn't be seeing this page.{% endtrans %}</p>
46
- {% endif %}
47
- {% if message %}
48
- <div class="row">
49
- {% for key in message %}
50
- <div class="message {{key}}">
51
- {{message[key]}}
52
- </div>
53
- {% endfor %}
54
- </div>
55
- {% endif %}
56
- {% if token_available %}
57
- {% block token_message %}
58
-
59
- {% endblock token_message %}
60
- {% endif %}
61
- </div>
62
 
63
- {% endblock %}
 
 
 
 
 
 
64
 
 
 
65
 
66
- {% block script %}
67
- {% endblock %}
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Dynamic Color-Changing UI</title>
5
+ <style type="text/css">
6
+ body {
7
+ background-color: #222;
8
+ color: #fff;
9
+ transition: all 0.5s ease-in-out;
10
+ }
11
 
12
+ h1 {
13
+ font-size: 48px;
14
+ margin: 0;
15
+ padding: 20px;
16
+ text-align: center;
17
+ transition: all 0.5s ease-in-out;
18
+ }
19
 
20
+ .container {
21
+ display: flex;
22
+ flex-wrap: wrap;
23
+ justify-content: center;
24
+ margin-top: 50px;
25
+ }
26
 
27
+ .box {
28
+ width: 200px;
29
+ height: 200px;
30
+ margin: 20px;
31
+ border-radius: 50%;
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+ font-size: 24px;
36
+ cursor: pointer;
37
+ transition: all 0.5s ease-in-out;
38
+ }
39
 
40
+ .box:hover {
41
+ transform: scale(1.1);
42
+ }
43
+ </style>
44
+ </head>
45
+ <body>
46
+ <h1>Dynamic Color-Changing UI</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
 
48
+ <div class="container">
49
+ <div class="box" style="background-color: #e74c3c;">Red</div>
50
+ <div class="box" style="background-color: #f1c40f;">Yellow</div>
51
+ <div class="box" style="background-color: #2ecc71;">Green</div>
52
+ <div class="box" style="background-color: #3498db;">Blue</div>
53
+ <div class="box" style="background-color: #9b59b6;">Purple</div>
54
+ </div>
55
 
56
+ <script type="text/javascript">
57
+ const boxes = document.querySelectorAll('.box');
58
 
59
+ boxes.forEach(box => {
60
+ box.addEventListener('click', () => {
61
+ const color = box.style.backgroundColor;
62
+ document.body.style.backgroundColor = color;
63
+ document.querySelector('h1').style.color = color;
64
+ });
65
+ });
66
+ </script>
67
+ </body>
68
+ </html>