Forum - Projekt: Maskottchen James, Hermine & Familie

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Projekt: Maskottchen James, Hermine & Familie - Die Forum Roboter

Seite 1 von 4 � Seite 1 2 3 4 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Projekt: Maskottchen James, Hermine & Familie - Die Forum Roboter datum

25.11.2022 13:36 (zuletzt bearbeitet: 10.01.2023 13:23)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	329

Hallo ihr Lieben, ich wünsche euch erst mal einen schönen Freitag.

Also hier ein kleines Vorwort worum es geht. Ich habe früher Egg-Bots geschrieben für Mirc also IRC - Chats. Wenn User in den Channel kamen, wurden sie begrüßt. Und wenn man Befehle eingegeben hatte, z.b. ! Dein Kaffee, dann schrieb er hier den User mit Text, hier "Dein Kaffee".

Dies wurde alles mit purer PHP geschrieben. Ich bastele an diesem Script bestimmt schon lange, mindestens 2 - 3 Monate herum. Mit den Befehlen zur Begrüßung habe ich es nicht hinbekommen. Habe mich ja informiert, dass das im Forum nicht möglich ist, da die Forensoftware immer verändert würde und man heutzutage Scripte die man schreibt, nach 3-4 Monaten immer neu anpassen müsse, da sich ständig neue Codes und Befehle in der Software ändern.

So jetzt zu meinem Script, ich habe es irgendwie geschafft das Script fertigzustellen, ich habe ein Maskottchen erstellt. Ich habe mich an Wolfgangs Rat und seine Tipps gehalten. Auf eigene Seiten habe ich es auch soweit hinbekommen.

Es sieht aber noch nicht perfekt aus, wie es aussehen sollte.

Ich wollte es auch im Portal einfügen, na ja ein graus.

Einer meinte, ich müsste noch eine PI dazu programmieren, damit das auf dem Xobor - Forum sehr gut aussieht. Davon habe ich keine Ahnung, noch ein Plan. Ich weiß nicht mal, was das ist. Ich fragte ihn, aber er sagte nichts mehr.

Jetzt stehe ich hier wie ein Ochse vorm Berg und weiß nicht, wo hin. Ich weiß, dass ich es schwer habe, da ich mit 2 verschieden Softwares rumschlagen muss. Für mich ist das alles nicht einfach, da hier meine Codes das Forum stören oder total verzerren oder zerschießen.

So hier, wie meine Arbeit aussieht. Auf CodePen, schön sauber, wie es sein soll.
Forum-Bot Maskottchen!

Und hier auf "Eigenen Seiten":
Forum-Bot Maskottchen!

Hier der HTML - Code mit Java:

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
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="160px" height="250px" viewBox="0 0 160 250" enable-background="new 0 0 160 250" xml:space="preserve" class="James">
<g>
	<g>
		<path class="antenna-left objro" d="M76.782,25.942c-0.08-0.815-2.192-20-22.867-21.928l0.137-1.501c21.916,2.044,24.19,23.07,24.21,23.283L76.782,25.942z"/>
	</g>
	<ellipse class="antenna-ball-left objro" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391"/>
</g>
<g>
	<g>
		<path class="antenna-right objro" d="M83.217,25.942c0.08-0.815,2.192-20,22.867-21.928l-0.137-1.501c-21.916,2.044-24.188,23.07-24.209,23.283L83.217,25.942z
			"/>
	</g>
	<ellipse class="antenna-ball-right objro" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391"/>
</g>
<rect class="neck objro" x="59.722" y="72.779" fill="#787878" width="40.557" height="27.564"/>
<path class="top-of-head objro" fill="#787878" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z"/>
<g>
	<g>
		<g>
			<rect class="leg-left objro" x="48.499" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-left objro" fill="#595959" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z"
			/>
		<g>
			<ellipse class="kneecap-left-outside objro" cx="54.885" cy="200.79" rx="9.294" ry="9.423"/>
			<g>
				<path class="kneepcap-left-inside objro" fill="#787878" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
					c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z"/>
			</g>
		</g>
	</g>
	<g>
		<g>
			<rect class="leg-right objro" x="98.729" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-right objro" fill="#595959" d="M105.115,234.096c9.523,0,17.244,7.119,17.244,15.903H87.871
			C87.871,241.215,95.593,234.096,105.115,234.096z"/>
		<g>
			<ellipse class="kneepcap-right-outisde objro" cx="105.113" cy="200.79" rx="9.295" ry="9.423"/>
			<g>
				<path class="kneecap-right-inside objro" fill="#787878" d="M99.395,203.823c1.652,3.202,5.551,4.44,8.713,2.768c3.164-1.677,4.381-5.628,2.729-8.832
					c-1.65-3.204-5.553-4.442-8.711-2.771C98.963,196.664,97.743,200.62,99.395,203.823z"/>
			</g>
		</g>
	</g>
</g>
<g>
	<g>
		<g>
			<path class="arm-left objro" fill="#787878" d="M38.291,95.944c-8.259,4.479-15.268,11.387-20.423,18.846C5.22,133.088,3.41,154.261,7.262,176.253
				l10.418-1.878c-3.338-19.01-2.353-37.016,8.665-53.158c4.23-6.199,9.988-12.042,16.923-15.812L38.291,95.944z"/>
			<path class="hand-left objro" fill="#595959" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.523,6.51,8.172
				c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
				c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z"/>
			<g>
				<ellipse class="elbox-left-outside objro" cx="13.581" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-left-inside objro" fill="#787878" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
						c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-left objro" d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z"/>
	</g>
	<g>
		<g>
			<path class="arm-right objro" fill="#787878" d="M121.709,95.944c8.258,4.479,15.268,11.387,20.421,18.846c12.647,18.299,14.458,39.472,10.606,61.464
				l-10.418-1.878c3.339-19.01,2.353-37.017-8.666-53.158c-4.229-6.199-9.987-12.042-16.924-15.812L121.709,95.944z"/>
			<path class="hand-right objro" fill="#595959" d="M150.395,166.5c6.984,1.975,11.067,9.316,9.119,16.398c-1.011,3.662-3.439,6.523-6.511,8.172
				c0.168-0.363,0.313-0.742,0.424-1.141c1.237-4.484-1.702-9.234-6.562-10.609c-4.861-1.377-9.803,1.145-11.035,5.631
				c-0.109,0.396-0.18,0.798-0.223,1.197c-1.784-3.021-2.398-6.748-1.393-10.407C136.166,168.661,143.412,164.523,150.395,166.5z"/>
			<g>
				<ellipse class="elbox-right-outside objro" cx="146.419" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-right-inside objro" fill="#787878" d="M150.7,135.199c-1.235,2.396-4.154,3.322-6.519,2.07c-2.365-1.252-3.279-4.211-2.043-6.605
						c1.235-2.398,4.152-3.324,6.52-2.072C151.023,129.844,151.936,132.803,150.7,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-right" d="M117.645,94.049l8.34-1.248c5.238,10.201,7.015,20.918,4.695,32.248l-8.339,1.248L117.645,94.049z"/>
	</g>
