Hugging Face's logo

Spaces:
DMTuit
/
psy4
Sleeping

App Files Community
DmitrMakeev commited on
Commit
ae6e9b7
•
1 Parent(s): 9b1428e

Update koleso.html

Browse files
Files changed (1) hide show
  1. koleso.html +115 -147
koleso.html CHANGED
@@ -1,163 +1,131 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>Spin N Win</title>
5
-
6
- <link rel="stylesheet" href="https://huggingface.co/spaces/DMTuit/psy4/resolve/main/css/main.css">
7
- <script src="https://huggingface.co/spaces/DMTuit/psy4/resolve/main/js/main.js"></script>
8
-
9
- <style>
10
-
11
- #wheelOfFortune {
12
- display: flex;
13
- flex-direction: column;
14
- align-items: center;
15
- justify-content: center;
16
- border: 2px solid #f82; /* Оранжевая окантовка для колеса */
17
- border-radius: 10px;
18
- padding: 20px;
19
- width: 90%;
20
- max-width: 400px;
21
- text-align: center;
22
- }
23
-
24
- #wheel {
25
- border: 2px solid #f82; /* Оранжевая окантовка для колеса */
26
- border-radius: 50%;
27
- }
28
-
29
- #spin {
30
- margin-top: 20px;
31
- padding: 10px 20px;
32
- border: 2px solid #f82; /* Оранжевая окантовка для кнопки Пуск */
33
- border-radius: 5px;
34
- background-color: black;
35
- color: white;
36
- cursor: pointer;
37
- transition: background-color 0.3s;
38
- }
39
-
40
- #spin:hover {
41
- background-color: #f82; /* Оранжевый фон при наведении на кнопку Пуск */
42
- }
43
-
44
-
45
- #registrationForm1 {
46
- display: none;
47
- background-color: black;
48
- padding: 20px;
49
- border: 2px solid #f82; /* Оранжевая окантовка для формы */
50
- border-radius: 10px;
51
- text-align: center;
52
- width: 90%;
53
- max-width: 400px;
54
- }
55
-
56
- #registrationForm1 h1 {
57
- color: #f82; /* Оранжевый цвет для заголовка */
58
- margin-bottom: 20px;
59
- }
60
-
61
-
62
-
63
-
64
-
65
- #registrationForm {
66
- display: none;
67
- background-color: black;
68
- padding: 20px;
69
- border: 2px solid #f82; /* Оранжевая окантовка для формы */
70
- border-radius: 10px;
71
- text-align: center;
72
- width: 90%;
73
- max-width: 400px;
74
- }
75
-
76
- #registrationForm h1 {
77
- color: #f82; /* Оранжевый цвет для заголовка */
78
- margin-bottom: 20px;
79
- }
80
-
81
- #registrationForm input[type="text"],
82
- #registrationForm input[type="email"],
83
- #registrationForm input[type="tel"] {
84
- width: calc(100% - 22px);
85
- padding: 10px;
86
- margin-bottom: 10px;
87
- border: 2px solid #f82; /* Оранжевая окантовка для полей ввода */
88
- border-radius: 5px;
89
- background-color: black;
90
- color: lightgray; /* Светло-серый цвет текста в полях ввода */
91
- }
92
-
93
- #registrationForm input[type="checkbox"] {
94
- margin-right: 5px;
95
- }
96
 
97
- #registrationForm button {
98
- width: 100%;
99
- padding: 15px; /* Увеличенная высота кнопки */
100
- border: none;
101
- border-radius: 5px;
102
- background-color: #f82; /* Оранжевая кнопка */
103
- color: black;
104
- font-weight: bold;
105
- cursor: pointer;
106
- transition: background-color 0.3s;
107
- }
108
 
109
- #registrationForm button:hover {
110
- background-color: #ff9900; /* Светло-оранжевый при наведении */
111
- }
 
 
 
112
 
113
- @media (max-width: 600px) {
114
- #registrationForm {
115
- width: 95%;
116
- }
117
- }
118
 
119
-
120
- </style>
 
 
 
 
 
 
 
 
121
 
 
 
 
122
 
123
-
124
- </head>
 
 
 
 
 
 
 
 
125
 
126
- <body>
 
 
 
127
 
 
 
 
 
 
 
 
 
 
 
 
128
 
 
 
 
129
 
130
- <!-- Форма ввода данных -->
131
- <div id="registrationForm1" "wheelOfFortune" style="display: none;">
132
- <h1>Ирина Дель Соль</h1>
133
- <form id="registration">
134
- <div id="wheelOfFortune">
135
- <canvas id="wheel" width="400" height="400"></canvas>
136
- <div id="spin">Пуск</div>
137
- <p>Текст снизу колеса</p>
138
- <a href="#">Ссылка снизу колеса</a>
139
- </div>
140
- </form>
141
- <p>Текст снизу формы</p>
142
- <a href="#">Ссылка снизу формы</a>
143
- </div>
144
 
 
 
 
145
 
