RecalboxHomeAssistant/index.html at dev · recalbox/RecalboxHomeAssistant · GitHub

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="EAilugLVhNa18_tK39J7rZqsb6lb1wap-uncaEzmkRQ" />
    <title>Recalbox Home Assistant - Projet GitHub</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            background-color: #f6f8fa;
        }
        .container {
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            border: 1px solid #d0d7de;
            max-width: calc(100% - 4rem);
        }
        h1 { color: #24292f; }
        a {
            text-decoration: none;
            color: black;
            text-align: -webkit-center;
        }
        a > h1 {
            margin-bottom: 2px;
        }
        a > .logo {
            margin: auto;
            display: block;
        }
        a > p {
            margin-top: 2px;
            margin-bottom: 40px;
        }
        a.github-button {
            display: inline-block;
            margin: 16px auto;
            padding: 10px 20px;
            background-color: #2da44e;
            color: white;
            border-radius: 6px;
            font-weight: bold;
        }
        a.github-button:hover { background-color: #2c974b; }
        .description, ul {
            max-width: 350px;
            text-align: left;
        }
        ul > li {
            margin-top: 10px;
        }
        .preview, .preview > img {
            max-width: 380px;
            width: min(100%, 380px);
            display: block;
            background-color: none;
        }
        .small-text {
            font-size: small;
            margin-bottom: 12px;
        }
        .hacs-button {
            text-align: -webkit-center;
            display: block;
            margin-top: 16px;
        }
    </style>
</head>
<body>

    <div class="container">
        <a href="https://github.com/recalbox/RecalboxHomeAssistant">
            <h1 data-i18n="title">Recalbox Home Assistant</h1>
            <p class="small-text" data-i18n="author">by Recalbox, 2026</p>
            <img class="logo" src="logo.png" height="96px">
        </a>
        <p class="description" data-i18n="description">This repository allows you to integrate Recalbox in your Home Assistant</p>
        <ul>
            <li data-i18n="feat_dashboard">...</li>
            <li data-i18n="feat_automation">...</li>
            <li data-i18n="feat_assist">...</li>
        </ul>
        <a class="preview" href="docs/RecalboxHomeAssistantIntegration.png">
            <img src="docs/RecalboxHomeAssistantIntegration.png" alt="Preview"/>
        </a>
        <a class="hacs-button" href="https://my.home-assistant.io/redirect/hacs_repository/?owner=recalbox&amp;repository=RecalboxHomeAssistant&amp;category=integration" rel="nofollow">
            <img src="https://my.home-assistant.io/badges/hacs_repository.svg" alt="Open your Home Assistant instance and open a repository inside the Home Assistant Community Store." style="max-width: 100%;">
        </a>
        <a class="github-button" href="https://github.com/recalbox/RecalboxHomeAssistant" data-i18n="github_btn">
            View documentation and sources on GitHub
        </a>
    </div>

    <script>
        const translations = {
            'fr': {
                'title': 'Recalbox Home Assistant',
                'author': 'par Recalbox, 2026',
                'description': 'Ce dépôt vous permet d\'intégrer Recalbox dans votre Home Assistant :',
                'feat_dashboard': 'Dans votre tableau de bord : Obtenir le statut, afficher le jeu actuel, éteindre, redémarrer, prendre des captures d\'écran, sauvegarder/charger une partie, etc.',
                'feat_automation': 'Déclencher vos automatisations : Par exemple, changer la couleur des lumières selon le jeu lancé, envoyer des notifications, etc.',
                'feat_assist': 'Commandes vocales/textuelles : Lancer un jeu par son titre, demander quel est le jeu actuel, chager/sauvegarder la partie, éteindre la console, etc.',
                'github_btn': 'Voir la documentation et les sources sur GitHub'
            },
            'en': {
                'title': 'Recalbox Home Assistant',
                'author': 'by Recalbox, 2026',
                'description': 'This repository allows you to integrate Recalbox in your Home Assistant :',
                'feat_dashboard': 'In your dashboard : Get status, Display current game, Turn off, Reboot, Take screenshots, Stop current game, Save/Load game state, ...',
                'feat_automation': 'Trigger any automation you want. For example : change light color according to the game launched, send notifications, etc.',
                'feat_assist': 'Voice/text commands with assistant : Launch a game by title, Ask what is the current game, Save/Load game state, Turn off Recalbox, etc.',
                'github_btn': 'View documentation and sources on GitHub'
            }
        };

        function applyTranslations() {
            const userLang = navigator.language.startsWith('fr') ? 'fr' : 'en';

            // Traduire tous les éléments avec l'attribut data-i18n
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                if (translations[userLang][key]) {
                    el.innerText = translations[userLang][key];
                }
            });
        }

        window.onload = applyTranslations;
    </script>

</body>
</html>