</g>
<path class="head objro" fill="#595959" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
	C118.309,65.694,118.625,47.035,112.809,28.372z"/>
<g>
	<g>
		<path class="eyeball-left-outside objro" fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
			s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z"/>
		<path class="eyeball-left-inside" d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
			c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z"/>
	</g>
	<g>
		<path class="eyeball-right-outisde objro" fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
			s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z"/>
		<path class="eyeball-right-inside"  d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
			c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z"/>
	</g>
</g>
<path class="mouth objro" fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499H58.487c-1.033,0-1.871-1.118-1.871-2.499
	c0-1.378,0.838-2.496,1.871-2.496h43.025C102.547,67.282,103.383,68.4,103.383,69.778z"/>
<g>
	<path class="body objro" fill="#595959" d="M120.098,92.09H80H39.903c-7.105,26.162-6.721,52.325,0,78.488H80h40.098
		C126.82,144.416,127.203,118.252,120.098,92.09z"/>
</g>
</svg>
<div id="coding">
  //Existiert ein Forum-Bot?_
  //Sieht der alte James nicht gelangweilt aus?  Vielleicht braucht er eine neue Kulisse. _ 
  //Vielleicht muss er sich ein bisschen bewegen. _ 
  //Vielleicht braucht er einen Kumpel. _ 
  //Vielleicht muss er als Maskottchen auf ein anderes Forum aufgenommen werden.  Vielleicht braucht er ein neues Outfit. _
  //Vielleicht ist er eine Sie?! __
  Verbinden mit https://www.black-angels-club.org _ 
  Inhalte werden geladen... _ Codierung... __ //neuer Forum-Bot... _ var James = new RobotSvg(); _ console.append(James.sagt); _ //Fertig  __ SVG erstellen... **************************** _ Erfolgreich erstellt! _ James, sag uns was!!!</div>
<div id="James_sagt">
</div>
 
<!-- Wird benötigt, wenn kein jQuery vorhanden ist --> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<script id="rendered-js">
$(document).ready(function () {
  var coding = $("#coding");
  var text = coding.text();
  coding.text("");
 
  var i = 0;
  var html = "";
  var a = null;
  var interval = setInterval(function () {
    var char = "";
    if (text.split("")[i] != "*" &&
    text.split("")[i] != null &&
    text.split("")[i] != undefined)
    char = text.split("")[i] != "_" ? text.split("")[i] : "</br>";
 
    coding.html(html + char);
    html += char;
    i++;
 
    if (text.split("")[i] == "*")
    a++;
    if (a != null) $(".objro:eq(" + a + ")").css("display", "block");
 
    if (i == text.split("").length)
    {
      tellusSoething();
      clearInterval(interval);
    }
 
  }, 10);
 

  var whatDoesJames_sagt = "Herzlich Willkommen in Black - Angel´s - Club! Black - Angel´s - Club hat am 16.Oktober.2022 seine Pforten geöffnet. Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig! Wir haben einige geschützte Bereiche  wie z.B. � Private Foto-Galerie für Mitglieder. Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. Danke! Viel Spaß Euer James";
  var lgh = whatDoesJames_sagt.split("").length;
  var bitInt = 0;
  function tellusSoething()
  {
    $("#James_sagt").text($("#James_sagt").text() + whatDoesJames_sagt.split("")[bitInt]);
    bitInt++;
    $(".mouth").css("display", bitInt % 8 && $(".mouth").css("display") == "none" ? "block" : "none");
    if (bitInt < lgh)
    setTimeout(function () {tellusSoething();}, 10);else
 
    $(".mouth").css("display", "block");
  }
});
//# sourceURL=pen.js
    </script>
 

Schlie�en

Und hier der CSS - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
body
{
  background-color: transparent;
  color: black;
  font-family: monospace;
}
.James
{
  position: absolute;
  bottom: 10px;
}
.objro{ display: none; }
#James_sagt
{ 
  width: 500px; 
  position: absolute; 
  bottom: 150px; 
  left: 180px;
  word-break: break-all;
}
.hide
{
  display: none !important;
}
 

Schlie�en

Jetzt weiß ich nicht weiter, wo ich hier ein Fehler im Xobor - Forum eingebaut habe. Auf "Eigene Seiten" muss man runterscrollen, dass man das sieht. Und mit dem PI einbauen weiß ich echt nicht was damit gemeint ist.

Um Erklärung und Kritik bin ich gerne offen, auch für Vorschläge, sowie Hilfe

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang und charlie1965 finden das Top!

Antworten

#2 | Überarbeitet: Maskottchen James Nr. 6 - Der Forum Roboter datum

26.11.2022 08:20 (zuletzt bearbeitet: 10.01.2023 13:25)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3392
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1278

Überarbeitet: Maskottchen James Nr. 6 - Der Forum Roboter
Aktualisiert 10.01.23

Hallo Daishi,
interessantes Skript in Beitrag #1!

Allein die Erstellung der Figur James durch eine "skalierbare Vektor Grafik" (SVG) ist der Hammer, ist zwar ziemlich groß (Zeile 44-149), aber erstaunlich, was so möglich ist!
Wichtig ist auch, wo baue ich das Skript ein?
Will man es universell halten, so dass es überall funktioniert und gut aussieht, muss man einen größeren Aufwand betreiben!
Das Skript selbst läuft gut, nur muss man schauen, wo und wie die Texte und die Figur James platziert werden sollen!

Was habe ich geändert?

