-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (99 loc) · 4.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<!--
EN: The meta tags provide additional information about a page to the browser.
For example, the "charset" specifies the character encoding for the HTML document.
-->
<!--
DE: Die Meta-Tags geben zusätzliche Informationen zu einer Seite an den Browser.
Das "charset" gibt z. B. die Zeichenkodierung für das HTML-Dokument an.
-->
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--
EN: This script loads the chayns stylesheet with the settings for the current chayns site.
This includes e.g. styles like the font or the color of the buttons.
-->
<!--
DE: Dieses Script lädt das chayns Stylesheet mit den Einstellungen für die aktuelle chayns Site.
Dieses beinhaltet dann z. B. Styles wie die Schriftart oder auch die Farbe der Buttons.
-->
<script
src="https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js"
type="text/javascript"
version="4.2"
></script>
<!--
EN: This script contains the functions of the chayns API. This includes e.g. the sending of chat messages
or the display of dialogs. In addition, the API handles the management of the logged-in user.
-->
<!--
DE: Dieses Script enthält die Funktionen der chayns API. Dazu zählt z. B. das Versenden von Chat Nachrichten
oder auch das Anzeigen von Dialogen. Außerdem übernimmt die API die Verwaltung des angemeldeten Nutzers.
-->
<script
src="https://api.chayns-static.space/js/v4.0/chayns.min.js"
type="text/javascript"
></script>
<!--
EN: This is your own stylesheet where you can define your own styles. You can find more information
in the comments of the "index.css" file.
-->
<!--
DE: Dies ist Dein eigenes Stylesheet, in dem Du Deine eigenen Styles definieren kannst.
Weitere Informationen dazu findest Du in den Kommentaren der "index.css" Datei.
-->
<link href="index.css" rel="stylesheet" type="text/css">
<!-- EN: This is the name of the project. Just change it to the name of your project. -->
<!-- DE: Dies ist der Name des Projektes. Ändere ihn einfach zu dem Namen Deines Projektes. -->
<title>chayns Template</title>
</head>
<body>
<!--
EN: The element with the class "tapp" is the main element of your project. This element is needed
for every chayns page. Inside the element you can let your imagination run wild. In this example
we have a headline, an intro text, an input field and a button.
-->
<!--
DE: Das Element mit der Klasse "tapp" ist der Rahmen Deines Projektes. Dieses Element wird
für jede chayns Page benötigt. Innerhalb des Elementes kannst Du Deiner Fantasie freien Lauf lassen.
In diesem Beispiel haben wir eine Überschrift, ein Intro-Text, ein Eingabefeld und einen Button.
-->
<div class="tapp" id="root">
<h1>chayns Template</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</p>
<input
class="input input--border-design"
id="messageInput"
oninput="handleInput(this.value)"
placeholder="Deine Nachricht"
>
<div class="button-wrapper">
<button
class="button button--disabled"
disabled="true"
id="sendButton"
onclick="sendMessage()"
>
Nachricht senden
</button>
</div>
</div>
<!--
EN: This is your own script where you can write your own functions. In your script you can access the
functions of the chayns API. You can find more information in the comments of the "index.js" file.
-->
<!--
DE: Dies ist Dein eigenes Script, in dem Du Deine eigenen Funktionen schreiben kannst. In Deinem Script
kannst Du auf die Funktionen der chayns API zugreifen. Weitere Informationen dazu findest Du in den
Kommentaren der "index.js" Datei.
-->
<script src="index.js" type="text/javascript"></script>
</body>
</html>