├── CNAME
├── .gitignore
├── images
    ├── avatar.jpg
    ├── favicon.ico
    ├── preview.jpg
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── fireplace_back.jpg
    ├── apple-touch-icon.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    └── about.txt
├── site.webmanifest
├── styles.css
├── package.json
├── publish.js
├── index_source.html
├── index.html
├── tools
    └── tokens.html
├── games.json
└── tests
    ├── test1.html
    ├── fire.html
    ├── pressure.html
    ├── pressure_v2.html
    ├── test2.html
    ├── beast_test.html
    ├── speedtest.html
    └── trader.html


/CNAME:
--------------------------------------------------------------------------------
1 | gritsenko.biz


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Node.js dependencies
2 | node_modules


--------------------------------------------------------------------------------
/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/avatar.jpg


--------------------------------------------------------------------------------
/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/favicon.ico


--------------------------------------------------------------------------------
/images/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/preview.jpg


--------------------------------------------------------------------------------
/images/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/favicon-16x16.png


--------------------------------------------------------------------------------
/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/favicon-32x32.png


--------------------------------------------------------------------------------
/images/fireplace_back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/fireplace_back.jpg


--------------------------------------------------------------------------------
/images/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/apple-touch-icon.png


--------------------------------------------------------------------------------
/images/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/android-chrome-192x192.png


--------------------------------------------------------------------------------
/images/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gritsenko/gritsenko.github.io/main/images/android-chrome-512x512.png


--------------------------------------------------------------------------------
/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/images/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/images/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/images/about.txt:
--------------------------------------------------------------------------------
1 | This favicon was generated using the following graphics from Twitter Twemoji:
2 | 
3 | - Graphics Title: 1f47e.svg
4 | - Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
5 | - Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f47e.svg
6 | - Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
7 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | /* styles.css */
 2 | .card {
 3 |     overflow: hidden; /* Ensure the card clips the image */
 4 |   }
 5 |   
 6 |   .card-img-top {
 7 |     transition: transform 0.3s ease; /* Apply transition to image */
 8 |   }
 9 |   
10 |   .card:hover .card-img-top {
11 |     transform: scale(1.1); /* Zoom in the image */
12 |   }
13 | 
14 |   .profile-picture {
15 |     width: 100px;
16 |     height: 100px;
17 |     border-radius: 50%; /* This creates a circular shape */
18 |     margin-right: 20px; /* Adjust spacing as needed */
19 |     display: inline-block; /* Display image inline with paragraph */
20 |     vertical-align: middle; /* Align image vertically with paragraph */
21 |   }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "dependencies": {
 3 |     "axios": "^1.6.8",
 4 |     "canvas": "^3.1.2",
 5 |     "handlebars": "^4.7.8",
 6 |     "sharp": "^0.34.3"
 7 |   },
 8 |   "name": "aisite",
 9 |   "version": "1.0.0",
10 |   "main": "app.js",
11 |   "scripts": {
12 |     "test": "echo \"Error: no test specified\" && exit 1",
13 |     "generate-quote": "node generate-quote-image.js",
14 |     "generate-enhanced": "node generate-enhanced.js",
15 |     "batch-generate": "node batch-generate.js",
16 |     "generate-og": "node og-integration.js generate-og",
17 |   "build-og-cache": "node og-integration.js bulk-og 1 50",
18 |   "build-quote-pages": "node statham/scripts/build-quote-pages.js"
19 |   },
20 |   "keywords": [],
21 |   "author": "",
22 |   "license": "ISC",
23 |   "description": ""
24 | }
25 | 


--------------------------------------------------------------------------------
/publish.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | node publish.js YOUR_API_KEY (from itch.io)
 3 | */
 4 | const fs = require('fs');
 5 | const Handlebars = require('handlebars');
 6 | const axios = require('axios');
 7 | 
 8 | // Get API key from command line arguments
 9 | const apiKey = process.argv[2];
10 | 
11 | //downloading josn from itchio api
12 | if (apiKey) {
13 |     // URL to fetch data from
14 |     const apiUrl = `https://itch.io/api/1/${apiKey}/my-games`;
15 | 
16 |     // Function to fetch data and save it to a JSON file
17 |     async function fetchDataAndSave() {
18 |         try {
19 |             const response = await axios.get(apiUrl);
20 |             const jsonData = response.data;
21 | 
22 |             // Save data to a JSON file
23 |             fs.writeFileSync('games.json', JSON.stringify(jsonData, null, 2));
24 |             console.log('Data saved to games.json successfully.');
25 |         } catch (error) {
26 |             console.error('Error fetching or saving data:', error.message);
27 |         }
28 |     }
29 | 
30 |     // Call the function to fetch data and save it
31 |     fetchDataAndSave();
32 | } else {
33 |     console.error('Please provide the API key as a command line argument.');
34 |     console.error('Continuing with old data...');
35 |     //process.exit(1);
36 | }
37 | 
38 | // Read the template file
39 | fs.readFile('index_source.html', 'utf8', (err, templateSource) => {
40 |     if (err) {
41 |         console.error('Error reading template file:', err);
42 |         return;
43 |     }
44 | 
45 |     // Compile the template
46 |     const template = Handlebars.compile(templateSource);
47 | 
48 |     // Read the games data from JSON
49 |     fs.readFile('games.json', 'utf8', (err, jsonData) => {
50 |         if (err) {
51 |             console.error('Error reading JSON data:', err);
52 |             return;
53 |         }
54 | 
55 |         // Parse JSON
56 |         const data = JSON.parse(jsonData);
57 | 
58 |         // Generate HTML using the template and data
59 |         const html = template({ games: data.games });
60 | 
61 |         // Write the generated HTML to index.html
62 |         fs.writeFile('index.html', html, (err) => {
63 |             if (err) {
64 |                 console.error('Error writing HTML file:', err);
65 |                 return;
66 |             }
67 |             console.log('index.html generated successfully.');
68 |         });
69 |     });
70 | });
71 | 


