Hugging Face's logo

Spaces:
soiz1
/
Radio-Exercise_No.1
Running

App Files Community
soiz1 commited on
Commit
86e7685
·
verified ·
1 Parent(s): d38f32c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +62 -54
index.html CHANGED
@@ -1,57 +1,65 @@
1
- <!DOCTYPE html>
2
- <html lang="ja">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>動画プレイヤー</title>
6
- <style>
7
- body {
8
- display: flex;
9
- flex-direction: column;
10
- align-items: center;
11
- justify-content: center;
12
- background-color: #f0f0f0;
13
- font-family: sans-serif;
14
- padding: 20px;
15
- height: 100vh;
16
- margin: 0;
17
- }
18
- video {
19
- max-width: 100%;
20
- height: auto;
21
- margin-bottom: 10px;
22
- }
23
- .controls {
24
- display: flex;
25
- flex-direction: column;
26
- gap: 15px;
27
- width: 100%;
28
- max-width: 700px;
29
- text-align: center;
30
- }
31
- .control-group {
32
- display: flex;
33
- align-items: center;
34
- justify-content: center;
35
- gap: 10px;
36
- flex-wrap: wrap; /* 必要なら追加、狭い画面対応 */
37
- }
38
- .control-group label {
39
- white-space: nowrap;
40
- min-width: 80px;
41
- }
42
- input[type="range"] {
43
- flex: none;
44
- }
45
- input[type="number"] {
46
- width: 60px;
47
- }
48
- button {
49
- margin-top: 10px;
50
- }
51
- select {
52
- margin-top: 10px;
53
- }
54
- </style>
 
 
 
 
 
 
 
 
55
 
56
  </head>
57
  <body>
 
1
+ <style>
2
+ body {
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: center;
6
+ background-color: #f0f0f0;
7
+ font-family: sans-serif;
8
+ padding: 20px;
9
+ }
10
+
11
+ video {
12
+ max-width: 100%;
13
+ height: auto;
14
+ margin-bottom: 10px;
15
+ }
16
+
17
+ .controls {
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 15px;
21
+ width: 100%;
22
+ max-width: 800px;
23
+ }
24
+
25
+ .control-group {
26
+ display: flex;
27
+ flex-direction: row; /* 横並び */
28
+ align-items: center;
29
+ justify-content: flex-start;
30
+ gap: 10px;
31
+ flex-wrap: nowrap;
32
+ }
33
+
34
+ .control-group label {
35
+ white-space: nowrap; /* 改行しない */
36
+ min-width: 100px; /* ラベル幅を統一 */
37
+ text-align: right;
38
+ }
39
+
40
+ input[type="range"] {
41
+ flex-grow: 1; /* スライダーが伸びて余白を埋める */
42
+ }
43
+
44
+ input[type="number"] {
45
+ width: 80px;
46
+ }
47
+
48
+ button {
49
+ align-self: flex-start;
50
+ }
51
+
52
+ select {
53
+ width: 300px;
54
+ }
55
+
56
+ .video-selector {
57
+ margin-top: 15px;
58
+ display: flex;
59
+ align-items: center;
60
+ gap: 10px;
61
+ }
62
+ </style>
63
 
64
  </head>
65
  <body>