Не могу сделать страницу

@Lois · Регистрация: 29.05.2013

Студворк — интернет-сервис помощи студентам

Попробовал с помощью ИИ создать страницу на html . Почему то она открывается и виден только код, а не сама страница.
Может кто-то исправить ?
Вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Человек создаёт будущее</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
 
body, html {
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
 
canvas {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 0;
width: 100%;
height: 100%;
}
 
.container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
padding: 20px;
color: white;
animation: fadeIn 1s ease-in-out;
}
 
h1 {
font-size: 2.5rem;
line-height: 1.3;
font-weight: bold;
margin-bottom: 1.5rem;
animation: fadeInUp 1s ease-in-out;
}
 
h1 span {
color: #3b82f6; /* blue-500 */
}
 
p {
font-size: 1.1rem;
max-width: 700px;
opacity: 0.9;
margin-bottom: 2rem;
animation: fadeInUp 1.5s ease-in-out;
}
 
a.button {
display: inline-block;
padding: 12px 24px;
background-color: #3b82f6;
color: white;
border-radius: 9999px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.3s ease;
}
 
a.button:hover {
background-color: #2563eb;
}
 
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
z-index: 10;
}
 
.scroll-indicator svg {
width: 32px;
height: 32px;
fill: white;
}
 
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% {
 
transform: translateX(-50%) translateY(10px); }
}
 
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
 
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
 
section.more {
padding: 5rem 2rem;
background-color: rgba(31, 41, 55, 0.8); /* gray-800 с прозрачностью */
backdrop-filter: blur(10px);
color: white;
text-align: center;
}
 
section.more h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
 
section.more p {
font-size: 1.1rem;
max-width: 700px;
margin: 1rem auto;
opacity: 0.9;
}
</style>
</head>
<body>
 
<canvas id="backgroundCanvas"></canvas>
 
<div class="container">
<h1>
Человек создаёт <span>самостоятельно</span> будущее
</h1>
<p>
Не технологии, не обстоятельства, а <strong>выбор человека</strong> формирует то, что станет реальностью завтра.
С каждым шагом мы пишем новую главу истории.
</p>
<a href="#more" class="button">Узнать больше</a>
<div class="scroll-indicator">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
</div>
</div>
 
<section id="more" class="more">
<h2>Что значит быть творцом будущего?</h2>
<p>
Это осознанность, ответственность и смелость принимать решения, которые сегодня кажутся невозможными.
Будущее не предопределено — оно рождается из действий каждого из нас.
</p>
<p>
От маленьких выборов до великих свершений — вы являетесь автором того мира, в котором мы будем жить.
</p>
</section>
 
