Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4

Commit

f48879f

verified ·

1 Parent(s): b5f5087

Update index.html

Browse files

Files changed (1) hide show

index.html +170 -376

index.html CHANGED Viewed

@@ -2,405 +2,199 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <title>Менеджер Ссылок iOS</title>
-    <!-- Подключение React и ReactDOM -->
-    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
-    <!-- Подключение Babel для JSX -->
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <style>
-        /* --- iOS 18 Inspired Styles --- */
-        :root {
-            --ios-system-blue: #007AFF;
-            --ios-system-red: #FF3B30;
-            --ios-system-gray: #8E8E93;
-            --ios-system-gray-2: #AEAEB2;
-            --ios-system-gray-3: #C7C7CC;
-            --ios-system-gray-4: #D1D1D6;
-            --ios-system-gray-5: #E5E5EA;
-            --ios-system-gray-6: #F2F2F7;
-            --ios-background-light: #FFFFFF; /* Primary Light Background */
-            --ios-secondary-background-light: #F2F2F7; /* Secondary Grouped Background */
-            --ios-label-light: #000000; /* Primary Text */
-            --ios-secondary-label-light: rgba(60, 60, 67, 0.6); /* Secondary Text */
-            --ios-separator-light: rgba(60, 60, 67, 0.29);
-            /* Dark Mode (Optional - basic setup) */
-            /* @media (prefers-color-scheme: dark) { ... } */
-        }
-        html {
-            /* Prevent elastic scrolling glow */
-            overscroll-behavior-y: none;
-        }
-        body {
-            margin: 0;
-            padding: 0; /* Remove default padding */
-            font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", "Arial", sans-serif;
-            background-color: var(--ios-secondary-background-light);
-            color: var(--ios-label-light);
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            font-size: 17px; /* Base iOS font size */
-            line-height: 1.4;
-            overscroll-behavior-y: contain; /* Prevent body scroll */
-            height: 100%; /* Ensure body takes full height */
-        }
-        #root {
-            max-width: 600px; /* Typical max width for content on larger screens */
-            margin: 0 auto;
-            background-color: var(--ios-secondary-background-light);
-            min-height: 100vh; /* Full height */
-            display: flex;
-            flex-direction: column;
-        }
-        .app-container {
-            padding: 0; /* Reset padding */
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1; /* Allow container to grow */
-        }
-        /* Navigation Bar Style Header */
-        .app-header {
-            background-color: rgba(249, 249, 249, 0.94); /* Slightly transparent background like iOS nav */
-            backdrop-filter: saturate(180%) blur(20px);
-            -webkit-backdrop-filter: saturate(180%) blur(20px);
-            border-bottom: 0.5px solid var(--ios-separator-light);
-            padding: 12px 16px;
-            text-align: center;
-            position: sticky;
-            top: 0;
-            z-index: 10;
-        }
-        .app-header h1 {
             margin: 0;
-            font-size: 17px; /* iOS Nav Bar Title Size */
-            font-weight: 600; /* Semibold */
-            color: var(--ios-label-light);
-        }
-        /* Main Content Area */
-        .content-area {
-            padding: 20px 0; /* Vertical padding, no horizontal padding here */
-            flex-grow: 1;
-        }
-        /* Section Styling (like grouped table view) */
-        .ios-section {
-            background-color: var(--ios-background-light);
-            margin: 0 16px 20px 16px; /* Standard iOS horizontal margins */
-            border-radius: 10px; /* iOS rounded corners */
-            overflow: hidden; /* Clip children to rounded corners */
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
-        }
-        .ios-section-header {
-            padding: 8px 16px;
-            font-size: 13px; /* Smaller header text */
-            color: var(--ios-secondary-label-light);
-            text-transform: uppercase;
-            font-weight: 500;
-            background-color: var(--ios-secondary-background-light); /* Header outside the white box */
-            margin: 0 -16px 0 -16px; /* Extend to edges if needed */
-            padding-left: 32px; /* Indent header text */
-            padding-right: 32px;
-        }
-        /* Form Styling */
-        .add-form {
-            padding: 16px;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-        .add-form input[type="url"],
-        .add-form input[type="text"] {
-            width: calc(100% - 24px); /* Account for padding */
-            padding: 11px 12px; /* iOS input padding */
-            border: 0.5px solid var(--ios-system-gray-4);
-            border-radius: 8px; /* Slightly less rounded than section */
-            font-size: 16px;
-            background-color: var(--ios-background-light); /* Ensure background matches */
-            color: var(--ios-label-light);
-            outline: none;
-            -webkit-appearance: none; /* Remove default iOS styling */
-            appearance: none;
-            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
         }
-        .add-form input[type="url"]:focus,
-        .add-form input[type="text"]:focus {
-            border-color: var(--ios-system-blue);
-            box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2); /* Subtle focus ring */
         }
