Hugging Face's logo

Spaces:
ortal1602
/
ARvsFM
Running

App Files Community
ortal1602 commited on
Commit
f1ebced
·
verified ·
1 Parent(s): 83009a1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +72 -33
index.html CHANGED
@@ -6,53 +6,92 @@
6
  <title>AR vs FM Experiment Page</title>
7
  <link rel="stylesheet" href="style/bootstrap.min.css">
8
  <style>
9
- body {
10
- padding: 20px;
11
- margin: 0;
12
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
 
 
14
  .container {
15
- background: white;
16
- border-radius: 16px;
17
- padding: 30px;
18
- box-shadow: 0 4px 20px rgba(0,0,0,0.05);
19
- margin: 0 auto 50px auto;
20
- max-width: 960px;
21
- width: 100%;
22
  }
23
 
24
- td, th {
25
- text-align: center;
26
- padding: 8px;
27
- border-bottom: 0.1px solid #aaa;
28
  }
29
 
30
- audio {
 
31
  width: 100%;
32
- max-width: 250px;
33
  }
34
 
35
- table {
36
- display: block;
37
- overflow-x: auto;
38
- white-space: nowrap;
39
- width: 100%;
40
  }
41
 
42
- @media (max-width: 600px) {
43
- h1 {
44
- font-size: 1.5rem;
45
- }
46
 
47
- h2 {
48
- font-size: 1.25rem;
49
- }
 
 
 
50
 
51
- p {
52
- font-size: 1rem;
53
- }
54
  }
55
- </style>
 
56
  </head>
57
  <body>
58
 
 
6
  <title>AR vs FM Experiment Page</title>
7
  <link rel="stylesheet" href="style/bootstrap.min.css">
8
  <style>
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ body {
14
+ margin: 0;
15
+ padding: 0;
16
+ font-family: system-ui, sans-serif;
17
+ background-color: #f5f5f5;
18
+ }
19
+
20
+ .container {
21
+ width: 100%;
22
+ padding: 30px 20px;
23
+ background: white;
24
+ border-radius: 0;
25
+ box-shadow: none;
26
+ margin-bottom: 50px;
27
+ }
28
+
29
+ table {
30
+ width: 100%;
31
+ border-collapse: separate;
32
+ border-spacing: 0 10px;
33
+ table-layout: fixed;
34
+ }
35
+
36
+ td, th {
37
+ text-align: left;
38
+ padding: 10px;
39
+ vertical-align: top;
40
+ word-break: break-word;
41
+ white-space: normal;
42
+ }
43
+
44
+ audio {
45
+ width: 100%;
46
+ max-width: 300px;
47
+ }
48
+
49
+ select {
50
+ margin-top: 10px;
51
+ margin-bottom: 20px;
52
+ }
53
+
54
+ #highlight-box img {
55
+ max-width: 100%;
56
+ height: auto;
57
+ }
58
 
59
+ @media (max-width: 768px) {
60
  .container {
61
+ padding: 20px 10px;
 
 
 
 
 
 
62
  }
63
 
64
+ table thead {
65
+ display: none;
 
 
66
  }
67
 
68
+ table, tbody, tr, td {
69
+ display: block;
70
  width: 100%;
 
71
  }
72
 
73
+ tr {
74
+ margin-bottom: 20px;
75
+ border-bottom: 1px solid #ccc;
 
 
76
  }
77
 
78
+ td {
79
+ padding-left: 10px;
80
+ padding-right: 10px;
81
+ }
82
 
83
+ td::before {
84
+ content: attr(data-label);
85
+ font-weight: bold;
86
+ display: block;
87
+ margin-bottom: 5px;
88
+ }
89
 
90
+ audio {
91
+ width: 100%;
 
92
  }
93
+ }
94
+ </style>
95
  </head>
96
  <body>
97