Hugging Face's logo

Spaces:
cm107
/
test_static_space
Running

App Files Community
cm107 commited on
Commit
39aba6e
•
1 Parent(s): b10d6f9

Added test page.

Browse files
Files changed (5) hide show
  1. index.html +25 -22
  2. style.css +1 -1
  3. test_page.html +25 -0
  4. test_page.js +37 -0
  5. test_page_style.css +22 -0
index.html CHANGED
@@ -1,24 +1,27 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>
13
- You can modify this app directly by editing <i>index.html</i> in the
14
- Files and versions tab.
15
- </p>
16
- <p>
17
- Also don't forget to check the
18
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank"
19
- >Spaces documentation</a
20
- >.
21
- </p>
22
- </div>
23
- </body>
24
- </html>
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>My static Space</title>
8
+ <link rel="stylesheet" href="style.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <div class="card">
13
+ <h1>Welcome to your static Space!</h1>
14
+ <p>
15
+ You can modify this app directly by editing <i>index.html</i> in the
16
+ Files and versions tab.
17
+ </p>
18
+ <p>
19
+ Also don't forget to check the
20
+ <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
21
+ </p>
22
+ </div>
23
+ <h2>Navigation</h2>
24
+ <li><a href="test_page.html">Test Page</a></li>
25
+ </body>
26
+
27
+ </html>
style.css CHANGED
@@ -25,4 +25,4 @@ p {
25
 
26
  .card p:last-child {
27
  margin-bottom: 0;
28
- }
 
25
 
26
  .card p:last-child {
27
  margin-bottom: 0;
28
+ }
test_page.html ADDED
@@ -0,0 +1,25 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>My static Space</title>
8
+ <link rel="stylesheet" href="test_page_style.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <h1>Test Page</h1>
13
+ <button id="btn1" class="test_button">Click Me</button>
14
+ <div id="btn1_text" class="test_button_text_empty"></div>
15
+ <br>
16
+ <button id="btn2" class="test_button">Click Me Too!</button>
17
+ <div id="btn2_text" class="test_button_text_empty"></div>
18
+
19
+ <h2>Navigation</h2>
20
+ <li><a href="index.html">Home</a></li>
21
+
22
+ <script type="text/javascript" src="test_page.js"></script>
23
+ </body>
24
+
25
+ </html>
test_page.js ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class ButtonTextPair {
2
+ constructor(btnId, btnTextId, clickMsg = 'Well, this was a nice test!') {
3
+ this.btnId = btnId;
4
+ this.btnTextId = btnTextId;
5
+ this.clickMsg = clickMsg;
6
+
7
+ this.initBtn();
8
+ }
9
+
10
+ get btn() {
11
+ return document.getElementById(this.btnId);
12
+ }
13
+
14
+ get btnText() {
15
+ return document.getElementById(this.btnTextId);
16
+ }
17
+
18
+ initBtn() {
19
+ this.clearMsg();
20
+ this.btn.addEventListener('mousedown', e => this.writeMsg());
21
+ this.btn.addEventListener('mouseup', e => this.clearMsg());
22
+ this.btn.addEventListener('mouseout', e => this.clearMsg());
23
+ }
24
+
25
+ clearMsg() {
26
+ this.btnText.className = 'test_button_text_empty';
27
+ this.btnText.innerHTML = '';
28
+ }
29
+
30
+ writeMsg() {
31
+ this.btnText.className = 'test_button_text';
32
+ this.btnText.innerHTML = this.clickMsg;
33
+ }
34
+ }
35
+
36
+ var pair1 = new ButtonTextPair('btn1', 'btn1_text', 'Well, this was a nice test.');
37
+ var pair1 = new ButtonTextPair('btn2', 'btn2_text', 'This is fun.');
test_page_style.css ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .test_button {
2
+ color: yellow;
3
+ background-color: rgb(9, 96, 158);
4
+ border-color: rgb(89, 50, 195);
5
+ border-width: 5px;
6
+ }
7
+
8
+ .test_button_text {
9
+ color: red;
10
+ display: inline-block;
11
+ background-color: black;
12
+ /* width: fit-content; */
13
+ margin-left: 3px;
14
+ padding-left: 3px;
15
+ padding-right: 3px;
16
+ padding-top: 3px;
17
+ padding-bottom: 3px;
18
+ }
19
+
20
+ .test_button_text_empty {
21
+ display: inline-block;
22
+ }