--------------------------------------------------------------------------------
/index_source.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Gritsenko BIZ</title>
  8 | 
  9 |   <!-- Open Graph meta tags -->
 10 |   <meta property="og:title" content="Igor Gritsenko handsome">
 11 |   <meta property="og:description" content="Check out these awesome games!">
 12 |   <meta property="og:image" content="https://gritsenko.biz/images/preview.jpg">
 13 |   <!-- Replace with your image URL -->
 14 |   <meta property="og:url" content="https://gritsenko.biz"> <!-- Replace with your page URL -->
 15 |   <meta property="og:type" content="website">
 16 |   <meta property="og:site_name" content="Igor gritsenko is the best">
 17 |   <meta property="og:image:width" content="1024">
 18 |   <meta property="og:image:height" content="1024">
 19 | 
 20 |   <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
 21 |   <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
 22 |   <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
 23 |   <link rel="manifest" href="/site.webmanifest">
 24 | 
 25 |   <!-- Bootstrap CSS -->
 26 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 27 |   <!-- Custom CSS -->
 28 |   <link rel="stylesheet" href="styles.css">
 29 | </head>
 30 | 
 31 | <body>
 32 |   <!-- Yandex.Metrika counter -->
 33 |   <script type="text/javascript">
 34 |     (function (m, e, t, r, i, k, a) {
 35 |       m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
 36 |       m[i].l = 1 * new Date();
 37 |       for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
 38 |       k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
 39 |     })
 40 |       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 41 | 
 42 |     ym(98653129, "init", {
 43 |       clickmap: true,
 44 |       trackLinks: true,
 45 |       accurateTrackBounce: true
 46 |     });
 47 |   </script>
 48 |   <noscript>
 49 |     <div><img src="https://mc.yandex.ru/watch/98653129" style="position:absolute; left:-9999px;" alt="" /></div>
 50 |   </noscript>
 51 |   <!-- /Yandex.Metrika counter -->
 52 | 
 53 |   <nav class="navbar navbar-expand-lg navbar-light bg-light">
 54 |     <div class="container">
 55 |       <a class="navbar-brand" href="#">Igor Gritsenko</a>
 56 |       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
 57 |         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 58 |         <span class="navbar-toggler-icon"></span>
 59 |       </button>
 60 |       <div class="collapse navbar-collapse" id="navbarSupportedContent">
 61 |         <ul class="navbar-nav ml-auto">
 62 |           <li class="nav-item">
 63 |             <a class="nav-link" href="#about">About</a>
 64 |           </li>
 65 |           <li class="nav-item">
 66 |             <a class="nav-link" href="#portfolio">Portfolio</a>
 67 |           </li>
 68 |           <li class="nav-item">
 69 |             <a class="nav-link" href="#contact">Contact</a>
 70 |           </li>
 71 |         </ul>
 72 |       </div>
 73 |     </div>
 74 |   </nav>
 75 | 
 76 |   <section id="about" class="container py-5">
 77 | 
 78 |     <h2>About Me</h2>
 79 | 
 80 |     <img src="images/avatar.jpg" class="profile-picture" alt="Your Name">
 81 |     <div style="display: inline-block;">
 82 |       <p>Hello! I'm Igor <br />
 83 |         and I'm indie developer.
 84 |       </p>
 85 |     </div>
 86 |   </section>
 87 | 
 88 |   <section id="portfolio" class="container py-5">
 89 |     <h2>Portfolio</h2>
 90 |     <div id="game-cards" class="row">
 91 | 
 92 |       {{#each games}}
 93 |       <div class="col-md-4">
 94 |         <div class="card mb-4">
 95 |           <a href="{{ url }}" target="_blank">
 96 |             <img src="{{ cover_url }}" class="card-img-top" alt="{{ title }}">
 97 |           </a>
 98 |           <div class="card-body">
 99 |             <h5 class="card-title">{{ title }}</h5>
100 |             <p class="card-text">{{ short_text }}</p>
101 |             <a href="{{ url }}" class="btn btn-primary" target="_blank">Play</a>
102 |           </div>
103 |         </div>
104 |       </div>
105 |       {{/each}}
106 | 
107 |     </div>
108 |   </section>
109 | 
110 |   <section id="contact" class="container py-5">
111 |     <h2>Contact Me</h2>
112 |     <p>You can not reach me if you don't know me</p>
113 |   </section>
114 | 
115 |   <!-- Bootstrap JS and dependencies -->
116 |   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
117 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
118 |   <!-- Custom JavaScript -->
119 | 
120 | </body>
121 | 
122 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Gritsenko BIZ</title>
  8 | 
  9 |   <!-- Open Graph meta tags -->
 10 |   <meta property="og:title" content="Igor Gritsenko handsome">
 11 |   <meta property="og:description" content="Check out these awesome games!">
 12 |   <meta property="og:image" content="https://gritsenko.biz/images/preview.jpg">
 13 |   <!-- Replace with your image URL -->
 14 |   <meta property="og:url" content="https://gritsenko.biz"> <!-- Replace with your page URL -->
 15 |   <meta property="og:type" content="website">
 16 |   <meta property="og:site_name" content="Igor gritsenko is the best">
 17 |   <meta property="og:image:width" content="1024">
 18 |   <meta property="og:image:height" content="1024">
 19 | 
 20 |   <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
 21 |   <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
 22 |   <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
 23 |   <link rel="manifest" href="/site.webmanifest">
 24 | 
 25 |   <!-- Bootstrap CSS -->
 26 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 27 |   <!-- Custom CSS -->
 28 |   <link rel="stylesheet" href="styles.css">
 29 | </head>
 30 | 
 31 | <body>
 32 |   <!-- Yandex.Metrika counter -->
 33 |   <script type="text/javascript">
 34 |     (function (m, e, t, r, i, k, a) {
 35 |       m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
 36 |       m[i].l = 1 * new Date();
 37 |       for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
 38 |       k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
 39 |     })
 40 |       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 41 | 
 42 |     ym(98653129, "init", {
 43 |       clickmap: true,
 44 |       trackLinks: true,
 45 |       accurateTrackBounce: true
 46 |     });
 47 |   </script>
 48 |   <noscript>
 49 |     <div><img src="https://mc.yandex.ru/watch/98653129" style="position:absolute; left:-9999px;" alt="" /></div>
 50 |   </noscript>
 51 |   <!-- /Yandex.Metrika counter -->
 52 | 
 53 |   <nav class="navbar navbar-expand-lg navbar-light bg-light">
 54 |     <div class="container">
 55 |       <a class="navbar-brand" href="#">Igor Gritsenko</a>
 56 |       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
 57 |         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 58 |         <span class="navbar-toggler-icon"></span>
 59 |       </button>
 60 |       <div class="collapse navbar-collapse" id="navbarSupportedContent">
 61 |         <ul class="navbar-nav ml-auto">
 62 |           <li class="nav-item">
 63 |             <a class="nav-link" href="#about">About</a>
 64 |           </li>
 65 |           <li class="nav-item">
 66 |             <a class="nav-link" href="#portfolio">Portfolio</a>
 67 |           </li>
 68 |           <li class="nav-item">
 69 |             <a class="nav-link" href="#contact">Contact</a>
 70 |           </li>
 71 |         </ul>
 72 |       </div>
 73 |     </div>
 74 |   </nav>
 75 | 
 76 |   <section id="about" class="container py-5">
 77 | 
 78 |     <h2>About Me</h2>
 79 | 
 80 |     <img src="images/avatar.jpg" class="profile-picture" alt="Your Name">
 81 |     <div style="display: inline-block;">
 82 |       <p>Hello! I'm Igor <br />
 83 |         and I'm indie developer.
 84 |       </p>
 85 |     </div>
 86 |   </section>
 87 | 
 88 |   <section id="portfolio" class="container py-5">
 89 |     <h2>Portfolio</h2>
 90 |     <div id="game-cards" class="row">
 91 | 
 92 |       <div class="col-md-4">
 93 |         <div class="card mb-4">
 94 |           <a href="https://gritsenko.itch.io/bublepop-rpg" target="_blank">
 95 |             <img src="https://img.itch.zone/aW1nLzE1Nzc2ODU2LnBuZw&#x3D;&#x3D;/315x250%23c/rbzo6f.png" class="card-img-top" alt="BubblePop RPG">
 96 |           </a>
 97 |           <div class="card-body">
 98 |             <h5 class="card-title">BubblePop RPG</h5>
 99 |             <p class="card-text">Pop bubbles to hit enemies</p>
100 |             <a href="https://gritsenko.itch.io/bublepop-rpg" class="btn btn-primary" target="_blank">Play</a>
101 |           </div>
102 |         </div>
103 |       </div>
104 |       <div class="col-md-4">
105 |         <div class="card mb-4">
106 |           <a href="https://gritsenko.itch.io/drunking-ded" target="_blank">
107 |             <img src="https://img.itch.zone/aW1nLzkzNDkzMDEuanBn/315x250%23c/yNXIKc.jpg" class="card-img-top" alt="Drunking Ded">
108 |           </a>
109 |           <div class="card-body">
110 |             <h5 class="card-title">Drunking Ded</h5>
111 |             <p class="card-text">Physical shooter for gamejam</p>
112 |             <a href="https://gritsenko.itch.io/drunking-ded" class="btn btn-primary" target="_blank">Play</a>
113 |           </div>
114 |         </div>
115 |       </div>
116 |       <div class="col-md-4">
117 |         <div class="card mb-4">
118 |           <a href="https://gritsenko.itch.io/fluid-player-prototype" target="_blank">
119 |             <img src="https://img.itch.zone/aW1nLzkzNDk4MDQuanBn/315x250%23c/tk9aYT.jpg" class="card-img-top" alt="Fluid Player Prototype">
120 |           </a>
121 |           <div class="card-body">
122 |             <h5 class="card-title">Fluid Player Prototype</h5>
123 |             <p class="card-text"></p>
124 |             <a href="https://gritsenko.itch.io/fluid-player-prototype" class="btn btn-primary" target="_blank">Play</a>
125 |           </div>
126 |         </div>
127 |       </div>
128 |       <div class="col-md-4">
129 |         <div class="card mb-4">
130 |           <a href="https://gritsenko.itch.io/goosiality" target="_blank">
131 |             <img src="https://img.itch.zone/aW1nLzE3OTM2MTYxLmpwZw&#x3D;&#x3D;/315x250%23c/Z%2BHSym.jpg" class="card-img-top" alt="Gooseyality">
132 |           </a>
133 |           <div class="card-body">
134 |             <h5 class="card-title">Gooseyality</h5>
135 |             <p class="card-text">My games Jam 2020</p>
136 |             <a href="https://gritsenko.itch.io/goosiality" class="btn btn-primary" target="_blank">Play</a>
137 |           </div>
138 |         </div>
139 |       </div>
140 |       <div class="col-md-4">
141 |         <div class="card mb-4">
142 |           <a href="https://gritsenko.itch.io/jun-wick-battle" target="_blank">
143 |             <img src="https://img.itch.zone/aW1nLzE1Njc1MzE1LnBuZw&#x3D;&#x3D;/315x250%23c/FEDVW%2F.png" class="card-img-top" alt="Jun Wick Battle">
144 |           </a>
145 |           <div class="card-body">
146 |             <h5 class="card-title">Jun Wick Battle</h5>
147 |             <p class="card-text">Battler game for my.games Game jam 2021</p>
148 |             <a href="https://gritsenko.itch.io/jun-wick-battle" class="btn btn-primary" target="_blank">Play</a>
149 |           </div>
150 |         </div>
151 |       </div>
152 |       <div class="col-md-4">
153 |         <div class="card mb-4">
154 |           <a href="https://gritsenko.itch.io/monkey-business" target="_blank">
155 |             <img src="https://img.itch.zone/aW1nLzIyNzIzMjcyLnBuZw&#x3D;&#x3D;/315x250%23c/nrWAOv.png" class="card-img-top" alt="Monkey Business: Frutti Rush">
156 |           </a>
157 |           <div class="card-body">
158 |             <h5 class="card-title">Monkey Business: Frutti Rush</h5>
159 |             <p class="card-text">​Shoot fruits, get combos, make some juce!</p>
160 |             <a href="https://gritsenko.itch.io/monkey-business" class="btn btn-primary" target="_blank">Play</a>
161 |           </div>
162 |         </div>
163 |       </div>
164 |       <div class="col-md-4">
165 |         <div class="card mb-4">
166 |           <a href="https://gritsenko.itch.io/nort" target="_blank">
167 |             <img src="https://img.itch.zone/aW1hZ2UvNzgxMjUvMzY0OTkzLnBuZw&#x3D;&#x3D;/315x250%23c/eR9utY.png" class="card-img-top" alt="Nort 2D: Cyber billiard">
168 |           </a>
169 |           <div class="card-body">
170 |             <h5 class="card-title">Nort 2D: Cyber billiard</h5>
171 |             <p class="card-text">Old school style billiard and puzzle</p>
172 |             <a href="https://gritsenko.itch.io/nort" class="btn btn-primary" target="_blank">Play</a>
173 |           </div>
174 |         </div>
175 |       </div>
176 |       <div class="col-md-4">
177 |         <div class="card mb-4">
178 |           <a href="https://gritsenko.itch.io/pix2d" target="_blank">
179 |             <img src="https://img.itch.zone/aW1nLzQ3MjQ5MzYuanBn/315x250%23c/PhCLP5.jpg" class="card-img-top" alt="Pix2d Pro- Pixel Art Studio">
180 |           </a>
181 |           <div class="card-body">
182 |             <h5 class="card-title">Pix2d Pro- Pixel Art Studio</h5>
183 |             <p class="card-text">Sprite editor for indie game developers</p>
184 |             <a href="https://gritsenko.itch.io/pix2d" class="btn btn-primary" target="_blank">Play</a>
185 |           </div>
186 |         </div>
187 |       </div>
188 | 
189 |     </div>
190 |   </section>
191 | 
192 |   <section id="contact" class="container py-5">
193 |     <h2>Contact Me</h2>
194 |     <p>You can not reach me if you don't know me</p>
195 |   </section>
196 | 
197 |   <!-- Bootstrap JS and dependencies -->
198 |   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
199 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
200 |   <!-- Custom JavaScript -->
201 | 
202 | </body>
203 | 
204 | </html>


--------------------------------------------------------------------------------
/tools/tokens.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Визуализатор использования токенов</title>
  7 |     <!-- Подключение Tailwind CSS -->
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <!-- Подключение шрифта Inter -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 13 |     <style>
 14 |         body {
 15 |             font-family: 'Inter', sans-serif;
 16 |         }
 17 |         /* Кастомные стили для слайдера */
 18 |         input[type=range]::-webkit-slider-thumb {
 19 |             -webkit-appearance: none;
 20 |             appearance: none;
 21 |             width: 20px;
 22 |             height: 20px;
 23 |             background: #3b82f6; /* blue-500 */
 24 |             cursor: pointer;
 25 |             border-radius: 50%;
 26 |             margin-top: -6px;
 27 |         }
 28 |         input[type=range]::-moz-range-thumb {
 29 |             width: 20px;
 30 |             height: 20px;
 31 |             background: #3b82f6;
 32 |             cursor: pointer;
 33 |             border-radius: 50%;
 34 |         }
 35 |          /* Стили для date input в темной теме */
 36 |         input[type="date"] {
 37 |             color-scheme: dark;
 38 |         }
 39 |     </style>
 40 | </head>
 41 | <body class="bg-gray-900 text-white flex items-center justify-center min-h-screen p-4">
 42 | 
 43 |     <div class="w-full max-w-2xl bg-gray-800 rounded-2xl shadow-2xl p-8 space-y-8 border border-gray-700">
 44 |         <!-- Заголовок -->
 45 |         <div>
 46 |             <h1 class="text-3xl font-bold text-center text-blue-400">Анализатор лимитов</h1>
 47 |             <p class="text-center text-gray-400 mt-2">Оцените свой темп расхода токенов в течение месяца.</p>
 48 |         </div>
 49 | 
 50 |         <!-- Панель управления -->
 51 |         <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
 52 |             <!-- Выбор даты -->
 53 |             <div class="space-y-2">
 54 |                 <label for="date-picker" class="block text-sm font-medium text-gray-300">Выберите дату</label>
 55 |                 <input type="date" id="date-picker" class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2.5 text-white focus:ring-blue-500 focus:border-blue-500 transition">
 56 |             </div>
 57 |             <!-- Слайдер токенов -->
 58 |             <div class="space-y-2">
 59 |                 <div class="flex justify-between items-center">
 60 |                     <label for="tokens-slider" class="block text-sm font-medium text-gray-300">Использовано токенов</tabel>
 61 |                     <span id="tokens-value" class="text-lg font-semibold text-blue-400">50%</span>
 62 |                 </div>
 63 |                 <input id="tokens-slider" type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
 64 |             </div>
 65 |         </div>
 66 | 
 67 |         <!-- Прогресс бары -->
 68 |         <div class="space-y-6 pt-4">
 69 |             <!-- Прогресс бар использования токенов -->
 70 |             <div class="space-y-2">
 71 |                 <div class="flex justify-between mb-1">
 72 |                     <span class="text-base font-medium text-gray-300">Расход токенов</span>
 73 |                     <span id="tokens-progress-text" class="text-sm font-medium text-gray-300">50%</span>
 74 |                 </div>
 75 |                 <div class="w-full bg-gray-700 rounded-full h-5">
 76 |                     <div id="tokens-progress" class="bg-blue-600 h-5 rounded-full text-center text-xs font-bold text-white flex items-center justify-center transition-all duration-300 ease-in-out" style="width: 50%;">
 77 |                         <span id="token-status-icon"></span>
 78 |                     </div>
 79 |                 </div>
 80 |                  <p id="status-text" class="text-sm text-center mt-2 text-gray-400"></p>
 81 |             </div>
 82 | 
 83 |             <!-- Прогресс бар прошедших дней -->
 84 |             <div class="space-y-2">
 85 |                 <div class="flex justify-between mb-1">
 86 |                     <span class="text-base font-medium text-gray-300">Прошло дней в месяце</span>
 87 |                     <span id="days-progress-text" class="text-sm font-medium text-gray-300">0%</span>
 88 |                 </div>
 89 |                 <div class="w-full bg-gray-700 rounded-full h-5">
 90 |                     <div id="days-progress" class="bg-gray-500 h-5 rounded-full transition-all duration-300 ease-in-out" style="width: 0%;"></div>
 91 |                 </div>
 92 |             </div>
 93 |         </div>
 94 |     </div>
 95 | 
 96 |     <script>
 97 |         document.addEventListener('DOMContentLoaded', () => {
 98 |             // Получаем элементы DOM
 99 |             const datePicker = document.getElementById('date-picker');
100 |             const tokensSlider = document.getElementById('tokens-slider');
101 |             const tokensValue = document.getElementById('tokens-value');
102 | 
103 |             const tokensProgress = document.getElementById('tokens-progress');
104 |             const tokensProgressText = document.getElementById('tokens-progress-text');
105 |             const tokenStatusIcon = document.getElementById('token-status-icon');
106 |             const statusText = document.getElementById('status-text');
107 | 
108 |             const daysProgress = document.getElementById('days-progress');
109 |             const daysProgressText = document.getElementById('days-progress-text');
110 |             
111 |             // Функция для установки сегодняшней даты по умолчанию
112 |             const setDefaultDate = () => {
113 |                 const today = new Date();
114 |                 // Форматируем дату в YYYY-MM-DD
115 |                 const year = today.getFullYear();
116 |                 const month = String(today.getMonth() + 1).padStart(2, '0');
117 |                 const day = String(today.getDate()).padStart(2, '0');
118 |                 datePicker.value = `${year}-${month}-${day}`;
119 |             };
120 | 
121 |             // Основная функция обновления
122 |             const updateVisualization = () => {
123 |                 // 1. Получаем значения из инпутов
124 |                 const selectedDateStr = datePicker.value;
125 |                 if (!selectedDateStr) return; // Выходим, если дата не выбрана
126 |                 
127 |                 // Добавляем время, чтобы избежать проблем с часовыми поясами
128 |                 const selectedDate = new Date(selectedDateStr + 'T00:00:00');
129 |                 const tokensUsedPercent = parseInt(tokensSlider.value);
130 | 
131 |                 // 2. Рассчитываем процент прошедших дней
132 |                 const dayOfMonth = selectedDate.getDate();
133 |                 const year = selectedDate.getFullYear();
134 |                 const month = selectedDate.getMonth();
135 |                 const daysInMonth = new Date(year, month + 1, 0).getDate();
136 |                 const daysElapsedPercent = (dayOfMonth / daysInMonth) * 100;
137 | 
138 |                 // 3. Обновляем UI
139 |                 // Слайдер
140 |                 tokensValue.textContent = `${tokensUsedPercent}%`;
141 | 
142 |                 // Прогресс бар токенов
143 |                 tokensProgress.style.width = `${tokensUsedPercent}%`;
144 |                 tokensProgressText.textContent = `${tokensUsedPercent}%`;
145 | 
146 |                 // Прогресс бар дней
147 |                 daysProgress.style.width = `${daysElapsedPercent.toFixed(0)}%`;
148 |                 daysProgressText.textContent = `${daysElapsedPercent.toFixed(0)}%`;
149 |                 
150 |                 // 4. Логика цвета и статуса
151 |                 const colorClassesToRemove = ['bg-red-500', 'bg-green-500', 'bg-blue-500'];
152 |                 tokensProgress.classList.remove(...colorClassesToRemove);
153 |                 
154 |                 const difference = tokensUsedPercent - daysElapsedPercent;
155 | 
156 |                 if (difference > 5) {
157 |                     // Превышение лимита
158 |                     tokensProgress.classList.add('bg-red-500');
159 |                     tokenStatusIcon.textContent = '⚠️';
160 |                     statusText.textContent = 'Вы расходуете токены быстрее, чем проходит месяц. Возможен перерасход.';
161 |                     statusText.className = 'text-sm text-center mt-2 text-red-400';
162 |                 } else if (difference < -5) {
163 |                     // Экономия
164 |                     tokensProgress.classList.add('bg-green-500');
165 |                     tokenStatusIcon.textContent = '✅';
166 |                     statusText.textContent = 'Отличный темп! У вас есть запас токенов.';
167 |                     statusText.className = 'text-sm text-center mt-2 text-green-400';
168 |                 } else {
169 |                     // В рамках нормы
170 |                     tokensProgress.classList.add('bg-blue-500');
171 |                     tokenStatusIcon.textContent = '👍';
172 |                     statusText.textContent = 'Вы идете точно по графику.';
173 |                     statusText.className = 'text-sm text-center mt-2 text-blue-400';
174 |                 }
175 |             };
176 | 
177 |             // Назначаем обработчики событий
178 |             datePicker.addEventListener('input', updateVisualization);
179 |             tokensSlider.addEventListener('input', updateVisualization);
180 | 
181 |             // Инициализация при загрузке страницы
182 |             setDefaultDate();
183 |             updateVisualization();
184 |         });
185 |     </script>
186 | 
187 | </body>
188 | </html>
189 | 


--------------------------------------------------------------------------------
/games.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "games": [
  3 |     {
  4 |       "downloads_count": 0,
  5 |       "url": "https://gritsenko.itch.io/bublepop-rpg",
  6 |       "published_at": "2024-04-15 17:31:42",
  7 |       "p_android": false,
  8 |       "cover_url": "https://img.itch.zone/aW1nLzE1Nzc2ODU2LnBuZw==/315x250%23c/rbzo6f.png",
  9 |       "embed": {
 10 |         "width": 480,
 11 |         "height": 840,
 12 |         "fullscreen": true
 13 |       },
 14 |       "purchases_count": 0,
 15 |       "published": true,
 16 |       "short_text": "Pop bubbles to hit enemies",
 17 |       "p_linux": false,
 18 |       "views_count": 109,
 19 |       "user": {
 20 |         "username": "gritsenko",
 21 |         "url": "https://gritsenko.itch.io",
 22 |         "display_name": "Igor Gritsenko",
 23 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
 24 |         "id": 213599
 25 |       },
 26 |       "title": "BubblePop RPG",
 27 |       "in_press_system": false,
 28 |       "created_at": "2024-04-15 17:29:04",
 29 |       "classification": "game",
 30 |       "type": "html",
 31 |       "can_be_bought": false,
 32 |       "min_price": 0,
 33 |       "has_demo": false,
 34 |       "p_windows": false,
 35 |       "p_osx": false,
 36 |       "id": 2648174
 37 |     },
 38 |     {
 39 |       "downloads_count": 0,
 40 |       "url": "https://gritsenko.itch.io/drunking-ded",
 41 |       "published_at": "2022-07-01 19:58:09",
 42 |       "p_android": false,
 43 |       "cover_url": "https://img.itch.zone/aW1nLzkzNDkzMDEuanBn/315x250%23c/yNXIKc.jpg",
 44 |       "embed": {
 45 |         "width": 854,
 46 |         "height": 480,
 47 |         "fullscreen": true
 48 |       },
 49 |       "purchases_count": 0,
 50 |       "published": true,
 51 |       "short_text": "Physical shooter for gamejam",
 52 |       "p_linux": false,
 53 |       "views_count": 173,
 54 |       "user": {
 55 |         "username": "gritsenko",
 56 |         "url": "https://gritsenko.itch.io",
 57 |         "display_name": "Igor Gritsenko",
 58 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
 59 |         "id": 213599
 60 |       },
 61 |       "title": "Drunking Ded",
 62 |       "in_press_system": false,
 63 |       "created_at": "2022-07-01 19:55:10",
 64 |       "classification": "game",
 65 |       "type": "html",
 66 |       "can_be_bought": false,
 67 |       "min_price": 0,
 68 |       "has_demo": false,
 69 |       "p_windows": false,
 70 |       "p_osx": false,
 71 |       "id": 1598259
 72 |     },
 73 |     {
 74 |       "downloads_count": 0,
 75 |       "url": "https://gritsenko.itch.io/fluid-player-prototype",
 76 |       "published_at": "2022-07-01 21:17:53",
 77 |       "p_android": false,
 78 |       "cover_url": "https://img.itch.zone/aW1nLzkzNDk4MDQuanBn/315x250%23c/tk9aYT.jpg",
 79 |       "embed": {
 80 |         "width": 640,
 81 |         "height": 360,
 82 |         "fullscreen": false
 83 |       },
 84 |       "purchases_count": 0,
 85 |       "published": true,
 86 |       "user": {
 87 |         "username": "gritsenko",
 88 |         "url": "https://gritsenko.itch.io",
 89 |         "display_name": "Igor Gritsenko",
 90 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
 91 |         "id": 213599
 92 |       },
 93 |       "views_count": 125,
 94 |       "created_at": "2022-07-01 21:16:15",
 95 |       "title": "Fluid Player Prototype",
 96 |       "in_press_system": false,
 97 |       "p_linux": false,
 98 |       "classification": "game",
 99 |       "type": "html",
100 |       "can_be_bought": false,
101 |       "min_price": 0,
102 |       "has_demo": false,
103 |       "p_windows": false,
104 |       "p_osx": false,
105 |       "id": 1598349
106 |     },
107 |     {
108 |       "downloads_count": 0,
109 |       "url": "https://gritsenko.itch.io/goosiality",
110 |       "published_at": "2024-09-26 19:10:40",
111 |       "p_android": false,
112 |       "cover_url": "https://img.itch.zone/aW1nLzE3OTM2MTYxLmpwZw==/315x250%23c/Z%2BHSym.jpg",
113 |       "embed": {
114 |         "width": 480,
115 |         "height": 854,
116 |         "fullscreen": true
117 |       },
118 |       "purchases_count": 0,
119 |       "published": true,
120 |       "short_text": "My games Jam 2020",
121 |       "p_linux": false,
122 |       "views_count": 52,
123 |       "user": {
124 |         "username": "gritsenko",
125 |         "url": "https://gritsenko.itch.io",
126 |         "display_name": "Igor Gritsenko",
127 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
128 |         "id": 213599
129 |       },
130 |       "title": "Gooseyality",
131 |       "in_press_system": false,
132 |       "created_at": "2024-09-26 18:54:34",
133 |       "classification": "game",
134 |       "type": "html",
135 |       "can_be_bought": false,
136 |       "min_price": 0,
137 |       "has_demo": false,
138 |       "p_windows": false,
139 |       "p_osx": false,
140 |       "id": 2998754
141 |     },
142 |     {
143 |       "downloads_count": 0,
144 |       "url": "https://gritsenko.itch.io/jun-wick-battle",
145 |       "published_at": "2024-04-07 10:37:18",
146 |       "p_android": false,
147 |       "cover_url": "https://img.itch.zone/aW1nLzE1Njc1MzE1LnBuZw==/315x250%23c/FEDVW%2F.png",
148 |       "embed": {
149 |         "width": 940,
150 |         "height": 500,
151 |         "fullscreen": true
152 |       },
153 |       "purchases_count": 0,
154 |       "published": true,
155 |       "short_text": "Battler game for my.games Game jam 2021",
156 |       "p_linux": false,
157 |       "views_count": 177,
158 |       "user": {
159 |         "username": "gritsenko",
160 |         "url": "https://gritsenko.itch.io",
161 |         "display_name": "Igor Gritsenko",
162 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
163 |         "id": 213599
164 |       },
165 |       "title": "Jun Wick Battle",
166 |       "in_press_system": false,
167 |       "created_at": "2024-04-07 10:22:33",
168 |       "classification": "game",
169 |       "type": "html",
170 |       "can_be_bought": false,
171 |       "min_price": 0,
172 |       "has_demo": false,
173 |       "p_windows": false,
174 |       "p_osx": false,
175 |       "id": 2630699
176 |     },
177 |     {
178 |       "downloads_count": 0,
179 |       "url": "https://gritsenko.itch.io/monkey-business",
180 |       "published_at": "2025-08-14 14:31:33",
181 |       "p_android": false,
182 |       "cover_url": "https://img.itch.zone/aW1nLzIyNzIzMjcyLnBuZw==/315x250%23c/nrWAOv.png",
183 |       "embed": {
184 |         "width": 360,
185 |         "height": 640,
186 |         "fullscreen": true
187 |       },
188 |       "purchases_count": 0,
189 |       "published": true,
190 |       "short_text": "​Shoot fruits, get combos, make some juce!",
191 |       "p_linux": false,
192 |       "views_count": 15,
193 |       "user": {
194 |         "username": "gritsenko",
195 |         "url": "https://gritsenko.itch.io",
196 |         "display_name": "Igor Gritsenko",
197 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
198 |         "id": 213599
199 |       },
200 |       "title": "Monkey Business: Frutti Rush",
201 |       "in_press_system": false,
202 |       "created_at": "2025-08-14 14:07:44",
203 |       "classification": "game",
204 |       "type": "html",
205 |       "can_be_bought": false,
206 |       "min_price": 0,
207 |       "has_demo": false,
208 |       "p_windows": false,
209 |       "p_osx": false,
210 |       "id": 3811662
211 |     },
212 |     {
213 |       "downloads_count": 9,
214 |       "url": "https://gritsenko.itch.io/nort",
215 |       "published_at": "2016-08-01 14:40:02",
216 |       "p_android": false,
217 |       "cover_url": "https://img.itch.zone/aW1hZ2UvNzgxMjUvMzY0OTkzLnBuZw==/315x250%23c/eR9utY.png",
218 |       "embed": {
219 |         "width": 1024,
220 |         "height": 768,
221 |         "fullscreen": true
222 |       },
223 |       "purchases_count": 0,
224 |       "published": true,
225 |       "short_text": "Old school style billiard and puzzle",
226 |       "p_linux": false,
227 |       "views_count": 467,
228 |       "user": {
229 |         "username": "gritsenko",
230 |         "url": "https://gritsenko.itch.io",
231 |         "display_name": "Igor Gritsenko",
232 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
233 |         "id": 213599
234 |       },
235 |       "title": "Nort 2D: Cyber billiard",
236 |       "in_press_system": false,
237 |       "created_at": "2016-08-01 14:21:36",
238 |       "classification": "game",
239 |       "type": "html",
240 |       "can_be_bought": false,
241 |       "min_price": 0,
242 |       "has_demo": false,
243 |       "p_windows": false,
244 |       "p_osx": false,
245 |       "id": 78125
246 |     },
247 |     {
248 |       "downloads_count": 3923,
249 |       "url": "https://gritsenko.itch.io/pix2d",
250 |       "published_at": "2020-06-07 23:43:21",
251 |       "p_android": false,
252 |       "cover_url": "https://img.itch.zone/aW1nLzQ3MjQ5MzYuanBn/315x250%23c/PhCLP5.jpg",
253 |       "purchases_count": 4,
254 |       "published": true,
255 |       "short_text": "Sprite editor for indie game developers",
256 |       "p_linux": false,
257 |       "user": {
258 |         "username": "gritsenko",
259 |         "url": "https://gritsenko.itch.io",
260 |         "display_name": "Igor Gritsenko",
261 |         "cover_url": "https://img.itch.zone/aW1hZ2UyL3VzZXIvMjEzNTk5LzM2NTAyMy5qcGc=/100x100%23/NJ1pTw.jpg",
262 |         "id": 213599
263 |       },
264 |       "views_count": 10675,
265 |       "in_press_system": false,
266 |       "title": "Pix2d Pro- Pixel Art Studio",
267 |       "created_at": "2020-06-07 22:57:17",
268 |       "min_price": 0,
269 |       "classification": "tool",
270 |       "type": "default",
271 |       "can_be_bought": false,
272 |       "earnings": [
273 |         {
274 |           "amount_formatted": "$34.89",
275 |           "amount": 3489,
276 |           "currency": "USD"
277 |         }
278 |       ],
279 |       "has_demo": false,
280 |       "p_windows": false,
281 |       "p_osx": false,
282 |       "id": 665455
283 |     }
284 |   ]
285 | }


--------------------------------------------------------------------------------
/tests/test1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Психологический тест: Кто вы?</title>
  7 |     <script src="https://cdn.tailwindcss.com"></script>
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
 11 |     <style>
 12 |         body {
 13 |             font-family: 'Inter', sans-serif;
 14 |         }
 15 |         .card {
 16 |             background-color: white;
 17 |             border-radius: 1.5rem;
 18 |             padding: 2rem;
 19 |             box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 20 |             transition: all 0.3s ease-in-out;
 21 |         }
 22 |         .answer-btn {
 23 |             transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 24 |         }
 25 |         .answer-btn:hover {
 26 |             transform: translateY(-2px);
 27 |             background-color: #4f46e5; /* indigo-700 */
 28 |         }
 29 |     </style>
 30 |       <!-- Yandex.Metrika counter -->
 31 |   <script type="text/javascript">
 32 |     (function (m, e, t, r, i, k, a) {
 33 |       m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
 34 |       m[i].l = 1 * new Date();
 35 |       for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
 36 |       k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
 37 |     })
 38 |       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 39 | 
 40 |     ym(98653129, "init", {
 41 |       clickmap: true,
 42 |       trackLinks: true,
 43 |       accurateTrackBounce: true
 44 |     });
 45 |   </script>
 46 |   <noscript>
 47 |     <div><img src="https://mc.yandex.ru/watch/98653129" style="position:absolute; left:-9999px;" alt="" /></div>
 48 |   </noscript>
 49 |   <!-- /Yandex.Metrika counter -->
 50 | </head>
 51 | <body class="bg-slate-100 text-slate-800 flex items-center justify-center min-h-screen p-4">
 52 | 
 53 |     <div id="app" class="max-w-2xl w-full mx-auto text-center">
 54 | 
 55 |         <!-- Начальный экран -->
 56 |         <div id="start-screen" class="card">
 57 |             <h1 class="text-4xl font-bold mb-4 text-slate-900">Какой вы тип личности?</h1>
 58 |             <p class="text-lg text-slate-600 mb-8">Пройдите короткий тест и узнайте, кто вы: решительный Тигр, общительная Обезьяна, надежный Слон или дотошный Муравей.</p>
 59 |             <button id="start-btn" class="w-full sm:w-auto bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-indigo-700 transition-colors">
 60 |                 Начать тест
 61 |             </button>
 62 |         </div>
 63 | 
 64 |         <!-- Экран с вопросами -->
 65 |         <div id="quiz-screen" class="card hidden">
 66 |             <div id="progress-bar" class="w-full bg-slate-200 rounded-full h-2.5 mb-6">
 67 |                 <div id="progress-bar-inner" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
 68 |             </div>
 69 |             <h2 id="question-text" class="text-2xl font-semibold mb-8 min-h-[6rem]"></h2>
 70 |             <div id="answers-container" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 71 |                 <!-- Кнопки с ответами будут вставлены сюда -->
 72 |             </div>
 73 |         </div>
 74 | 
 75 |         <!-- Экран с результатами -->
 76 |         <div id="result-screen" class="card hidden">
 77 |             <p class="text-lg text-slate-600 mb-2">Ваш результат:</p>
 78 |             <div id="result-emoji" class="text-8xl mb-4"></div>
 79 |             <h2 id="result-title" class="text-4xl font-bold mb-4 text-indigo-600"></h2>
 80 |             <p id="result-description" class="text-md text-slate-700 mb-8 text-left"></p>
 81 |             <button id="restart-btn" class="w-full sm:w-auto bg-slate-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-slate-700 transition-colors">
 82 |                 Пройти еще раз
 83 |             </button>
 84 |         </div>
 85 | 
 86 |     </div>
 87 | 
 88 |     <script>
 89 |         // --- ЭЛЕМЕНТЫ DOM ---
 90 |         const startScreen = document.getElementById('start-screen');
 91 |         const quizScreen = document.getElementById('quiz-screen');
 92 |         const resultScreen = document.getElementById('result-screen');
 93 | 
 94 |         const startBtn = document.getElementById('start-btn');
 95 |         const restartBtn = document.getElementById('restart-btn');
 96 | 
 97 |         const questionText = document.getElementById('question-text');
 98 |         const answersContainer = document.getElementById('answers-container');
 99 |         const progressBarInner = document.getElementById('progress-bar-inner');
100 | 
101 |         const resultEmoji = document.getElementById('result-emoji');
102 |         const resultTitle = document.getElementById('result-title');
103 |         const resultDescription = document.getElementById('result-description');
104 | 
105 |         // --- ДАННЫЕ ТЕСТА ---
106 |         const questions = [
107 |             {
108 |                 text: "Когда вы сталкиваетесь с новой сложной задачей, ваша первая реакция?",
109 |                 answers: [
110 |                     { text: "Берусь за дело немедленно, люблю вызовы.", type: "D" },
111 |                     { text: "Обсуждаю с коллегами, ищу вдохновение и поддержку.", type: "I" },
112 |                     { text: "Сначала наблюдаю и помогаю другим, прежде чем действовать.", type: "S" },
113 |                     { text: "Тщательно планирую шаги, создаю систему для ее решения.", type: "C" }
114 |                 ]
115 |             },
116 |             {
117 |                 text: "На вечеринке вы, скорее всего:",
118 |                 answers: [
119 |                     { text: "Инициируете разговор, знакомитесь с новыми людьми.", type: "I" },
120 |                     { text: "Спокойно общаетесь с небольшой группой знакомых.", type: "S" },
121 |                     { text: "Анализируете ситуацию, прежде чем к кому-то подойти.", type: "C" },
122 |                     { text: "Обсуждаете амбициозные цели и проекты.", type: "D" }
123 |                 ]
124 |             },
125 |             {
126 |                 text: "Какой стиль работы вам ближе?",
127 |                 answers: [
128 |                     { text: "Стабильный и предсказуемый, без спешки.", type: "S" },
129 |                     { text: "Структурированный, с четкими правилами и стандартами.", type: "C" },
130 |                     { text: "Быстрый, динамичный, с фокусом на результат.", type: "D" },
131 |                     { text: "Гибкий, творческий, с большим количеством общения.", type: "I" }
132 |                 ]
133 |             },
134 |             {
135 |                 text: "В командном проекте ваша главная роль — это...",
136 |                 answers: [
137 |                     { text: "Лидер, который ведет команду к цели.", type: "D" },
138 |                     { text: "Мотиватор, который всех подбадривает и создает атмосферу.", type: "I" },
139 |                     { text: "Исполнитель, который поддерживает и помогает другим.", type: "S" },
140 |                     { text: "Аналитик, который следит за качеством и деталями.", type: "C" }
141 |                 ]
142 |             },
143 |             {
144 |                 text: "Как вы принимаете важные решения?",
145 |                 answers: [
146 |                     { text: "Быстро и решительно, доверяя своей интуиции.", type: "D" },
147 |                     { text: "Советуясь с друзьями и коллегами, ценя их мнение.", type: "I" },
148 |                     { text: "Не спеша, обдумывая, как это повлияет на других.", type: "S" },
149 |                     { text: "На основе фактов, логики и тщательного анализа.", type: "C" }
150 |                 ]
151 |             },
152 |             {
153 |                 text: "Что вас больше всего раздражает в других людях?",
154 |                 answers: [
155 |                     { text: "Нерешительность и медлительность.", type: "D" },
156 |                     { text: "Пессимизм и отсутствие энтузиазма.", type: "I" },
157 |                     { text: "Резкость, эгоизм и невнимание к чувствам.", type: "S" },
158 |                     { text: "Неорганизованность и небрежность в деталях.", type: "C" }
159 |                 ]
160 |             },
161 |             {
162 |                 text: "Выберите девиз, который вам ближе всего:",
163 |                 answers: [
164 |                     { text: "Просто сделай это!", type: "D" },
165 |                     { text: "Главное — участие, а не победа!", type: "I" },
166 |                     { text: "Тише едешь — дальше будешь.", type: "S" },
167 |                     { text: "Семь раз отмерь, один раз отрежь.", type: "C" }
168 |                 ]
169 |             }
170 |         ];
171 | 
172 |         const results = {
173 |             D: {
174 |                 emoji: "🐅",
175 |                 title: "Тигр (Доминирование)",
176 |                 description: "Вы — прирожденный лидер, решительный и целеустремленный. Вы ориентированы на результат, не боитесь трудностей и быстро принимаете решения. Ваша уверенность и энергия ведут за собой других. Для вас важны вызовы и возможность побеждать. Однако иногда ваша прямолинейность может быть воспринята как резкость. Старайтесь быть более терпимыми к чужому мнению."
177 |             },
178 |             I: {
179 |                 emoji: "🐒",
180 |                 title: "Обезьяна (Влияние)",
181 |                 description: "Вы — яркая, общительная и оптимистичная личность. Вы легко находите общий язык с людьми, вдохновляете их и создаете позитивную атмосферу. Для вас важны социальные связи и признание. Вы полны идей и энтузиазма. Иногда вы можете быть неорганизованны и увлекаться, забывая о деталях. Постарайтесь доводить начатое до конца."
182 |             },
183 |             S: {
184 |                 emoji: "🐘",
185 |                 title: "Слон (Постоянство)",
186 |                 description: "Вы — надежный, спокойный и дружелюбный человек. Вы цените стабильность, гармонию и безопасность. Вы прекрасный командный игрок, всегда готовый выслушать и поддержать. Ваша лояльность и терпение делают вас незаменимым другом и коллегой. Однако вы можете сопротивляться переменам и избегать конфликтов. Не бойтесь выходить из зоны комфорта."
187 |             },
188 |             C: {
189 |                 emoji: "🐜",
190 |                 title: "Муравей (Соответствие)",
191 |                 description: "Вы — точный, аналитичный и внимательный к деталям человек. Вы стремитесь к качеству и порядку во всем. Ваша системность, ответственность и дисциплина вызывают уважение. Вы предпочитаете работать с фактами и логикой. Иногда ваш перфекционизм может замедлять работу. Учитесь доверять не только анализу, но и интуиции."
192 |             }
193 |         };
194 | 
195 |         // --- СОСТОЯНИЕ ПРИЛОЖЕНИЯ ---
196 |         let currentQuestionIndex = 0;
197 |         let scores = { D: 0, I: 0, S: 0, C: 0 };
198 | 
199 |         // --- ФУНКЦИИ ---
200 | 
201 |         // Функция для начала теста
202 |         function startTest() {
203 |             currentQuestionIndex = 0;
204 |             scores = { D: 0, I: 0, S: 0, C: 0 };
205 |             startScreen.classList.add('hidden');
206 |             resultScreen.classList.add('hidden');
207 |             quizScreen.classList.remove('hidden');
208 |             showQuestion();
209 |         }
210 | 
211 |         // Функция для отображения текущего вопроса
212 |         function showQuestion() {
213 |             const question = questions[currentQuestionIndex];
214 |             questionText.textContent = question.text;
215 |             answersContainer.innerHTML = '';
216 | 
217 |             // Обновляем прогресс-бар
218 |             const progress = ((currentQuestionIndex) / questions.length) * 100;
219 |             progressBarInner.style.width = `${progress}%`;
220 | 
221 |             question.answers.forEach(answer => {
222 |                 const button = document.createElement('button');
223 |                 button.textContent = answer.text;
224 |                 button.className = 'answer-btn w-full bg-indigo-600 text-white font-semibold p-4 rounded-lg text-left';
225 |                 button.onclick = () => selectAnswer(answer.type);
226 |                 answersContainer.appendChild(button);
227 |             });
228 |         }
229 | 
230 |         // Функция для обработки выбора ответа
231 |         function selectAnswer(type) {
232 |             scores[type]++;
233 |             currentQuestionIndex++;
234 | 
235 |             if (currentQuestionIndex < questions.length) {
236 |                 showQuestion();
237 |             } else {
238 |                 showResult();
239 |             }
240 |         }
241 | 
242 |         // Функция для подсчета и отображения результата
243 |         function showResult() {
244 |             // Обновляем прогресс-бар до 100%
245 |             progressBarInner.style.width = '100%';
246 | 
247 |             let maxScore = -1;
248 |             let resultType = '';
249 | 
250 |             // Находим тип с максимальным количеством баллов
251 |             for (const type in scores) {
252 |                 if (scores[type] > maxScore) {
253 |                     maxScore = scores[type];
254 |                     resultType = type;
255 |                 }
256 |             }
257 |             
258 |             // В случае ничьей, можно выбрать первый попавшийся, так как логика проста.
259 |             // Для более сложных тестов можно было бы определить приоритеты.
260 | 
261 |             const resultData = results[resultType];
262 |             resultEmoji.textContent = resultData.emoji;
263 |             resultTitle.textContent = resultData.title;
264 |             resultDescription.textContent = resultData.description;
265 | 
266 |             quizScreen.classList.add('hidden');
267 |             resultScreen.classList.remove('hidden');
268 |         }
269 | 
270 |         // --- ОБРАБОТЧИКИ СОБЫТИЙ ---
271 |         startBtn.addEventListener('click', startTest);
272 |         restartBtn.addEventListener('click', startTest);
273 | 
274 |     </script>
275 | </body>
276 | </html>
277 | 


--------------------------------------------------------------------------------
/tests/fire.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>WebGL Камин</title>
  7 |     <style>
  8 |         /* Убираем отступы и скрываем прокрутку для полноэкранного режима */
  9 |         body {
 10 |             margin: 0;
 11 |             overflow: hidden;
 12 |             background-color: #000000;
 13 |         }
 14 |         /* Канвас будет занимать все доступное пространство */
 15 |         canvas {
 16 |             display: block;
 17 |         }
 18 |     </style>
 19 | </head>
 20 | <body>
 21 |     <!-- Скрипты для Three.js и его модулей постобработки -->
 22 |     <script type="importmap">
 23 |         {
 24 |             "imports": {
 25 |                 "three": "https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js",
 26 |                 "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
 27 |             }
 28 |         }
 29 |     </script>
 30 | 
 31 |     <script type="module">
 32 |         import * as THREE from 'three';
 33 |         import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 34 |         import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 35 |         import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
 36 | 
 37 |         // 1. ========= НАСТРОЙКА СЦЕНЫ =========
 38 |         const scene = new THREE.Scene();
 39 |         // Настраиваем камеру, чтобы она соответствовала перспективе изображения
 40 |         const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
 41 |         camera.position.set(0, 0.2, 2.9);
 42 |         camera.lookAt(0, 0, 0);
 43 | 
 44 |         const renderer = new THREE.WebGLRenderer({ antialias: true });
 45 |         renderer.setSize(window.innerWidth, window.innerHeight);
 46 |         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
 47 |         document.body.appendChild(renderer.domElement);
 48 | 
 49 |         // 2. ========= ЗАГРУЗКА ФОНА С СОХРАНЕНИЕМ ПРОПОРЦИЙ =========
 50 |         let bgPlane;
 51 |         const image = document.createElement('img');
 52 |         const backgroundTexture = new THREE.Texture(image);
 53 |         image.crossOrigin = 'anonymous'; // Важно для избежания CORS ошибок
 54 |         image.addEventListener('load', () => {
 55 |             backgroundTexture.needsUpdate = true;
 56 |             
 57 |             // Создаем плоскость для фона
 58 |             const bgGeometry = new THREE.PlaneGeometry(1, 1); // Используем 1x1 для простоты масштабирования
 59 |             const bgMaterial = new THREE.MeshBasicMaterial({ map: backgroundTexture });
 60 |             bgPlane = new THREE.Mesh(bgGeometry, bgMaterial);
 61 |             
 62 |             // Помещаем фон за огнем
 63 |             bgPlane.position.z = -1; 
 64 |             scene.add(bgPlane);
 65 | 
 66 |             updateBackgroundScale(); // Масштабируем фон после загрузки
 67 |         });
 68 |         image.src = '../images/fireplace_back.jpg'; // Обновленный URL
 69 | 
 70 |         function updateBackgroundScale() {
 71 |             if (!bgPlane || !backgroundTexture.image) return;
 72 | 
 73 |             const viewportAspect = window.innerWidth / window.innerHeight;
 74 |             const imageAspect = backgroundTexture.image.width / backgroundTexture.image.height;
 75 | 
 76 |             const fov = camera.fov * (Math.PI / 180);
 77 |             const height = 2 * Math.tan(fov / 2) * Math.abs(bgPlane.position.z - camera.position.z);
 78 |             const width = height * viewportAspect;
 79 | 
 80 |             bgPlane.scale.set(width, height, 1);
 81 | 
 82 |             // Логика для "cover" эффекта
 83 |             if (viewportAspect > imageAspect) {
 84 |                 bgPlane.scale.x *= viewportAspect / imageAspect;
 85 |             } else {
 86 |                 bgPlane.scale.y *= imageAspect / viewportAspect;
 87 |             }
 88 |         }
 89 |         
 90 |         // 3. ========= ОСВЕЩЕНИЕ =========
 91 |         // Оставляем только динамический свет от огня
 92 |         const fireLight = new THREE.PointLight(0xff8c00, 5, 10, 2);
 93 |         fireLight.position.set(0, -0.2, 0.2); // Смещаем свет ниже, к поленьям
 94 |         scene.add(fireLight);
 95 | 
 96 |         // 4. ========= СОЗДАНИЕ ОГНЯ (СИСТЕМА ЧАСТИЦ) =========
 97 |         const particleCount = 2000;
 98 |         const positions = new Float32Array(particleCount * 3);
 99 |         const randoms = new Float32Array(particleCount);
100 | 
101 |         for (let i = 0; i < particleCount; i++) {
102 |             // Начальная позиция смещена вниз и сужена, чтобы соответствовать поленьям
103 |             positions[i * 3 + 0] = (Math.random() - 0.5) * 1.0; // x (уменьшен разброс)
104 |             positions[i * 3 + 1] = (Math.random() - 0.5) * 0.2 - 0.6; // y
105 |             positions[i * 3 + 2] = (Math.random() - 0.5) * 0.5; // z
106 |             randoms[i] = Math.random();
107 |         }
108 | 
109 |         const particleGeometry = new THREE.BufferGeometry();
110 |         particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
111 |         particleGeometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1));
112 |         
113 |         // --- Шейдеры для огня ---
114 |         const vertexShader = `
115 |             attribute float aRandom;
116 |             uniform float uTime;
117 |             uniform float uSize;
118 |             varying float vProgress;
119 |             varying float vClusterFactor;
120 | 
121 |             vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
122 |             vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
123 |             vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
124 |             vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
125 |             float snoise(vec3 v) {
126 |                 const vec2 C = vec2(1.0/6.0, 1.0/3.0);
127 |                 const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
128 |                 vec3 i  = floor(v + dot(v, C.yyy));
129 |                 vec3 x0 = v - i + dot(i, C.xxx);
130 |                 vec3 g = step(x0.yzx, x0.xyz);
131 |                 vec3 l = 1.0 - g;
132 |                 vec3 i1 = min(g.xyz, l.zxy);
133 |                 vec3 i2 = max(g.xyz, l.zxy);
134 |                 vec3 x1 = x0 - i1 + C.xxx;
135 |                 vec3 x2 = x0 - i2 + C.yyy;
136 |                 vec3 x3 = x0 - D.yyy;
137 |                 i = mod289(i);
138 |                 vec4 p = permute(permute(permute(
139 |                     i.z + vec4(0.0, i1.z, i2.z, 1.0))
140 |                     + i.y + vec4(0.0, i1.y, i2.y, 1.0))
141 |                     + i.x + vec4(0.0, i1.x, i2.x, 1.0));
142 |                 float n_ = 0.142857142857;
143 |                 vec3 ns = n_ * D.wyz - D.xzx;
144 |                 vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
145 |                 vec4 x_ = floor(j * ns.z);
146 |                 vec4 y_ = floor(j - 7.0 * x_);
147 |                 vec4 x = x_ * ns.x + ns.yyyy;
148 |                 vec4 y = y_ * ns.x + ns.yyyy;
149 |                 vec4 h = 1.0 - abs(x) - abs(y);
150 |                 vec4 b0 = vec4(x.xy, y.xy);
151 |                 vec4 b1 = vec4(x.zw, y.zw);
152 |                 vec4 s0 = floor(b0)*2.0 + 1.0;
153 |                 vec4 s1 = floor(b1)*2.0 + 1.0;
154 |                 vec4 sh = -step(h, vec4(0.0));
155 |                 vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
156 |                 vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
157 |                 vec3 p0 = vec3(a0.xy,h.x);
158 |                 vec3 p1 = vec3(a0.zw,h.y);
159 |                 vec3 p2 = vec3(a1.xy,h.z);
160 |                 vec3 p3 = vec3(a1.zw,h.w);
161 |                 vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
162 |                 p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
163 |                 vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
164 |                 m = m * m;
165 |                 return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
166 |             }
167 |             void main() {
168 |                 float lifetime = 2.0;
169 |                 vProgress = mod(uTime * 0.9 + aRandom * lifetime, lifetime) / lifetime;
170 |                 
171 |                 vec3 pos = position;
172 | 
173 |                 float trapezoidFactor = mix(1.0, 0.2, vProgress);
174 |                 pos.x *= trapezoidFactor;
175 | 
176 |                 float clusterNoise = snoise(vec3(position.x * 0.7, uTime * 0.3, position.z * 0.7));
177 |                 vClusterFactor = smoothstep(0.0, 0.8, (clusterNoise + 1.0) / 2.0);
178 | 
179 |                 pos.y += vProgress * 3.0; // Slightly less upward velocity
180 | 
181 |                 float movementNoise = snoise(vec3(pos.x * 1.2, pos.y * 0.8, uTime * 0.5));
182 |                 pos.x += movementNoise * (1.0 - vProgress) * 0.8 * vClusterFactor;
183 |                 pos.z += snoise(vec3(pos.z * 1.2, pos.y * 0.8, uTime * 0.5 + 10.0)) * (1.0 - vProgress) * 0.3;
184 | 
185 |                 vec4 modelPosition = modelMatrix * vec4(pos, 1.0);
186 |                 vec4 viewPosition = viewMatrix * modelPosition;
187 |                 gl_Position = projectionMatrix * viewPosition;
188 | 
189 |                 float sizeProgress = pow(sin(vProgress * 3.14159), 2.0);
190 |                 
191 |                 gl_PointSize = uSize * sizeProgress * vClusterFactor * aRandom * 1.5;
192 |                 gl_PointSize *= (1.0 / -viewPosition.z);
193 |             }
194 |         `;
195 | 
196 |         const fragmentShader = `
197 |             varying float vProgress;
198 |             varying float vClusterFactor;
199 | 
200 |             void main() {
201 |                 float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
202 |                 float strength = 1.0 - smoothstep(0.0, 0.5, distanceToCenter);
203 | 
204 |                 vec3 hotColor = vec3(1.0, 0.9, 0.7);
205 |                 vec3 midColor = vec3(1.0, 0.5, 0.0);
206 |                 vec3 coolColor = vec3(0.6, 0.1, 0.0);
207 | 
208 |                 vec3 color = mix(hotColor, midColor, smoothstep(0.0, 0.4, vProgress));
209 |                 color = mix(color, coolColor, smoothstep(0.4, 1.0, vProgress));
210 | 
211 |                 float alphaProgress = pow(sin(vProgress * 3.14159), 2.0);
212 | 
213 |                 gl_FragColor = vec4(color, strength * alphaProgress * vClusterFactor * 0.9);
214 |             }
215 |         `;
216 | 
217 |         const fireMaterial = new THREE.ShaderMaterial({
218 |             vertexShader,
219 |             fragmentShader,
220 |             uniforms: {
221 |                 uTime: { value: 0 },
222 |                 uSize: { value: 120 } // Slightly smaller particles to fit the new scene
223 |             },
224 |             blending: THREE.AdditiveBlending,
225 |             transparent: true,
226 |             depthWrite: false,
227 |         });
228 | 
229 |         const fire = new THREE.Points(particleGeometry, fireMaterial);
230 |         scene.add(fire);
231 | 
232 |         // 4.5. ========= СОЗДАНИЕ ИСКР (ВТОРАЯ СИСТЕМА ЧАСТИЦ) =========
233 |         const sparksCount = 200;
234 |         const sparksPositions = new Float32Array(sparksCount * 3);
235 |         const sparksVelocities = new Float32Array(sparksCount * 3);
236 |         const sparksTimings = new Float32Array(sparksCount * 3);
237 | 
238 |         for (let i = 0; i < sparksCount; i++) {
239 |             sparksPositions[i * 3 + 0] = (Math.random() - 0.5) * 1.0; // x (уменьшен разброс)
240 |             sparksPositions[i * 3 + 1] = -0.6 + (Math.random() * 0.4);
241 |             sparksPositions[i * 3 + 2] = (Math.random() - 0.5) * 0.5;
242 | 
243 |             sparksVelocities[i * 3 + 0] = (Math.random() - 0.5) * 1.0; // vx (уменьшен разброс)
244 |             sparksVelocities[i * 3 + 1] = Math.random() * 2.5 + 2.5;
245 |             sparksVelocities[i * 3 + 2] = (Math.random() - 0.5) * 1.5;
246 | 
247 |             const totalLifetime = Math.random() * 8.0 + 2.0;
248 |             const visibleLifetime = Math.random() * 0.5 + 1.0;
249 |             const timeOffset = Math.random() * 10.0;
250 |             sparksTimings[i*3 + 0] = totalLifetime;
251 |             sparksTimings[i*3 + 1] = visibleLifetime;
252 |             sparksTimings[i*3 + 2] = timeOffset;
253 |         }
254 | 
255 |         const sparksGeometry = new THREE.BufferGeometry();
256 |         sparksGeometry.setAttribute('position', new THREE.BufferAttribute(sparksPositions, 3));
257 |         sparksGeometry.setAttribute('aVelocity', new THREE.BufferAttribute(sparksVelocities, 3));
258 |         sparksGeometry.setAttribute('aTiming', new THREE.BufferAttribute(sparksTimings, 3));
259 | 
260 | 
261 |         const sparksVertexShader = `
262 |             attribute vec3 aVelocity;
263 |             attribute vec3 aTiming;
264 |             uniform float uTime;
265 |             uniform float uSize;
266 |             varying float vProgress;
267 | 
268 |             void main() {
269 |                 float totalLifetime = aTiming.x;
270 |                 float visibleLifetime = aTiming.y;
271 |                 float timeOffset = aTiming.z;
272 | 
273 |                 float totalProgress = mod(uTime + timeOffset, totalLifetime) / totalLifetime;
274 | 
275 |                 float visibleRatio = visibleLifetime / totalLifetime;
276 | 
277 |                 if (totalProgress > visibleRatio) {
278 |                     gl_PointSize = 0.0;
279 |                     vProgress = -1.0;
280 |                     return;
281 |                 }
282 | 
283 |                 vProgress = totalProgress / visibleRatio;
284 | 
285 |                 vec3 pos = position;
286 |                 pos.x += aVelocity.x * vProgress * 0.5;
287 |                 pos.y += aVelocity.y * vProgress - 4.9 * vProgress * vProgress; 
288 |                 pos.z += aVelocity.z * vProgress * 0.5;
289 | 
290 |                 vec4 modelPosition = modelMatrix * vec4(pos, 1.0);
291 |                 vec4 viewPosition = viewMatrix * modelPosition;
292 |                 gl_Position = projectionMatrix * viewPosition;
293 | 
294 |                 gl_PointSize = uSize * (1.0 - vProgress) * 0.5;
295 |                 gl_PointSize *= (1.0 / -viewPosition.z);
296 |             }
297 |         `;
298 | 
299 |         const sparksFragmentShader = `
300 |             varying float vProgress;
301 |             void main() {
302 |                 if (vProgress < 0.0) {
303 |                     discard;
304 |                 }
305 | 
306 |                 float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
307 |                 if (distanceToCenter > 0.5) {
308 |                     discard;
309 |                 }
310 |                 vec3 color = vec3(1.0, 0.8, 0.4);
311 |                 gl_FragColor = vec4(color, (1.0 - vProgress) * 0.9);
312 |             }
313 |         `;
314 | 
315 |         const sparksMaterial = new THREE.ShaderMaterial({
316 |             vertexShader: sparksVertexShader,
317 |             fragmentShader: sparksFragmentShader,
318 |             uniforms: {
319 |                 uTime: { value: 0 },
320 |                 uSize: { value: 50 }
321 |             },
322 |             blending: THREE.AdditiveBlending,
323 |             transparent: true,
324 |             depthWrite: false,
325 |         });
326 | 
327 |         const sparks = new THREE.Points(sparksGeometry, sparksMaterial);
328 |         scene.add(sparks);
329 | 
330 | 
331 |         // 5. ========= ПОСТОБРАБОТКА (ЭФФЕКТ СВЕЧЕНИЯ) =========
332 |         const renderScene = new RenderPass(scene, camera);
333 |         const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
334 |         bloomPass.threshold = 0.3; // Увеличиваем порог, чтобы светились только самые яркие части
335 |         bloomPass.strength = 0.9; // Уменьшаем общую силу свечения
336 |         bloomPass.radius = 0.5;
337 | 
338 |         const composer = new EffectComposer(renderer);
339 |         composer.addPass(renderScene);
340 |         composer.addPass(bloomPass);
341 | 
342 |         // 6. ========= ЦИКЛ АНИМАЦИИ =========
343 |         const clock = new THREE.Clock();
344 |         
345 |         function animate() {
346 |             const elapsedTime = clock.getElapsedTime();
347 | 
348 |             // Обновляем время в шейдерах
349 |             fireMaterial.uniforms.uTime.value = elapsedTime;
350 |             sparksMaterial.uniforms.uTime.value = elapsedTime;
351 | 
352 |             // Заставляем свет мерцать
353 |             fireLight.intensity = Math.sin(elapsedTime * 5.0) * 0.5 + 4.5;
354 |             fireLight.position.y = Math.sin(elapsedTime * 3.0) * 0.1 - 0.2;
355 |             
356 |             // Рендерим сцену с эффектами
357 |             composer.render();
358 | 
359 |             requestAnimationFrame(animate);
360 |         }
361 | 
362 |         // 7. ========= ОБРАБОТЧИК ИЗМЕНЕНИЯ РАЗМЕРА ОКНА =========
363 |         window.addEventListener('resize', () => {
364 |             // Обновляем размеры
365 |             camera.aspect = window.innerWidth / window.innerHeight;
366 |             camera.updateProjectionMatrix();
367 | 
368 |             renderer.setSize(window.innerWidth, window.innerHeight);
369 |             renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
370 |             
371 |             composer.setSize(window.innerWidth, window.innerHeight);
372 | 
373 |             updateBackgroundScale(); // Пересчитываем масштаб фона при ресайзе
374 |         });
375 | 
376 |         // Запускаем анимацию
377 |         animate();
378 |     </script>
379 | </body>
380 | </html>
381 | 