Weil das Skript überall einsetzbar sein sollte und das nichts überdeckt wird, habe ich "position: absolute" herausgenommen und "float:left" bevorzugt!
Habe beiden Texten, den "Coding-Text" und den "James-Text" ein wenig Format und Farbe gegeben (Zeile 24-27 und 9-12)!
Habe den Coding-Text wegen der Übersicht neu geordnet (Zeile 159-177). Unterstriche (_) bewirken im Skript einen Zeilenumbruch)
James-Text mit "Backticks" (`) versehen, dadurch kann der Text im Skript frei geschrieben werden (Zeile 223-231)!
Positionen James-Text nach oben gesetzt (Zeile 41). Dadurch braucht die Seite nicht manuell weiter nach unten gescrollt zu werden!
Habe die Zeiten in Zeile 218+243 erhöht, damit man beim Anzeigen des Textes mitlesen kann! Zum Testen und Einstellen war die hohe Geschwindigkeit allerdings gut!
jQuery Zeile 186 kann gelöscht werden, weil es in den Xobor-Foren bereits geladen wird!

Hier ist James mit den angepasste Skript zu sehen:

Hallo James - James mit neuen Nachrichten!

Installation für alle Templates & Mobil

HTML und JavaScript

Das Skript kann gut ins Portal eingebaut werden. Am besten eignet sich die Box "SimpleTextBox."

Funktioniert aber auch in allen Templates & Mobil
Für die Template (v1-4) läuft das Skript auch in Kopf- oder Fußzeile, für das neue Xobor V6 und Mobil in Eigenes Javascript oder Eigene Kopfzeile

Das komplette Skript kann auch als PIugin in einen beliebigen Bereich installiert werden, z.B. in "Obere Leiste - Footer"
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

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
 
<style>
.James{
  float:left;
  margin: 30px 20px 10px 20px;
  z-index: 999997;
}
 
#James_sagt{   
  background-color: #333333;
  padding:15px 20px 15px 15px;
  border-radius:5px;
  color: #ffffff;
  
  display: none;
  z-index: 999999;
  max-width: 340px; 
  float:left;
  margin: 20px; 
 
  /* word-break: break-all; */
}
 
#coding {
  background-color: #333333;
  padding:15px 20px 15px 15px;
  border-radius:5px;
  color: #ffffff;
 
  float:left;
  display: table-cell;
  z-index: 999998;
  margin:20px;
}
 
.objro{ 
  display: none; 
}
</style>
 
<!-- James - Text -->
<div id="James_sagt"></div>
 
<!-- Figur James erstellen - Anfang -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="160px" height="250px" viewBox="0 0 160 250" enable-background="new 0 0 160 250" xml:space="preserve" class="James">
<g>
	<g>
		<path class="antenna-left objro" d="M76.782,25.942c-0.08-0.815-2.192-20-22.867-21.928l0.137-1.501c21.916,2.044,24.19,23.07,24.21,23.283L76.782,25.942z"/>
	</g>
	<ellipse class="antenna-ball-left objro" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391"/>
</g>
<g>
	<g>
		<path class="antenna-right objro" d="M83.217,25.942c0.08-0.815,2.192-20,22.867-21.928l-0.137-1.501c-21.916,2.044-24.188,23.07-24.209,23.283L83.217,25.942z
			"/>
	</g>
	<ellipse class="antenna-ball-right objro" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391"/>
</g>
<rect class="neck objro" x="59.722" y="72.779" fill="#787878" width="40.557" height="27.564"/>
<path class="top-of-head objro" fill="#787878" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z"/>
<g>
	<g>
		<g>
			<rect class="leg-left objro" x="48.499" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-left objro" fill="#595959" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z"
			/>
		<g>
			<ellipse class="kneecap-left-outside objro" cx="54.885" cy="200.79" rx="9.294" ry="9.423"/>
			<g>
				<path class="kneepcap-left-inside objro" fill="#787878" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
					c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z"/>
			</g>
		</g>
	</g>
	<g>
		<g>
			<rect class="leg-right objro" x="98.729" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-right objro" fill="#595959" d="M105.115,234.096c9.523,0,17.244,7.119,17.244,15.903H87.871
			C87.871,241.215,95.593,234.096,105.115,234.096z"/>
		<g>
			<ellipse class="kneepcap-right-outisde objro" cx="105.113" cy="200.79" rx="9.295" ry="9.423"/>
			<g>
				<path class="kneecap-right-inside objro" fill="#787878" d="M99.395,203.823c1.652,3.202,5.551,4.44,8.713,2.768c3.164-1.677,4.381-5.628,2.729-8.832
					c-1.65-3.204-5.553-4.442-8.711-2.771C98.963,196.664,97.743,200.62,99.395,203.823z"/>
			</g>
		</g>
	</g>
</g>
<g>
	<g>
		<g>
			<path class="arm-left objro" fill="#787878" d="M38.291,95.944c-8.259,4.479-15.268,11.387-20.423,18.846C5.22,133.088,3.41,154.261,7.262,176.253
				l10.418-1.878c-3.338-19.01-2.353-37.016,8.665-53.158c4.23-6.199,9.988-12.042,16.923-15.812L38.291,95.944z"/>
			<path class="hand-left objro" fill="#595959" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.523,6.51,8.172
				c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
				c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z"/>
			<g>
				<ellipse class="elbox-left-outside objro" cx="13.581" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-left-inside objro" fill="#787878" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
						c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-left objro" d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z"/>
	</g>
	<g>
		<g>
			<path class="arm-right objro" fill="#787878" d="M121.709,95.944c8.258,4.479,15.268,11.387,20.421,18.846c12.647,18.299,14.458,39.472,10.606,61.464
				l-10.418-1.878c3.339-19.01,2.353-37.017-8.666-53.158c-4.229-6.199-9.987-12.042-16.924-15.812L121.709,95.944z"/>
			<path class="hand-right objro" fill="#595959" d="M150.395,166.5c6.984,1.975,11.067,9.316,9.119,16.398c-1.011,3.662-3.439,6.523-6.511,8.172
				c0.168-0.363,0.313-0.742,0.424-1.141c1.237-4.484-1.702-9.234-6.562-10.609c-4.861-1.377-9.803,1.145-11.035,5.631
				c-0.109,0.396-0.18,0.798-0.223,1.197c-1.784-3.021-2.398-6.748-1.393-10.407C136.166,168.661,143.412,164.523,150.395,166.5z"/>
			<g>
				<ellipse class="elbox-right-outside objro" cx="146.419" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-right-inside objro" fill="#787878" d="M150.7,135.199c-1.235,2.396-4.154,3.322-6.519,2.07c-2.365-1.252-3.279-4.211-2.043-6.605
						c1.235-2.398,4.152-3.324,6.52-2.072C151.023,129.844,151.936,132.803,150.7,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-right" d="M117.645,94.049l8.34-1.248c5.238,10.201,7.015,20.918,4.695,32.248l-8.339,1.248L117.645,94.049z"/>
	</g>
</g>
<path class="head objro" fill="#595959" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
	C118.309,65.694,118.625,47.035,112.809,28.372z"/>
<g>
	<g>
		<path class="eyeball-left-outside objro" fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
			s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z"/>
		<path class="eyeball-left-inside" d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
			c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z"/>
	</g>
	<g>
		<path class="eyeball-right-outisde objro" fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
			s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z"/>
		<path class="eyeball-right-inside"  d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
			c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z"/>
	</g>
</g>
<path class="mouth objro" fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499H58.487c-1.033,0-1.871-1.118-1.871-2.499
	c0-1.378,0.838-2.496,1.871-2.496h43.025C102.547,67.282,103.383,68.4,103.383,69.778z"/>
<g>
	<path class="body objro" fill="#595959" d="M120.098,92.09H80H39.903c-7.105,26.162-6.721,52.325,0,78.488H80h40.098
		C126.82,144.416,127.203,118.252,120.098,92.09z"/>
</g>
</svg>
 
<!-- Figur James erstellen - Ende -->
 
<div style="clear:both;"></div>
 

<!-- Forum-Roboter - Anfang ( _  bedeutet Absatz / Zeilenumbruch ) -->
<div id="coding">
 
  // Existiert ein Forum-Bot? _
  // Sieht der alte James nicht gelangweilt aus? _
  // Vielleicht braucht er eine neue Kulisse? _ 
  // Vielleicht muss er sich ein bisschen bewegen? _ 
  // Vielleicht braucht er einen Kumpel? _ 
  // Vielleicht muss er als Maskottchen in einem anderen Forum aufgenommen werden? _
  // Vielleicht braucht er ein neues Outfit? _
  // Vielleicht ist er eine Sie?! _ _
 
  Verbinden mit https://www.black-angels-club.org _ 
  Inhalte werden geladen... _ 
  Codierung... _ _
 
  // Neuer Forum-Bot... _ 
  var James = new RobotSvg(); _ 
  console.append(James.sagt); _ 
  // Fertig  __ SVG erstellen... **************************** _ _
  Erfolgreich erstellt! _ _
  James, sag uns was!!!
 
</div>
<!-- Forum-Roboter - Ende -->
 
<div style="clear:both;"></div>
 

 
<!-- Wird benötigt, wenn kein jQuery vorhanden ist --> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<script>
$(function () {
  var coding = $("#coding");
  var text = coding.text();
  coding.text("");
 
  var i = 0;
  var html = "";
  var a = null;
  var interval = setInterval(function () {
    var char = "";
    if (text.split("")[i] != "*" &&
    text.split("")[i] != null &&
    text.split("")[i] != undefined)
    char = text.split("")[i] != "_" ? text.split("")[i] : "<br>";
 
    coding.html(html + char);
    html += char;
    i++;
 
    if (text.split("")[i] == "*")
    a++;
    if (a != null) $(".objro:eq(" + a + ")").css("display", "block");
 
    if (i == text.split("").length)
    {
      tellusSoething();
      clearInterval(interval);
    }
 
  }, 40);
 
 
  var whatDoesJames_sagt = `
 
Herzlich Willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. � Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. 
Danke! 
Viel Spaß Euer James
 
`;
 
var lgh = whatDoesJames_sagt.split("").length;
  var bitInt = 0;
  function tellusSoething()
  {
    $("#James_sagt").show().text($("#James_sagt").text() + whatDoesJames_sagt.split("")[bitInt]);
    bitInt++;
    $(".mouth").css("display", bitInt % 8 && $(".mouth").css("display") == "none" ? "block" : "none");
    if (bitInt < lgh)
    setTimeout(function () {tellusSoething();}, 50);
    else
    $(".mouth").css("display", "block");
  }
});
 
//# sourceURL=pen.js
</script>
 

Schlie�en

Bis dann und gutes Gelingen!

Wolfgang

Daishi findet das Top!

Antworten

#3 | RE: Maskottchen James - Der Forum Roboter datum

26.11.2022 08:50 (zuletzt bearbeitet: 10.01.2023 13:26)

Die Idee und die Umsetzung sind einfach nur Spitze!!!

Daishi und Wolfgang, ich lese alle Eure Beiträge und bewundere die Ergebnisse, auch wenn ich für mein Forum (sehr konservativ) leider nichts verwenden kann.
Ihr beide seid ein hervorragendes Team.

Wolfgang und Daishi finden das Top!

Antworten

#4 | RE: Maskottchen James - Der Forum Roboter datum

26.11.2022 23:18 (zuletzt bearbeitet: 10.01.2023 13:26)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	329

Hallo, @Wolfgang, erstmal super Arbeit, die du da leistest. Ich habe mal die neue Variante von dir installiert, da machten alle meine selbstgeschriebene CSS Probleme.

Du hast einen Code verwendet, den ich in meiner CSS benutzt hatte. Ich habe an deinem Script zwei kleine Änderungen müssen machen. Jetzt läuft es mit den anderen CSS-Einträgen sehr gut.

Das Script hatte Probleme mit meinen Lichterketten und mit meinen neuen Styles Boxheader und Link-Änderungen im Portal.

Jetzt läuft es sauber bei mir im Forum und hat jetzt keine Probleme mit meinen CSS-Codes mehr.

Hier die geänderte CSS mit 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
 
<style>
.James {
  position: left;
  bottom: 10px;
}
 
.objro { 
  display: none; 
}
 
#James_sagt {   
  background-color: transparent;
  padding:15px 20px 15px 15px;
  border-radius:5px;
  color: #000;
  
  display: none;
  z-index: 999999;
  max-width: 340px; 
  float:left;
  margin: 20px; 
}
 
.hide{
  display: none;
}
</style>
 
<!-- James - Text -->
<div id="James_sagt"></div>
 
<!-- Figur James erstellen - Anfang -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="160px" height="250px" viewBox="0 0 160 250" enable-background="new 0 0 160 250" xml:space="preserve" class="James">
<g>
	<g>
		<path class="antenna-left objro" d="M76.782,25.942c-0.08-0.815-2.192-20-22.867-21.928l0.137-1.501c21.916,2.044,24.19,23.07,24.21,23.283L76.782,25.942z"/>
	</g>
	<ellipse class="antenna-ball-left objro" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391"/>
</g>
<g>
	<g>
		<path class="antenna-right objro" d="M83.217,25.942c0.08-0.815,2.192-20,22.867-21.928l-0.137-1.501c-21.916,2.044-24.188,23.07-24.209,23.283L83.217,25.942z
			"/>
	</g>
	<ellipse class="antenna-ball-right objro" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391"/>
</g>
<rect class="neck objro" x="59.722" y="72.779" fill="#787878" width="40.557" height="27.564"/>
<path class="top-of-head objro" fill="#787878" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z"/>
<g>
	<g>
		<g>
			<rect class="leg-left objro" x="48.499" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-left objro" fill="#595959" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z"
			/>
		<g>
			<ellipse class="kneecap-left-outside objro" cx="54.885" cy="200.79" rx="9.294" ry="9.423"/>
			<g>
				<path class="kneepcap-left-inside objro" fill="#787878" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
					c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z"/>
			</g>
		</g>
	</g>
	<g>
		<g>
			<rect class="leg-right objro" x="98.729" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-right objro" fill="#595959" d="M105.115,234.096c9.523,0,17.244,7.119,17.244,15.903H87.871
			C87.871,241.215,95.593,234.096,105.115,234.096z"/>
		<g>
			<ellipse class="kneepcap-right-outisde objro" cx="105.113" cy="200.79" rx="9.295" ry="9.423"/>
			<g>
				<path class="kneecap-right-inside objro" fill="#787878" d="M99.395,203.823c1.652,3.202,5.551,4.44,8.713,2.768c3.164-1.677,4.381-5.628,2.729-8.832
					c-1.65-3.204-5.553-4.442-8.711-2.771C98.963,196.664,97.743,200.62,99.395,203.823z"/>
			</g>
		</g>
	</g>
</g>
<g>
	<g>
		<g>
			<path class="arm-left objro" fill="#787878" d="M38.291,95.944c-8.259,4.479-15.268,11.387-20.423,18.846C5.22,133.088,3.41,154.261,7.262,176.253
				l10.418-1.878c-3.338-19.01-2.353-37.016,8.665-53.158c4.23-6.199,9.988-12.042,16.923-15.812L38.291,95.944z"/>
			<path class="hand-left objro" fill="#595959" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.523,6.51,8.172
				c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
				c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z"/>
			<g>
				<ellipse class="elbox-left-outside objro" cx="13.581" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-left-inside objro" fill="#787878" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
						c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-left objro" d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z"/>
	</g>
	<g>
		<g>
			<path class="arm-right objro" fill="#787878" d="M121.709,95.944c8.258,4.479,15.268,11.387,20.421,18.846c12.647,18.299,14.458,39.472,10.606,61.464
				l-10.418-1.878c3.339-19.01,2.353-37.017-8.666-53.158c-4.229-6.199-9.987-12.042-16.924-15.812L121.709,95.944z"/>
			<path class="hand-right objro" fill="#595959" d="M150.395,166.5c6.984,1.975,11.067,9.316,9.119,16.398c-1.011,3.662-3.439,6.523-6.511,8.172
				c0.168-0.363,0.313-0.742,0.424-1.141c1.237-4.484-1.702-9.234-6.562-10.609c-4.861-1.377-9.803,1.145-11.035,5.631
				c-0.109,0.396-0.18,0.798-0.223,1.197c-1.784-3.021-2.398-6.748-1.393-10.407C136.166,168.661,143.412,164.523,150.395,166.5z"/>
			<g>
				<ellipse class="elbox-right-outside objro" cx="146.419" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-right-inside objro" fill="#787878" d="M150.7,135.199c-1.235,2.396-4.154,3.322-6.519,2.07c-2.365-1.252-3.279-4.211-2.043-6.605
						c1.235-2.398,4.152-3.324,6.52-2.072C151.023,129.844,151.936,132.803,150.7,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-right" d="M117.645,94.049l8.34-1.248c5.238,10.201,7.015,20.918,4.695,32.248l-8.339,1.248L117.645,94.049z"/>
	</g>
</g>
<path class="head objro" fill="#595959" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
	C118.309,65.694,118.625,47.035,112.809,28.372z"/>
<g>
	<g>
		<path class="eyeball-left-outside objro" fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
			s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z"/>
		<path class="eyeball-left-inside" d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
			c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z"/>
	</g>
	<g>
		<path class="eyeball-right-outisde objro" fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
			s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z"/>
		<path class="eyeball-right-inside"  d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
			c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z"/>
	</g>
</g>
<path class="mouth objro" fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499H58.487c-1.033,0-1.871-1.118-1.871-2.499
	c0-1.378,0.838-2.496,1.871-2.496h43.025C102.547,67.282,103.383,68.4,103.383,69.778z"/>
<g>
	<path class="body objro" fill="#595959" d="M120.098,92.09H80H39.903c-7.105,26.162-6.721,52.325,0,78.488H80h40.098
		C126.82,144.416,127.203,118.252,120.098,92.09z"/>
</g>
</svg>
 

<!-- Figur James erstellen - Ende -->
 
<div style="clear:both;"></div>
 
<!-- Forum-Bot - Anfang ( _  bedeutet Absatz / Zeilenumbruch ) -->
<div id="coding">
 
  // Existiert ein Forum-Bot? _
  // Daishi hat es geschafft ein Forum-Bot zu erschaffen. _ 
  // Mit Hilfe eines zuverlässigen Partners läuft der Forum-Bot sauber auf den Xobor-Foren. _ 
  // Dafür mussten Codes verändert und neu geschrieben werden. _ 
  // Nach einigen Tests lief alles wie am Schnürchen, jetzt ist James einsatzbereit. _
  // Vielleicht muss er als Maskottchen in einem anderen Forum aufgenommen werden? _
  // Vielleicht braucht er ein neues Outfit? _
  // James bekommt jetzt ein neues Aussehen, diese werden ihm jetzt zugeschickt. _ _
 
  Verbinden mit https://www.black-angels-club.org _ 
  Inhalte werden geladen... _ 
  Codierung... _ _
 
  // Neuer Forum-Bot... _ 
  var James = new RobotSvg(); _ 
  console.append(James.sagt); _ 
  // Fertig  __ SVG erstellen... **************************** _ _
  Erfolgreich erstellt! _ _
  J a m e s, sag uns was!!!
 
</div>
<!-- Forum-Bot - Ende -->
 
<div style="clear:both;"></div>
 
 
<script>
$(function () {
  var coding = $("#coding");
  var text = coding.text();
  coding.text("");
 
  var i = 0;
  var html = "";
  var a = null;
  var interval = setInterval(function () {
    var char = "";
    if (text.split("")[i] != "*" &&
    text.split("")[i] != null &&
    text.split("")[i] != undefined)
    char = text.split("")[i] != "_" ? text.split("")[i] : "<br>";
 
    coding.html(html + char);
    html += char;
    i++;
 
    if (text.split("")[i] == "*")
    a++;
    if (a != null) $(".objro:eq(" + a + ")").css("display", "block");
 
    if (i == text.split("").length)
    {
      tellusSoething();
      clearInterval(interval);
    }
 
  }, 40);
 
 
  var whatDoesJames_sagt = `
 
Herzlich Willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. � Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. 
Danke! 
Viel Spaß Euer James
 
`;
 
var lgh = whatDoesJames_sagt.split("").length;
  var bitInt = 0;
  function tellusSoething()
  {
    $("#James_sagt").show().text($("#James_sagt").text() + whatDoesJames_sagt.split("")[bitInt]);
    bitInt++;
    $(".mouth").css("display", bitInt % 8 && $(".mouth").css("display") == "none" ? "block" : "none");
    if (bitInt < lgh)
    setTimeout(function () {tellusSoething();}, 50);
    else
    $(".mouth").css("display", "block");
  }
});
 
//# sourceURL=pen.js
</script>
 

Schlie�en

Deine Arbeiten sind hervorragend, du schaust nur kurz drüber und weist was du eingeben musst und bamm es läuft. Ich bewundere dich immer wieder und das gibt mir immer einen Anreiz etwas neues zu tun und neue Ideen und Inspirationen zu machen.

Ich hoffe die Änderungen im Text und in der CSS waren ok

Mit freundlichen Grüßen

Daishi

Daishi

Antworten

#5 | RE: Maskottchen James - Der Forum Roboter datum

27.11.2022 12:29 (zuletzt bearbeitet: 10.01.2023 13:26)

"Einbau" wie immer ?

"CSS - Code" Admin - Layout - Farben & Einstellungen - CSS ?

"HTML Code": Admin - Layout - Kopf- & Fußzeile - in die Kopfzeile ?

Danke!

PS. Kann ich "Maskottchen James" auch in eine Portalbox einbauen ?

Viele Grüße
Michael

Antworten

#6 | RE: Maskottchen James - Der Forum Roboter datum

27.11.2022 14:18 (zuletzt bearbeitet: 10.01.2023 13:27)

Ja kannst du, du gehst auf Portal, dann auf Bearbeitungsmodus aktivieren, dann Box zum Bereich Hauptbereich_Mitte hinzufügen,SimpleTextBox HTML Code einfügen und titel einfügen, speichern und fertig.

Bei mir läuft es im Portal:
Portal!

Mit freundlichen Grüßen

Daishi

Daishi

Antworten

#7 | RE: Maskottchen James - Der Forum Roboter datum

27.11.2022 15:50 (zuletzt bearbeitet: 10.01.2023 13:27)

Danke Daishi.
Ich probiers mal aus.

Viele Grüße
Michael

Antworten

#8 | Maskottchen James 2.1 - Der Forum Roboter datum

30.12.2022 11:57 (zuletzt bearbeitet: 12.01.2023 22:14)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	329

Hallo, ihr Lieben, habe lange überlegt und habe Maskottchen James etwas erneuert. Er kann jetzt auch reden, also Sprechen.

Was mir aufgefallen ist, dass man hier echt den krassen Unterschied der verschiedenen Software merkt. Auf CodePen bekam ich es mit der Sprache auf Deutsch nicht hin, nur in Englisch. Kaum auf das Xobor - Forum installiert, redet er schön Deutsch, echt krass.

Habe es auf "Eigenen Seiten" eingebaut, perfekt. Es funktioniert vorne im Portal leider nicht. Auch wenn ich es als in die Kopfzeile kopiere, geht das nicht.

Ich dachte mir, das peppt ein wenig das Xobor - Forum auf. Es war wieder nur eine Idee und Inspiration. Ich finde es schade und traurig, dass ich das nicht so drauf habe wie Wolfgang, der schreibt das mit Klacks um in ein Plugin.

Es ist auch noch alles Neuland für mich. Ich bin nur froh, dass ich so weit mit CodePen recht gut klarkomme. Ich denke, wenn es als Plugin geschrieben wird, wird es überall gehen.

Damit James spricht, einfach James anklicken und er redet dann.

Hier das Original:
James 2!

Und hier auf Forum "Eigene Seiten":
James 2! Einfach James anklicken und hören. Habe es gemacht, damit ihr es hört.

Hier das schöne kleine Script. Ich habe wieder alles zusammengepackt. Ich finde es ist gut, wenn so alles getrennt ist, denke ich, ist meine Meinung. Man kann schneller alles auf der Seite sehen, also HTML, CSS, Javascript.

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
 
<style>
  
html {
  box-sizing: border-box;
}
 
*, *:before, *:after {
  box-sizing: inherit;
}
 
body {
  background-color: #333;
}
 
.robot {
  box-sizing: border-box;
  position: absolute;
  width: 160px;
  height: 180px;
  bottom: 0;
  left: calc(50% - 80px);
}
 
.head {
  position: absolute;
  width: 160px;
  height: 100px;
  background-color: #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
  transform-origin: 50% 100%;
  -webkit-animation: bob 8000ms ease-in-out alternate infinite -1000ms;
          animation: bob 8000ms ease-in-out alternate infinite -1000ms;
}
 
.eyes {
  position: absolute;
  top: calc(25% - 10px);
  right: 30px;
  left: 30px;
  height: 20px;
  -webkit-animation: blink 10000ms linear forwards infinite;
          animation: blink 10000ms linear forwards infinite;
}
 
.eyeball {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background-color: black;
}
 
.eyeball_left {
  left: 0;
  transition: transform 100ms ease-in-out;
}
 
.eyeball_right {
  right: 0;
  transition: transform 100ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 150px;
  height: 20px;
  background-color: black;
  overflow: hidden;
  border-radius: 5px;
  transition: height 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 
.mouth-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
 
.robot_speaking .mouth {
  height: 40px;
}
.robot_speaking .mouth-container {
  -webkit-animation: speakingAnim 0.3s infinite;
          animation: speakingAnim 0.3s infinite;
}
 
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: limegreen;
  width: 100%;
  margin-top: -1px;
}
 
.torso {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.neck {
  position: absolute;
  bottom: 45px;
  left: calc(50% - 15px);
  width: 30px;
  height: 50px;
  border-radius: 15px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arms {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 50px;
}
 
.arm {
  position: absolute;
  top: 0;
  width: 20px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arm_left {
  left: 0;
}
 
.arm_right {
  right: 0;
}
 
@-webkit-keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
 
@keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
@-webkit-keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
@keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
@-webkit-keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@-webkit-keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}  
  
</style>
 
<div class="robot">
    <div class="neck"></div>
    <div class="arms">
        <div class="arm arm_left"></div>
        <div class="arm arm_right"></div>
    </div>
    <div class="torso"></div>
    <div class="head">
        <div class="eyes">
            <div class="eyeball eyeball_left"></div>
            <div class="eyeball eyeball_right"></div>
        </div>
        <div class="mouth">
            <div class="mouth-container">
                <div class="mouth-container-line"></div>
            </div>
        </div>
    </div>
</div>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:0; height:0;">
    <defs>
        <!-- Low -->
        <filter id="low-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <filter id="low-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" />
        </filter>
        <filter id="low-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <filter id="low-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" />
        </filter>
        <filter id="low-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="0.5" />
        </filter>
        <!-- Listening -->
        <filter id="listening-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="2" />
        </filter>
        <filter id="listening-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" />
        </filter>
        <filter id="listening-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="2" />
        </filter>
        <filter id="listening-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" />
        </filter>
        <filter id="listening-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <!-- Speaking -->
        <filter id="speaking-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="12" />
        </filter>
        <filter id="speaking-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" />
        </filter>
        <filter id="speaking-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="12" />
        </filter>
        <filter id="speaking-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" />
        </filter>
        <filter id="speaking-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="11" />
        </filter>
    </defs>
</svg>
 

<script id="rendered-js">
/* 
 * KLICKEN SIE ROBOTER, UM ZU SPRECHEN
 * Text in message.text ändern
 *&nbsp;Variable zum Ändern der Roboternachricht
 *
 *&nbsp;CONFIG.DEFAULT: false, wird überschrieben
 *&nbsp;Standardstimme des Systems
 */
 
const CONFIG = {
  DEFAULT: false,
  VOICE: 'Fred' };
 

const robot = document.querySelector('.robot');
 
let message = new SpeechSynthesisUtterance();
 
message.text = `Herzlich Willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. � Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. 
Danke! 
 
Viel Spaß Euer James`;
 
let voices = [];
 

speechSynthesis.addEventListener('voiceschanged', event => {
  voices = speechSynthesis.getVoices();
  if (!CONFIG.DEFAULT) {
    message.voice = voices.find(voice => voice.name === CONFIG.VOICE);
  }
});
 
message.onend = function (event) {
  robot.classList.remove('robot_speaking');
};
 
robot.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot.classList.remove('robot_speaking');
    speechSynthesis.cancel();
  } else {
    robot.classList.add('robot_speaking');
    speechSynthesis.speak(message);
  }
});
//# sourceURL=pen.js
    </script>
 

 

Schlie�en

Ich hoffe diese kleine Inspiration kommt hier im Forum gut an und hoffe, dass dadurch das Xobor - Forum gut aufgepeppt wird.

Ich dachte, ich bringe noch vor dem neuen Jahr etwas Cooles.

Gruß

Daishi

Wolfgang und ichwersonst finden das Top!

Antworten

#9 | Überarbeitet: Maskottchen James 2.1 - Der Forum Roboter datum

30.12.2022 21:12 (zuletzt bearbeitet: 11.01.2023 22:04)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3392
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1278

Überarbeitet: Maskottchen James 2.1 - Der Forum Roboter

Hallo Daishi,
ich muss sagen, dass James 1 aus dem Beitrag #2 so seine Vorzüge haben!
Aber James 2 ist mein Favorit und sieht Top aus, finde ich!
Genial ist, das er wirklich sprechen kann!
Cool währe es, wenn bei einer Stummschaltung eine Sprechblase erscheinen würde, wie: "Wenn Du mich hören willst, ....."
Habe aber hierzu noch keine Möglichkeit gefunden!

Was ich geändert habe:

Aus dem Beitrag #8 von Daishi

Das Skript lief auf Anhieb, nur die üblichen CSS-Formatierungen "*", "html" und "body" veränderten das Xobor-Forum sehr stark!
Diesesmal war es sehr einfach, man brauchte sie nur löschen!

Ich habe "margin: 20px" (Zeile 9) eingefügt, damit James einen Abstand zu den umliegenden Objekten hat!
Und "cursor:pointer", damit man beim Mouseover sehen kann, dass es etwas zu sagen hat!
Zu guter Letzt hat er noch einen Tooltipp bekommen (Zeile 300): "Ich möchte Dir etwas sagen!".

Das Skript funktioniert in allen Templates & Mobil
Für die Template (v1-4) läuft das Skript auch in Kopf- oder Fußzeile, für das neue Xobor V6 und Mobil in Eigenes Javascript oder Eigene Kopfzeile

Das komplette Skript kann auch als PIugin in einen beliebigen Bereich installiert werden, z.B. in "Obere Leiste - Footer"
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

Auch der Einbau ins Portal ist möglich. Am besten eignet sich die Box "SimpleTextBox."

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
 
<style>
.robot {
  box-sizing: border-box;
  position: relative;
  width: 160px;
  height: 180px;
  bottom: 0;
  left: calc(50% - 80px);
  margin:20px;
  cursor:pointer;
}
 
.head {
  position: absolute;
  width: 160px;
  height: 100px;
  background-color: #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
  transform-origin: 50% 100%;
  -webkit-animation: bob 8000ms ease-in-out alternate infinite -1000ms;
          animation: bob 8000ms ease-in-out alternate infinite -1000ms;
}
 
.eyes {
  position: absolute;
  top: calc(25% - 10px);
  right: 30px;
  left: 30px;
  height: 20px;
  -webkit-animation: blink 10000ms linear forwards infinite;
          animation: blink 10000ms linear forwards infinite;
}
 
.eyeball {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background-color: black;
}
 
.eyeball_left {
  left: 0;
  transition: transform 100ms ease-in-out;
}
 
.eyeball_right {
  right: 0;
  transition: transform 100ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 150px;
  height: 20px;
  background-color: black;
  overflow: hidden;
  border-radius: 5px;
  transition: height 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 
.mouth-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
 
.robot_speaking .mouth {
  height: 40px;
}
.robot_speaking .mouth-container {
  -webkit-animation: speakingAnim 0.3s infinite;
          animation: speakingAnim 0.3s infinite;
}
 
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: limegreen;
  width: 100%;
  margin-top: -1px;
}
 
.torso {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.neck {
  position: absolute;
  bottom: 45px;
  left: calc(50% - 15px);
  width: 30px;
  height: 50px;
  border-radius: 15px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arms {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 50px;
}
 
.arm {
  position: absolute;
  top: 0;
  width: 20px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arm_left {
  left: 0;
}
 
.arm_right {
  right: 0;
}
 
@-webkit-keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
 
@keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
 
@-webkit-keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
 
@keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
 
@-webkit-keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@-webkit-keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
 
@keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
 
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
</style>
 
<div class="robot" title="Ich möchte Dir etwas sagen!">
    <div class="neck"></div>
    <div class="arms">
        <div class="arm arm_left"></div>
        <div class="arm arm_right"></div>
    </div>
    <div class="torso"></div>
    <div class="head">
        <div class="eyes">
            <div class="eyeball eyeball_left"></div>
            <div class="eyeball eyeball_right"></div>
        </div>
        <div class="mouth">
            <div class="mouth-container">
                <div class="mouth-container-line"></div>
            </div>
        </div>
    </div>
</div>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:0; height:0;">
    <defs>
        <!-- Low -->
        <filter id="low-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <filter id="low-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" />
        </filter>
        <filter id="low-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <filter id="low-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" />
        </filter>
        <filter id="low-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="0.5" />
        </filter>
        <!-- Listening -->
        <filter id="listening-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="2" />
        </filter>
        <filter id="listening-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" />
        </filter>
        <filter id="listening-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="2" />
        </filter>
        <filter id="listening-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" />
        </filter>
        <filter id="listening-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <!-- Speaking -->
        <filter id="speaking-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="12" />
        </filter>
        <filter id="speaking-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" />
        </filter>
        <filter id="speaking-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="12" />
        </filter>
        <filter id="speaking-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" />
        </filter>
        <filter id="speaking-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="11" />
        </filter>
    </defs>
</svg>
 
 
<!-- Wird benötigt, wenn kein jQuery vorhanden ist --> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<script id="rendered-js">
/* 
 * KLICKEN SIE DEN ROBOTER AN, DAMIT ER SPRECHEN KANN
 * Text in message.text ändern
 * Variable zum Ändern der Roboternachricht
 *
 * CONFIG.DEFAULT: false, wird überschrieben
 * Standardstimme des Systems
 */
 
const CONFIG = {
  DEFAULT: false,
  VOICE: 'Fred' };
 
 
const robot = document.querySelector('.robot');
 
let message = new SpeechSynthesisUtterance();
 
message.text = `Herzlich willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. � Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. 
Danke! 
 
Viel Spaß Euer James`;
 
let voices = [];
 
 
speechSynthesis.addEventListener('voiceschanged', event => {
  voices = speechSynthesis.getVoices();
  if (!CONFIG.DEFAULT) {
    message.voice = voices.find(voice => voice.name === CONFIG.VOICE);
  }
});
 
message.onend = function (event) {
  robot.classList.remove('robot_speaking');
};
 
robot.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot.classList.remove('robot_speaking');
    speechSynthesis.cancel();
  } else {
    robot.classList.add('robot_speaking');
    speechSynthesis.speak(message);
  }
});
//# sourceURL=pen.js
</script>
 

Schlie�en

Bis dann, alles Gute fürs neue Jahr und nochmal besten Dank an Dich Daishi

Wolfgang

ichwersonst und Daishi finden das Top!

Antworten

#10 | Maskottchen James 2.2 - Der Forum Roboter datum

31.12.2022 08:01 (zuletzt bearbeitet: 11.01.2023 22:04)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	329

Hallo @Wolfgang, ich habe die ganze Nacht jetzt dran gesessen, bis jetzt. Ich hoffe, dass es so richtig ist. Was genau meintest du mit dem Sprechenblase?

Hier mal der neu bearbeite Code:

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
 
<style>
  
html {
  box-sizing: border-box;
}
 
*, *:before, *:after {
  box-sizing: inherit;
}
 
body {
  background-color: #333;
}
 
.robot {
  box-sizing: border-box;
  position: absolute;
  width: 160px;
  height: 180px;
  bottom: 0;
  left: calc(50% - 80px);
}
 
.head {
  position: absolute;
  width: 160px;
  height: 100px;
  background-color: #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
  transform-origin: 50% 100%;
  -webkit-animation: bob 8000ms ease-in-out alternate infinite -1000ms;
          animation: bob 8000ms ease-in-out alternate infinite -1000ms;
}
 
.eyes {
  position: absolute;
  top: calc(25% - 10px);
  right: 30px;
  left: 30px;
  height: 20px;
  -webkit-animation: blink 10000ms linear forwards infinite;
          animation: blink 10000ms linear forwards infinite;
}
 
.eyeball {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background-color: black;
}
 
.eyeball_left {
  left: 0;
  transition: transform 100ms ease-in-out;
}
 
.eyeball_right {
  right: 0;
  transition: transform 100ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 150px;
  height: 20px;
  background-color: black;
  overflow: hidden;
  border-radius: 5px;
  transition: height 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 
.mouth-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
 
.robot_speaking .mouth {
  height: 40px;
}
.robot_speaking .mouth-container {
  -webkit-animation: speakingAnim 0.3s infinite;
          animation: speakingAnim 0.3s infinite;
}
 
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: limegreen;
  width: 100%;
  margin-top: -1px;
}
 
.torso {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.neck {
  position: absolute;
  bottom: 45px;
  left: calc(50% - 15px);
  width: 30px;
  height: 50px;
  border-radius: 15px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arms {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 50px;
}
 
.arm {
  position: absolute;
  top: 0;
  width: 20px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arm_left {
  left: 0;
}
 
.arm_right {
  right: 0;
}
 
@-webkit-keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
 
@keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
@-webkit-keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
@keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
@-webkit-keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@-webkit-keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}  
  
  body {
  background: #dddddd;
}
 
.bubble {
  position: relative;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 24px;
  width: 300px;
  background: #fff;
  border-radius: 40px;
  padding: 24px;
  text-align: center;
  color: #000;
}
 
.bubble-bottom-right:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 24px solid #fff;
  border-left: 12px solid transparent;
  border-top: 12px solid #fff;
  border-bottom: 20px solid transparent;
  right: 32px;
  bottom: -24px;
}
 
</style>
 
<div class="robot">
    <div class="neck"></div>
    <div class="arms">
        <div class="arm arm_left"></div>
        <div class="arm arm_right"></div>
    </div>
    <div class="torso"></div>
    <div class="head">
        <div class="eyes">
            <div class="eyeball eyeball_left"></div>
            <div class="eyeball eyeball_right"></div>
        </div>
        <div class="mouth">
            <div class="mouth-container">
                <div class="mouth-container-line"></div>
            </div>
        </div>
    </div>
</div>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:0; height:0;">
    <defs>
        <!-- Low -->
        <filter id="low-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <filter id="low-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" />
        </filter>
        <filter id="low-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <filter id="low-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" />
        </filter>
        <filter id="low-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="0.5" />
        </filter>
        <!-- Listening -->
        <filter id="listening-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="2" />
        </filter>
        <filter id="listening-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" />
        </filter>
        <filter id="listening-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="2" />
        </filter>
        <filter id="listening-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" />
        </filter>
        <filter id="listening-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" />
        </filter>
        <!-- Speaking -->
        <filter id="speaking-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"/>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="12" />
        </filter>
        <filter id="speaking-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" />
        </filter>
        <filter id="speaking-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="12" />
        </filter>
        <filter id="speaking-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" />
        </filter>
        <filter id="speaking-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"/>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="11" />
        </filter>
    </defs>
</svg>
 
<div class="bubble bubble-bottom-right" contenteditable>Ich kann Sprechen,wenn sie mich Höhren wollen klicken sie mich an.</div>
 

<script id="rendered-js">
/* 
 * KLICKEN SIE ROBOTER, UM ZU SPRECHEN
 * Text in message.text ändern
 *&nbsp;Variable zum Ändern der Roboternachricht
 *
 *&nbsp;CONFIG.DEFAULT: falsch, wird überschrieben
 *&nbsp;Standardstimme des Systems
 */
 
const CONFIG = {
  DEFAULT: false,
  VOICE: 'Fred' };
 

const robot = document.querySelector('.robot');
 
let message = new SpeechSynthesisUtterance();
 
message.text = `Herzlich Willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. � Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. 
Danke! 
 
Viel Spaß Euer James`;
 
let voices = [];
 

speechSynthesis.addEventListener('voiceschanged', event => {
  voices = speechSynthesis.getVoices();
  if (!CONFIG.DEFAULT) {
    message.voice = voices.find(voice => voice.name === CONFIG.VOICE);
  }
});
 
message.onend = function (event) {
  robot.classList.remove('robot_speaking');
};
 
robot.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot.classList.remove('robot_speaking');
    speechSynthesis.cancel();
  } else {
    robot.classList.add('robot_speaking');
    speechSynthesis.speak(message);
  }
});
//# sourceURL=pen.js
    </script>
 

 

Schlie�en

Ich hoffe, ich habe deine Idee gut umgesetzt, du kannst auch gerne deine Ideen mit einfließen lassen. Sei mir nicht böse, ich bin voll müde, habe echt jetzt meine grauen Gehirnzellen ausgeschöpft, bin jetzt müde.

Ich möchte eines noch sagen, der Code geht noch nicht im Xobor - Forum, der muss erst noch überprüft und entweder neu geschrieben werden oder neue Ideen mit eingefügt werden. Dies ist eine Arbeit, die ich versucht habe umzusetzen, mit einer Sprechblase.

Das Script das Wolfgang geschrieben hat, funktioniert einwandfrei. Beitrag #9!

Ich hoffe die Arbeit kam gut an.

Gruß

Daishi

Antworten

Abstimmung nachträglich einfügen � � Business (v4): "Legende anzeigen" optisch verbessern!

Seite 1 von 4 � Seite 1 2 3 4 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Habe mal eine Frage? Was habe ich hier falsch gemacht? Mobile Navigation fürs Forum!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

19.05.2024 21:35
von

Daishi • Zugriffe: 152

Projekt Teilen Button - location.href url automatisch erkennen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

11.02.2024 11:38
von

Daishi • Zugriffe: 311

Lesezeichen fürs Forum Speichern
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 6 25.02.2024 17:43
Wolfgang • Zugriffe: 1677
Hover-Effekt für einen Forum-Code der Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anke 9 14.10.2023 05:41
Wolfgang • Zugriffe: 447
Audio-Player fürs Forum
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 2 07.10.2022 20:11
Wolfgang • Zugriffe: 413
Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 715

No Spam: Email - Adressen für Robots ausblenden
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

12.09.2018 12:44
von

Wolfgang • Zugriffe: 5718

Wichtig und notwendig! Mehr Sicherheit im Internet und im Forum
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 2 03.04.2021 22:40
Wolfgang • Zugriffe: 56209

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €