-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
580 lines (510 loc) · 26.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tinystruct framework</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* General Styles */
body {
font-family: 'Roboto', Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
/* Navigation Bar */
nav {
position: sticky;
top: 0;
background-color: #986ce8;
color: #fff;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
nav h1 {
margin: 0;
font-size: 1.5rem;
display: flex;
align-items: center;
color: #f5f5f5;
}
nav img {
margin-right: 0.5rem;
height: 40px;
width: 40px;
}
nav .menu {
display: flex;
align-items: center;
}
nav a {
color: #fff;
text-decoration: none;
margin-left: 1.5rem;
font-size: 1rem;
}
nav a:hover {
text-decoration: underline;
}
.language-select {
margin-left: 1.5rem;
padding: 0.5rem;
font-size: 1rem;
border: none;
border-radius: 5px;
}
/* Container Styles */
.container {
max-width: 1000px;
margin: 2rem auto;
background: #ffffff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #4b3c6e;
}
ul {
margin: 1rem 0;
padding: 0;
list-style: none;
}
ul li {
margin: 0.5rem 0;
padding: 1rem;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
a {
color: #4b3c6e;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 1rem 0;
background: #4b3c6e;
color: #fff;
}
footer p {
margin: 0;
}
.btn {
display: inline-block;
background: #4b3c6e;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 5px;
text-decoration: none;
font-size: 1rem;
margin-top: 1rem;
}
.btn:hover {
background: #3a2d58;
}
.language-select {
margin-left: 2rem;
background-color: #4b3c6e;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
}
pre {
position: relative;
background: #ececec;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
overflow-x: auto;
margin-bottom: 1rem;
}
pre code {
display: block;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background: #4b3c6e;
color: #fff;
border: none;
border-radius: 5px;
padding: 0.5rem 1rem;
cursor: pointer;
}
.copy-btn:hover {
background: #3a2d58;
}
/* Hamburger Menu */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger div {
background-color: #fff;
height: 3px;
width: 25px;
margin: 3px 0;
}
.menu {
display: flex;
}
.menu a, .menu .language-select {
display: inline-block;
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
nav .menu {
display: none;
flex-direction: column;
position: absolute;
top: 70px;
right: 10px;
background: #986ce8;
padding: 1rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.menu.active {
display: flex;
}
.menu a {
margin: 0.5rem 0;
}
.language-select {
margin: 0.5rem 0;
}
}
.terminal {
font-family: 'Courier New', monospace;
background: #1e1e1e;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
font-size: 16px;
line-height: 1.5;
overflow: hidden;
color: #00ff00;
white-space: pre; /* Preserve spaces and tabs */
}
.output {
margin-top: 10px;
}
.command {
color: #ffffff;
}
.blink {
display: inline-block;
width: 10px;
background: #00ff00;
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
50% { background: transparent; }
}
.highlight {
color: #ffcc00;
}
.fade-in {
opacity: 0;
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
.urls a {
color: #4caf50;
text-decoration: none;
}
.urls a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<h1>
<img src="https://avatars.githubusercontent.com/u/3723144?s=48&v=4" alt="tinystruct logo">
tinystruct
</h1>
<div class="hamburger" onclick="toggleMenu()">
<div></div>
<div></div>
<div></div>
</div>
<div class="menu">
<a href="#about" class="lang" data-en="What is tinystruct?" data-fr="Qu'est-ce que tinystruct?" data-de="Was ist tinystruct?" data-zh="什么是 tinystruct?">What is tinystruct?</a>
<a href="#features" class="lang" data-en="Features" data-fr="Caractéristiques" data-de="Funktionen" data-zh="特点">Features</a>
<a href="#use-cases" class="lang" data-en="Use Cases" data-fr="Cas d'utilisation" data-de="Anwendungsfälle" data-zh="用例">Use Cases</a>
<a href="#installation" class="lang" data-en="Installation" data-fr="Installation" data-de="Installation" data-zh="安装">Installation</a>
<a href="#resources" class="lang" data-en="Resources" data-fr="Ressources" data-de="Ressourcen" data-zh="资源">Resources</a>
<select class="language-select" onchange="changeLanguage(this.value)">
<option value="en">English</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
<option value="zh">中文</option>
</select>
</div>
</nav>
<div class="container" id="about">
<h2 class="lang" data-en="What is tinystruct?" data-fr="Qu'est-ce que tinystruct?" data-de="Was ist tinystruct?" data-zh="什么是 tinystruct?">What is tinystruct?</h2>
<p class="lang"
data-en="tinystruct is a lightweight Java framework designed to simplify application development by emphasizing simplicity and performance. It seamlessly supports both command-line tools and APIs, enabling developers to create robust solutions with ease. Its core philosophy is encapsulated in the motto: 'Simplicity is difficult, while complexity is easy. Better thinking leads to better design.'"
data-fr="tinystruct est un framework Java léger conçu pour simplifier le développement d'applications en mettant l'accent sur la simplicité et les performances. Il prend en charge de manière transparente les outils en ligne de commande et les API, permettant aux développeurs de créer des solutions robustes en toute simplicité. Sa philosophie centrale est résumée dans la devise : 'La simplicité est difficile, tandis que la complexité est facile. Une meilleure réflexion conduit à une meilleure conception.'"
data-de="tinystruct ist ein leichtgewichtiges Java-Framework, das entwickelt wurde, um die Anwendungsentwicklung durch Betonung von Einfachheit und Leistung zu vereinfachen. Es unterstützt nahtlos sowohl Befehlszeilentools als auch APIs, sodass Entwickler robuste Lösungen mit Leichtigkeit erstellen können. Die zentrale Philosophie ist im Motto zusammengefasst: 'Einfachheit ist schwierig, während Komplexität einfach ist. Besseres Denken führt zu besserem Design.'"
data-zh="tinystruct 是一个轻量级的 Java 框架，旨在通过强调简单性和性能来简化应用程序开发。它无缝支持命令行工具和 API，使开发人员能够轻松创建强大的解决方案。其核心理念总结在座右铭中：‘简单是困难的，而复杂是容易的。更好的思考带来更好的设计。’">
tinystruct is a lightweight Java framework designed to simplify application development by emphasizing simplicity and performance. It seamlessly supports both command-line tools and APIs, enabling developers to create robust solutions with ease. Its core philosophy is encapsulated in the motto: 'Simplicity is difficult, while complexity is easy. Better thinking leads to better design.'
</p>
<!-- Main Terminal -->
<div class="terminal" id="terminal-main"><div id="output-main"></div><div class="blink" id="cursor-main"></div></div>
<h2 id="features" class="lang" data-en="Key Features" data-fr="Caractéristiques principales" data-de="Hauptfunktionen" data-zh="主要特点">Key Features</h2>
<ul>
<li class="lang" data-en="Modular Design: Include only the components you need for efficiency." data-fr="Conception modulaire: Inclure uniquement les composants dont vous avez besoin pour plus d'efficacité." data-de="Modulares Design: Inklusive nur der Komponenten, die für Effizienz benötigt werden." data-zh="模块化设计：仅包含您需要的组件，提高效率。">Modular Design: Include only the components you need for efficiency.</li>
<li class="lang" data-en="Command-Line Interface (CLI) Support: Simplifies tasks like executing commands and managing packages." data-fr="Support de l'interface en ligne de commande (CLI): Simplifie les tâches comme l'exécution de commandes et la gestion des paquets." data-de="CLI-Unterstützung: Vereinfacht Aufgaben wie das Ausführen von Befehlen und das Verwalten von Paketen." data-zh="命令行界面 (CLI) 支持：简化执行命令和管理包的任务。">Command-Line Interface (CLI) Support: Simplifies tasks like executing commands and managing packages.</li>
<li class="lang" data-en="Netty Integration: Operates as an HTTP server for high-performance web applications." data-fr="Intégration de Netty: Fonctionne comme un serveur HTTP pour des applications web haute performance." data-de="Netty-Integration: Arbeitet als HTTP-Server für hochleistungsfähige Webanwendungen." data-zh="Netty 集成：作为高性能 Web 应用程序的 HTTP 服务器运行。">Netty Integration: Operates as an HTTP server for high-performance web applications.</li>
<li class="lang" data-en="Annotation-Based Actions: Streamlines application logic with improved readability." data-fr="Actions basées sur des annotations: Simplifie la logique d'application avec une meilleure lisibilité." data-de="Annotation-basierte Aktionen: Vereinfacht die Anwendungslogik mit besserer Lesbarkeit." data-zh="基于注解的操作：通过改进可读性简化应用程序逻辑。">Annotation-Based Actions: Streamlines application logic with improved readability.</li>
</ul>
<h2 id="use-cases" class="lang" data-en="Best Use Cases and Their Benefits" data-fr="Meilleurs cas d'utilisation et leurs avantages" data-de="Beste Anwendungsfälle und deren Vorteile" data-zh="最佳用例及其优势">Best Use Cases and Their Benefits</h2>
<ul>
<li class="lang" data-en="Lightweight Web Applications: Perfect for small-scale websites needing speed and simplicity." data-fr="Applications web légères: Parfait pour les sites web à petite échelle nécessitant rapidité et simplicité." data-de="Leichte Webanwendungen: Ideal für kleine Websites, die Schnelligkeit und Einfachheit benötigen." data-zh="轻量级 Web 应用程序：非常适合需要速度和简单性的小型网站。">Lightweight Web Applications: Perfect for small-scale websites needing speed and simplicity.</li>
<li class="lang" data-en="Command-Line Tools: Develop robust utilities with minimal overhead." data-fr="Outils en ligne de commande: Développez des utilitaires robustes avec un minimum de surcharge." data-de="CLI-Tools: Entwickeln Sie robuste Dienstprogramme mit minimalem Aufwand." data-zh="命令行工具：使用最小的开销开发强大的工具。">Command-Line Tools: Develop robust utilities with minimal overhead.</li>
<li class="lang" data-en="Microservices: Modular design makes it ideal for specific, lightweight services." data-fr="Microservices: La conception modulaire le rend idéal pour des services spécifiques et légers." data-de="Mikrodienste: Modulares Design eignet sich hervorragend für spezifische, leichte Dienste." data-zh="微服务：模块化设计使其成为特定轻量服务的理想选择。">Microservices: Modular design makes it ideal for specific, lightweight services.</li>
<li class="lang" data-en="Embedded Systems: Small memory footprint fits resource-constrained devices." data-fr="Systèmes embarqués: La petite empreinte mémoire convient aux appareils à ressources limitées." data-de="Eingebettete Systeme: Kleine Speichernutzung passt zu ressourcenbegrenzten Geräten." data-zh="嵌入式系统：小内存占用非常适合资源有限的设备。">Embedded Systems: Small memory footprint fits resource-constrained devices.</li>
<li class="lang" data-en="Rapid Prototyping: Quickly iterate ideas with its simple setup." data-fr="Prototypage rapide: Itérez rapidement des idées avec une configuration simple." data-de="Schnelles Prototyping: Schnell Ideen mit einer einfachen Einrichtung iterieren." data-zh="快速原型开发：通过简单的设置快速迭代想法。">Rapid Prototyping: Quickly iterate ideas with its simple setup.</li>
</ul>
<h2 id="installation" class="lang" data-en="Installation and Getting Started" data-fr="Installation et démarrage" data-de="Installation und Einstieg" data-zh="安装和入门">Installation and Getting Started</h2>
<p class="lang" data-en="Add the dependency into your pom.xml." data-fr="Ajoutez la dépendance dans votre fichier pom.xml." data-de="Fügen Sie die Abhängigkeit in Ihre pom.xml ein." data-zh="将以下 Maven 依赖项添加到您的项目中：">Add the dependency into your pom.xml.</p>
<pre class="language-xml"><code><dependency>
<groupId>org.tinystruct</groupId>
<artifactId>tinystruct</artifactId>
<version>1.4.7</version>
<classifier>jar-with-dependencies</classifier>
</dependency></code><button class="copy-btn" onclick="copyCode(this)">Copy</button>
</pre>
<p class="lang" data-en="Extend the AbstractApplication in Java" data-fr="Étendez la classe AbstractApplication en Java" data-de="Erweitern Sie die AbstractApplication in Java" data-zh="在 Java 中扩展 AbstractApplication 类">Extend the AbstractApplication in Java</p>
<pre class="language-java"><code>package tinystruct.examples;
import org.tinystruct.AbstractApplication;
import org.tinystruct.ApplicationException;
import org.tinystruct.system.annotation.Action;
public class example extends AbstractApplication {
@Override
public void init() {
// TODO Auto-generated method stub
}
@Override
public String version() {
return "1.0";
}
@Action("praise")
public String praise() {
return "Praise to the Lord!";
}
@Action("say")
public String say() throws ApplicationException {
if (null != getContext().getAttribute("--words"))
return getContext().getAttribute("--words").toString();
throw new ApplicationException("Could not find the parameter <i>words</i>.");
}
@Action("say")
public String say(String words) {
return words;
}
}
</code><button class="copy-btn" onclick="copyCode(this)">Copy</button>
</pre>
<div class="terminal" id="terminal-secondary"><div id="output-secondary"></div><div class="blink" id="cursor-secondary"></div></div>
<a href="https://github.com/tinystruct/tinystruct" class="btn" target="_blank">GitHub Repository</a>
<a href="https://mvnrepository.com/artifact/org.tinystruct/tinystruct" class="btn" target="_blank">Maven Repository</a>
<h2 class="lang"
data-en="Why Choose tinystruct?"
data-de="Warum tinystruct wählen?"
data-fr="Pourquoi choisir tinystruct?"
data-zh="为什么选择 tinystruct?">Why Choose tinystruct?
</h2>
<p class="lang"
data-en="tinystruct focuses on reducing unnecessary complexity in application development. Its lightweight, modular nature makes it an excellent choice for developers looking for a straightforward, efficient framework for various Java-based projects."
data-de="tinystruct konzentriert sich darauf, unnötige Komplexität in der Anwendungsentwicklung zu reduzieren. Seine leichte, modulare Natur macht es zu einer ausgezeichneten Wahl für Entwickler, die nach einem einfachen, effizienten Framework für verschiedene Java-basierte Projekte suchen."
data-fr="tinystruct se concentre sur la réduction de la complexité inutile dans le développement d'applications. Sa nature légère et modulaire en fait un excellent choix pour les développeurs à la recherche d'un cadre simple et efficace pour divers projets basés sur Java."
data-zh="tinystruct 专注于减少应用程序开发中的不必要复杂性。其轻量级、模块化的特性使其成为开发人员在寻找简洁高效的 Java 项目框架时的理想选择。">tinystruct focuses on reducing unnecessary complexity in application development. Its lightweight, modular nature makes it an excellent choice for developers looking for a straightforward, efficient framework for various Java-based projects.
</p>
</div>
<!-- Footer -->
<footer>
<p class="lang" data-en="Created with ❤️ by James ZHOU" data-fr="Créé avec ❤️ par James ZHOU" data-de="Erstellt mit ❤️ von James ZHOU" data-zh="❤️ 创建者: James ZHOU">Created with ❤️ by James ZHOU</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>
<script>
// Toggle Menu
function toggleMenu() {
const menu = document.querySelector('.menu');
menu.classList.toggle('active');
}
// Change language based on user selection
function changeLanguage(lang) {
const elements = document.querySelectorAll('.lang');
elements.forEach(element => {
const translation = element.dataset[lang];
if (translation) {
element.innerHTML = translation;
}
});
// Update URL fragment with selected language
window.location.hash = lang;
}
// Check URL fragment for language code and apply it
function applyLanguageFromURL() {
const hash = window.location.hash.substring(1); // Get language code from the URL fragment
const validLanguages = ['en', 'fr', 'de', 'zh']; // Define valid languages
if (validLanguages.includes(hash)) {
const select = document.querySelector('.language-select');
select.value = hash;
changeLanguage(hash); // Apply the language change
}
}
// Add event listener to load language on page load
window.addEventListener('DOMContentLoaded', applyLanguageFromURL);
// Copy Code Function
function copyCode(button) {
const codeBlock = button.previousElementSibling;
navigator.clipboard.writeText(codeBlock.innerText)
.then(() => {
button.innerText = 'Copied!';
setTimeout(() => {
button.innerText = 'Copy';
}, 2000);
})
.catch(err => {
console.error('Failed to copy code:', err);
});
}
const mainCommands = [
"$ bin/dispatcher --version",
" _/ ' _ _/ _ _ _/",
" / / /) (/ _) / / (/ ( / 1.4.7",
" /",
" ",
"$ bin/dispatcher --help",
"Usage: bin/dispatcher COMMAND [OPTIONS]",
"Commands:",
" download \tDownload a resource from other servers",
" exec \tTo execute native command(s)",
" generate \tPOJO object generator",
" install \tInstall a package",
" open \tStart a default browser to open the specific URL",
" say \tOutput words",
" set \tSet system property",
" sql-execute \tExecutes the given SQL statement, which may be an INSERT, UPDATE, DELETE, or DDL statement",
" sql-query \tExecutes the given SQL statement, which returns a single ResultSet object",
" update \tUpdate for the latest version",
" ",
"Options:",
" --allow-remote-access\tAllow to be accessed remotely",
" --help \tHelp command",
" --host \tHost name / IP",
" --import \tImport application",
" --logo \tPrint logo",
" --settings \tPrint settings",
" --version \tPrint version",
" ",
"Run 'bin/dispatcher COMMAND --help' for more information on a command."
];
const secondaryCommands = [
"$ bin/dispatcher say --words Hello --import tinystruct.examples.example",
"Hello",
" ",
"# bin/dispatcher start --import org.tinystruct.system.NettyHttpServer",
"You can access the below URLs:",
" http://localhost:8080/?q=say/Praise%20to%20the%20Lord!",
" http://localhost:8080/?q=praise"
];
const outputMain = document.getElementById('output-main');
const cursorMain = document.getElementById('cursor-main');
const outputSecondary = document.getElementById('output-secondary');
const cursorSecondary = document.getElementById('cursor-secondary');
let iMain = 0;
let iSecondary = 0;
function typeMainCommands() {
if (iMain < mainCommands.length) {
const line = mainCommands[iMain];
const textDiv = document.createElement('div');
textDiv.textContent = line;
textDiv.classList.add('fade-in');
outputMain.appendChild(textDiv);
iMain++;
setTimeout(typeMainCommands, 100);
} else {
cursorMain.style.display = 'none';
typeSecondaryCommands();
}
}
function typeSecondaryCommands() {
if (iSecondary < secondaryCommands.length) {
const line = secondaryCommands[iSecondary];
const textDiv = document.createElement('div');
textDiv.textContent = line;
textDiv.classList.add('fade-in');
outputSecondary.appendChild(textDiv);
iSecondary++;
setTimeout(typeSecondaryCommands, 100);
} else {
cursorSecondary.style.display = 'none';
}
}
typeMainCommands();
// Check if DeviceMotion is supported
if (window.DeviceMotionEvent) {
console.log("DeviceMotion is supported on this device.");
// Add an event listener for device motion
window.addEventListener('devicemotion', function(event) {
const acceleration = event.accelerationIncludingGravity;
if (acceleration) {
const x = acceleration.x || 0;
const y = acceleration.y || 0;
const z = acceleration.z || 0;
// Normalize the acceleration values
const red = Math.min(Math.abs(x * 50), 255);
const green = Math.min(Math.abs(y * 50), 255);
const blue = Math.min(Math.abs(z * 50), 255);
// Create a dynamic RGB color
const backgroundColor = `rgb(${Math.floor(red)}, ${Math.floor(green)}, ${Math.floor(blue)})`;
// Apply the color to the website background
document.body.style.backgroundColor = backgroundColor;
// Optionally, display the RGB values on the page
if (!document.getElementById('motionInfo')) {
const infoDiv = document.createElement('div');
infoDiv.id = 'motionInfo';
infoDiv.style.position = 'fixed';
infoDiv.style.bottom = '10px';
infoDiv.style.left = '10px';
infoDiv.style.padding = '5px';
infoDiv.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
infoDiv.style.borderRadius = '5px';
infoDiv.style.fontFamily = 'Arial, sans-serif';
infoDiv.style.color = '#000';
document.body.appendChild(infoDiv);
}
const infoDiv = document.getElementById('motionInfo');
infoDiv.textContent = `R: ${Math.floor(red)} G: ${Math.floor(green)} B: ${Math.floor(blue)}`;
}
});
} else {
console.log("DeviceMotion is not supported on this device.");
alert("Your device does not support DeviceMotion.");
}
</script>
</body>
</html>