--------------------------------------------------------------------------------
/tests/pressure.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale-1.0">
  6 |     <title>Ваш персональный тонометр "Супруг"</title>
  7 |     
  8 |     <!-- Open Graph Meta Tags -->
  9 |     <meta property="og:title" content="Ваш персональный тонометр 'Супруг'">
 10 |     <meta property="og:description" content="Шуточный тест, который определит ваше давление по поведению вашего партнера.">
 11 |     <meta property="og:type" content="website">
 12 |     
 13 |     <script src="https://cdn.tailwindcss.com"></script>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
 15 |     <style>
 16 |         body {
 17 |             font-family: 'Inter', sans-serif;
 18 |         }
 19 |         .element-fade-in {
 20 |             animation: fadeIn 0.5s ease-in-out;
 21 |         }
 22 |         @keyframes fadeIn {
 23 |             from { opacity: 0; transform: translateY(10px); }
 24 |             to { opacity: 1; transform: translateY(0); }
 25 |         }
 26 |         #toast {
 27 |             visibility: hidden;
 28 |             opacity: 0;
 29 |             transition: opacity 0.3s, visibility 0.3s;
 30 |         }
 31 |         #toast.show {
 32 |             visibility: visible;
 33 |             opacity: 1;
 34 |         }
 35 |     </style>
 36 | </head>
 37 | <body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
 38 | 
 39 |     <div class="bg-white p-6 sm:p-8 rounded-xl shadow-lg max-w-2xl w-full">
 40 |         <h1 class="text-2xl sm:text-3xl font-bold text-center text-red-500 mb-2">Ваш персональный тонометр "Супруг"</h1>
 41 |         
 42 |         <!-- Gender Selection Screen -->
 43 |         <div id="gender-selection" class="element-fade-in">
 44 |              <p class="text-center text-gray-600 mb-6">
 45 |                 Для подбора релевантных вопросов, пожалуйста, укажите, кто вы:
 46 |             </p>
 47 |             <div class="flex flex-col sm:flex-row gap-4 mt-4">
 48 |                 <button onclick="startQuiz('female_user')" class="w-full py-3 px-4 bg-pink-500 text-white font-bold text-lg rounded-lg hover:bg-pink-600 transition-all duration-300 shadow-md">Я женщина</button>
 49 |                 <button onclick="startQuiz('male_user')" class="w-full py-3 px-4 bg-blue-500 text-white font-bold text-lg rounded-lg hover:bg-blue-600 transition-all duration-300 shadow-md">Я мужчина</button>
 50 |             </div>
 51 |         </div>
 52 | 
 53 |         <!-- Quiz Container (hidden by default) -->
 54 |         <div id="quiz-container" class="hidden">
 55 |             <p id="subtitle" class="text-center text-gray-600 mb-6">
 56 |                 Ответьте на 7 вопросов о вашем партнере, чтобы определить, насколько с ним стрессово жить.
 57 |             </p>
 58 | 
 59 |             <!-- Progress Bar -->
 60 |             <div class="mb-6">
 61 |                 <div class="flex justify-between mb-1">
 62 |                     <span id="progress-text" class="text-base font-medium text-gray-700">Вопрос 1 из 7</span>
 63 |                 </div>
 64 |                 <div class="w-full bg-gray-200 rounded-full h-2.5">
 65 |                     <div id="progress-bar" class="bg-yellow-400 h-2.5 rounded-full" style="width: 14%"></div>
 66 |                 </div>
 67 |             </div>
 68 | 
 69 |             <form id="quizForm" class="space-y-6">
 70 |                 <!-- Questions will be dynamically inserted here -->
 71 |                 <div id="questions-container"></div>
 72 |             </form>
 73 | 
 74 |             <!-- Navigation Buttons -->
 75 |             <div id="navigation-controls" class="mt-8 flex justify-center items-center">
 76 |                 <button id="next-btn" type="button" class="py-2 px-6 bg-blue-500 text-white font-bold rounded-lg hover:bg-blue-600 focus:outline-none transition-all duration-300 shadow-md disabled:bg-gray-300 disabled:cursor-not-allowed">Вперед</button>
 77 |                 <button id="submit-btn" type="button" class="hidden py-3 px-6 bg-green-500 text-white font-bold text-lg rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-300 shadow-md disabled:bg-gray-300 disabled:cursor-not-allowed" onclick="calculateResults()">Узнать свой диагноз</button>
 78 |             </div>
 79 |         </div>
 80 | 
 81 |         <div id="results-container" class="mt-8 hidden"></div>
 82 | 
 83 |         <p id="disclaimer" class="text-center text-xs text-gray-500 mt-8">
 84 |             <strong>Важное предупреждение:</strong> Этот тест является исключительно юмористическим. Если вы обеспокоены своим давлением, обратитесь к врачу!
 85 |         </p>
 86 |     </div>
 87 | 
 88 |     <!-- Toast Notification -->
 89 |     <div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 bg-gray-800 text-white px-5 py-2 rounded-lg shadow-lg">
 90 |       Ссылка скопирована!
 91 |     </div>
 92 |     
 93 |     <script>
 94 |         const allQuestions = {
 95 |             female_user: [ // Questions for women about men
 96 |                 {
 97 |                     question: "1. Грязные носки вашего партнера чаще всего оказываются:",
 98 |                     answers: [
 99 |                         { text: "а) Аккуратно в корзине для белья.", value: 10 },
100 |                         { text: "б) Где-то рядом с корзиной, но не внутри.", value: 20 },
101 |                         { text: "в) В самых неожиданных местах, создавая новые формы жизни.", value: 30 }
102 |                     ]
103 |                 },
104 |                 {
105 |                     question: "2. Ваш партнер простудился. Его состояние можно описать как:",
106 |                     answers: [
107 |                         { text: "а) «Ничего страшного, само пройдет».", value: 10 },
108 |                         { text: "б) Он стоически переносит болезнь, но просит принести чай с лимоном.", value: 20 },
109 |                         { text: "в) «Вызови скорую, я умираю». Температура 37.2°C.", value: 30 }
110 |                     ]
111 |                 },
112 |                 {
113 |                     question: "3. Как соотносятся разговоры вашего партнера о ЗОЖ и его реальные действия?",
114 |                     answers: [
115 |                         { text: "а) Полностью. Что говорит, то и делает.", value: 10 },
116 |                         { text: "б) В основном совпадает, но может читать лекцию о вреде сахара, поедая печенье.", value: 20 },
117 |                         { text: "в) Никак. Рассказывает о новой диете, заказывая большую пиццу на ночь.", value: 30 }
118 |                     ]
119 |                 },
120 |                 {
121 |                     question: "4. Вам нужно выходить из дома в 10:00. В 9:55 ваш партнер, скорее всего:",
122 |                     answers: [
123 |                         { text: "а) Уже одет и ждет вас у двери.", value: 10 },
124 |                         { text: "б) Внезапно не может найти ключи/кошелек/телефон.", value: 20 },
125 |                         { text: "в) Решает, что это идеальное время, чтобы полить цветы/вынести мусор/сделать важный звонок.", value: 30 }
126 |                     ]
127 |                 },
128 |                 {
129 |                     question: "5. Пришла новая мебель из IKEA. Ваш партнер:",
130 |                     answers: [
131 |                         { text: "а) Спокойно читает инструкцию и собирает все шаг за шагом.", value: 10 },
132 |                         { text: "б) Пытается собрать без инструкции, злится, и только потом читает ее.", value: 20 },
133 |                         { text: "в) Объявляет, что инструкция для слабаков, а в итоге у вас шаткий шкаф и «лишние» детали.", value: 30 }
134 |                     ]
135 |                 },
136 |                  {
137 |                     question: '6. На вопрос "Куда сходим поесть?" партнер обычно отвечает:',
138 |                     answers: [
139 |                         { text: "а) «Отличная идея! Давай в [место 1] или [место 2]?»", value: 10 },
140 |                         { text: "б) «Не знаю, решай сам(а)», а затем отвергает два ваших предложения.", value: 20 },
141 |                         { text: "в) Начинает 40-минутный анализ всех ресторанов, который заканчивается фразой «Давай лучше дома поедим».", value: 30 }
142 |                     ]
143 |                 },
144 |                 {
145 |                     question: "7. Ваш партнер за рулем, и вы едете по навигатору. Когда навигатор говорит «Поверните направо», он:",
146 |                     answers: [
147 |                         { text: "а) Сразу поворачивает направо.", value: 10 },
148 |                         { text: "б) Говорит: «Я знаю дорогу лучше», и едет прямо.", value: 20 },
149 |                         { text: "в) Начинает спорить с навигатором, а затем обвиняет его (и вас) в том, что вы «не туда» приехали.", value: 30 }
150 |                     ]
151 |                 }
152 |             ],
153 |             male_user: [ // Questions for men about women
154 |                 {
155 |                     question: "1. Вы забыли опустить крышку унитаза. Какова наиболее вероятная реакция вашей партнерши?",
156 |                     answers: [
157 |                         { text: "а) Молча опустит и не придаст этому значения.", value: 10 },
158 |                         { text: "б) Сделает саркастическое замечание: «Опять трон для короля открыт?».", value: 20 },
159 |                         { text: "в) Начнет лекцию о гигиене, бактериях и падении в унитаз среди ночи.", value: 30 }
160 |                     ]
161 |                 },
162 |                 {
163 |                     question: "2. Пора выходить. Фраза вашей партнерши «Я готова через 5 минут» обычно означает:",
164 |                     answers: [
165 |                         { text: "а) Ровно 5 минут. Она мастер тайм-менеджмента.", value: 10 },
166 |                         { text: "б) 15-20 минут, включая одну смену наряда в последнюю секунду.", value: 20 },
167 |                         { text: "в) Временную аномалию, где 5 минут растягиваются на час и полный косметический ритуал.", value: 30 }
168 |                     ]
169 |                 },
170 |                 {
171 |                     question: '3. Стоя перед полным шкафом, как часто вы слышите "Мне совершенно нечего надеть"?',
172 |                     answers: [
173 |                         { text: "а) Почти никогда. Она планирует образы заранее.", value: 10 },
174 |                         { text: "б) Иногда, перед важными событиями.", value: 20 },
175 |                         { text: "в) Это стандартная прелюдия к любому выходу, включая поход в магазин.", value: 30 }
176 |                     ]
177 |                 },
178 |                 {
179 |                     question: "4. Когда она чего-то хочет, она:",
180 |                     answers: [
181 |                         { text: "а) Говорит об этом прямо: «Хочу вот эту книгу».", value: 10 },
182 |                         { text: "б) Начинает рассказывать, какая классная вещь есть у ее подруги.", value: 20 },
183 |                         { text: "в) Создает сложную паутину намеков и вздохов, ожидая, что вы телепат.", value: 30 }
184 |                     ]
185 |                 },
186 |                 {
187 |                     question: '5. Фраза "Всё нормально" чаще всего означает:',
188 |                     answers: [
189 |                         { text: "а) Что всё действительно нормально.", value: 10 },
190 |                         { text: "б) Есть небольшая проблема, о которой она расскажет позже.", value: 20 },
191 |                         { text: "в) Код «красная тревога». Вы что-то сделали не так, и у вас есть 3-5 рабочих дней, чтобы это выяснить.", value: 30 }
192 |                     ]
193 |                 },
194 |                 {
195 |                     question: "6. Вы смотрите сериал вместе. Когда вас нет, она:",
196 |                     answers: [
197 |                         { text: "а) Терпеливо ждет вас, чтобы продолжить просмотр.", value: 10 },
198 |                         { text: "б) «Случайно» смотрит одну серию вперед и обещает не спойлерить (но спойлерит).", value: 20 },
199 |                         { text: "в) Смотрит весь сезон, а потом делает удивленное лицо на поворотах сюжета при пересмотре с вами.", value: 30 }
200 |                     ]
201 |                 },
202 |                 {
203 |                     question: '7. Ваша партнерша говорит: "Я быстро, только за хлебом". Это обычно означает:',
204 |                     answers: [
205 |                         { text: "а) Она вернется через 5 минут с хлебом.", value: 10 },
206 |                         { text: "б) Она вернется через 20 минут с хлебом и «еще парой нужных вещей».", value: 20 },
207 |                         { text: "в) Через час она позвонит и спросит, не нужно ли купить еще и новые шторы. Хлеб она забыла.", value: 30 }
208 |                     ]
209 |                 }
210 |             ]
211 |         };
212 | 
213 |         let currentQuestionIndex = 0;
214 |         let questions = [];
215 |         let questionCount = 0;
216 | 
217 |         let nextBtn, submitBtn, progressBar, progressText;
218 | 
219 |         function startQuiz(gender) {
220 |             document.getElementById('gender-selection').classList.add('hidden');
221 |             
222 |             const selectedQuestions = allQuestions[gender];
223 |             const questionsContainer = document.getElementById('questions-container');
224 |             
225 |             selectedQuestions.forEach((q, index) => {
226 |                 const questionDiv = document.createElement('div');
227 |                 questionDiv.className = `question-page element-fade-in ${index === 0 ? '' : 'hidden'}`;
228 |                 questionDiv.dataset.questionIndex = index;
229 | 
230 |                 let answersHTML = q.answers.map(answer => `
231 |                     <label class="flex items-start p-3 rounded-lg hover:bg-gray-50 cursor-pointer">
232 |                         <input type="radio" name="q${index + 1}" value="${answer.value}" class="h-5 w-5 text-red-600 flex-shrink-0 mt-1">
233 |                         <span class="ml-3 text-gray-700">${answer.text}</span>
234 |                     </label>
235 |                 `).join('');
236 | 
237 |                 questionDiv.innerHTML = `
238 |                     <p class="font-semibold text-lg text-gray-800">${q.question}</p>
239 |                     <div class="mt-2 space-y-2">${answersHTML}</div>
240 |                 `;
241 |                 questionsContainer.appendChild(questionDiv);
242 | 
243 |                 // Add event listener to enable buttons
244 |                 const radioButtons = questionDiv.querySelectorAll(`input[type="radio"]`);
245 |                 radioButtons.forEach(radio => {
246 |                     radio.addEventListener('change', () => {
247 |                         if (currentQuestionIndex === questionCount - 1) {
248 |                             submitBtn.disabled = false;
249 |                         } else {
250 |                             nextBtn.disabled = false;
251 |                         }
252 |                     });
253 |                 });
254 |             });
255 |             
256 |             document.getElementById('quiz-container').classList.remove('hidden');
257 |             initializeQuizLogic();
258 |         }
259 | 
260 |         function initializeQuizLogic() {
261 |             questions = document.querySelectorAll('.question-page');
262 |             questionCount = questions.length;
263 | 
264 |             nextBtn = document.getElementById('next-btn');
265 |             submitBtn = document.getElementById('submit-btn');
266 |             progressBar = document.getElementById('progress-bar');
267 |             progressText = document.getElementById('progress-text');
268 | 
269 |             nextBtn.addEventListener('click', handleNext);
270 |             
271 |             showQuestion(0);
272 |         }
273 | 
274 |         function showQuestion(index) {
275 |             questions.forEach((q, i) => q.classList.toggle('hidden', i !== index));
276 |             updateProgress(index);
277 |             updateNavigation(index);
278 |         }
279 | 
280 |         function updateProgress(index) {
281 |             const progressPercentage = ((index + 1) / questionCount) * 100;
282 |             progressBar.style.width = `${progressPercentage}%`;
283 |             progressText.textContent = `Вопрос ${index + 1} из ${questionCount}`;
284 |         }
285 |         
286 |         function updateNavigation(index) {
287 |             const isAnswered = document.querySelector(`input[name="q${index + 1}"]:checked`) !== null;
288 | 
289 |             if (index === questionCount - 1) {
290 |                 nextBtn.classList.add('hidden');
291 |                 submitBtn.classList.remove('hidden');
292 |                 submitBtn.disabled = !isAnswered;
293 |             } else {
294 |                 nextBtn.classList.remove('hidden');
295 |                 submitBtn.classList.add('hidden');
296 |                 nextBtn.disabled = !isAnswered;
297 |             }
298 |         }
299 | 
300 |         function handleNext() {
301 |             if (currentQuestionIndex < questionCount - 1) {
302 |                 currentQuestionIndex++;
303 |                 showQuestion(currentQuestionIndex);
304 |             }
305 |         }
306 | 
307 |         function calculateResults() {
308 |             let totalScore = 0;
309 |             for (let i = 1; i <= questionCount; i++) {
310 |                 const checked = document.querySelector(`input[name="q${i}"]:checked`);
311 |                 if (checked) totalScore += parseInt(checked.value);
312 |             }
313 | 
314 |             const resultsContainer = document.getElementById('results-container');
315 |             let resultHTML = '', resultClass = '';
316 |             
317 |             if (totalScore <= 110) {
318 |                 resultClass = 'bg-blue-50 border-blue-200';
319 |                 resultHTML = `<h2 class="text-xl font-bold text-blue-800">Ваше давление ~ 110/70 — «Олимпийское спокойствие»</h2><p class="mt-2 text-blue-700">Поздравляем! Ваш партнер — человек-дзен. Жизнь с ним предсказуема и спокойна. Вашему давлению ничего не угрожает, кроме, возможно, скуки.</p>`;
320 |             } else if (totalScore <= 160) {
321 |                 resultClass = 'bg-yellow-50 border-yellow-200';
322 |                 resultHTML = `<h2 class="text-xl font-bold text-yellow-800">Ваше давление ~ 130/85 — «Стабильно-напряженное»</h2><p class="mt-2 text-yellow-700">Ваш партнер обеспечивает вам умеренную кардионагрузку. Давление в норме, но пульс иногда учащается. Это не болезнь, это называется «классический брак».</p>`;
323 |             } else {
324 |                 resultClass = 'bg-red-50 border-red-200';
325 |                 resultHTML = `<h2 class="text-xl font-bold text-red-800">Ваше давление ~ 160/100 — «Осторожно, высокое напряжение!»</h2><p class="mt-2 text-red-700">Ваш партнер — ходячий источник адреналина. Жизнь с ним — вечный аттракцион. Ваше сердце работает в режиме 24/7. Не забывайте глубоко дышать!</p>`;
326 |             }
327 |             
328 |             const shareButtonHTML = `
329 |                 <div class="mt-6">
330 |                     <button onclick="shareTest()" class="inline-block bg-gray-600 text-white font-bold py-2 px-5 rounded-lg hover:bg-gray-700 transition-all duration-300 text-sm">
331 |                         🔗 Поделиться тестом
332 |                     </button>
333 |                 </div>
334 |             `;
335 | 
336 |             document.getElementById('quiz-container').classList.add('hidden');
337 |             
338 |             resultsContainer.className = `p-6 rounded-lg border text-center element-fade-in ${resultClass}`;
339 |             resultsContainer.innerHTML = resultHTML + shareButtonHTML;
340 |             resultsContainer.classList.remove('hidden');
341 |             resultsContainer.scrollIntoView({ behavior: 'smooth' });
342 |         }
343 | 
344 |         function showToast() {
345 |             const toast = document.getElementById('toast');
346 |             toast.classList.add('show');
347 |             setTimeout(() => {
348 |                 toast.classList.remove('show');
349 |             }, 2000);
350 |         }
351 | 
352 |         async function shareTest() {
353 |             const shareUrl = 'https://gritsenko.biz/tests/pressure.html';
354 |             const shareTitle = 'Ваш персональный тонометр "Супруг"';
355 |             const shareText = 'Пройди шуточный тест и узнай своё давление по поведению партнера!';
356 | 
357 |             if (navigator.share) {
358 |                 try {
359 |                     await navigator.share({
360 |                         title: shareTitle,
361 |                         text: shareText,
362 |                         url: shareUrl,
363 |                     });
364 |                 } catch (error) {
365 |                     console.log('Пользователь отменил или произошла ошибка:', error);
366 |                 }
367 |             } else {
368 |                 try {
369 |                     await navigator.clipboard.writeText(shareUrl);
370 |                     showToast();
371 |                 } catch (err) {
372 |                     console.error('Не удалось скопировать ссылку: ', err);
373 |                 }
374 |             }
375 |         }
376 |     </script>
377 | </body>
378 | </html>
379 | 