<script>
const canvas = document.getElementById('backgroundCanvas');
const ctx = canvas.getContext('2d');
let width, height;
const particles = [];
const particleCount = 100;
 
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.radius = Math.random() * 2 + 1;
this.vx = (Math.random() - 0.5) * 0.5;
this.vy = (Math.random() - 0.5) * 0.5;
this.alpha = Math.random() * 0.5 + 0.3;
}
 
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255,255,255,${this.alpha})`;
ctx.fill();
}
 
update() {
this.x += this.vx;
this.y += this.vy;
 
if (this.x < 0 || this.x > width) this.vx *= -1;
if (this.y < 0 || this.y > height) this.vy *= -1;
}
}
 
function init() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
 
particles.length = 0;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
 
function animate() {
ctx.fillStyle = 'rgba(17, 24, 39, 0.2)';
ctx.fillRect(0, 0, width, height);
 
particles.forEach(p => {
p.update();
p.draw();
});
 
requestAnimationFrame(animate);
}
 
window.addEventListener('resize', init);
 
init();
animate();
</script>
 
</body>
</html>

@grim1603 · 13.05.2025, 16:24

Lois, может следует сохранить файл с расширением html и открыть с помощью браузера?

@Lois · 13.05.2025, 17:50 **[ТС]**

Сообщение от grim1603

Lois, может следует сохранить файл с расширением html и открыть с помощью браузера?

именно это я и сделал. Открывается в виде кода.

@andrey_f · 14.05.2025, 12:55

Сообщение от Lois

именно это я и сделал.

нет, вы скорее всего сохранили его как *.html.txt, нужно, что бы было *.html

@Lois · 14.05.2025, 13:06 **[ТС]**

Сообщение от andrey_f

нет, вы скорее всего сохранили его как *.html.txt, нужно, что бы было *.html

нет. Именно html

@voraa · 14.05.2025, 13:15

Сообщение от Lois

нет. Именно html

Ну вот я прямо сейчас сохранил ваш код в файл и спокойно смотрю страницу в браузере

@Lois · 14.05.2025, 15:25 **[ТС]**

Сообщение от voraa

Ну вот я прямо сейчас сохранил ваш код в файл и спокойно смотрю страницу в браузере

а почему у меня этот номер не выходит ??? Сохранил в ворде в формате html. Кликаю на файл открывается код.
Ну в принципе я уже понял, что это такое. Так что спасибо.

@voraa · 14.05.2025, 15:32

Сообщение от Lois

Сохранил в ворде

Именно поэтому

@Lois · 14.05.2025, 15:34 **[ТС]**

Сообщение от voraa

Именно поэтому

а в чём тогда надо сохранять???

@voraa · 14.05.2025, 15:39

Сообщение от Lois

а в чём тогда надо сохранять???

Да любым обычным текстовым редактором. Который работает с текстом без всякого дополнительного форматирования.
Хоть notepad, хоть Vscode...
Как вариант - Notepad++ (а мне еще Notepad2 нравится - если что простенькое быстренько набить - обычно им пользуюсь, хоть он и устарел уже)

avedeo · 14.05.2025, 15:45

Нормально открывается, использую BlueFish, Chromium и Firefox

@Lois · 14.05.2025, 19:11 **[ТС]**

Сообщение от voraa

Как вариант - Notepad++

спасибо. Скачал, всё получилось. Но вообще довольно странно, давно делал подобные варианты в ворде, всё было нормально.

Добавлено через 29 минут
В общем я хотел, чтобы она создала мне страницу с экспериментальным дизайном.
Саму тему этого дизайна также придумала нейросеть.
В результате получил в принципе чепуху.
Вот она

https://ottyg.narod.ru/zhivoj_interfejs.html

@voraa · 14.05.2025, 19:16

Сообщение от Lois

В результате получил в принципе чепуху.
Вот она
https://ottyg.narod.ru/zhivoj_interfejs.html

Живого дизайнера надо убить за такой дизайн. И запретить ему работать по профессии.
Жалко, что с ИИ так нельзя поступить.

@Lois · 14.05.2025, 20:33 **[ТС]**

Сообщение от voraa

Живого дизайнера надо убить за такой дизайн. И запретить ему работать по профессии.
Жалко, что с ИИ так нельзя поступить.

ну вот вариант более интересный

https://ottyg.narod.ru/zhivoj_interfejs3.html

В принципе, если долго экспериментировать, то можно получить что-то ценное.

@voraa · 14.05.2025, 20:44

Сообщение от Lois

ну вот вариант более интересный

И вы можете внимательно читать текст, когда вокруг все мерцает переливается и двигается?

@Lois · 14.05.2025, 21:12 **[ТС]**

Сообщение от voraa

И вы можете внимательно читать текст, когда вокруг все мерцает переливается и двигается?

ну не совсем всё передвигается и переливается... . Я проверил, можно нормально прочесть текст. Никаких проблем.

@Alex1126 · 14.05.2025, 21:49

Сообщение от Lois

Сохранил в ворде в формате html

в ворде надо был сохранять в формате txt, а имя давать с расширением html. А так вас ворд понял что вам надо сохранить документ в формате hml, и что бы этот html показывал вам то что вы видете на экране ворда

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@grim1603 Заблокирован
	13.05.2025, 16:24
	Lois, может следует сохранить файл с расширением html и открыть с помощью браузера? 1

avedeo -610 / 35 / 0 Регистрация: 10.03.2025 Сообщений: 485
	14.05.2025, 15:45
	Нормально открывается, использую BlueFish, Chromium и Firefox Миниатюры 0