Подключен React

2024-08-16 16:55:37 +03:00 · 2024-08-16 16:55:37 +03:00 · 98bfb4196b
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
+        <meta name="robots" content="none" />
+        <title>Настройки</title>
+        <link rel="icon" href="%PUBLIC_URL%/favicon.svg" type="image/svg+xml" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" type="text/css" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" type="text/css" />
+        <script src="https://telegram.org/js/telegram-web-app.js" type="text/javascript"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', async () => {
+                const link = document.createElement('link')
+                const href = new URL(location)
+                href.pathname = `%PUBLIC_URL%/${window.Telegram.WebApp.colorScheme}-theme.css`
+                link.rel = 'stylesheet'
+                link.href = href.toString()
+                link.type = 'text/css'
+                document.head.append(link)
+
+                window.Telegram.WebApp.ready()
+            })
+        </script>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@ -0,0 +1,21 @@
+#root {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 0;
+    background-color: var(--md-sys-color-surface-container-high);
+    scroll-behavior: smooth;
+}
+
+main {
+    padding: 1rem;
+}
+
+main > * {
+    width: 100%;
+}
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+
+import { styles as typescaleStyles } from '@material/web/typography/md-typescale-styles.js';
+import '@material/web/switch/switch.js';
+
+import './App.css'
+
+function App() {
+    useEffect(() => {
+        document.adoptedStyleSheets = [typescaleStyles.styleSheet]
+    }, [])
+    return (
+        <main className="App">
+            <md-outlined-text-field id="text" label="Favorite color"></md-outlined-text-field>
+            <md-switch id="switch"></md-switch>
+        </main>
+      // <div className="App">
+      //   <header className="App-header">
+      //     <img src={logo} className="App-logo" alt="logo"/>
+      //     <p>
+      //       Edit <code>src/App.js</code> and save to reload.
+      //       </p>
+      //       <a
+      //         className="App-link"
+      //         href="https://reactjs.org"
+      //         target="_blank"
+      //         rel="noopener noreferrer"
+      //       >
+      //         Learn React
+      //       </a>
+      //     </header>
+      //   </div>
+      )
+}
+
+export default App
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,4 @@
+body {
+    margin: 0;
+    scroll-behavior: smooth;
+}
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import BottomNavBar from "./BottomNavBar";
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <React.StrictMode>
+        <App />
+        <BottomNavBar />
+    </React.StrictMode>
+);