--------------------------------------------------------------------------------
/tests/pressure_v2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale-1.0">
  6 |     <title>Ваш персональный тонометр "Супруг"</title>
  7 |     
  8 |     <!-- Open Graph Meta Tags -->
  9 |     <meta property="og:title" content="Ваш персональный тонометр 'Супруг'">
 10 |     <meta property="og:description" content="Шуточный тест, который определит ваше давление по поведению вашего партнера.">
 11 |     <meta property="og:type" content="website">
 12 |     
 13 |     <script src="https://cdn.tailwindcss.com"></script>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
 15 |     <style>
 16 |         body {
 17 |             font-family: 'Inter', sans-serif;
 18 |         }
 19 |         .element-fade-in {
 20 |             animation: fadeIn 0.5s ease-in-out;
 21 |         }
 22 |         @keyframes fadeIn {
 23 |             from { opacity: 0; transform: translateY(10px); }
 24 |             to { opacity: 1; transform: translateY(0); }
 25 |         }
 26 |         #toast {
 27 |             visibility: hidden;
 28 |             opacity: 0;
 29 |             transition: opacity 0.3s, visibility 0.3s;
 30 |         }
 31 |         #toast.show {
 32 |             visibility: visible;
 33 |             opacity: 1;
 34 |         }
 35 |     </style>
 36 | </head>
 37 | <body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
 38 | 
 39 |     <div class="bg-white p-6 sm:p-8 rounded-xl shadow-lg max-w-2xl w-full">
 40 |         <h1 class="text-2xl sm:text-3xl font-bold text-center text-red-500 mb-2">Ваш персональный тонометр "Супруг"</h1>
 41 |         
 42 |         <!-- Gender Selection Screen -->
 43 |         <div id="gender-selection" class="element-fade-in">
 44 |              <p class="text-center text-gray-600 mb-6">
 45 |                 Для подбора релевантных вопросов, пожалуйста, укажите, кто вы:
 46 |             </p>
 47 |             <div class="flex flex-col sm:flex-row gap-4 mt-4">
 48 |                 <button onclick="startQuiz('female_user')" class="w-full py-3 px-4 bg-pink-500 text-white font-bold text-lg rounded-lg hover:bg-pink-600 transition-all duration-300 shadow-md">Я женщина</button>
 49 |                 <button onclick="startQuiz('male_user')" class="w-full py-3 px-4 bg-blue-500 text-white font-bold text-lg rounded-lg hover:bg-blue-600 transition-all duration-300 shadow-md">Я мужчина</button>
 50 |             </div>
 51 |         </div>
 52 | 
 53 |         <!-- Quiz Container (hidden by default) -->
 54 |         <div id="quiz-container" class="hidden">
 55 |             <p id="subtitle" class="text-center text-gray-600 mb-6">
 56 |                 Ответьте на 7 вопросов о вашем партнере, чтобы определить, насколько с ним стрессово жить.
 57 |             </p>
 58 | 
 59 |             <!-- Progress Bar -->
 60 |             <div class="mb-6">
 61 |                 <div class="flex justify-between mb-1">
 62 |                     <span id="progress-text" class="text-base font-medium text-gray-700">Вопрос 1 из 7</span>
 63 |                 </div>
 64 |                 <div class="w-full bg-gray-200 rounded-full h-2.5">
 65 |                     <div id="progress-bar" class="bg-yellow-400 h-2.5 rounded-full" style="width: 14%"></div>
 66 |                 </div>
 67 |             </div>
 68 | 
 69 |             <form id="quizForm" class="space-y-6">
 70 |                 <!-- Questions will be dynamically inserted here -->
 71 |                 <div id="questions-container"></div>
 72 |             </form>
 73 | 
 74 |             <!-- Navigation Buttons -->
 75 |             <div id="navigation-controls" class="mt-8 flex justify-center items-center">
 76 |                 <button id="next-btn" type="button" class="py-2 px-6 bg-blue-500 text-white font-bold rounded-lg hover:bg-blue-600 focus:outline-none transition-all duration-300 shadow-md disabled:bg-gray-300 disabled:cursor-not-allowed">Вперед</button>
 77 |                 <button id="submit-btn" type="button" class="hidden py-3 px-6 bg-green-500 text-white font-bold text-lg rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-300 shadow-md disabled:bg-gray-300 disabled:cursor-not-allowed" onclick="calculateResults()">Узнать свой диагноз</button>
 78 |             </div>
 79 |         </div>
 80 | 
 81 |         <div id="results-container" class="mt-8 hidden"></div>
 82 | 
 83 |         <p id="disclaimer" class="text-center text-xs text-gray-500 mt-8">
 84 |             <strong>Важное предупреждение:</strong> Этот тест является исключительно юмористическим. Если вы обеспокоены своим давлением, обратитесь к врачу!
 85 |         </p>
 86 |     </div>
 87 | 
 88 |     <!-- Toast Notification -->
 89 |     <div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 bg-gray-800 text-white px-5 py-2 rounded-lg shadow-lg">
 90 |       Ссылка скопирована!
 91 |     </div>
 92 |     
 93 |     <script>
 94 |         const allQuestions = {
 95 |             female_user: [ // Questions for women about men
 96 |                 {
 97 |                     question: "1. Грязные носки вашего партнера чаще всего оказываются:",
 98 |                     answers: [
 99 |                         { text: "а) Аккуратно в корзине для белья.", value: 10 },
100 |                         { text: "б) Где-то рядом с корзиной, но не внутри.", value: 20 },
101 |                         { text: "в) В самых неожиданных местах, создавая новые формы жизни.", value: 30 }
102 |                     ]
103 |                 },
104 |                 {
105 |                     question: "2. Ваш партнер простудился. Его состояние можно описать как:",
106 |                     answers: [
107 |                         { text: "а) «Ничего страшного, само пройдет».", value: 10 },
108 |                         { text: "б) Он стоически переносит болезнь, но просит принести чай с лимоном.", value: 20 },
109 |                         { text: "в) «Вызови скорую, я умираю». Температура 37.2°C.", value: 30 }
110 |                     ]
111 |                 },
112 |                 {
113 |                     question: "3. Как соотносятся разговоры вашего партнера о ЗОЖ и его реальные действия?",
114 |                     answers: [
115 |                         { text: "а) Полностью. Что говорит, то и делает.", value: 10 },
116 |                         { text: "б) В основном совпадает, но может читать лекцию о вреде сахара, поедая печенье.", value: 20 },
117 |                         { text: "в) Никак. Рассказывает о новой диете, заказывая большую пиццу на ночь.", value: 30 }
118 |                     ]
119 |                 },
120 |                 {
121 |                     question: "4. Вам нужно выходить из дома в 10:00. В 9:55 ваш партнер, скорее всего:",
122 |                     answers: [
123 |                         { text: "а) Уже одет и ждет вас у двери.", value: 10 },
124 |                         { text: "б) Внезапно не может найти ключи/кошелек/телефон.", value: 20 },
125 |                         { text: "в) Решает, что это идеальное время, чтобы полить цветы/вынести мусор/сделать важный звонок.", value: 30 }
126 |                     ]
127 |                 },
128 |                 {
129 |                     question: "5. Пришла новая мебель из IKEA. Ваш партнер:",
130 |                     answers: [
131 |                         { text: "а) Спокойно читает инструкцию и собирает все шаг за шагом.", value: 10 },
132 |                         { text: "б) Пытается собрать без инструкции, злится, и только потом читает ее.", value: 20 },
133 |                         { text: "в) Объявляет, что инструкция для слабаков, а в итоге у вас шаткий шкаф и «лишние» детали.", value: 30 }
134 |                     ]
135 |                 },
136 |                  {
137 |                     question: '6. На вопрос "Куда сходим поесть?" партнер обычно отвечает:',
138 |                     answers: [
139 |                         { text: "а) «Отличная идея! Давай в [место 1] или [место 2]?»", value: 10 },
140 |                         { text: "б) «Не знаю, решай сам(а)», а затем отвергает два ваших предложения.", value: 20 },
141 |                         { text: "в) Начинает 40-минутный анализ всех ресторанов, который заканчивается фразой «Давай лучше дома поедим».", value: 30 }
142 |                     ]
143 |                 },
144 |                 {
145 |                     question: "7. Ваш партнер за рулем, и вы едете по навигатору. Когда навигатор говорит «Поверните направо», он:",
146 |                     answers: [
147 |                         { text: "а) Сразу поворачивает направо.", value: 10 },
148 |                         { text: "б) Говорит: «Я знаю дорогу лучше», и едет прямо.", value: 20 },
149 |                         { text: "в) Начинает спорить с навигатором, а затем обвиняет его (и вас) в том, что вы «не туда» приехали.", value: 30 }
150 |                     ]
151 |                 }
152 |             ],
153 |             male_user: [ // Questions for men about women
154 |                 {
155 |                     question: "1. Вы забыли опустить крышку унитаза. Какова наиболее вероятная реакция вашей партнерши?",
156 |                     answers: [
157 |                         { text: "а) Молча опустит и не придаст этому значения.", value: 10 },
158 |                         { text: "б) Сделает саркастическое замечание: «Опять трон для короля открыт?».", value: 20 },
159 |                         { text: "в) Начнет лекцию о гигиене, бактериях и падении в унитаз среди ночи.", value: 30 }
160 |                     ]
161 |                 },
162 |                 {
163 |                     question: "2. Пора выходить. Фраза вашей партнерши «Я готова через 5 минут» обычно означает:",
164 |                     answers: [
165 |                         { text: "а) Ровно 5 минут. Она мастер тайм-менеджмента.", value: 10 },
166 |                         { text: "б) 15-20 минут, включая одну смену наряда в последнюю секунду.", value: 20 },
167 |                         { text: "в) Временную аномалию, где 5 минут растягиваются на час и полный косметический ритуал.", value: 30 }
168 |                     ]
169 |                 },
170 |                 {
171 |                     question: '3. Стоя перед полным шкафом, как часто вы слышите "Мне совершенно нечего надеть"?',
172 |                     answers: [
173 |                         { text: "а) Почти никогда. Она планирует образы заранее.", value: 10 },
174 |                         { text: "б) Иногда, перед важными событиями.", value: 20 },
175 |                         { text: "в) Это стандартная прелюдия к любому выходу, включая поход в магазин.", value: 30 }
176 |                     ]
177 |                 },
178 |                 {
179 |                     question: "4. Когда она чего-то хочет, она:",
180 |                     answers: [
181 |                         { text: "а) Говорит об этом прямо: «Хочу вот эту книгу».", value: 10 },
182 |                         { text: "б) Начинает рассказывать, какая классная вещь есть у ее подруги.", value: 20 },
183 |                         { text: "в) Создает сложную паутину намеков и вздохов, ожидая, что вы телепат.", value: 30 }
184 |                     ]
185 |                 },
186 |                 {
187 |                     question: '5. Фраза "Всё нормально" чаще всего означает:',
188 |                     answers: [
189 |                         { text: "а) Что всё действительно нормально.", value: 10 },
190 |                         { text: "б) Есть небольшая проблема, о которой она расскажет позже.", value: 20 },
191 |                         { text: "в) Код «красная тревога». Вы что-то сделали не так, и у вас есть 3-5 рабочих дней, чтобы это выяснить.", value: 30 }
192 |                     ]
193 |                 },
194 |                 {
195 |                     question: "6. Вы смотрите сериал вместе. Когда вас нет, она:",
196 |                     answers: [
197 |                         { text: "а) Терпеливо ждет вас, чтобы продолжить просмотр.", value: 10 },
198 |                         { text: "б) «Случайно» смотрит одну серию вперед и обещает не спойлерить (но спойлерит).", value: 20 },
199 |                         { text: "в) Смотрит весь сезон, а потом делает удивленное лицо на поворотах сюжета при пересмотре с вами.", value: 30 }
200 |                     ]
201 |                 },
202 |                 {
203 |                     question: '7. Ваша партнерша говорит: "Я быстро, только за хлебом". Это обычно означает:',
204 |                     answers: [
205 |                         { text: "а) Она вернется через 5 минут с хлебом.", value: 10 },
206 |                         { text: "б) Она вернется через 20 минут с хлебом и «еще парой нужных вещей».", value: 20 },
207 |                         { text: "в) Через час она позвонит и спросит, не нужно ли купить еще и новые шторы. Хлеб она забыла.", value: 30 }
208 |                     ]
209 |                 }
210 |             ]
211 |         };
212 | 
213 |         let currentQuestionIndex = 0;
214 |         let questions = [];
215 |         let questionCount = 0;
216 | 
217 |         let nextBtn, submitBtn, progressBar, progressText;
218 | 
219 |         function startQuiz(gender) {
220 |             document.getElementById('gender-selection').classList.add('hidden');
221 |             
222 |             const selectedQuestions = allQuestions[gender];
223 |             const questionsContainer = document.getElementById('questions-container');
224 |             
225 |             selectedQuestions.forEach((q, index) => {
226 |                 const questionDiv = document.createElement('div');
227 |                 questionDiv.className = `question-page element-fade-in ${index === 0 ? '' : 'hidden'}`;
228 |                 questionDiv.dataset.questionIndex = index;
229 | 
230 |                 let answersHTML = q.answers.map(answer => `
231 |                     <label class="flex items-start p-3 rounded-lg hover:bg-gray-50 cursor-pointer">
232 |                         <input type="radio" name="q${index + 1}" value="${answer.value}" class="h-5 w-5 text-red-600 flex-shrink-0 mt-1">
233 |                         <span class="ml-3 text-gray-700">${answer.text}</span>
234 |                     </label>
235 |                 `).join('');
236 | 
237 |                 questionDiv.innerHTML = `
238 |                     <p class="font-semibold text-lg text-gray-800">${q.question}</p>
239 |                     <div class="mt-2 space-y-2">${answersHTML}</div>
240 |                 `;
241 |                 questionsContainer.appendChild(questionDiv);
242 | 
243 |                 // Add event listener to enable buttons
244 |                 const radioButtons = questionDiv.querySelectorAll(`input[type="radio"]`);
245 |                 radioButtons.forEach(radio => {
246 |                     radio.addEventListener('change', () => {
247 |                         if (currentQuestionIndex === questionCount - 1) {
248 |                             submitBtn.disabled = false;
249 |                         } else {
250 |                             nextBtn.disabled = false;
251 |                         }
252 |                     });
253 |                 });
254 |             });
255 |             
256 |             document.getElementById('quiz-container').classList.remove('hidden');
257 |             initializeQuizLogic();
258 |         }
259 | 
260 |         function initializeQuizLogic() {
261 |             questions = document.querySelectorAll('.question-page');
262 |             questionCount = questions.length;
263 | 
264 |             nextBtn = document.getElementById('next-btn');
265 |             submitBtn = document.getElementById('submit-btn');
266 |             progressBar = document.getElementById('progress-bar');
267 |             progressText = document.getElementById('progress-text');
268 | 
269 |             nextBtn.addEventListener('click', handleNext);
270 |             
271 |             showQuestion(0);
272 |         }
273 | 
274 |         function showQuestion(index) {
275 |             questions.forEach((q, i) => q.classList.toggle('hidden', i !== index));
276 |             updateProgress(index);
277 |             updateNavigation(index);
278 |         }
279 | 
280 |         function updateProgress(index) {
281 |             const progressPercentage = ((index + 1) / questionCount) * 100;
282 |             progressBar.style.width = `${progressPercentage}%`;
283 |             progressText.textContent = `Вопрос ${index + 1} из ${questionCount}`;
284 |         }
285 |         
286 |         function updateNavigation(index) {
287 |             const isAnswered = document.querySelector(`input[name="q${index + 1}"]:checked`) !== null;
288 | 
289 |             if (index === questionCount - 1) {
290 |                 nextBtn.classList.add('hidden');
291 |                 submitBtn.classList.remove('hidden');
292 |                 submitBtn.disabled = !isAnswered;
293 |             } else {
294 |                 nextBtn.classList.remove('hidden');
295 |                 submitBtn.classList.add('hidden');
296 |                 nextBtn.disabled = !isAnswered;
297 |             }
298 |         }
299 | 
300 |         function handleNext() {
301 |             if (currentQuestionIndex < questionCount - 1) {
302 |                 currentQuestionIndex++;
303 |                 showQuestion(currentQuestionIndex);
304 |             }
305 |         }
306 | 
307 |         function calculateResults() {
308 |             let totalScore = 0;
309 |             for (let i = 1; i <= questionCount; i++) {
310 |                 const checked = document.querySelector(`input[name="q${i}"]:checked`);
311 |                 if (checked) totalScore += parseInt(checked.value);
312 |             }
313 | 
314 |             const resultsContainer = document.getElementById('results-container');
315 |             let resultHTML = '', resultClass = '';
316 |             
317 |             if (totalScore <= 110) {
318 |                 resultClass = 'bg-blue-50 border-blue-200';
319 |                 resultHTML = `<h2 class="text-xl font-bold text-blue-800">Ваше давление ~ 110/70 — «Олимпийское спокойствие»</h2><p class="mt-2 text-blue-700">Поздравляем! Ваш партнер — человек-дзен. Жизнь с ним предсказуема и спокойна. Вашему давлению ничего не угрожает, кроме, возможно, скуки.</p>`;
320 |             } else if (totalScore <= 160) {
321 |                 resultClass = 'bg-yellow-50 border-yellow-200';
322 |                 resultHTML = `<h2 class="text-xl font-bold text-yellow-800">Ваше давление ~ 130/85 — «Стабильно-напряженное»</h2><p class="mt-2 text-yellow-700">Ваш партнер обеспечивает вам умеренную кардионагрузку. Давление в норме, но пульс иногда учащается. Это не болезнь, это называется «классический брак».</p>`;
323 |             } else {
324 |                 resultClass = 'bg-red-50 border-red-200';
325 |                 resultHTML = `<h2 class="text-xl font-bold text-red-800">Ваше давление ~ 160/100 — «Осторожно, высокое напряжение!»</h2><p class="mt-2 text-red-700">Ваш партнер — ходячий источник адреналина. Жизнь с ним — вечный аттракцион. Ваше сердце работает в режиме 24/7. Не забывайте глубоко дышать!</p>`;
326 |             }
327 |             
328 |             const shareButtonHTML = `
329 |                 <div class="mt-6">
330 |                     <button onclick="shareTest()" class="inline-block bg-gray-600 text-white font-bold py-2 px-5 rounded-lg hover:bg-gray-700 transition-all duration-300 text-sm">
331 |                         🔗 Поделиться тестом
332 |                     </button>
333 |                 </div>
334 |             `;
335 | 
336 |             document.getElementById('quiz-container').classList.add('hidden');
337 |             
338 |             resultsContainer.className = `p-6 rounded-lg border text-center element-fade-in ${resultClass}`;
339 |             resultsContainer.innerHTML = resultHTML + shareButtonHTML;
340 |             resultsContainer.classList.remove('hidden');
341 |             resultsContainer.scrollIntoView({ behavior: 'smooth' });
342 |         }
343 | 
344 |         function showToast() {
345 |             const toast = document.getElementById('toast');
346 |             toast.classList.add('show');
347 |             setTimeout(() => {
348 |                 toast.classList.remove('show');
349 |             }, 2000);
350 |         }
351 | 
352 |         async function shareTest() {
353 |             const shareUrl = 'https://gritsenko.biz/tests/pressure.html';
354 |             const shareTitle = 'Ваш персональный тонометр "Супруг"';
355 |             const shareText = 'Пройди шуточный тест и узнай своё давление по поведению партнера!';
356 | 
357 |             if (navigator.share) {
358 |                 try {
359 |                     await navigator.share({
360 |                         title: shareTitle,
361 |                         text: shareText,
362 |                         url: shareUrl,
363 |                     });
364 |                 } catch (error) {
365 |                     console.log('Пользователь отменил или произошла ошибка:', error);
366 |                 }
367 |             } else {
368 |                 try {
369 |                     await navigator.clipboard.writeText(shareUrl);
370 |                     showToast();
371 |                 } catch (err) {
372 |                     console.error('Не удалось скопировать ссылку: ', err);
373 |                 }
374 |             }
375 |         }
376 |     </script>
377 | </body>
378 | </html>
379 | 


--------------------------------------------------------------------------------
/tests/test2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Самый серьезный психологический тест: Кто вы?</title>
  7 | 
  8 |     <!-- Open Graph Meta Tags -->
  9 |     <meta property="og:title" content="Серьезный психологический тест: Кто вы?">
 10 |     <meta property="og:description" content="Пройдите тест и узнайте, кто вы: Тигр-начальник, Обезьяна-душа компании, Слон-хранитель уюта или Муравей-перфекционист.">
 11 |     <meta property="og:url" content="https://gritsenko.biz/tests/beast_test.html">
 12 |     <meta property="og:type" content="website">
 13 |     <meta property="og:image" content="https://placehold.co/1200x630/a855f7/ffffff?text=Какой+вы+зверь%3F&font=inter">
 14 |     <meta property="og:image:width" content="1200">
 15 |     <meta property="og:image:height" content="630">
 16 | 
 17 |     <script src="https://cdn.tailwindcss.com"></script>
 18 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 19 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 20 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 21 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
 22 |     <style>
 23 |         body {
 24 |             font-family: 'Inter', sans-serif;
 25 |         }
 26 |         .card {
 27 |             background-color: white;
 28 |             border-radius: 1.5rem;
 29 |             padding: 2rem;
 30 |             box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 31 |             transition: all 0.3s ease-in-out;
 32 |         }
 33 |         .answer-btn {
 34 |             transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 35 |         }
 36 |         .answer-btn:hover {
 37 |             transform: translateY(-2px);
 38 |             background-color: #4338ca; /* indigo-700 */
 39 |         }
 40 |         #result-screen h2 {
 41 |              background: -webkit-linear-gradient(45deg, #4f46e5, #a855f7);
 42 |             -webkit-background-clip: text;
 43 |             -webkit-text-fill-color: transparent;
 44 |         }
 45 |         #copy-notification {
 46 |             transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 47 |         }
 48 |     </style>
 49 |           <!-- Yandex.Metrika counter -->
 50 |   <script type="text/javascript">
 51 |     (function (m, e, t, r, i, k, a) {
 52 |       m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
 53 |       m[i].l = 1 * new Date();
 54 |       for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
 55 |       k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
 56 |     })
 57 |       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 58 | 
 59 |     ym(98653129, "init", {
 60 |       clickmap: true,
 61 |       trackLinks: true,
 62 |       accurateTrackBounce: true
 63 |     });
 64 |   </script>
 65 |   <noscript>
 66 |     <div><img src="https://mc.yandex.ru/watch/98653129" style="position:absolute; left:-9999px;" alt="" /></div>
 67 |   </noscript>
 68 |   <!-- /Yandex.Metrika counter -->
 69 | </head>
 70 | <body class="bg-slate-50 text-slate-800 flex items-center justify-center min-h-screen p-4">
 71 | 
 72 |     <div id="app" class="max-w-2xl w-full mx-auto text-center">
 73 | 
 74 |         <!-- Начальный экран -->
 75 |         <div id="start-screen" class="card">
 76 |             <h1 class="text-4xl font-bold mb-4 text-slate-900">Какой вы офисный зверь?</h1>
 77 |             <p class="text-lg text-slate-600 mb-8">Пройдите этот серьезный тест и узнайте, кто вы на самом деле, когда никто не видит. Результат может вас удивить!</p>
 78 |             <button id="start-btn" class="w-full sm:w-auto bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-500/50">
 79 |                 Узнать страшную правду
 80 |             </button>
 81 |         </div>
 82 | 
 83 |         <!-- Экран с вопросами -->
 84 |         <div id="quiz-screen" class="card hidden">
 85 |             <div class="flex justify-between items-center mb-4">
 86 |                  <p id="question-counter" class="text-sm font-medium text-slate-500"></p>
 87 |             </div>
 88 |             <div class="w-full bg-slate-200 rounded-full h-2.5 mb-6">
 89 |                 <div id="progress-bar-inner" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300 ease-in-out" style="width: 0%"></div>
 90 |             </div>
 91 |             <h2 id="question-text" class="text-2xl font-semibold mb-8 min-h-[6rem] flex items-center justify-center"></h2>
 92 |             <div id="answers-container" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 93 |                 <!-- Кнопки с ответами будут вставлены сюда -->
 94 |             </div>
 95 |         </div>
 96 | 
 97 |         <!-- Экран с результатами -->
 98 |         <div id="result-screen" class="card hidden">
 99 |             <p class="text-lg text-slate-600 mb-2">Поздравляем! Вы — ...</p>