-        .add-form button {
-            background-color: var(--ios-system-blue);
-            color: white;
-            border: none;
-            padding: 12px 16px;
-            border-radius: 8px;
-            font-size: 17px;
-            font-weight: 500;
-            cursor: pointer;
-            text-align: center;
-            transition: background-color 0.15s ease;
-            -webkit-appearance: none;
-            appearance: none;
         }
-        .add-form button:hover,
-        .add-form button:focus {
-            background-color: #0056b3; /* Darker blue on hover/focus */
-            outline: none;
-        }
-        /* Link List Styling */
-        .link-list {
-            list-style: none;
-            padding: 0;
-            margin: 0; /* Reset margin inside section */
-        }
-        .link-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 12px 16px; /* Standard iOS cell padding */
-            border-bottom: 0.5px solid var(--ios-separator-light);
-            gap: 10px;
-        }
-        /* Remove border from last item */
-        .link-item:last-child {
-            border-bottom: none;
-        }
-        .link-content {
-            flex-grow: 1;
-            min-width: 0; /* Allow content to shrink */
-        }
-        .link-description {
-            font-size: 16px;
-            font-weight: 400;
-            color: var(--ios-label-light);
-            margin-bottom: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .link-url {
-            font-size: 14px;
-            color: var(--ios-system-gray);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: block; /* Ensure it takes block space */
-            text-decoration: none; /* Remove default underline */
-        }
-        .link-url:hover {
-            color: var(--ios-system-blue); /* Highlight on hover */
-            text-decoration: underline;
-        }
-        .delete-button {
-            background-color: var(--ios-system-red);
-            color: white;
-            border: none;
-            border-radius: 50%; /* Circular button */
-            width: 28px;
-            height: 28px;
-            font-size: 16px;
-            font-weight: bold;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0; /* Prevent shrinking */
-            padding: 0;
-            line-height: 1;
-            transition: background-color 0.15s ease;
-            -webkit-appearance: none;
-            appearance: none;
-        }
-        .delete-button:hover,
-        .delete-button:focus {
-            background-color: #D92C2A; /* Darker red */
-            outline: none;
-        }
-        /* Empty State */
-        .empty-state {
-            text-align: center;
-            padding: 40px 20px;
-            color: var(--ios-secondary-label-light);
-            font-size: 16px;
-        }
-    </style>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="text/babel">
-        const { useState, useEffect, Fragment } = React;
-        // --- Утилита для работы с Local Storage ---
-        const useLocalStorage = (key, initialValue) => {
-            // Получаем из localStorage или используем initialValue
-            const [storedValue, setStoredValue] = useState(() => {
-                try {
-                    const item = window.localStorage.getItem(key);
-                    return item ? JSON.parse(item) : initialValue;
-                } catch (error) {
-                    console.error("Ошибка чтения из localStorage:", error);
-                    return initialValue;
-                }
-            });
-            // Обновляем localStorage при изменении state
-            useEffect(() => {
-                try {
-                    window.localStorage.setItem(key, JSON.stringify(storedValue));
-                } catch (error) {
-                    console.error("Ошибка записи в localStorage:", error);
-                }
-            }, [key, storedValue]);
-            return [storedValue, setStoredValue];
-        };
-        // --- Основной Компонент Приложения ---
-        function App() {
-            const [links, setLinks] = useLocalStorage('savedLinks', []);
-            const [newUrl, setNewUrl] = useState('');
-            const [newDescription, setNewDescription] = useState('');
-            const [error, setError] = useState(''); // Для отображения ошибок ввода
-            const isValidUrl = (string) => {
-                try {
-                    new URL(string);
-                    return true;
-                } catch (_) {
-                    return false;
-                }
-            };
-            const handleAddLink = (e) => {
-                e.preventDefault();
-                setError(''); // Сброс ошибки
-                if (!newDescription.trim()) {
-                     setError('Пожалуйста, введите описание ссылки.');
-                     return;
-                }
-                if (!newUrl.trim()) {
-                    setError('Пожалуйста, введите URL ссылки.');
-                    return;
-                }
-                if (!isValidUrl(newUrl.trim())) {
-                    setError('Пожалуйста, введите корректный URL (например, https://example.com).');
-                    return;
-                }
-                const newLink = {
-                    id: Date.now(), // Простой уникальный ID
-                    url: newUrl.trim(),
-                    description: newDescription.trim(),
-                };
-                setLinks([newLink, ...links]); // Добавляем новую ссылку в начало списка
-                setNewUrl('');
-                setNewDescription('');
-            };
-            const handleDeleteLink = (idToDelete) => {
-                setLinks(links.filter(link => link.id !== idToDelete));
-            };
-            return (
-                <div className="app-container">
-                    <header className="app-header">
-                        <h1>Мои Ссылки</h1>
-                    </header>
-                    <div className="content-area">
-                        {/* --- Форма добавления --- */}
-                        <div className="ios-section">
-                            <form className="add-form" onSubmit={handleAddLink}>
-                                <input
-                                    type="text"
-                                    value={newDescription}
-                                    onChange={(e) => setNewDescription(e.target.value)}
-                                    placeholder="Описание (напр., Документация React)"
-                                    aria-label="Описание ссылки"
-                                />
-                                <input
-                                    type="url"
-                                    value={newUrl}
-                                    onChange={(e) => setNewUrl(e.target.value)}
-                                    placeholder="URL (напр., https://reactjs.org)"
-                                    aria-label="URL ссылки"
-                                />
-                                 {error && <p style={{ color: 'var(--ios-system-red)', fontSize: '14px', margin: '-5px 0 5px 0' }}>{error}</p>}
-                                <button type="submit">Добавить ссылку</button>
-                            </form>
-                         </div>
-                        {/* --- Список ссылок --- */}
-                        <div className="ios-section">
-                            {links.length > 0 ? (
-                                <ul className="link-list">
-                                    {links.map(link => (
-                                        <li key={link.id} className="link-item">
-                                            <div className="link-content">
-                                                <div className="link-description">{link.description}</div>
-                                                <a
-                                                    href={link.url}
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                    className="link-url"
-                                                >
-                                                    {link.url}
-                                                </a>
-                                            </div>
-                                            <button
-                                                onClick={() => handleDeleteLink(link.id)}
-                                                className="delete-button"
-                                                aria-label={`Удалить ссылку ${link.description}`}
-                                            >
-                                                × {/* Крестик для удаления */}
-                                            </button>
-                                        </li>
-                                    ))}
-                                </ul>
-                            ) : (
-                                <div className="empty-state">
-                                    Нет сохраненных ссылок. Добавьте первую!
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            );
-        }
-        // --- Рендер приложения ---
-        const root = ReactDOM.createRoot(document.getElementById('root'));
-        root.render(<App />);
     </script>
 </body>
 </html>

 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Флагманский Корабль - Babylon.js</title>
     <style>
+        html, body {
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
             margin: 0;
+            padding: 0;
+            font-family: sans-serif;
+            background-color: #000; /* Черный фон для космоса */
+            color: #fff;
         }
+        #renderCanvas {
+            width: 100%;
+            height: 100%;
+            touch-action: none; /* Важно для сенсорных устройств */
+            display: block; /* Убирает лишнее пространство под canvas */
         }
+        #info {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background-color: rgba(0,0,0,0.5);
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 12px;
         }
+    </style>
+    <!-- Подключаем Babylon.js -->
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <!-- Дополнительные библиотеки для удобства (не обязательно, но полезно для сложных фигур) -->
+    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+    <div id="info">ЛКМ + Движение: Вращать камеру | Колесико: Зум</div>
+    <script>
+        // Получаем canvas элемент
+        const canvas = document.getElementById('renderCanvas');
+        // Создаем движок Babylon.js
+        const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+        // --- Функция создания сцены ---
+        const createScene = function () {
+            // Создаем сцену
+            const scene = new BABYLON.Scene(engine);
+            scene.clearColor = new BABYLON.Color3(0.02, 0.02, 0.05); // Темно-синий космос
+            // Создаем камеру - ArcRotateCamera удобна для осмотра объекта
+            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, BABYLON.Vector3.Zero(), scene);
+            camera.attachControl(canvas, true);
+            camera.lowerRadiusLimit = 5; // Минимальное приближение
+            camera.upperRadiusLimit = 50; // Максимальное отдаление
+            camera.wheelPrecision = 50; // Чувствительность зума колесиком
+            // Создаем свет
+            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
+            light.intensity = 0.8;
+            const pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(5, 10, -5), scene);
+            pointLight.intensity = 0.5;
+            // --- Создание модели корабля ---
+            // Создаем пустой "родительский" меш для всего корабля
+            // Это упрощает вращение и перемещение всей модели целиком
+            const flagship = new BABYLON.Mesh("flagship", scene);
+            // 1. Основной корпус (вытянутая сфера)
+            const body = BABYLON.MeshBuilder.CreateSphere("body", { diameterX: 6, diameterY: 1.5, diameterZ: 2 }, scene);
+            body.position.y = 0;
+            body.parent = flagship; // Делаем корпус дочерним к основному мешу
+            // 2. Кабина пилота (сфера поменьше спереди)
+            const cockpit = BABYLON.MeshBuilder.CreateSphere("cockpit", { diameter: 1.2 }, scene);
+            cockpit.position.x = 2.8; // Смещаем вперед по X
+            cockpit.position.y = 0.2; // Немного приподнимаем
+            cockpit.scaling.z = 1.5; // Слегка вытягиваем
+            cockpit.parent = flagship;
+            // 3. Крылья (плоские боксы)
+            const wingMat = new BABYLON.StandardMaterial("wingMat", scene);
+            wingMat.diffuseColor = new BABYLON.Color3(0.6, 0.6, 0.7); // Серый цвет
+            wingMat.specularColor = new BABYLON.Color3(0.3, 0.3, 0.3); // Небольшой блик
+            const wingLeft = BABYLON.MeshBuilder.CreateBox("wingLeft", { width: 1.5, height: 0.15, depth: 4 }, scene);
+            wingLeft.position = new BABYLON.Vector3(0, 0, -2.2); // Смещаем влево (по Z)
+            wingLeft.rotation.y = BABYLON.Tools.ToRadians(15); // Небольшой угол
+            wingLeft.parent = flagship;
+            wingLeft.material = wingMat;
+            const wingRight = wingLeft.clone("wingRight"); // Клонируем левое крыло
+            wingRight.position.z = 2.2; // Смещаем вправо
+            wingRight.rotation.y = BABYLON.Tools.ToRadians(-15); // Отражаем угол
+            wingRight.parent = flagship;
+            // 4. Двигатели (цилиндры сзади)
+            const engineMat = new BABYLON.StandardMaterial("engineMat", scene);
+            engineMat.diffuseColor = new BABYLON.Color3(0.3, 0.3, 0.3);
+            engineMat.emissiveColor = new BABYLON.Color3(1, 0.5, 0); // Оранжевое свечение!
+            engineMat.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
+            const engineLeft = BABYLON.MeshBuilder.CreateCylinder("engineLeft", { height: 1.5, diameter: 0.8 }, scene);
+            engineLeft.position = new BABYLON.Vector3(-3, 0, -1); // Сзади и слева
+            engineLeft.rotation.z = BABYLON.Tools.ToRadians(90); // Поворачиваем горизонтально
+            engineLeft.parent = flagship;
+            engineLeft.material = engineMat;
+            const engineRight = engineLeft.clone("engineRight");
+            engineRight.position.z = 1; // Сзади и справа
+            engineRight.parent = flagship;
+            // --- Материалы для основных частей ---
+            const bodyMat = new BABYLON.StandardMaterial("bodyMat", scene);
+            bodyMat.diffuseColor = new BABYLON.Color3(0.8, 0.85, 0.9); // Светло-серый / Белый
+            bodyMat.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5); // Сильный блик - металл
+            const cockpitMat = new BABYLON.StandardMaterial("cockpitMat", scene);
+            cockpitMat.diffuseColor = new BABYLON.Color3(0.2, 0.5, 1); // Синий
+            cockpitMat.alpha = 0.7; // Полупрозрачность
+            cockpitMat.specularColor = new BABYLON.Color3(0.8, 0.8, 1); // Яркий блик
+            body.material = bodyMat;
+            cockpit.material = cockpitMat;
+            // --- Анимация ---
+            scene.registerBeforeRender(function () {
+                // Медленное вращение всего корабля вокруг оси Y
+                 flagship.rotation.y += 0.005;
+                // Пульсация свечения двигателей (небольшое изменение emissiveColor)
+                const pulse = Math.abs(Math.sin(performance.now() * 0.002)); // Значение от 0 до 1
+                engineMat.emissiveColor = new BABYLON.Color3(1 * pulse, 0.5 * pulse, 0);
+            });
+            // --- Добавим немного "космической пыли" или звезд ---
+            const particleSystem = new BABYLON.ParticleSystem("stars", 5000, scene);
+            particleSystem.particleTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/flare.png", scene); // Простая текстура для частиц
+            // Где создавать частицы (большая сфера вокруг)
+            particleSystem.emitter = new BABYLON.Vector3(0, 0, 0); // Центр
+            particleSystem.minEmitBox = new BABYLON.Vector3(-100, -100, -100);
+            particleSystem.maxEmitBox = new BABYLON.Vector3(100, 100, 100);
+            // Цвета частиц
+            particleSystem.color1 = new BABYLON.Color4(0.8, 0.8, 1.0, 1.0);
+            particleSystem.color2 = new BABYLON.Color4(0.9, 0.9, 1.0, 1.0);
+            particleSystem.colorDead = new BABYLON.Color4(0.5, 0.5, 0.5, 0.1);
+            // Размер частиц
+            particleSystem.minSize = 0.1;
+            particleSystem.maxSize = 0.5;
+            // Время жизни
+            particleSystem.minLifeTime = 100; // Долгоживущие, т.к. они статичны
+            particleSystem.maxLifeTime = 100;
+            // Скорость эмиссии
+            particleSystem.emitRate = 500; // Создаем 500 сразу
+            // Направление не нужно, т.к. они стоят на месте
+            particleSystem.minEmitPower = 0;
+            particleSystem.maxEmitPower = 0;
+            particleSystem.updateSpeed = 0.01; // Очень медленное обновление
+            particleSystem.start();
+            return scene;
+        };
+        // --- Конец функции создания сцены ---
+        // Создаем сцену
+        const scene = createScene();
+        // Запускаем цикл рендеринга
+        engine.runRenderLoop(function () {
+            scene.render();
+        });
+        // Обрабатываем изменение размера окна
+        window.addEventListener('resize', function () {
+            engine.resize();
+        });
     </script>
 </body>
 </html>