146
-
147
- <!-- Форма ввода данных -->
148
- <div id="registrationForm" style="display: none;">
149
- <h1>Ирина Дель Соль</h1>
150
- <form id="registration">
151
- <input type="text" id="name" name="name" placeholder="Ваше имя" required><br>
152
- <input type="email" id="email" name="email" placeholder="Ваш email" required><br>
153
- <input type="tel" id="phone" name="phone" placeholder="Ваш телефон" required><br>
154
- <label><input type="checkbox" id="newsletter" name="newsletter"> Согласен на рассылку</label><br>
155
- <label><input type="checkbox" id="privacyPolicy" name="privacyPolicy" required> Знаком с политикой конфиденциальности</label><br>
156
- <button type="submit">Зарегистрироваться</button>
157
- </form>
158
- <p>Текст снизу формы</p>
159
- <a href="#">Ссылка снизу формы</a>
160
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
 
162
  <script>
163
  const sectors = [
@@ -265,4 +233,4 @@
265
  window.onload = init;
266
  </script>
267
  </body>
268
- </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Wheel of Fortune</title>
7
+ <style>
8
+ body {
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ height: 100vh;
13
+ background-color: black;
14
+ color: white;
15
+ font-family: Arial, sans-serif;
16
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
 
18
+ .container {
19
+ text-align: center;
20
+ }
 
 
 
 
 
 
 
 
21
 
22
+ #wheelOfFortune {
23
+ border: 2px solid #f82; /* Оранжевая окантовка для колеса */
24
+ border-radius: 10px;
25
+ padding: 20px;
26
+ margin-bottom: 20px;
27
+ }
28
 
29
+ #wheel {
30
+ border: 2px solid #f82; /* Оранжевая окантовка для колеса */
31
+ border-radius: 50%;
32
+ }
 
33
 
34
+ #spin {
35
+ margin-top: 20px;
36
+ padding: 10px 20px;
37
+ border: 2px solid #f82; /* Оранжевая окантовка для кнопки Пуск */
38
+ border-radius: 5px;
39
+ background-color: black;
40
+ color: white;
41
+ cursor: pointer;
42
+ transition: background-color 0.3s;
43
+ }
44
 
45
+ #spin:hover {
46
+ background-color: #f82; /* Оранжевый фон при наведении на кнопку Пуск */
47
+ }
48
 
49
+ #registrationForm {
50
+ display: none;
51
+ background-color: black;
52
+ padding: 30px; /* Увеличенный padding для формы */
53
+ border: 2px solid #f82; /* Оранжевая окантовка для формы */
54
+ border-radius: 10px;
55
+ text-align: center;
56
+ width: 90%;
57
+ max-width: 400px;
58
+ }
59
 
60
+ #registrationForm h1 {
61
+ color: #f82; /* Оранжевый цвет для заголовка */
62
+ margin-bottom: 20px;
63
+ }
64
 
65
+ #registrationForm input[type="text"],
66
+ #registrationForm input[type="email"],
67
+ #registrationForm input[type="tel"] {
68
+ width: calc(100% - 22px);
69
+ padding: 10px;
70
+ margin-bottom: 10px;
71
+ border: 2px solid #f82; /* Оранжевая окантовка для полей ввода */
72
+ border-radius: 5px;
73
+ background-color: black;
74
+ color: lightgray; /* Светло-серый цвет текста в полях ввода */
75
+ }
76
 
77
+ #registrationForm input[type="checkbox"] {
78
+ margin-right: 5px;
79
+ }
80
 
81
+ #registrationForm button {
82
+ width: 100%;
83
+ padding: 15px; /* Увеличенная высота кнопки */
84
+ border: none;
85
+ border-radius: 5px;
86
+ background-color: #f82; /* Оранжевая кнопка */
87
+ color: black;
88
+ font-weight: bold;
89
+ cursor: pointer;
90
+ transition: background-color 0.3s;
91
+ }
 
 
 
92
 
93
+ #registrationForm button:hover {
94
+ background-color: #ff9900; /* Светло-оранжевый при наведении */
95
+ }
96
 
97
+ @media (max-width: 600px) {
98
+ #registrationForm {
99
+ width: 95%;
100
+ }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <div class="container">
106
+ <div id="wheelOfFortune">
107
+ <h1>Ирина Дель Соль</h1>
108
+ <canvas id="wheel" width="300" height="300"></canvas>
109
+ <div id="spin">Пуск</div>
110
+ <p>Текст под колесом</p>
111
+ <a href="#">Ссылка под колесом</a>
112
+ </div>
113
+
114
+ <!-- Форма ввода данных -->
115
+ <div id="registrationForm" style="display: none;">
116
+ <h1>Ирина Дель Соль</h1>
117
+ <form id="registration">
118
+ <input type="text" id="name" name="name" placeholder="Ваше имя" required><br>
119
+ <input type="email" id="email" name="email" placeholder="Ваш email" required><br>
120
+ <input type="tel" id="phone" name="phone" placeholder="Ваш телефон" required><br>
121
+ <label><input type="checkbox" id="newsletter" name="newsletter"> Согласен на рассылку</label><br>
122
+ <label><input type="checkbox" id="privacyPolicy" name="privacyPolicy" required> Знаком с политикой конфиденциальности</label><br>
123
+ <button type="submit">Зарегистрироваться</button>
124
+ </form>
125
+ <p>Текст под формой</p>
126
+ <a href="#">Ссылка под формой</a>
127
+ </div>
128
+ </div>
129
 
130
  <script>
131
  const sectors = [
 
233
  window.onload = init;
234
  </script>
235
  </body>
236
+ </html>