100 |             <div id="result-emoji" class="text-8xl mb-4"></div>
101 |             <h2 id="result-title" class="text-5xl font-bold mb-6"></h2>
102 |             
103 |             <div class="grid md:grid-cols-2 gap-8 items-center">
104 |                 <div class="text-left">
105 |                     <p id="result-description" class="text-md text-slate-700 mb-6"></p>
106 |                 </div>
107 |                 <div>
108 |                      <h3 class="text-xl font-semibold mb-4 text-slate-800">Ваш профиль личности:</h3>
109 |                      <div class="relative h-64">
110 |                         <canvas id="result-chart"></canvas>
111 |                      </div>
112 |                 </div>
113 |             </div>
114 |             
115 |             <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
116 |                 <button id="restart-btn" class="w-full sm:w-auto bg-slate-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-slate-700 transition-colors">
117 |                     Пройти еще раз
118 |                 </button>
119 |                 <button id="share-btn" class="w-full sm:w-auto bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-indigo-700 transition-colors">
120 |                     Поделиться
121 |                 </button>
122 |             </div>
123 |         </div>
124 | 
125 |     </div>
126 |     
127 |     <!-- Уведомление о копировании -->
128 |     <div id="copy-notification" class="fixed bottom-5 left-1/2 -translate-x-1/2 bg-slate-800 text-white py-2 px-4 rounded-lg opacity-0 transform translate-y-2">
129 |         Ссылка скопирована!
130 |     </div>
131 | 
132 | 
133 |     <script>
134 |         // --- ЭЛЕМЕНТЫ DOM ---
135 |         const startScreen = document.getElementById('start-screen');
136 |         const quizScreen = document.getElementById('quiz-screen');
137 |         const resultScreen = document.getElementById('result-screen');
138 | 
139 |         const startBtn = document.getElementById('start-btn');
140 |         const restartBtn = document.getElementById('restart-btn');
141 |         const shareBtn = document.getElementById('share-btn');
142 |         const copyNotification = document.getElementById('copy-notification');
143 | 
144 |         const questionText = document.getElementById('question-text');
145 |         const answersContainer = document.getElementById('answers-container');
146 |         const progressBarInner = document.getElementById('progress-bar-inner');
147 |         const questionCounter = document.getElementById('question-counter');
148 | 
149 |         const resultEmoji = document.getElementById('result-emoji');
150 |         const resultTitle = document.getElementById('result-title');
151 |         const resultDescription = document.getElementById('result-description');
152 |         const resultChartCanvas = document.getElementById('result-chart');
153 |         
154 |         let resultChart = null;
155 |         let shareText = ''; 
156 | 
157 |         // --- ДАННЫЕ ТЕСТА ---
158 |         const questions = [
159 |             { text: "Вам дали новую задачу. Ваши действия?", answers: [{ text: "Уже делаю! Потом разберемся.", type: "D" }, { text: "Собираю всех на мозговой штурм! И заказываю пиццу.", type: "I" }, { text: "Сначала налью чаю и понаблюдаю, как делают другие.", type: "S" }, { text: "Создам Excel-таблицу с планом, подпланом и графиком.", type: "C" }] },
160 |             { text: "Вы на корпоративе. Где вас искать?", answers: [{ text: "В центре внимания, рассказываю анекдот.", type: "I" }, { text: "В уютном уголке с проверенными коллегами.", type: "S" }, { text: "Возле стены, анализирую танцевальные стили.", type: "C" }, { text: "Обсуждаю с шефом план по захвату мира.", type: "D" }] },
161 |             { text: "Ваш идеальный рабочий ритм:", answers: [{ text: "Спокойный, как черепаха в отпуске.", type: "S" }, { text: "Четкий, как швейцарские часы (которые я настроил).", type: "C" }, { text: "Быстрый, как гепард, выпивший эспрессо.", type: "D" }, { text: "Хаотичный, как полет шмеля в ураган.", type: "I" }] },
162 |             { text: "В командном проекте вы – ...", answers: [{ text: "Капитан, который кричит 'На абордаж!'", type: "D" }, { text: "Талисман, который всех обнимает и вдохновляет.", type: "I" }, { text: "Клей, который не дает команде развалиться.", type: "S" }, { text: "Человек, который заметил опечатку на 34-й странице.", type: "C" }] },
163 |             { text: "Как вы выбираете, что посмотреть вечером?", answers: [{ text: "Быстро. Пульт в моих руках, решаю я.", type: "D" }, { text: "Спрашиваю у 10 друзей и создаю опрос в чате.", type: "I" }, { text: "Соглашаюсь на то, что выбрали другие, лишь бы без споров.", type: "S" }, { text: "Изучаю рейтинги на 5 сайтах и читаю 20 рецензий.", type: "C" }] },
164 |             { text: "Что вас бесит?", answers: [{ text: "Когда кто-то тормозит в левом ряду.", type: "D" }, { text: "Скучные люди, которые не смеются над моими шутками.", type: "I" }, { text: "Когда кто-то кричит и нарушает всеобщее спокойствие.", type: "S" }, { text: "Когда картина на стене висит криво на 1 градус.", type: "C" }] },
165 |             { text: "Ваш девиз по жизни:", answers: [{ text: "Вижу цель – не вижу препятствий!", type: "D" }, { text: "Давайте жить дружно и весело!", type: "I" }, { text: "Главное, чтобы всем было хорошо.", type: "S" }, { text: "Все должно быть по полочкам.", type: "C" }] },
166 |             { text: "Вам нужно сделать замечание коллеге. Как вы это сделаете?", answers: [{ text: "Так, садись, слушай. Ты не прав.", type: "D" }, { text: "Слушай, такая история смешная... Кстати, о твоем отчете...", type: "I" }, { text: "Я, конечно, извиняюсь, но может, посмотрим вот тут...?", type: "S" }, { text: "Я составил список из 12 пунктов для улучшения...", type: "C" }] },
167 |             { text: "Ваше рабочее место – это...", answers: [{ text: "Командный пункт. На столе только ноутбук и трофеи.", type: "D" }, { text: "Фан-клуб. Фотографии, мемы, конфеты для всех.", type: "I" }, { text: "Островок уюта. Плед, любимая кружка, цветок.", type: "S" }, { text: "Лаборатория. Все разложено по линейке.", type: "C" }] },
168 |             { text: "GPS говорит 'направо', а интуиция – 'налево'. Ваши действия?", answers: [{ text: "Интуиция – мой второй пилот. Сворачиваю налево!", type: "D" }, { text: "Звоню другу спросить, куда бы он поехал.", type: "I" }, { text: "Останавливаюсь и жду, пока кто-нибудь еще поедет.", type: "S" }, { text: "Проверяю три разных навигатора.", type: "C" }] },
169 |             { text: "Что для вас работа?", answers: [{ text: "Поле битвы, где я – генерал.", type: "D" }, { text: "Сцена, где я – главная звезда.", type: "I" }, { text: "Вторая семья, где нужно обо всех заботиться.", type: "S" }, { text: "Огромная головоломка, которую нужно решить.", type: "C" }] },
170 |             { text: "В офисе внезапно отключили интернет.", answers: [{ text: "Иду к начальству требовать интернет обратно.", type: "D" }, { text: "Ура! Время для общения и кофе-брейка!", type: "I" }, { text: "Тихо паникую, но внешне сохраняю спокойствие.", type: "S" }, { text: "Наконец-то! Время навести порядок на рабочем столе.", type: "C" }] },
171 |             { text: "Как вы проводите отпуск?", answers: [{ text: "Покоряю горы, ныряю с акулами, ставлю рекорды.", type: "D" }, { text: "Еду туда, где много людей, новые знакомства и вечеринки.", type: "I" }, { text: "В том самом отеле, где был в прошлом году. Там так хорошо.", type: "S" }, { text: "По заранее составленному маршруту с точностью до минуты.", type: "C" }] },
172 |             { text: "Лучший подарок для вас:", answers: [{ text: "Что-то дорогое, статусное. Или просто деньги.", type: "D" }, { text: "Билет на концерт или вечеринка-сюрприз.", type: "I" }, { text: "Теплый плед, хорошая книга, сертификат в спа.", type: "S" }, { text: "Набор отверток, умные часы или органайзер.", type: "C" }] },
173 |             { text: "В споре ваша главная тактика:", answers: [{ text: "Переспорить. Любой ценой.", type: "D" }, { text: "Очаровать и убедить, что моя идея самая лучшая.", type: "I" }, { text: "Сказать 'ты прав', лишь бы все закончилось.", type: "S" }, { text: "Привести 3 железных аргумента и 5 графиков.", type: "C" }] },
174 |             { text: "Инструкция по сборке мебели для вас – это...", answers: [{ text: "Для слабаков. Начну собирать, а там посмотрим.", type: "D" }, { text: "Повод позвать друзей на 'вечеринку по сборке'.", type: "I" }, { text: "Важный документ, но если что, попрошу помощи.", type: "S" }, { text: "Священный текст. Читаю от корки до корки.", type: "C" }] },
175 |             { text: "Планы на следующий год:", answers: [{ text: "Захватить мир. Ну, или хотя бы свой отдел.", type: "D" }, { text: "Найти новых друзей, посетить 100 мероприятий, завести блог.", type: "I" }, { text: "Надеюсь, все будет так же, как и в этом году.", type: "S" }, { text: "У меня есть диаграмма Ганта до 2030 года.", type: "C" }] },
176 |             { text: "Что вас заводит?", answers: [{ text: "Дух соревнования. Я должен быть первым!", type: "D" }, { text: "Аплодисменты и комплименты.", type: "I" }, { text: "Когда всех обнял и все счастливы.", type: "S" }, { text: "Идеально выполненная задача.", type: "C" }] },
177 |             { text: "Как вы боретесь со стрессом?", answers: [{ text: "Иду в спортзал и бью грушу.", type: "D" }, { text: "Звоню всем подряд и жалуюсь.", type: "I" }, { text: "Заворачиваюсь в одеяло и смотрю сериалы.", type: "S" }, { text: "Составляю план по устранению источника стресса.", type: "C" }] },
178 |             { text: "Ваше отношение к деталям:", answers: [{ text: "Детали? Это что-то для микроскопа.", type: "D" }, { text: "Ой, какая бабочка полетела! Что вы говорили?", type: "I" }, { text: "Замечаю, если кому-то неудобно или грустно.", type: "S" }, { text: "Я и есть ходячая деталь.", type: "C" }] },
179 |             { text: "Вы – начальник. Ваш стиль:", answers: [{ text: "Я сказал – вы сделали. Вопросы?", type: "D" }, { text: "Ребята, мы команда! Давайте зажжем!", type: "I" }, { text: "Вы не голодны? Может, чаю? Как ваши дела?", type: "S" }, { text: "Работаем по регламенту, пункт 3.4.2.", type: "C" }] },
180 |             { text: "Как вы осваиваете новый гаджет?", answers: [{ text: "Нажимаю на все кнопки подряд.", type: "D" }, { text: "Снимаю распаковку для сторис.", type: "I" }, { text: "Прошу кого-нибудь настроить.", type: "S" }, { text: "Сначала читаю инструкцию. Дважды.", type: "C" }] },
181 |             { text: "Успех – это...", answers: [{ text: "Когда все знают, что я лучший.", type: "D" }, { text: "Когда у меня 1000 лайков и полная записная книжка.", type: "I" }, { text: "Когда на душе спокойно и все близкие рядом.", type: "S" }, { text: "Когда все файлы отсортированы, а в коде нет ошибок.", type: "C" }] }
182 |         ];
183 | 
184 |         const results = {
185 |             D: { emoji: "🐅", title: "Тигр", description: "Вы не входите в комнату, вы врываетесь. Светофоры для вас — просто цветная гирлянда. Ваше кредо: сначала сделать, потом (может быть) подумать. Вы прирожденный лидер, даже если ведете только кота к миске. Люди вас либо обожают, либо боятся. Чаще второе, но вас это не волнует." },
186 |             I: { emoji: "🐒", title: "Обезьяна", description: "Список ваших дел длиннее, чем... ну, он очень длинный, и вы его потеряли. Зато у вас миллион друзей и 17 незаконченных гениальных проектов. Вы — душа любой компании и генератор идей, которые вы сами же и забываете через 5 минут. Скучно с вами не бывает. Стабильно — тоже." },
187 |             S: { emoji: "🐘", title: "Слон", description: "Ваша суперсила — превращать любой хаос в уютное болотце. Перемены? Нет, спасибо, у меня тут плед и какао. Вы — клей, который держит команду вместе, и тот, кто помнит все дни рождения. Если бы комфорт был человеком, это были бы вы. Только не просите вас быстро принять решение, рискуете дождаться пенсии." },
188 |             C: { emoji: "🐜", title: "Муравей", description: "Ваша любимая книга — инструкция к стиральной машине. Вы раскладываете носки по цвету и дате покупки. Хаос видит вас и плачет в углу. Вы не просто делаете работу хорошо, вы делаете ее ИДЕАЛЬНО, даже если на это уйдет вечность. Да, вы немного зануда, но без вас все бы давно развалилось." }
189 |         };
190 | 
191 |         // --- СОСТОЯНИЕ ПРИЛОЖЕНИЯ ---
192 |         let currentQuestionIndex = 0;
193 |         let scores = { D: 0, I: 0, S: 0, C: 0 };
194 | 
195 |         // --- ФУНКЦИИ ---
196 |         function startTest() {
197 |             currentQuestionIndex = 0;
198 |             scores = { D: 0, I: 0, S: 0, C: 0 };
199 |             shareText = '';
200 |             startScreen.classList.add('hidden');
201 |             resultScreen.classList.add('hidden');
202 |             quizScreen.classList.remove('hidden');
203 |             if(resultChart) {
204 |                 resultChart.destroy();
205 |             }
206 |             showQuestion();
207 |         }
208 | 
209 |         function showQuestion() {
210 |             const question = questions[currentQuestionIndex];
211 |             questionText.textContent = question.text;
212 |             answersContainer.innerHTML = '';
213 |             questionCounter.textContent = `Вопрос ${currentQuestionIndex + 1} из ${questions.length}`;
214 | 
215 |             const progress = ((currentQuestionIndex) / questions.length) * 100;
216 |             progressBarInner.style.width = `${progress}%`;
217 | 
218 |             question.answers.forEach(answer => {
219 |                 const button = document.createElement('button');
220 |                 button.textContent = answer.text;
221 |                 button.className = 'answer-btn w-full bg-indigo-600 text-white font-semibold p-4 rounded-lg text-left';
222 |                 button.onclick = () => selectAnswer(answer.type);
223 |                 answersContainer.appendChild(button);
224 |             });
225 |         }
226 | 
227 |         function selectAnswer(type) {
228 |             scores[type]++;
229 |             currentQuestionIndex++;
230 | 
231 |             if (currentQuestionIndex < questions.length) {
232 |                 showQuestion();
233 |             } else {
234 |                 showResult();
235 |             }
236 |         }
237 | 
238 |         function showResult() {
239 |             progressBarInner.style.width = '100%';
240 |             questionCounter.textContent = `Тест завершен!`;
241 | 
242 |             let maxScore = -1;
243 |             let resultType = '';
244 |             for (const type in scores) {
245 |                 if (scores[type] > maxScore) {
246 |                     maxScore = scores[type];
247 |                     resultType = type;
248 |                 }
249 |             }
250 |             
251 |             const totalScore = Object.values(scores).reduce((sum, score) => sum + score, 0);
252 |             const percentages = {
253 |                 D: totalScore > 0 ? Math.round((scores.D / totalScore) * 100) : 0,
254 |                 I: totalScore > 0 ? Math.round((scores.I / totalScore) * 100) : 0,
255 |                 S: totalScore > 0 ? Math.round((scores.S / totalScore) * 100) : 0,
256 |                 C: totalScore > 0 ? Math.round((scores.C / totalScore) * 100) : 0,
257 |             };
258 | 
259 |             const resultData = results[resultType];
260 |             resultEmoji.textContent = resultData.emoji;
261 |             resultTitle.textContent = resultData.title;
262 |             resultDescription.textContent = resultData.description;
263 |             
264 |             shareText = `Я прошел уморительный тест и мой результат - ${resultData.title}! ${resultData.emoji} Узнайте и вы, какой вы зверь.`;
265 |             
266 |             renderChart(percentages);
267 | 
268 |             quizScreen.classList.add('hidden');
269 |             resultScreen.classList.remove('hidden');
270 |         }
271 |         
272 |         function renderChart(percentages) {
273 |             const ctx = resultChartCanvas.getContext('2d');
274 |             resultChart = new Chart(ctx, {
275 |                 type: 'bar',
276 |                 data: {
277 |                     labels: ['Тигр (D)', 'Обезьяна (I)', 'Слон (S)', 'Муравей (C)'],
278 |                     datasets: [{
279 |                         label: '% соответствия',
280 |                         data: [percentages.D, percentages.I, percentages.S, percentages.C],
281 |                         backgroundColor: [
282 |                             'rgba(239, 68, 68, 0.6)', // red-500
283 |                             'rgba(249, 115, 22, 0.6)', // orange-500
284 |                             'rgba(34, 197, 94, 0.6)', // green-500
285 |                             'rgba(59, 130, 246, 0.6)' // blue-500
286 |                         ],
287 |                         borderColor: [
288 |                             'rgba(239, 68, 68, 1)',
289 |                             'rgba(249, 115, 22, 1)',
290 |                             'rgba(34, 197, 94, 1)',
291 |                             'rgba(59, 130, 246, 1)'
292 |                         ],
293 |                         borderWidth: 1
294 |                     }]
295 |                 },
296 |                 options: {
297 |                     responsive: true,
298 |                     maintainAspectRatio: false,
299 |                     indexAxis: 'y',
300 |                     scales: {
301 |                         x: {
302 |                             beginAtZero: true,
303 |                             max: 100,
304 |                             ticks: {
305 |                                 callback: function(value) {
306 |                                     return value + "%"
307 |                                 }
308 |                             }
309 |                         }
310 |                     },
311 |                     plugins: {
312 |                         legend: {
313 |                             display: false
314 |                         }
315 |                     }
316 |                 }
317 |             });
318 |         }
319 |         
320 |         function shareResult() {
321 |             const shareData = {
322 |                 title: 'Какой вы офисный зверь?',
323 |                 text: shareText,
324 |                 url: 'https://gritsenko.biz/tests/test2.html'
325 |             };
326 | 
327 |             if (navigator.share) {
328 |                 navigator.share(shareData).catch(console.error);
329 |             } else {
330 |                 const textArea = document.createElement("textarea");
331 |                 textArea.value = shareData.url;
332 |                 document.body.appendChild(textArea);
333 |                 textArea.focus();
334 |                 textArea.select();
335 |                 try {
336 |                     document.execCommand('copy');
337 |                     showCopyNotification();
338 |                 } catch (err) {
339 |                     console.error('Fallback: Oops, unable to copy', err);
340 |                 }
341 |                 document.body.removeChild(textArea);
342 |             }
343 |         }
344 | 
345 |         function showCopyNotification() {
346 |             copyNotification.classList.remove('opacity-0', 'translate-y-2');
347 |             setTimeout(() => {
348 |                 copyNotification.classList.add('opacity-0', 'translate-y-2');
349 |             }, 2000);
350 |         }
351 | 
352 |         // --- ОБРАБОТЧИКИ СОБЫТИЙ ---
353 |         startBtn.addEventListener('click', startTest);
354 |         restartBtn.addEventListener('click', startTest);
355 |         shareBtn.addEventListener('click', shareResult);
356 | 
357 |     </script>
358 | </body>
359 | </html>
360 | 


--------------------------------------------------------------------------------
/tests/beast_test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Расширенный психологический тест: Кто вы?</title>
  7 | 
  8 |     <!-- Open Graph Meta Tags -->
  9 |     <meta property="og:title" content="Расширенный психологический тест: Кто вы?">
 10 |     <meta property="og:description" content="Пройдите тест и узнайте, кто вы: решительный Тигр, общительная Обезьяна, надежный Слон или дотошный Муравей.">
 11 |     <meta property="og:url" content="https://gritsenko.biz/tests/beast_test.html">
 12 |     <meta property="og:type" content="website">
 13 |     <meta property="og:image" content="https://placehold.co/1200x630/6366f1/ffffff?text=Какой+вы+тип+личности%3F&font=inter">
 14 |     <meta property="og:image:width" content="1200">
 15 |     <meta property="og:image:height" content="630">
 16 | 
 17 |     <script src="https://cdn.tailwindcss.com"></script>
 18 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 19 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 20 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 21 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
 22 |     <style>
 23 |         body {
 24 |             font-family: 'Inter', sans-serif;
 25 |         }
 26 |         .card {
 27 |             background-color: white;
 28 |             border-radius: 1.5rem;
 29 |             padding: 2rem;
 30 |             box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 31 |             transition: all 0.3s ease-in-out;
 32 |         }
 33 |         .answer-btn {
 34 |             transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 35 |         }
 36 |         .answer-btn:hover {
 37 |             transform: translateY(-2px);
 38 |             background-color: #4338ca; /* indigo-700 */
 39 |         }
 40 |         #result-screen h2 {
 41 |              background: -webkit-linear-gradient(45deg, #4f46e5, #a855f7);
 42 |             -webkit-background-clip: text;
 43 |             -webkit-text-fill-color: transparent;
 44 |         }
 45 |         #copy-notification {
 46 |             transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 47 |         }
 48 |     </style>
 49 | 
 50 |           <!-- Yandex.Metrika counter -->
 51 |   <script type="text/javascript">
 52 |     (function (m, e, t, r, i, k, a) {
 53 |       m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
 54 |       m[i].l = 1 * new Date();
 55 |       for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
 56 |       k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
 57 |     })
 58 |       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 59 | 
 60 |     ym(98653129, "init", {
 61 |       clickmap: true,
 62 |       trackLinks: true,
 63 |       accurateTrackBounce: true
 64 |     });
 65 |   </script>
 66 |   <noscript>
 67 |     <div><img src="https://mc.yandex.ru/watch/98653129" style="position:absolute; left:-9999px;" alt="" /></div>
 68 |   </noscript>
 69 |   <!-- /Yandex.Metrika counter -->
 70 | </head>
 71 | <body class="bg-slate-50 text-slate-800 flex items-center justify-center min-h-screen p-4">
 72 | 
 73 |     <div id="app" class="max-w-2xl w-full mx-auto text-center">
 74 | 
 75 |         <!-- Начальный экран -->
 76 |         <div id="start-screen" class="card">
 77 |             <h1 class="text-4xl font-bold mb-4 text-slate-900">Какой вы тип личности?</h1>
 78 |             <p class="text-lg text-slate-600 mb-8">Пройдите расширенный тест из 23 вопросов и узнайте, кто вы: решительный Тигр, общительная Обезьяна, надежный Слон или дотошный Муравей.</p>
 79 |             <button id="start-btn" class="w-full sm:w-auto bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-500/50">
 80 |                 Начать тест
 81 |             </button>
 82 |         </div>
 83 | 
 84 |         <!-- Экран с вопросами -->
 85 |         <div id="quiz-screen" class="card hidden">
 86 |             <div class="flex justify-between items-center mb-4">
 87 |                  <p id="question-counter" class="text-sm font-medium text-slate-500"></p>
 88 |             </div>
 89 |             <div class="w-full bg-slate-200 rounded-full h-2.5 mb-6">
 90 |                 <div id="progress-bar-inner" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300 ease-in-out" style="width: 0%"></div>
 91 |             </div>
 92 |             <h2 id="question-text" class="text-2xl font-semibold mb-8 min-h-[6rem] flex items-center justify-center"></h2>
 93 |             <div id="answers-container" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 94 |                 <!-- Кнопки с ответами будут вставлены сюда -->
 95 |             </div>
 96 |         </div>
 97 | 
 98 |         <!-- Экран с результатами -->
 99 |         <div id="result-screen" class="card hidden">
100 |             <p class="text-lg text-slate-600 mb-2">Ваш доминирующий тип:</p>
101 |             <div id="result-emoji" class="text-8xl mb-4"></div>
102 |             <h2 id="result-title" class="text-5xl font-bold mb-6"></h2>
103 |             
104 |             <div class="grid md:grid-cols-2 gap-8 items-center">
105 |                 <div class="text-left">
106 |                     <p id="result-description" class="text-md text-slate-700 mb-6"></p>
107 |                 </div>
108 |                 <div>
109 |                      <h3 class="text-xl font-semibold mb-4 text-slate-800">Ваш профиль личности:</h3>
110 |                      <!-- ИЗМЕНЕНИЕ: Добавлен контейнер с относительным позиционированием и фиксированной высотой -->
111 |                      <div class="relative h-64">
112 |                         <canvas id="result-chart"></canvas>
113 |                      </div>
114 |                 </div>
115 |             </div>
116 |             
117 |             <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
118 |                 <button id="restart-btn" class="w-full sm:w-auto bg-slate-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-slate-700 transition-colors">
119 |                     Пройти еще раз
120 |                 </button>
121 |                 <button id="share-btn" class="w-full sm:w-auto bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-indigo-700 transition-colors">
122 |                     Поделиться
123 |                 </button>
124 |             </div>
125 |         </div>
126 | 
127 |     </div>
128 |     
129 |     <!-- Уведомление о копировании -->
130 |     <div id="copy-notification" class="fixed bottom-5 left-1/2 -translate-x-1/2 bg-slate-800 text-white py-2 px-4 rounded-lg opacity-0 transform translate-y-2">
131 |         Ссылка скопирована!
132 |     </div>
133 | 
134 | 
135 |     <script>
136 |         // --- ЭЛЕМЕНТЫ DOM ---
137 |         const startScreen = document.getElementById('start-screen');
138 |         const quizScreen = document.getElementById('quiz-screen');
139 |         const resultScreen = document.getElementById('result-screen');
140 | 
141 |         const startBtn = document.getElementById('start-btn');
142 |         const restartBtn = document.getElementById('restart-btn');
143 |         const shareBtn = document.getElementById('share-btn');
144 |         const copyNotification = document.getElementById('copy-notification');
145 | 
146 |         const questionText = document.getElementById('question-text');
147 |         const answersContainer = document.getElementById('answers-container');
148 |         const progressBarInner = document.getElementById('progress-bar-inner');
149 |         const questionCounter = document.getElementById('question-counter');
150 | 
151 |         const resultEmoji = document.getElementById('result-emoji');
152 |         const resultTitle = document.getElementById('result-title');
153 |         const resultDescription = document.getElementById('result-description');
154 |         const resultChartCanvas = document.getElementById('result-chart');
155 |         
156 |         let resultChart = null;
157 |         let shareText = ''; // Переменная для хранения текста для репоста
158 | 
159 |         // --- ДАННЫЕ ТЕСТА ---
160 |         const questions = [
161 |             { text: "Когда вы сталкиваетесь с новой сложной задачей, ваша первая реакция?", answers: [{ text: "Берусь за дело немедленно, люблю вызовы.", type: "D" }, { text: "Обсуждаю с коллегами, ищу вдохновение.", type: "I" }, { text: "Сначала наблюдаю, помогаю другим.", type: "S" }, { text: "Тщательно планирую шаги, создаю систему.", type: "C" }] },
162 |             { text: "На вечеринке вы, скорее всего:", answers: [{ text: "Инициируете разговор, знакомитесь с новыми людьми.", type: "I" }, { text: "Спокойно общаетесь с небольшой группой знакомых.", type: "S" }, { text: "Анализируете ситуацию, прежде чем подойти.", type: "C" }, { text: "Обсуждаете амбициозные цели и проекты.", type: "D" }] },
163 |             { text: "Какой стиль работы вам ближе?", answers: [{ text: "Стабильный и предсказуемый, без спешки.", type: "S" }, { text: "Структурированный, с четкими правилами.", type: "C" }, { text: "Быстрый, динамичный, с фокусом на результат.", type: "D" }, { text: "Гибкий, творческий, с большим количеством общения.", type: "I" }] },
164 |             { text: "В командном проекте ваша главная роль — это...", answers: [{ text: "Лидер, который ведет команду к цели.", type: "D" }, { text: "Мотиватор, который всех подбадривает.", type: "I" }, { text: "Исполнитель, который поддерживает и помогает.", type: "S" }, { text: "Аналитик, который следит за качеством.", type: "C" }] },
165 |             { text: "Как вы принимаете важные решения?", answers: [{ text: "Быстро и решительно, доверяя интуиции.", type: "D" }, { text: "Советуясь с друзьями, ценя их мнение.", type: "I" }, { text: "Не спеша, обдумывая, как это повлияет на других.", type: "S" }, { text: "На основе фактов, логики и анализа.", type: "C" }] },
166 |             { text: "Что вас больше всего раздражает в других людях?", answers: [{ text: "Нерешительность и медлительность.", type: "D" }, { text: "Пессимизм и отсутствие энтузиазма.", type: "I" }, { text: "Резкость, эгоизм и невнимание к чувствам.", type: "S" }, { text: "Неорганизованность и небрежность в деталях.", type: "C" }] },
167 |             { text: "Выберите девиз, который вам ближе всего:", answers: [{ text: "Просто сделай это!", type: "D" }, { text: "Главное — участие, а не победа!", type: "I" }, { text: "Тише едешь — дальше будешь.", type: "S" }, { text: "Семь раз отмерь, один раз отрежь.", type: "C" }] },
168 |             { text: "Когда нужно высказать критику, вы:", answers: [{ text: "Говорите прямо и по делу.", type: "D" }, { text: "Смягчаете слова, чтобы не обидеть.", type: "I" }, { text: "Долго готовитесь, подбирая нужные слова.", type: "S" }, { text: "Подкрепляете критику фактами и данными.", type: "C" }] },
169 |             { text: "Ваше идеальное рабочее место:", answers: [{ text: "Конкурентная среда, где можно проявить себя.", type: "D" }, { text: "Дружный коллектив, где все общаются.", type: "I" }, { text: "Спокойное, стабильное, без резких перемен.", type: "S" }, { text: "Тихое, где можно сосредоточиться на деталях.", type: "C" }] },
170 |             { text: "Как вы относитесь к риску?", answers: [{ text: "Люблю рисковать, это ведет к большим победам.", type: "D" }, { text: "Рискую, если это весело и интересно.", type: "I" }, { text: "Предпочитаю избегать риска.", type: "S" }, { text: "Рискую только после тщательной оценки.", type: "C" }] },
171 |             { text: "Что для вас важнее в работе?", answers: [{ text: "Достижение амбициозных целей.", type: "D" }, { text: "Признание и хорошие отношения с коллегами.", type: "I" }, { text: "Стабильность и чувство безопасности.", type: "S" }, { text: "Качество и правильность выполнения.", type: "C" }] },
172 |             { text: "Ваша реакция на неожиданные изменения в планах:", answers: [{ text: "Быстро адаптируюсь и нахожу новое решение.", type: "D" }, { text: "Воспринимаю как новое приключение.", type: "I" }, { text: "Чувствую дискомфорт, мне нужно время привыкнуть.", type: "S" }, { text: "Начинаю анализировать новые вводные.", type: "C" }] },
173 |             { text: "Как вы обычно проводите свободное время?", answers: [{ text: "Активно, занимаясь спортом или соревнуясь.", type: "D" }, { text: "В компании друзей, на мероприятиях.", type: "I" }, { text: "Дома с семьей или за спокойным хобби.", type: "S" }, { text: "Читая, изучая что-то новое, упорядочивая.", type: "C" }] },
174 |             { text: "Какой подарок вы бы предпочли получить?", answers: [{ text: "Что-то, что подчеркивает статус.", type: "D" }, { text: "Впечатление: билет на концерт, путешествие.", type: "I" }, { text: "Что-то уютное и полезное для дома.", type: "S" }, { text: "Книгу, головоломку, технический гаджет.", type: "C" }] },
175 |             { text: "В споре вы чаще всего:", answers: [{ text: "Настаиваете на своем до победного.", type: "D" }, { text: "Пытаетесь обаять и убедить собеседника.", type: "I" }, { text: "Ищете компромисс, чтобы сохранить мир.", type: "S" }, { text: "Апеллируете к логике и фактам.", type: "C" }] },
176 |             { text: "Как вы относитесь к правилам и инструкциям?", answers: [{ text: "Правила для того, чтобы их нарушать, если это ведет к цели.", type: "D" }, { text: "Отношусь гибко, главное — человеческие отношения.", type: "I" }, { text: "Предпочитаю следовать проверенным путем.", type: "S" }, { text: "Считаю, что правила необходимы для порядка.", type: "C" }] },
177 |             { text: "Ваш подход к планированию будущего:", answers: [{ text: "Ставлю большие, амбициозные цели.", type: "D" }, { text: "Мечтаю и представляю себе яркое будущее.", type: "I" }, { text: "Планирую ближайшие шаги для стабильности.", type: "S" }, { text: "Составляю детальный пошаговый план.", type: "C" }] },
178 |             { text: "Что вас мотивирует больше всего?", answers: [{ text: "Победа и достижение результата.", type: "D" }, { text: "Одобрение и восхищение окружающих.", type: "I" }, { text: "Гармония и благодарность близких.", type: "S" }, { text: "Возможность сделать работу идеально.", type: "C" }] },
179 |             { text: "Как вы справляетесь со стрессом?", answers: [{ text: "Действую, решаю проблему, которая его вызвала.", type: "D" }, { text: "Общаюсь с друзьями, выговариваюсь.", type: "I" }, { text: "Замыкаюсь в себе, ищу уединения.", type: "S" }, { text: "Анализирую причину стресса, чтобы устранить ее.", type: "C" }] },
180 |             { text: "Ваше отношение к деталям:", answers: [{ text: "Смотрю на картину в целом, детали — для других.", type: "D" }, { text: "Часто упускаю детали, увлекаясь идеей.", type: "I" }, { text: "Замечаю детали, касающиеся комфорта людей.", type: "S" }, { text: "Детали — это самое важное.", type: "C" }] },
181 |             { text: "Если бы вы были руководителем, какой стиль управления вы бы выбрали?", answers: [{ text: "Авторитарный, ориентированный на результат.", type: "D" }, { text: "Демократичный, вдохновляющий команду.", type: "I" }, { text: "Патерналистский, заботящийся о подчиненных.", type: "S" }, { text: "Экспертный, основанный на знаниях и правилах.", type: "C" }] },
182 |             { text: "Как вы учитесь новому?", answers: [{ text: "Через практику и метод проб и ошибок.", type: "D" }, { text: "В группе, обсуждая и обмениваясь идеями.", type: "I" }, { text: "Медленно и последовательно, шаг за шагом.", type: "S" }, { text: "Изучая теорию и структурируя информацию.", type: "C" }] },
183 |             { text: "Что для вас означает успех?", answers: [{ text: "Быть первым и лучшим в своем деле.", type: "D" }, { text: "Быть популярным и любимым.", type: "I" }, { text: "Иметь стабильную и счастливую жизнь.", type: "S" }, { text: "Достичь мастерства и быть экспертом.", type: "C" }] }
184 |         ];
185 | 
186 |         const results = {
187 |             D: { emoji: "🐅", title: "Тигр", description: "Вы — прирожденный лидер, решительный и целеустремленный. Вы ориентированы на результат, не боитесь трудностей и быстро принимаете решения. Ваша уверенность и энергия ведут за собой других. Для вас важны вызовы и возможность побеждать. Однако иногда ваша прямолинейность может быть воспринята как резкость. Старайтесь быть более терпимыми к чужому мнению." },
188 |             I: { emoji: "🐒", title: "Обезьяна", description: "Вы — яркая, общительная и оптимистичная личность. Вы легко находите общий язык с людьми, вдохновляете их и создаете позитивную атмосферу. Для вас важны социальные связи и признание. Вы полны идей и энтузиазма. Иногда вы можете быть неорганизованны и увлекаться, забывая о деталях. Постарайтесь доводить начатое до конца." },
189 |             S: { emoji: "🐘", title: "Слон", description: "Вы — надежный, спокойный и дружелюбный человек. Вы цените стабильность, гармонию и безопасность. Вы прекрасный командный игрок, всегда готовый выслушать и поддержать. Ваша лояльность и терпение делают вас незаменимым другом и коллегой. Однако вы можете сопротивляться переменам и избегать конфликтов. Не бойтесь выходить из зоны комфорта." },
190 |             C: { emoji: "🐜", title: "Муравей", description: "Вы — точный, аналитичный и внимательный к деталям человек. Вы стремитесь к качеству и порядку во всем. Ваша системность, ответственность и дисциплина вызывают уважение. Вы предпочитаете работать с фактами и логикой. Иногда ваш перфекционизм может замедлять работу. Учитесь доверять не только анализу, но и интуиции." }
191 |         };
192 | 
193 |         // --- СОСТОЯНИЕ ПРИЛОЖЕНИЯ ---
194 |         let currentQuestionIndex = 0;
195 |         let scores = { D: 0, I: 0, S: 0, C: 0 };
196 | 
197 |         // --- ФУНКЦИИ ---
198 |         function startTest() {
199 |             currentQuestionIndex = 0;
200 |             scores = { D: 0, I: 0, S: 0, C: 0 };
201 |             shareText = '';
202 |             startScreen.classList.add('hidden');
203 |             resultScreen.classList.add('hidden');
204 |             quizScreen.classList.remove('hidden');
205 |             if(resultChart) {
206 |                 resultChart.destroy();
207 |             }
208 |             showQuestion();
209 |         }
210 | 
211 |         function showQuestion() {
212 |             const question = questions[currentQuestionIndex];
213 |             questionText.textContent = question.text;
214 |             answersContainer.innerHTML = '';
215 |             questionCounter.textContent = `Вопрос ${currentQuestionIndex + 1} из ${questions.length}`;
216 | 
217 |             const progress = ((currentQuestionIndex) / questions.length) * 100;
218 |             progressBarInner.style.width = `${progress}%`;
219 | 
220 |             question.answers.forEach(answer => {
221 |                 const button = document.createElement('button');
222 |                 button.textContent = answer.text;
223 |                 button.className = 'answer-btn w-full bg-indigo-600 text-white font-semibold p-4 rounded-lg text-left';
224 |                 button.onclick = () => selectAnswer(answer.type);
225 |                 answersContainer.appendChild(button);
226 |             });
227 |         }
228 | 
229 |         function selectAnswer(type) {
230 |             scores[type]++;
231 |             currentQuestionIndex++;
232 | 
233 |             if (currentQuestionIndex < questions.length) {
234 |                 showQuestion();
235 |             } else {
236 |                 showResult();
237 |             }
238 |         }
239 | 
240 |         function showResult() {
241 |             progressBarInner.style.width = '100%';
242 |             questionCounter.textContent = `Тест завершен!`;
243 | 
244 |             let maxScore = -1;
245 |             let resultType = '';
246 |             for (const type in scores) {
247 |                 if (scores[type] > maxScore) {
248 |                     maxScore = scores[type];
249 |                     resultType = type;
250 |                 }
251 |             }
252 |             
253 |             const totalScore = Object.values(scores).reduce((sum, score) => sum + score, 0);
254 |             const percentages = {
255 |                 D: totalScore > 0 ? Math.round((scores.D / totalScore) * 100) : 0,
256 |                 I: totalScore > 0 ? Math.round((scores.I / totalScore) * 100) : 0,
257 |                 S: totalScore > 0 ? Math.round((scores.S / totalScore) * 100) : 0,
258 |                 C: totalScore > 0 ? Math.round((scores.C / totalScore) * 100) : 0,
259 |             };
260 | 
261 |             const resultData = results[resultType];
262 |             resultEmoji.textContent = resultData.emoji;
263 |             resultTitle.textContent = resultData.title;
264 |             resultDescription.textContent = resultData.description;
265 |             
266 |             // Сохраняем текст для репоста
267 |             shareText = `Я прошел тест и мой результат - ${resultData.title}! ${resultData.emoji} Узнайте и вы свой тип.`;
268 |             
269 |             renderChart(percentages);
270 | 
271 |             quizScreen.classList.add('hidden');
272 |             resultScreen.classList.remove('hidden');
273 |         }
274 |         
275 |         function renderChart(percentages) {
276 |             const ctx = resultChartCanvas.getContext('2d');
277 |             resultChart = new Chart(ctx, {
278 |                 type: 'bar',
279 |                 data: {
280 |                     labels: ['Тигр (D)', 'Обезьяна (I)', 'Слон (S)', 'Муравей (C)'],
281 |                     datasets: [{
282 |                         label: '% соответствия',
283 |                         data: [percentages.D, percentages.I, percentages.S, percentages.C],
284 |                         backgroundColor: [
285 |                             'rgba(239, 68, 68, 0.6)', // red-500
286 |                             'rgba(249, 115, 22, 0.6)', // orange-500
287 |                             'rgba(34, 197, 94, 0.6)', // green-500
288 |                             'rgba(59, 130, 246, 0.6)' // blue-500
289 |                         ],
290 |                         borderColor: [
291 |                             'rgba(239, 68, 68, 1)',
292 |                             'rgba(249, 115, 22, 1)',
293 |                             'rgba(34, 197, 94, 1)',
294 |                             'rgba(59, 130, 246, 1)'
295 |                         ],
296 |                         borderWidth: 1
297 |                     }]
298 |                 },
299 |                 options: {
300 |                     responsive: true,
301 |                     maintainAspectRatio: false,
302 |                     indexAxis: 'y',
303 |                     scales: {
304 |                         x: {
305 |                             beginAtZero: true,
306 |                             max: 100,
307 |                             ticks: {
308 |                                 callback: function(value) {
309 |                                     return value + "%"
310 |                                 }
311 |                             }
312 |                         }
313 |                     },
314 |                     plugins: {
315 |                         legend: {
316 |                             display: false
317 |                         }
318 |                     }
319 |                 }
320 |             });
321 |         }
322 |         
323 |         function shareResult() {
324 |             const shareData = {
325 |                 title: 'Какой вы тип личности?',
326 |                 text: shareText,
327 |                 url: 'https://gritsenko.biz/tests/beast_test.html'
328 |             };
329 | 
330 |             if (navigator.share) {
331 |                 navigator.share(shareData).catch(console.error);
332 |             } else {
333 |                 // Fallback for desktop: copy to clipboard
334 |                 const textArea = document.createElement("textarea");
335 |                 textArea.value = shareData.url;
336 |                 document.body.appendChild(textArea);
337 |                 textArea.focus();
338 |                 textArea.select();
339 |                 try {
340 |                     document.execCommand('copy');
341 |                     showCopyNotification();
342 |                 } catch (err) {
343 |                     console.error('Fallback: Oops, unable to copy', err);
344 |                 }
345 |                 document.body.removeChild(textArea);
346 |             }
347 |         }
348 | 
349 |         function showCopyNotification() {
350 |             copyNotification.classList.remove('opacity-0', 'translate-y-2');
351 |             setTimeout(() => {
352 |                 copyNotification.classList.add('opacity-0', 'translate-y-2');
353 |             }, 2000);
354 |         }
355 | 
356 |         // --- ОБРАБОТЧИКИ СОБЫТИЙ ---
357 |         startBtn.addEventListener('click', startTest);
358 |         restartBtn.addEventListener('click', startTest);
359 |         shareBtn.addEventListener('click', shareResult);
360 | 
361 |     </script>
362 | </body>
363 | </html>
364 | 


--------------------------------------------------------------------------------
/tests/speedtest.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Тест скорости скачивания</title>
  7 |     <!-- Подключаем Tailwind CSS -->
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <style>
 10 |         /* Используем шрифт Inter, как рекомендовано для Tailwind */
 11 |         body {
 12 |             font-family: 'Inter', sans-serif;
 13 |         }
 14 |     </style>
 15 | </head>
 16 | <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
 17 | 
 18 |     <div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-2xl">
 19 |         
 20 |         <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">
 21 |             Тест скорости скачивания
 22 |         </h1>
 23 | 
 24 |         <p class="text-center text-gray-600 mb-6">
 25 |             Файлы не будут сохранены на диск,
 26 |             будет только измерена скорость их получения.
 27 |         </p>
 28 | 
 29 |         <!-- [NEW] Добавленные ссылки -->
 30 |         <div class="text-center text-sm text-gray-500 mb-6 space-x-4">
 31 |             <a href="https://adsadvisor.my.games/api/crhub/fs/sharing/PkwKz73W3GZm9OyAx56dDBjeNLMVQqzYZDKvw1RKY0zg7PJX4Erpb2nlakVMr5eL/download?node_id=7523849" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 hover:underline">
 32 |                 Прямая ссылка
 33 |             </a>
 34 |             <span class="text-gray-300">|</span>
 35 |             <a href="https://aa.gritsenko.biz/api/crhub/fs/sharing/PkwKz73W3GZm9OyAx56dDBjeNLMVQqzYZDKvw1RKY0zg7PJX4Erpb2nlakVMr5eL/download?node_id=7523849" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 hover:underline">
 36 |                 Прокси
 37 |             </a>
 38 |         </div>
 39 | 
 40 |         <!-- [NEW] Переключатель режима -->
 41 |         <div class="flex items-center justify-center mb-6 space-x-3">
 42 |             <span id="label-parallel" class="text-sm font-medium text-gray-900 transition-colors">Параллельно</span>
 43 |             <button type="button" id="modeToggle" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-blue-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50" role="switch" aria-checked="true">
 44 |                 <span class="sr-only">Режим скачивания</span>
 45 |                 <!-- 'translate-x-5' (parallel) vs 'translate-x-0' (sequential) -->
 46 |                 <span id="modeToggleHandle" aria-hidden="true" class="inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 47 |             </button>
 48 |             <span id="label-sequential" class="text-sm font-medium text-gray-400 transition-colors">Последовательно</span>
 49 |         </div>
 50 | 
 51 | 
 52 |         <!-- Кнопка запуска -->
 53 |         <button id="startButton" class="w-full bg-blue-600 text-white font-bold p-3 rounded-lg mt-6 hover:bg-blue-700 transition disabled:bg-gray-400">
 54 |             Начать тест
 55 |         </button>
 56 |         <!-- Кнопка отмены -->
 57 |         <button id="stopButton" class="w-full bg-red-600 text-white font-bold p-3 rounded-lg mt-2 hover:bg-red-700 transition hidden">
 58 |             Прервать тест
 59 |         </button>
 60 | 
 61 |         <!-- Область результатов -->
 62 |         <div id="results" class="mt-6 space-y-4">
 63 |             <!-- Спиннер загрузки, который показывается во время теста -->
 64 |             <div id="loader" class="text-center py-4 hidden">
 65 |                 <svg class="animate-spin h-8 w-8 text-blue-600 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 66 |                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 67 |                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
 68 |                 </svg>
 69 |                 <p class="text-gray-600 mt-2">Идет тестирование...</p>
 70 |             </div>
 71 |             <!-- Карточки результатов будут вставлены сюда -->
 72 |         </div>
 73 |     </div>
 74 | 
 75 |     <script>
 76 |         // Получаем ссылки на элементы DOM
 77 |         const startButton = document.getElementById('startButton');
 78 |         const stopButton = document.getElementById('stopButton'); // Новая кнопка
 79 |         const resultsDiv = document.getElementById('results');
 80 |         const loader = document.getElementById('loader');
 81 |         
 82 |         // [NEW] Элементы переключателя
 83 |         const modeToggle = document.getElementById('modeToggle');
 84 |         const modeToggleHandle = document.getElementById('modeToggleHandle');
 85 |         const labelParallel = document.getElementById('label-parallel');
 86 |         const labelSequential = document.getElementById('label-sequential');
 87 |         let isParallelMode = true; // true = parallel, false = sequential
 88 | 
 89 |         let abortController; // Контроллер для прерывания fetch
 90 | 
 91 |         // Лимит 50МБ больше не нужен, будем качать файл целиком
 92 |         // const TEST_DOWNLOAD_BYTES = 50 * 1024 * 1024; // 50MB
 93 |         
 94 |         // [NEW] Обработчик переключателя
 95 |         modeToggle.addEventListener('click', () => {
 96 |             isParallelMode = !isParallelMode;
 97 |             modeToggle.setAttribute('aria-checked', isParallelMode);
 98 |             if (isParallelMode) {
 99 |                 // Включен Параллельный режим
100 |                 modeToggle.classList.add('bg-blue-600');
101 |                 modeToggle.classList.remove('bg-gray-400');
102 |                 modeToggleHandle.classList.add('translate-x-5');
103 |                 modeToggleHandle.classList.remove('translate-x-0');
104 |                 labelParallel.classList.add('text-gray-900');
105 |                 labelParallel.classList.remove('text-gray-400');
106 |                 labelSequential.classList.add('text-gray-400');
107 |                 labelSequential.classList.remove('text-gray-900');
108 |             } else {
109 |                 // Включен Последовательный режим
110 |                 modeToggle.classList.remove('bg-blue-600');
111 |                 modeToggle.classList.add('bg-gray-400');
112 |                 modeToggleHandle.classList.remove('translate-x-5');
113 |                 modeToggleHandle.classList.add('translate-x-0');
114 |                 labelParallel.classList.remove('text-gray-900');
115 |                 labelParallel.classList.add('text-gray-400');
116 |                 labelSequential.classList.remove('text-gray-400');
117 |                 labelSequential.classList.add('text-gray-900');
118 |             }
119 |         });
120 | 
121 | 
122 |         // Вешаем обработчик клика на кнопку
123 |         startButton.addEventListener('click', async () => {
124 |             // Очищаем предыдущие результаты
125 |             resultsDiv.innerHTML = '';
126 |             // Показываем спиннер
127 |             loader.classList.remove('hidden');
128 |             // Блокируем кнопку "Старт" и показываем "Прервать"
129 |             startButton.disabled = true;
130 |             stopButton.classList.remove('hidden');
131 |             modeToggle.disabled = true; // [NEW] Блокируем переключатель
132 | 
133 |             // Создаем новый AbortController для этого теста
134 |             abortController = new AbortController();
135 |             const signal = abortController.signal;
136 | 
137 |             // Жестко задаем URL-адреса, лейблы и общий размер файла
138 |             const tests = [
139 |                 { 
140 |                     label: "Прямая ссылка", 
141 |                     url: "https://adsadvisor.my.games/api/crhub/fs/sharing/PkwKz73W3GZm9OyAx56dDBjeNLMVQqzYZDKvw1RKY0zg7PJX4Erpb2nlakVMr5eL/download?node_id=7523849" 
142 |                 },
143 |                 { 
144 |                     label: "Через Прокси", 
145 |                     url: "https://aa.gritsenko.biz/api/crhub/fs/sharing/PkwKz73W3GZm9OyAx56dDBjeNLMVQqzYZDKvw1RKY0zg7PJX4Erpb2nlakVMr5eL/download?node_id=7523849" 
146 |                 }
147 |             ];
148 |             const TOTAL_BYTES = 378728939; // Размер файла, который вы указали
149 | 
150 |             // Запускаем оба теста параллельно
151 |             // Promise.allSettled ждет, пока *все* промисы завершатся (успешно или с ошибкой)
152 |             try {
153 |                 // [MODIFIED] - Логика запуска в зависимости от режима
154 |                 if (isParallelMode) {
155 |                     // --- Параллельный режим ---
156 |                     loader.classList.remove('hidden'); // Показываем спиннер
157 |                     await Promise.allSettled([
158 |                         measureDownloadSpeed(tests[0].url, tests[0].label, TOTAL_BYTES, signal),
159 |                         measureDownloadSpeed(tests[1].url, tests[1].label, TOTAL_BYTES, signal)
160 |                     ]);
161 |                 } else {
162 |                     // --- Последовательный режим ---
163 |                     loader.classList.add('hidden'); // Не показываем общий спиннер
164 |                     
165 |                     // Запускаем первый
166 |                     await measureDownloadSpeed(tests[0].url, tests[0].label, TOTAL_BYTES, signal);
167 |                     
168 |                     // Если тест не был прерван, запускаем второй
169 |                     if (!signal.aborted) {
170 |                         await measureDownloadSpeed(tests[1].url, tests[1].label, TOTAL_BYTES, signal);
171 |                     }
172 |                 }
173 |             } finally {
174 |                 // Этот блок выполнится в любом случае:
175 |                 // после успешного завершения, ошибки или отмены
176 |                 
177 |                 // Прячем спиннер
178 |                 loader.classList.add('hidden');
179 |                 // Возвращаем кнопки в исходное состояние
180 |                 startButton.disabled = false;
181 |                 stopButton.classList.add('hidden');
182 |                 modeToggle.disabled = false; // [NEW] Разблокируем переключатель
183 |             }
184 |         });
185 | 
186 |         // Обработчик для кнопки "Прервать"
187 |         stopButton.addEventListener('click', () => {
188 |             if (abortController) {
189 |                 abortController.abort(); // Отправляем сигнал отмены всем fetch-запросам
190 |             }
191 |         });
192 | 
193 |         /**
194 |          * Асинхронная функция для измерения скорости скачивания
195 |          * @param {string} url - URL для тестирования
196 |          * @param {string} label - Название теста (для отображения)
197 |          * @param {number} totalBytes - Общий размер файла для расчета %
198 |          * @param {AbortSignal} signal - Сигнал от AbortController для прерывания
199 |          */
200 |         async function measureDownloadSpeed(url, label, totalBytes, signal) {
201 |             const id = label.replace(/\s+/g, '-').toLowerCase(); // e.g., "прямая-ссылка"
202 |             const totalMb = (totalBytes / (1024 * 1024)).toFixed(1);
203 |             
204 |             // 1. Создаем UI для прогресс-бара и добавляем его в resultsDiv
205 |             const progressElement = document.createElement('div');
206 |             progressElement.className = "mb-4 p-4 border rounded-lg bg-gray-50"; // Добавим фон и отступы
207 |             progressElement.innerHTML = `
208 |                 <label class="block text-sm font-medium text-gray-700 mb-1">${label}</label>
209 |                 <div class="w-full bg-gray-200 rounded-full h-6 overflow-hidden relative">
210 |                     <div id="bar-${id}" class="bg-blue-600 h-full text-center text-white text-sm leading-6 transition-all duration-100 ease-linear" style="width: 0%">
211 |                     </div>
212 |                     <!-- Текст с процентами поверх прогресс-бара -->
213 |                     <div id="percent-${id}" class="absolute inset-0 flex items-center justify-center text-sm font-bold text-black opacity-60">
214 |                         0%
215 |                     </div>
216 |                 </div>
217 |                 <!-- Статистика -->
218 |                 <div class="mt-2 grid grid-cols-2 gap-2 font-mono text-sm">
219 |                     <!-- Левая сторона: Данные и Время -->
220 |                     <div class="text-left text-gray-600">
221 |                         <div id="data-${id}">Скачано: 0.0 / ${totalMb} МБ</div>
222 |                         <div id="time-${id}" class="mt-1">Время: 0.0 сек</div>
223 |                     </div>
224 |                     <!-- Правая сторона: Скорость -->
225 |                     <div id="speed-${id}" class="text-right text-gray-800 font-bold self-center">
226 |                         --.-- Мбит/с<br>(--.-- МБ/с)
227 |                     </div>
228 |                 </div>
229 |                 <!-- [NEW] График -->
230 |                 <canvas id="chart-${id}" class="mt-4 w-full h-24 bg-gray-100 rounded-lg" width="400" height="100"></canvas>
231 |             `;
232 |             resultsDiv.appendChild(progressElement);
233 | 
234 |             const barElement = document.getElementById(`bar-${id}`);
235 |             const percentElement = document.getElementById(`percent-${id}`);
236 |             const speedElement = document.getElementById(`speed-${id}`);
237 |             const dataElement = document.getElementById(`data-${id}`); // Новый элемент
238 |             const timeElement = document.getElementById(`time-${id}`); // Новый элемент
239 |             
240 |             // [NEW] Элементы графика
241 |             const chartCanvas = document.getElementById(`chart-${id}`);
242 |             // Устанавливаем реальный размер канваса (отличается от CSS размера)
243 |             chartCanvas.width = chartCanvas.offsetWidth;
244 |             chartCanvas.height = chartCanvas.offsetHeight;
245 |             const chartCtx = chartCanvas.getContext('2d');
246 |             let speedHistory = []; // Массив для хранения точек скорости
247 |             const graphUpdateInterval = 500; // мс (как часто обновлять график)
248 | 
249 |             const startTime = performance.now();
250 |             let lastUpdateTime = startTime;
251 |             let lastGraphUpdateTime = startTime; // [NEW]
252 |             let lastReceivedLength = 0;
253 |             let receivedLength = 0; // Будем считать полученные байты здесь
254 | 
255 |             try {
256 |                 // 1. Отправляем запрос на получение файла, передаем signal
257 |                 const response = await fetch(url, { signal });
258 | 
259 |                 // 2. Проверяем, успешен ли ответ
260 |                 if (!response.ok) {
261 |                     throw new Error(`Ошибка HTTP: ${response.status} ${response.statusText}`);
262 |                 }
263 |                 
264 |                 // 3. (УДАЛЕНО) Проверку Content-Length убрали.
265 | 
266 |                 // 4. "Потребляем" тело ответа, не сохраняя его
267 |                 const reader = response.body.getReader();
268 |                 
269 |                 while (true) {
270 |                     const { done, value } = await reader.read();
271 |                     
272 |                     // Как только done === true, поток закончился
273 |                     if (done) {
274 |                         const endTime = performance.now();
275 |                         const durationInSeconds = (endTime - startTime) / 1000;
276 |                         // Считаем *среднюю* скорость за все время
277 |                         const avgBitsPerSecond = (receivedLength * 8) / durationInSeconds;
278 |                         const avgMegabitsPerSecond = (avgBitsPerSecond / 1000 / 1000).toFixed(2);
279 |                         const avgMegabytesPerSecond = (receivedLength / (1024 * 1024)) / durationInSeconds; // МБ/с
280 |                         const receivedMb = (receivedLength / (1024 * 1024)).toFixed(1);
281 | 
282 |                         barElement.style.width = '100%';
283 |                         barElement.classList.remove('bg-blue-600');
284 |                         barElement.classList.add('bg-green-600'); // Зеленыый цвет при успехе
285 |                         percentElement.innerText = '100%';
286 |                         
287 |                         // Обновляем финальные значения
288 |                         speedElement.innerHTML = `Средняя: ${avgMegabitsPerSecond} Мбит/с<br>(${avgMegabytesPerSecond.toFixed(2)} МБ/с)`;
289 |                         dataElement.innerText = `Скачано: ${receivedMb} / ${totalMb} МБ`;
290 |                         timeElement.innerText = `Время: ${durationInSeconds.toFixed(1)} сек`;
291 |                         
292 |                         // [NEW] Финальная отрисовка графика
293 |                         speedHistory.push(parseFloat(avgMegabitsPerSecond)); // Добавляем среднюю скорость как последнюю точку
294 |                         drawGraph(chartCtx, speedHistory, true);
295 |                         break;
296 |                     }
297 |                     
298 |                     receivedLength += value.length; // Считаем полученные байты
299 |                     const now = performance.now();
300 |                     
301 |                     // [NEW] Логика обновления графика (каждые 500мс)
302 |                     if (now - lastGraphUpdateTime > graphUpdateInterval) {
303 |                         const timeDiffSeconds_graph = (now - lastGraphUpdateTime) / 1000;
304 |                         const bytesDiff_graph = receivedLength - lastReceivedLength;
305 |                         const speedBitsPerSecond_graph = (bytesDiff_graph * 8) / timeDiffSeconds_graph;
306 |                         const speedMegabitsPerSecond_graph = (speedBitsPerSecond_graph / 1000 / 1000);
307 | 
308 |                         if (isFinite(speedMegabitsPerSecond_graph) && speedMegabitsPerSecond_graph > 0) {
309 |                             speedHistory.push(parseFloat(speedMegabitsPerSecond_graph.toFixed(2)));
310 |                             drawGraph(chartCtx, speedHistory);
311 |                         }
312 |                         lastGraphUpdateTime = now;
313 |                     }
314 | 
315 |                     // Обновляем UI не чаще, чем раз в 200мс, чтобы не перегружать браузер
316 |                     if (now - lastUpdateTime > 200) {
317 |                         const percent = Math.min(100, (receivedLength / totalBytes) * 100);
318 |                         const durationInSeconds = (now - startTime) / 1000;
319 |                         const receivedMb = (receivedLength / (1024 * 1024)).toFixed(1);
320 |                         
321 |                         barElement.style.width = `${percent.toFixed(1)}%`;
322 |                         percentElement.innerText = `${percent.toFixed(0)}%`;
323 | 
324 |                         // Обновляем данные и время
325 |                         dataElement.innerText = `Скачано: ${receivedMb} / ${totalMb} МБ`;
326 |                         timeElement.innerText = `Время: ${durationInSeconds.toFixed(1)} сек`;
327 | 
328 |                         // Считаем *мгновенную* скорость
329 |                         const timeDiffSeconds = (now - lastUpdateTime) / 1000;
330 |                         const bytesDiff = receivedLength - lastReceivedLength;
331 |                         
332 |                         const speedBitsPerSecond = (bytesDiff * 8) / timeDiffSeconds;
333 |                         const speedMegabitsPerSecond = (speedBitsPerSecond / 1000 / 1000).toFixed(2);
334 |                         const speedMegabytesPerSecond = (bytesDiff / (1024 * 1024)) / timeDiffSeconds; // МБ/с
335 | 
336 |                         // Показываем текущую (мгновенную) скорость
337 |                         if (isFinite(speedMegabitsPerSecond) && isFinite(speedMegabytesPerSecond)) {
338 |                             speedElement.innerHTML = `${speedMegabitsPerSecond} Мбит/с<br>(${speedMegabytesPerSecond.toFixed(2)} МБ/с)`;
339 |                         }
340 | 
341 |                         lastUpdateTime = now;
342 |                         lastReceivedLength = receivedLength;
343 |                     }
344 |                 }
345 | 
346 |             } catch (error) {
347 |                 // 8. Обрабатываем ошибки
348 |                 
349 |                 // Проверяем, была ли это ошибка отмены
350 |                 if (error.name === 'AbortError') {
351 |                     console.log(`Тест "${label}" отменен.`);
352 |                     barElement.style.width = '100%';
353 |                     barElement.classList.remove('bg-blue-600');
354 |                     barElement.classList.add('bg-yellow-500'); // Желтый цвет для отмены
355 |                     percentElement.innerText = 'Остановлено'; // <== ИЗМЕНЕНО
356 |                     
357 |                     // Обновляем время и скачанные данные на момент остановки
358 |                     const now = performance.now();
359 |                     const durationInSeconds = (now - startTime) / 1000;
360 |                     const receivedMb = (receivedLength / (1024 * 1024)).toFixed(1);
361 |                     dataElement.innerText = `Скачано: ${receivedMb} / ${totalMb} МБ`;
362 |                     timeElement.innerText = `Время: ${durationInSeconds.toFixed(1)} сек`;
363 | 
364 |                     // [NEW] Отрисовка графика отмены
365 |                     drawGraph(chartCtx, speedHistory, false, true);
366 | 
367 |                     // НЕ МЕНЯЕМ `speedElement.innerText`, оставляя последнее значение
368 |                     return; // Выходим из функции
369 |                 }
370 | 
371 |                 // Обработка других ошибок (CORS, HTTP и т.д.)
372 |                 console.error(`Ошибка при тесте URL ${label} (${url}):`, error);
373 |                 
374 |                 barElement.style.width = '100%';
375 |                 barElement.classList.remove('bg-blue-600');
376 |                 barElement.classList.add('bg-red-600'); // Красный цвет при ошибке
377 |                 percentElement.innerText = 'Ошибка';
378 |                 
379 |                 let errorMessage = error.message;
380 |                 if (error.name === 'TypeError') {
381 |                     errorMessage = `Ошибка CORS. Сервер не разрешает скачивание.`;
382 |                 }
383 |                 
384 |                 speedElement.innerHTML = errorMessage; // <== Убрал <br> для ошибки
385 |                 // Обновляем время и скачанные данные на момент ошибки
386 |                 const now = performance.now();
387 |                 const durationInSeconds = (now - startTime) / 1000;
388 |                 const receivedMb = (receivedLength / (1024 * 1024)).toFixed(1);
389 |                 dataElement.innerText = `Скачано: ${receivedMb} / ${totalMb} МБ`;
390 |                 timeElement.innerText = `Время: ${durationInSeconds.toFixed(1)} сек (ошибка)`;
391 |                 
392 |                 // [NEW] Отрисовка графика ошибки
393 |                 drawGraph(chartCtx, speedHistory, false, false, true);
394 |             }
395 |         }
396 | 
397 |         /**
398 |          * [NEW] Рисует график скорости на Canvas
399 |          * @param {CanvasRenderingContext2D} ctx - Контекст 2D Canvas
400 |          * @param {number[]} data - Массив значений скорости (в Мбит/с)
401 |          * @param {boolean} [isFinal=false] - Завершающий рендер (зеленый)
402 |          * @param {boolean} [isAborted=false] - Рендер отмены (желтый)
403 |          * @param {boolean} [isError=false] - Рендер ошибки (красный)
404 |          */
405 |         function drawGraph(ctx, data, isFinal = false, isAborted = false, isError = false) {
406 |             const canvas = ctx.canvas;
407 |             const width = canvas.width;
408 |             const height = canvas.height;
409 |             
410 |             // Очищаем канвас
411 |             ctx.clearRect(0, 0, width, height);
412 | 
413 |             if (data.length < 2) {
414 |                 // Нечего рисовать, если точек меньше 2
415 |                 return;
416 |             }
417 | 
418 |             // Находим макс. скорость для масштабирования
419 |             const maxSpeed = Math.max(...data);
420 |             if (maxSpeed === 0) return; // Не делим на ноль
421 | 
422 |             // Настройка линии
423 |             let strokeStyle = 'rgb(59, 130, 246)'; // blue-600
424 |             if (isFinal) strokeStyle = 'rgb(34, 197, 94)'; // green-600
425 |             if (isAborted) strokeStyle = 'rgb(234, 179, 8)'; // yellow-500
426 |             if (isError) strokeStyle = 'rgb(220, 38, 38)'; // red-600
427 | 
428 |             ctx.strokeStyle = strokeStyle;
429 |             ctx.lineWidth = 2;
430 |             ctx.beginPath();
431 | 
432 |             // Рассчитываем шаг по X
433 |             const xStep = width / (data.length - 1);
434 | 
435 |             for (let i = 0; i < data.length; i++) {
436 |                 const speed = data[i];
437 |                 // Y-координата (перевернута, т.к. 0,0 вверху слева + небольшой отступ, чтобы линия не упиралась в край)
438 |                 const x = i * xStep;
439 |                 const y = Math.max(2, height - (speed / maxSpeed) * (height - 5)); // 5px отступ сверху, 2px снизу
440 |                 
441 |                 if (i === 0) {
442 |                     ctx.moveTo(x, y);
443 |                 } else {
444 |                     ctx.lineTo(x, y);
445 |                 }
446 |             }
447 |             ctx.stroke();
448 | 
449 |             // Метка о макс. скорости
450 |             ctx.fillStyle = '#6b7280'; // gray-500
451 |             ctx.font = '10px sans-serif';
452 |             ctx.textAlign = 'right';
453 |             ctx.fillText(`Max: ${maxSpeed.toFixed(1)} Мбит/с`, width - 5, 12);
454 |         }
455 | 
456 | 
457 |         /**
458 |          * (УДАЛЕНО)
459 |          * Отображает карточку с результатом
460 |          * ...
461 |          * function displayResult(label, url, message, status) { ... }
462 |          */
463 |     </script>
464 | </body>
465 | </html>


--------------------------------------------------------------------------------
/tests/trader.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Небесный Коммерсант</title>
  7 |     <script src="https://cdn.tailwindcss.com"></script>
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
 11 |     <style>
 12 |         /* Стиль в духе стимпанка */
 13 |         body {
 14 |             font-family: 'EB Garamond', serif;
 15 |             background-color: #4a3c2a;
 16 |             background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
 17 |             color: #f0e6d2;
 18 |         }
 19 |         .main-container {
 20 |             background-color: rgba(30, 25, 20, 0.8);
 21 |             border: 2px solid #8c7853;
 22 |             box-shadow: 0 0 15px rgba(0,0,0,0.7);
 23 |         }
 24 |         .header {
 25 |             font-family: 'Roboto Condensed', sans-serif;
 26 |             background-color: #3a2d1d;
 27 |             border-bottom: 2px solid #8c7853;
 28 |             color: #d4b996;
 29 |             text-shadow: 1px 1px 2px black;
 30 |         }
 31 |         .btn-steampunk {
 32 |             font-family: 'Roboto Condensed', sans-serif;
 33 |             background-color: #7a6848;
 34 |             border: 2px solid #c5a774;
 35 |             color: #fff;
 36 |             text-shadow: 1px 1px 1px #000;
 37 |             transition: all 0.2s ease-in-out;
 38 |             box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
 39 |         }
 40 |         .btn-steampunk:hover {
 41 |             background-color: #8c7853;
 42 |             border-color: #f0e6d2;
 43 |             transform: translateY(-2px);
 44 |             box-shadow: 0 4px 8px rgba(0,0,0,0.4);
 45 |         }
 46 |         .btn-steampunk:disabled {
 47 |             background-color: #554a36;
 48 |             border-color: #7a6848;
 49 |             color: #aaa;
 50 |             cursor: not-allowed;
 51 |         }
 52 |         .card {
 53 |             background-color: #3a2d1d;
 54 |             border: 1px solid #6a583a;
 55 |         }
 56 |         .log-panel {
 57 |             background-color: rgba(0,0,0,0.5);
 58 |             border-top: 2px solid #8c7853;
 59 |             font-family: 'Roboto Condensed', sans-serif;
 60 |             height: 150px;
 61 |         }
 62 |         .modal-bg {
 63 |             background-color: rgba(0,0,0,0.7);
 64 |         }
 65 |         .modal-content {
 66 |             background-color: #4a3c2a;
 67 |             border: 2px solid #8c7853;
 68 |         }
 69 |         /* Кастомный скроллбар */
 70 |         ::-webkit-scrollbar {
 71 |             width: 8px;
 72 |         }
 73 |         ::-webkit-scrollbar-track {
 74 |             background: #3a2d1d;
 75 |         }
 76 |         ::-webkit-scrollbar-thumb {
 77 |             background: #8c7853;
 78 |             border-radius: 4px;
 79 |         }
 80 |         ::-webkit-scrollbar-thumb:hover {
 81 |             background: #c5a774;
 82 |         }
 83 | 
 84 |         /* Стили для 2D карты */
 85 |         .map-container {
 86 |             position: relative;
 87 |             height: 450px;
 88 |             background-color: rgba(0,0,0,0.2);
 89 |             border: 1px solid #6a583a;
 90 |             border-radius: 8px;
 91 |             background-image: url('https://www.transparenttextures.com/patterns/old-map.png');
 92 |             overflow: hidden;
 93 |         }
 94 |         .map-svg {
 95 |             position: absolute;
 96 |             top: 0;
 97 |             left: 0;
 98 |             width: 100%;
 99 |             height: 100%;
100 |             pointer-events: none; /* Позволяет кликам проходить сквозь SVG к узлам городов */
101 |         }
102 |         .city-node {
103 |             position: absolute;
104 |             width: 90px;
105 |             height: 50px;
106 |             background-color: #7a6848;
107 |             border: 2px solid #c5a774;
108 |             border-radius: 5px;
109 |             display: flex;
110 |             align-items: center;
111 |             justify-content: center;
112 |             text-align: center;
113 |             font-size: 12px;
114 |             transform: translate(-50%, -50%); /* Центрирует узел по его координатам */
115 |             box-shadow: 0 0 10px rgba(0,0,0,0.7);
116 |             cursor: pointer;
117 |             transition: all 0.2s ease;
118 |             z-index: 5;
119 |         }
120 |         .city-node.current {
121 |             border-color: #f0e6d2;
122 |             background-color: #9c8a63;
123 |             box-shadow: 0 0 15px #f0e6d2;
124 |             z-index: 10;
125 |             cursor: default;
126 |         }
127 |         .city-node.reachable:hover {
128 |             transform: translate(-50%, -50%) scale(1.1);
129 |             border-color: #fff;
130 |         }
131 |         .city-node.unreachable {
132 |             background-color: #554a36;
133 |             border-color: #7a6848;
134 |             color: #aaa;
135 |             cursor: not-allowed;
136 |         }
137 |         .map-tooltip {
138 |             position: fixed;
139 |             display: none;
140 |             background-color: rgba(0,0,0,0.85);
141 |             color: white;
142 |             padding: 5px 10px;
143 |             border-radius: 5px;
144 |             font-size: 12px;
145 |             pointer-events: none;
146 |             z-index: 20;
147 |             border: 1px solid #c5a774;
148 |             font-family: 'Roboto Condensed', sans-serif;
149 |         }
150 |     </style>
151 | </head>
152 | <body class="p-4">
153 | 
154 |     <div id="game-container" class="main-container max-w-7xl mx-auto rounded-lg shadow-2xl p-4">
155 |         <!-- Заголовок и Статус игрока -->
156 |         <header class="header grid grid-cols-2 md:grid-cols-4 gap-4 p-4 mb-4 rounded-md text-sm">
157 |             <div><strong>Капитан:</strong> <span id="player-name">Игрок</span></div>
158 |             <div><strong>Деньги:</strong> <span id="player-money">1000</span> кредитов</div>
159 |             <div><strong>Дирижабль:</strong> <span id="ship-name">"Тритон"</span></div>
160 |             <div class="col-span-2 md:col-span-4 grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
161 |                 <div><strong>Трюм:</strong> <span id="ship-cargo">0</span> / <span id="ship-cargo-max">20</span></div>
162 |                 <div><strong>Прочность:</strong> <span id="ship-hull">100</span> / <span id="ship-hull-max">100</span></div>
163 |                 <div><strong>Уголь:</strong> <span id="ship-fuel">50</span> / <span id="ship-fuel-max">50</span></div>
164 |                 <div><strong>Местоположение:</strong> <span id="current-location">Форт "Шестеренка"</span></div>
165 |             </div>
166 |         </header>
167 | 
168 |         <!-- Основной контент -->
169 |         <main id="main-content" class="grid grid-cols-1 md:grid-cols-3 gap-4">
170 |             <!-- Левая панель: Город -->
171 |             <div id="city-panel" class="md:col-span-1 flex flex-col gap-4">
172 |                  <div class="card p-4 rounded-md">
173 |                     <h2 class="text-xl font-bold border-b-2 border-yellow-700 pb-2 mb-2" id="city-name">Форт "Шестеренка"</h2>
174 |                     <p class="text-sm text-gray-300" id="city-description">Шахтерский город, вросший в скалу горы. Источник угля и руды для всей империи.</p>
175 |                 </div>
176 |                 <div class="card p-4 rounded-md flex flex-col gap-3">
177 |                     <button id="market-btn" class="btn-steampunk py-2 px-4 rounded-md w-full">Рынок</button>
178 |                     <button id="shipyard-btn" class="btn-steampunk py-2 px-4 rounded-md w-full">Верфь</button>
179 |                     <button id="travel-btn" class="btn-steampunk py-2 px-4 rounded-md w-full">Отправиться в путь</button>
180 |                 </div>
181 |                  <div class="card p-4 rounded-md">
182 |                     <h3 class="text-lg font-bold border-b-2 border-yellow-700 pb-2 mb-2">Местная газета</h3>
183 |                     <div id="newspaper" class="text-sm text-gray-300">Свежих новостей пока нет.</div>
184 |                 </div>
185 |             </div>
186 | 
187 |             <!-- Правая панель: Действия (Рынок, Верфь, Путешествия) -->
188 |             <div id="action-panel" class="md:col-span-2 card p-4 rounded-md">
189 |                 <!-- Контент здесь будет меняться динамически -->
190 |                  <div id="welcome-view" class="text-center">
191 |                     <h2 class="text-2xl font-bold">Добро пожаловать, капитан!</h2>
192 |                     <p class="mt-4">Выберите действие в панели города, чтобы начать свою карьеру небесного коммерсанта. Удачи в небесах!</p>
193 |                 </div>
194 |                 <div id="market-view" class="hidden"></div>
195 |                 <div id="shipyard-view" class="hidden"></div>
196 |                 <div id="travel-view" class="hidden"></div>
197 |             </div>
198 |         </main>
199 | 
200 |         <!-- Панель логов -->
201 |         <footer class="log-panel mt-4 p-2 rounded-md overflow-y-auto" id="log-panel-container">
202 |             <div id="log-messages">
203 |                 <p>> Добро пожаловать в "Небесный Коммерсант"!</p>
204 |             </div>
205 |         </footer>
206 |     </div>
207 |     
208 |     <!-- Модальное окно для количества -->
209 |     <div id="quantity-modal" class="fixed inset-0 modal-bg items-center justify-center hidden">
210 |         <div class="modal-content p-6 rounded-lg shadow-xl w-11/12 md:w-1/3">
211 |             <h2 class="text-xl font-bold mb-4" id="modal-title">Покупка/Продажа</h2>
212 |             <p id="modal-text">Сколько единиц вы хотите ...?</p>
213 |             <p class="text-sm text-gray-400 mb-2">В трюме свободно: <span id="modal-cargo-space"></span></p>
214 |             <input type="range" id="quantity-slider" min="1" max="100" value="1" class="w-full mb-2">
215 |             <div class="text-center font-bold text-lg mb-4"><span id="quantity-value">1</span></div>
216 |             <div class="flex justify-end gap-4">
217 |                 <button id="modal-cancel" class="btn-steampunk py-2 px-4 rounded-md">Отмена</button>
218 |                 <button id="modal-confirm" class="btn-steampunk py-2 px-4 rounded-md bg-green-800 border-green-600 hover:bg-green-700">Подтвердить</button>
219 |             </div>
220 |         </div>
221 |     </div>
222 | 
223 | 
224 | <script>
225 | // --- ИНИЦИАЛИЗАЦИЯ ИГРЫ ---
226 | 
227 | const game = {
228 |     // Состояние игрока
229 |     player: {
230 |         name: "Капитан Смит",
231 |         money: 1000,
232 |         currentLocation: 'fort_gear',
233 |         ship: {
234 |             name: "Тритон",
235 |             cargo: [],
236 |             cargoMax: 20,
237 |             hull: 100,
238 |             hullMax: 100,
239 |             fuel: 50,
240 |             fuelMax: 50,
241 |         }
242 |     },
243 |     // Игровой мир
244 |     world: {
245 |         locations: {
246 |             fort_gear: {
247 |                 name: "Форт \"Шестеренка\"",
248 |                 description: "Шахтерский город, вросший в скалу горы. Источник угля и руды для всей империи.",
249 |                 distances: { albion_prime: 20, elysium: 30 },
250 |                 marketGoods: ['coal', 'iron_ore', 'gears'],
251 |                 coords: { x: 20, y: 25 }
252 |             },
253 |             albion_prime: {
254 |                 name: "Альбион-Прайм",
255 |                 description: "Затянутый смогом промышленный гигант. Здесь производят почти все механизмы.",
256 |                 distances: { fort_gear: 20, elysium: 15, pirate_cove: 40 },
257 |                 marketGoods: ['gears', 'steam_engine', 'automatons', 'silk'],
258 |                 coords: { x: 50, y: 50 }
259 |             },
260 |             elysium: {
261 |                 name: "Элизиум",
262 |                 description: "Парящий город-курорт для аристократии. Здесь ценят роскошь и ненавидят грязь.",
263 |                 distances: { fort_gear: 30, albion_prime: 15 },
264 |                 marketGoods: ['silk', 'tea', 'jewelry', 'automatons'],
265 |                 coords: { x: 80, y: 30 }
266 |             },
267 |             pirate_cove: {
268 |                 name: "Пиратская Гавань",
269 |                 description: "Скрытая в ущелье база воздушных корсаров. Опасное, но выгодное место.",
270 |                 distances: { albion_prime: 40 },
271 |                 marketGoods: ['opium', 'stolen_artifacts', 'gears'],
272 |                 coords: { x: 70, y: 75 }
273 |             }
274 |         },
275 |         goods: {
276 |             coal: { name: "Уголь", basePrice: 10, category: 'Сырье' },
277 |             iron_ore: { name: "Медная руда", basePrice: 20, category: 'Сырье' },
278 |             gears: { name: "Шестерни", basePrice: 50, category: 'Промышленные товары' },
279 |             steam_engine: { name: "Паровой механизм", basePrice: 200, category: 'Промышленные товары' },
280 |             silk: { name: "Шелк", basePrice: 150, category: 'Предметы роскоши' },
281 |             tea: { name: "Экзотический чай", basePrice: 120, category: 'Предметы роскоши' },
282 |             jewelry: { name: "Ювелирные изделия", basePrice: 500, category: 'Предметы роскоши' },
283 |             automatons: { name: "Автоматон-слуга", basePrice: 1000, category: 'Предметы роскоши' },
284 |             opium: { name: "Опиум", basePrice: 300, category: 'Контрабанда' },
285 |             stolen_artifacts: { name: "Краденые артефакты", basePrice: 800, category: 'Контрабанда' },
286 |         },
287 |         // Апгрейды для корабля
288 |         upgrades: {
289 |             cargo: [
290 |                 { name: "Расширенный трюм I", cost: 800, value: 15 },
291 |                 { name: "Расширенный трюм II", cost: 2000, value: 25 },
292 |             ],
293 |             hull: [
294 |                 { name: "Медная обшивка", cost: 1000, value: 50 },
295 |                 { name: "Стальная обшивка", cost: 2500, value: 100 },
296 |             ],
297 |             fuel: [
298 |                 { name: "Улучшенный бункер", cost: 700, value: 50 },
299 |                 { name: "Расширенный бункер", cost: 1800, value: 100 },
300 |             ]
301 |         },
302 |         // Мировые события
303 |         events: [
304 |             { id: "strike", text: "Забастовка шахтеров в Форте \"Шестеренка\"! Цены на уголь и руду взлетели до небес.", effect: () => priceModifier('coal', 2.5) & priceModifier('iron_ore', 2.0)},
305 |             { id: "fashion_trend", text: "Новый модный тренд в Элизиуме! Аристократы скупают шелк и ювелирные изделия.", effect: () => priceModifier('silk', 1.8) & priceModifier('jewelry', 1.5)},
306 |             { id: "war_effort", text: "Королевский флот готовится к походу. Спрос на паровые механизмы в Альбион-Прайм огромен.", effect: () => priceModifier('steam_engine', 2.0) & priceModifier('gears', 1.5)},
307 |             { id: "raid", text: "Пираты совершили дерзкий налет на караван! В Альбион-Прайм дефицит предметов роскоши.", effect: () => priceModifier('silk', 1.7) & priceModifier('tea', 1.6)},
308 |             { id: "good_harvest", text: "Отличный урожай чая в колониях! Цены на чай упали.", effect: () => priceModifier('tea', 0.6)}
309 |         ],
310 |         currentEvent: null,
311 |         marketPrices: {}
312 |     },
313 |     // DOM элементы для удобства
314 |     dom: {
315 |         playerName: document.getElementById('player-name'),
316 |         playerMoney: document.getElementById('player-money'),
317 |         shipName: document.getElementById('ship-name'),
318 |         shipCargo: document.getElementById('ship-cargo'),
319 |         shipCargoMax: document.getElementById('ship-cargo-max'),
320 |         shipHull: document.getElementById('ship-hull'),
321 |         shipHullMax: document.getElementById('ship-hull-max'),
322 |         shipFuel: document.getElementById('ship-fuel'),
323 |         shipFuelMax: document.getElementById('ship-fuel-max'),
324 |         currentLocation: document.getElementById('current-location'),
325 |         cityName: document.getElementById('city-name'),
326 |         cityDescription: document.getElementById('city-description'),
327 |         newspaper: document.getElementById('newspaper'),
328 |         
329 |         marketView: document.getElementById('market-view'),
330 |         shipyardView: document.getElementById('shipyard-view'),
331 |         travelView: document.getElementById('travel-view'),
332 |         welcomeView: document.getElementById('welcome-view'),
333 |         
334 |         logMessages: document.getElementById('log-messages'),
335 |         logContainer: document.getElementById('log-panel-container'),
336 | 
337 |         quantityModal: document.getElementById('quantity-modal'),
338 |         modalTitle: document.getElementById('modal-title'),
339 |         modalText: document.getElementById('modal-text'),
340 |         modalCargoSpace: document.getElementById('modal-cargo-space'),
341 |         quantitySlider: document.getElementById('quantity-slider'),
342 |         quantityValue: document.getElementById('quantity-value'),
343 |         modalConfirm: document.getElementById('modal-confirm'),
344 |         modalCancel: document.getElementById('modal-cancel'),
345 | 
346 |     },
347 |     // --- ОСНОВНЫЕ ФУНКЦИИ ---
348 |     init() {
349 |         // Привязка событий к кнопкам
350 |         document.getElementById('market-btn').addEventListener('click', () => this.showView('market'));
351 |         document.getElementById('shipyard-btn').addEventListener('click', () => this.showView('shipyard'));
352 |         document.getElementById('travel-btn').addEventListener('click', () => this.showView('travel'));
353 | 
354 |         this.generateMarketPrices();
355 |         this.updateUI();
356 |         this.log("Системы дирижабля запущены. Можно отправляться.");
357 |     },
358 |     
359 |     // Обновление всего интерфейса
360 |     updateUI() {
361 |         const { player } = this;
362 |         const { dom } = this;
363 |         
364 |         dom.playerName.textContent = player.name;
365 |         dom.playerMoney.textContent = Math.floor(player.money);
366 |         dom.shipName.textContent = player.ship.name;
367 |         
368 |         const currentCargoLoad = player.ship.cargo.reduce((sum, item) => sum + item.quantity, 0);
369 |         dom.shipCargo.textContent = currentCargoLoad;
370 |         dom.shipCargoMax.textContent = player.ship.cargoMax;
371 |         
372 |         dom.shipHull.textContent = player.ship.hull;
373 |         dom.shipHullMax.textContent = player.ship.hullMax;
374 |         dom.shipFuel.textContent = player.ship.fuel;
375 |         dom.shipFuelMax.textContent = player.ship.fuelMax;
376 |         
377 |         const location = this.world.locations[player.currentLocation];
378 |         dom.currentLocation.textContent = location.name;
379 |         dom.cityName.textContent = location.name;
380 |         dom.cityDescription.textContent = location.description;
381 |         
382 |         dom.newspaper.textContent = this.world.currentEvent ? this.world.currentEvent.text : "На небесном фронте без перемен.";
383 |     },
384 |     
385 |     // Показать нужный вид (рынок, верфь, путешествия)
386 |     showView(viewName) {
387 |         this.dom.welcomeView.classList.add('hidden');
388 |         this.dom.marketView.classList.add('hidden');
389 |         this.dom.shipyardView.classList.add('hidden');
390 |         this.dom.travelView.classList.add('hidden');
391 | 
392 |         let viewElement;
393 |         switch(viewName) {
394 |             case 'market':
395 |                 viewElement = this.dom.marketView;
396 |                 this.renderMarket();
397 |                 break;
398 |             case 'shipyard':
399 |                 viewElement = this.dom.shipyardView;
400 |                 this.renderShipyard();
401 |                 break;
402 |             case 'travel':
403 |                 viewElement = this.dom.travelView;
404 |                 this.renderTravel();
405 |                 break;
406 |         }
407 |         if (viewElement) {
408 |             viewElement.classList.remove('hidden');
409 |         }
410 |     },
411 |     
412 |     // Логирование сообщений
413 |     log(message) {
414 |         const p = document.createElement('p');
415 |         p.textContent = `> ${message}`;
416 |         this.dom.logMessages.appendChild(p);
417 |         this.dom.logContainer.scrollTop = this.dom.logContainer.scrollHeight;
418 |     },
419 | 
420 |     // --- ЛОГИКА РЫНКА ---
421 |     generateMarketPrices() {
422 |         this.world.marketPrices = {};
423 |         for (const locId in this.world.locations) {
424 |             this.world.marketPrices[locId] = {};
425 |             for (const goodId in this.world.goods) {
426 |                 const good = this.world.goods[goodId];
427 |                 let price = good.basePrice;
428 |                 // Небольшая случайная вариация цены
429 |                 price *= (1 + (Math.random() - 0.5) * 0.2); 
430 |                 this.world.marketPrices[locId][goodId] = Math.round(price);
431 |             }
432 |         }
433 |         // Специальные модификаторы цен по умолчанию
434 |         priceModifier('coal', 0.7, 'fort_gear');
435 |         priceModifier('iron_ore', 0.8, 'fort_gear');
436 |         priceModifier('gears', 1.5, 'fort_gear');
437 |         priceModifier('coal', 1.8, 'elysium');
438 |         priceModifier('gears', 0.8, 'albion_prime');
439 |         priceModifier('steam_engine', 0.9, 'albion_prime');
440 |         priceModifier('silk', 0.7, 'albion_prime');
441 |         priceModifier('silk', 1.5, 'elysium');
442 |         priceModifier('jewelry', 1.3, 'elysium');
443 |         priceModifier('opium', 0.8, 'pirate_cove');
444 |         priceModifier('stolen_artifacts', 0.8, 'pirate_cove');
445 |         
446 |         // Применяем событие, если оно есть
447 |         if (this.world.currentEvent) {
448 |              this.world.currentEvent.effect();
449 |         }
450 |     },
451 | 
452 |     renderMarket() {
453 |         const locationId = this.player.currentLocation;
454 |         const location = this.world.locations[locationId];
455 |         const prices = this.world.marketPrices[locationId];
456 |         const cargo = this.player.ship.cargo;
457 | 
458 |         let buyHtml = `<h3 class="text-lg font-bold border-b-2 border-yellow-700 pb-2 mb-2">Купить товары</h3><div class="space-y-2">`;
459 |         location.marketGoods.forEach(goodId => {
460 |             const good = this.world.goods[goodId];
461 |             buyHtml += `<div class="grid grid-cols-4 items-center text-sm">
462 |                 <span>${good.name}</span>
463 |                 <span class="text-yellow-400">${prices[goodId]} кр.</span>
464 |                 <span class="text-gray-400">${good.category}</span>
465 |                 <button class="btn-steampunk text-xs py-1 px-2 rounded" onclick="game.openQuantityModal('buy', '${goodId}')">Купить</button>
466 |             </div>`;
467 |         });
468 |         buyHtml += `</div>`;
469 | 
470 |         let sellHtml = `<h3 class="text-lg font-bold border-b-2 border-yellow-700 pb-2 mb-2 mt-6">Продать товары</h3><div class="space-y-2">`;
471 |         if (cargo.length === 0) {
472 |             sellHtml += `<p class="text-sm text-gray-400">Ваш трюм пуст.</p>`;
473 |         } else {
474 |             cargo.forEach(item => {
475 |                 const good = this.world.goods[item.id];
476 |                 const sellPrice = prices[item.id] ? Math.round(prices[item.id] * 0.9) : '---'; // Продажа чуть дешевле
477 |                 const buttonDisabled = !prices[item.id] ? 'disabled' : '';
478 |                 sellHtml += `<div class="grid grid-cols-5 items-center text-sm">
479 |                     <span>${good.name}</span>
480 |                     <span class="text-green-400">${sellPrice} кр.</span>
481 |                     <span>${item.quantity} шт.</span>
482 |                     <span class="text-gray-400">Ср. цена: ${item.avgBuyPrice}</span>
483 |                     <button class="btn-steampunk text-xs py-1 px-2 rounded" ${buttonDisabled} onclick="game.openQuantityModal('sell', '${item.id}')">Продать</button>
484 |                 </div>`;
485 |             });
486 |         }
487 |         sellHtml += `</div>`;
488 |         
489 |         this.dom.marketView.innerHTML = `<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">${buyHtml}${sellHtml}</div>`;
490 |     },
491 | 
492 |     openQuantityModal(type, goodId) {
493 |         this.dom.quantityModal.classList.remove('hidden');
494 |         this.dom.quantityModal.classList.add('flex');
495 |         
496 |         const currentCargoLoad = this.player.ship.cargo.reduce((sum, item) => sum + item.quantity, 0);
497 |         const cargoSpace = this.player.ship.cargoMax - currentCargoLoad;
498 |         this.dom.modalCargoSpace.textContent = cargoSpace;
499 |         
500 |         let maxQuantity = 0;
501 |         if (type === 'buy') {
502 |             const price = this.world.marketPrices[this.player.currentLocation][goodId];
503 |             const affordableQuantity = price > 0 ? Math.floor(this.player.money / price) : Infinity;
504 |             maxQuantity = Math.min(affordableQuantity, cargoSpace);
505 |             this.dom.modalTitle.textContent = `Покупка: ${this.world.goods[goodId].name}`;
506 |             this.dom.modalText.textContent = `Цена: ${price} кредитов за единицу.`;
507 |         } else { // sell
508 |             const itemInCargo = this.player.ship.cargo.find(i => i.id === goodId);
509 |             maxQuantity = itemInCargo.quantity;
510 |             this.dom.modalTitle.textContent = `Продажа: ${this.world.goods[goodId].name}`;
511 |             this.dom.modalText.textContent = `Цена: ${Math.round(this.world.marketPrices[this.player.currentLocation][goodId] * 0.9)} кредитов за единицу.`;
512 |         }
513 |         
514 |         if (maxQuantity <= 0) {
515 |             maxQuantity = 1; // Чтобы слайдер не ломался
516 |             this.dom.quantitySlider.disabled = true;
517 |             this.dom.modalConfirm.disabled = true;
518 |         } else {
519 |             this.dom.quantitySlider.disabled = false;
520 |             this.dom.modalConfirm.disabled = false;
521 |         }
522 |         
523 |         this.dom.quantitySlider.max = maxQuantity;
524 |         this.dom.quantitySlider.value = 1;
525 |         this.dom.quantityValue.textContent = 1;
526 | 
527 |         const sliderHandler = () => {
528 |             this.dom.quantityValue.textContent = this.dom.quantitySlider.value;
529 |         };
530 |         this.dom.quantitySlider.oninput = sliderHandler;
531 | 
532 |         this.dom.modalConfirm.onclick = () => this.confirmTransaction(type, goodId, parseInt(this.dom.quantitySlider.value));
533 |         this.dom.modalCancel.onclick = () => this.closeQuantityModal();
534 |     },
535 | 
536 |     closeQuantityModal() {
537 |         this.dom.quantityModal.classList.add('hidden');
538 |         this.dom.quantityModal.classList.remove('flex');
539 |         // Очищаем обработчики
540 |         this.dom.modalConfirm.onclick = null;
541 |         this.dom.modalCancel.onclick = null;
542 |         this.dom.quantitySlider.oninput = null;
543 |     },
544 | 
545 |     confirmTransaction(type, goodId, quantity) {
546 |         if (type === 'buy') {
547 |             const price = this.world.marketPrices[this.player.currentLocation][goodId];
548 |             const totalCost = price * quantity;
549 |             
550 |             this.player.money -= totalCost;
551 |             
552 |             const existingItem = this.player.ship.cargo.find(item => item.id === goodId);
553 |             if(existingItem) {
554 |                 const totalValue = (existingItem.avgBuyPrice * existingItem.quantity) + totalCost;
555 |                 existingItem.quantity += quantity;
556 |                 existingItem.avgBuyPrice = Math.round(totalValue / existingItem.quantity);
557 |             } else {
558 |                 this.player.ship.cargo.push({ id: goodId, quantity: quantity, avgBuyPrice: price });
559 |             }
560 |             this.log(`Куплено: ${quantity} ед. товара "${this.world.goods[goodId].name}" за ${totalCost} кредитов.`);
561 |         } else { // sell
562 |              const sellPrice = Math.round(this.world.marketPrices[this.player.currentLocation][goodId] * 0.9);
563 |              const totalGain = sellPrice * quantity;
564 | 
565 |              this.player.money += totalGain;
566 | 
567 |              const itemInCargo = this.player.ship.cargo.find(i => i.id === goodId);
568 |              itemInCargo.quantity -= quantity;
569 |              if(itemInCargo.quantity <= 0) {
570 |                  this.player.ship.cargo = this.player.ship.cargo.filter(i => i.id !== goodId);
571 |              }
572 |              this.log(`Продано: ${quantity} ед. товара "${this.world.goods[goodId].name}" за ${totalGain} кредитов.`);
573 |         }
574 |         
575 |         this.closeQuantityModal();
576 |         this.updateUI();
577 |         this.renderMarket();
578 |     },
579 |     
580 |     // --- ЛОГИКА ВЕРФИ ---
581 |     renderShipyard() {
582 |         const { player } = this;
583 |         let html = `
584 |             <h3 class="text-lg font-bold border-b-2 border-yellow-700 pb-2 mb-4">Услуги верфи</h3>
585 |             <div class="space-y-4">
586 |                 <div>
587 |                     <p>Прочность корпуса: ${player.ship.hull}/${player.ship.hullMax}</p>
588 |                     <div class="flex gap-2 items-center">
589 |                          <button class="btn-steampunk py-1 px-3 rounded text-sm" onclick="game.repairHull()">Ремонт (10 кр./ед.)</button>
590 |                          <span class="text-sm text-gray-400">Стоимость полного ремонта: ${(player.ship.hullMax - player.ship.hull) * 10} кр.</span>
591 |                     </div>
592 |                 </div>
593 |                 <div>
594 |                     <p>Запасы угля: ${player.ship.fuel}/${player.ship.fuelMax}</p>
595 |                      <div class="flex gap-2 items-center">
596 |                          <button class="btn-steampunk py-1 px-3 rounded text-sm" onclick="game.refuel()">Заправка (5 кр./ед.)</button>
597 |                          <span class="text-sm text-gray-400">Стоимость полной заправки: ${(player.ship.fuelMax - player.ship.fuel) * 5} кр.</span>
598 |                     </div>
599 |                 </div>
600 |             </div>
601 | 
602 |             <h3 class="text-lg font-bold border-b-2 border-yellow-700 pb-2 mb-4 mt-6">Улучшения дирижабля</h3>
603 |             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
604 |                 ${this.renderUpgradeCategory('cargo', 'Трюм')}
605 |                 ${this.renderUpgradeCategory('hull', 'Корпус')}
606 |                 ${this.renderUpgradeCategory('fuel', 'Топливный отсек')}
607 |             </div>
608 |         `;
609 |         this.dom.shipyardView.innerHTML = html;
610 |     },
611 | 
612 |     renderUpgradeCategory(type, title) {
613 |         let html = `<div><h4 class="font-bold text-yellow-500">${title}</h4><div class="space-y-2 mt-2">`;
614 |         this.world.upgrades[type].forEach(upgrade => {
615 |              const canAfford = this.player.money >= upgrade.cost;
616 |              const alreadyHas = this.isUpgradeInstalled(type, upgrade.value);
617 |              const disabled = !canAfford || alreadyHas ? 'disabled' : '';
618 |              const buttonText = alreadyHas ? "Установлено" : `Купить (${upgrade.cost} кр.)`;
619 |             
620 |             html += `
621 |                 <div class="text-sm p-2 card rounded">
622 |                     <p>${upgrade.name} (+${upgrade.value})</p>
623 |                     <button class="btn-steampunk w-full mt-1 text-xs py-1 px-2 rounded" ${disabled} onclick="game.buyUpgrade('${type}', ${upgrade.cost}, ${upgrade.value})">${buttonText}</button>
624 |                 </div>
625 |             `;
626 |         });
627 |         html += `</div></div>`;
628 |         return html;
629 |     },
630 | 
631 |     isUpgradeInstalled(type, value) {
632 |         switch(type) {
633 |             case 'cargo': return this.player.ship.cargoMax > 20 && this.player.ship.cargoMax >= (20 + value);
634 |             case 'hull': return this.player.ship.hullMax > 100 && this.player.ship.hullMax >= (100 + value);
635 |             case 'fuel': return this.player.ship.fuelMax > 50 && this.player.ship.fuelMax >= (50 + value);
636 |             default: return false;
637 |         }
638 |     },
639 |     
640 |     buyUpgrade(type, cost, value) {
641 |         if (this.player.money < cost) {
642 |             this.log("Недостаточно кредитов для покупки этого улучшения.");
643 |             return;
644 |         }
645 |         this.player.money -= cost;
646 |         switch(type) {
647 |             case 'cargo': this.player.ship.cargoMax += value; this.log(`Трюм увеличен до ${this.player.ship.cargoMax}.`); break;
648 |             case 'hull': this.player.ship.hullMax += value; this.player.ship.hull += value; this.log(`Максимальная прочность корпуса увеличена до ${this.player.ship.hullMax}.`); break;
649 |             case 'fuel': this.player.ship.fuelMax += value; this.log(`Топливный отсек увеличен до ${this.player.ship.fuelMax}.`); break;
650 |         }
651 |         this.updateUI();
652 |         this.renderShipyard();
653 |     },
654 | 
655 |     repairHull() {
656 |         const damage = this.player.ship.hullMax - this.player.ship.hull;
657 |         if (damage === 0) {
658 |             this.log("Ремонт не требуется.");
659 |             return;
660 |         }
661 |         const cost = damage * 10;
662 |         if (this.player.money < cost) {
663 |             this.log("Недостаточно кредитов для полного ремонта.");
664 |             return;
665 |         }
666 |         this.player.money -= cost;
667 |         this.player.ship.hull = this.player.ship.hullMax;
668 |         this.log(`Корпус полностью отремонтирован за ${cost} кредитов.`);
669 |         this.updateUI();
670 |         this.renderShipyard();
671 |     },
672 |     
673 |     refuel() {
674 |         const needed = this.player.ship.fuelMax - this.player.ship.fuel;
675 |         if (needed === 0) {
676 |             this.log("Бак полон.");
677 |             return;
678 |         }
679 |         const cost = needed * 5;
680 |         if (this.player.money < cost) {
681 |             this.log("Недостаточно кредитов для полной заправки.");
682 |             return;
683 |         }
684 |         this.player.money -= cost;
685 |         this.player.ship.fuel = this.player.ship.fuelMax;
686 |         this.log(`Угольный бункер заполнен за ${cost} кредитов.`);
687 |         this.updateUI();
688 |         this.renderShipyard();
689 |     },
690 | 
691 | 
692 |     // --- ЛОГИКА ПУТЕШЕСТВИЙ ---
693 |     renderTravel() {
694 |         const currentLocationId = this.player.currentLocation;
695 |         const currentLocation = this.world.locations[currentLocationId];
696 |         const distances = currentLocation.distances;
697 |         
698 |         let html = `<h3 class="text-lg font-bold border-b-2 border-yellow-700 pb-2 mb-4">Карта небесных путей</h3>`;
699 |         
700 |         const mapContainer = document.createElement('div');
701 |         mapContainer.className = 'map-container';
702 | 
703 |         const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
704 |         svg.setAttribute('class', 'map-svg');
705 | 
706 |         const tooltip = document.createElement('div');
707 |         tooltip.className = 'map-tooltip';
708 |         document.body.appendChild(tooltip); // Добавляем тултип в body для корректного позиционирования
709 | 
710 |         for (const locId in this.world.locations) {
711 |             const locationData = this.world.locations[locId];
712 |             const isCurrent = locId === currentLocationId;
713 |             const isDestination = distances.hasOwnProperty(locId);
714 | 
715 |             const node = document.createElement('div');
716 |             node.className = 'city-node';
717 |             node.style.left = `${locationData.coords.x}%`;
718 |             node.style.top = `${locationData.coords.y}%`;
719 |             node.textContent = locationData.name;
720 | 
721 |             if (isCurrent) {
722 |                 node.classList.add('current');
723 |             } else if (isDestination) {
724 |                 const distance = distances[locId];
725 |                 const fuelCost = Math.round(distance / 2);
726 |                 const canTravel = this.player.ship.fuel >= fuelCost;
727 | 
728 |                 if (canTravel) {
729 |                     node.classList.add('reachable');
730 |                     node.onclick = () => game.travelTo(locId);
731 | 
732 |                     node.onmousemove = (e) => {
733 |                         tooltip.style.display = 'block';
734 |                         tooltip.style.left = `${e.clientX + 15}px`;
735 |                         tooltip.style.top = `${e.clientY + 15}px`;
736 |                         tooltip.innerHTML = `<b>${locationData.name}</b><br>Расстояние: ${distance}<br>Уголь: ${fuelCost}`;
737 |                     };
738 |                     node.onmouseleave = () => {
739 |                         tooltip.style.display = 'none';
740 |                     };
741 |                 } else {
742 |                     node.classList.add('unreachable');
743 |                 }
744 | 
745 |                 const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
746 |                 line.setAttribute('x1', `${currentLocation.coords.x}%`);
747 |                 line.setAttribute('y1', `${currentLocation.coords.y}%`);
748 |                 line.setAttribute('x2', `${locationData.coords.x}%`);
749 |                 line.setAttribute('y2', `${locationData.coords.y}%`);
750 |                 line.setAttribute('stroke', canTravel ? '#c5a774' : '#7a6848');
751 |                 line.setAttribute('stroke-width', '2');
752 |                 if (canTravel) {
753 |                     line.setAttribute('stroke-dasharray', '5, 5');
754 |                 }
755 |                 svg.appendChild(line);
756 | 
757 |             } else {
758 |                 node.classList.add('unreachable');
759 |             }
760 |             mapContainer.appendChild(node);
761 |         }
762 | 
763 |         mapContainer.appendChild(svg);
764 |         
765 |         this.dom.travelView.innerHTML = html;
766 |         this.dom.travelView.appendChild(mapContainer);
767 |     },
768 |     
769 |     travelTo(destinationId) {
770 |         const currentLocationId = this.player.currentLocation;
771 |         const distance = this.world.locations[currentLocationId].distances[destinationId];
772 |         const fuelCost = Math.round(distance / 2);
773 | 
774 |         if (this.player.ship.fuel < fuelCost) {
775 |             this.log("Недостаточно угля для этого путешествия!");
776 |             return;
777 |         }
778 |         
779 |         // Прячем тултип перед путешествием
780 |         const tooltip = document.querySelector('.map-tooltip');
781 |         if (tooltip) tooltip.style.display = 'none';
782 | 
783 |         this.player.ship.fuel -= fuelCost;
784 |         this.player.currentLocation = destinationId;
785 |         const destName = this.world.locations[destinationId].name;
786 |         
787 |         this.log(`Вы отправляетесь в ${destName}. Путь займет некоторое время...`);
788 | 
789 |         // Симуляция события в пути
790 |         let encounterMessage = `Вы благополучно прибыли в ${destName}.`;
791 |         if (Math.random() < 0.25) { // 25% шанс на событие
792 |             if (destinationId === 'pirate_cove' || Math.random() < 0.3) {
793 |                 const cargoLoss = Math.min(5, Math.floor(this.player.ship.cargo.reduce((s, i) => s + i.quantity, 0) * 0.2));
794 |                 const hullDamage = Math.floor(Math.random() * 20) + 10;
795 |                 
796 |                 this.player.ship.hull = Math.max(0, this.player.ship.hull - hullDamage);
797 | 
798 |                 if (cargoLoss > 0 && this.player.ship.cargo.length > 0) {
799 |                     // Упрощенно: удаляем часть первого попавшегося товара
800 |                      this.player.ship.cargo[0].quantity = Math.max(0, this.player.ship.cargo[0].quantity - cargoLoss);
801 |                      if(this.player.ship.cargo[0].quantity === 0) this.player.ship.cargo.shift();
802 |                 }
803 |                 
804 |                 encounterMessage = `Нападение пиратов! Вы отбились, но потеряли ${cargoLoss} ед. груза и получили ${hullDamage} ед. повреждений. Вы прибыли в ${destName} на потрепанном корабле.`;
805 |                  if (this.player.ship.hull <= 0) {
806 |                     encounterMessage = `Пираты взяли ваш корабль на абордаж! Все потеряно...`;
807 |                     // Конец игры (упрощенно)
808 |                     this.player.money = 50;
809 |                     this.player.ship.cargo = [];
810 |                     this.player.ship.hull = 20;
811 |                  }
812 |             } else {
813 |                  const stormDamage = Math.floor(Math.random() * 15) + 5;
814 |                  this.player.ship.hull = Math.max(0, this.player.ship.hull - stormDamage);
815 |                  encounterMessage = `Вы попали в сильный шторм! Корпус поврежден на ${stormDamage} ед. Вы благополучно добрались до ${destName}.`
816 |             }
817 |         }
818 |         
819 |         this.log(encounterMessage);
820 |         
821 |         // Шанс на новое мировое событие
822 |         if (Math.random() < 0.4) {
823 |             this.triggerNewEvent();
824 |         }
825 | 
826 |         this.showView('welcome'); // Сбрасываем вид
827 |         document.getElementById('welcome-view').innerHTML = `<div class="text-center"><h2 class="text-2xl font-bold">Прибытие в ${destName}</h2><p class="mt-4">Двигатели остывают, швартовы закреплены. Чем займетесь, капитан?</p></div>`
828 |         this.updateUI();
829 |     },
830 | 
831 |     triggerNewEvent() {
832 |         const randomEvent = this.world.events[Math.floor(Math.random() * this.world.events.length)];
833 |         this.world.currentEvent = randomEvent;
834 |         this.log(`НОВОСТИ: ${randomEvent.text}`);
835 |         this.generateMarketPrices(); // Пересчитываем цены с учетом нового события
836 |     }
837 | 
838 | };
839 | 
840 | function priceModifier(goodId, factor, locationId = null) {
841 |     if (locationId) {
842 |         if(game.world.marketPrices[locationId] && game.world.marketPrices[locationId][goodId]) {
843 |             game.world.marketPrices[locationId][goodId] = Math.round(game.world.goods[goodId].basePrice * factor);
844 |         }
845 |     } else {
846 |         for (const locId in game.world.locations) {
847 |             if(game.world.marketPrices[locId] && game.world.marketPrices[locId][goodId]) {
848 |                 game.world.marketPrices[locId][goodId] = Math.round(game.world.marketPrices[locId][goodId] * factor);
849 |             }
850 |         }
851 |     }
852 | }
853 | 
854 | 
855 | // Запуск игры после загрузки DOM
856 | document.addEventListener('DOMContentLoaded', () => {
857 |     game.init();
858 | });
859 | </script>
860 | 
861 | </body>
862 | </html>
863 | 


--------------------------------------------------------------------------------