Uhr mit Datum und super Animationen!

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! � Uhr mit Datum und super Animationen!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - 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 Elektronik & Elektrotechnik - Fragen & Antworten 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 | Uhr mit Datum und super Animationen! datum

21.07.2022 17:13 (zuletzt bearbeitet: 10.01.2025 12:44)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

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

Habe mal eine Uhr mit Datum gebastelt, sieht gut aus so weit, nur bekomme ich sie im Xobor-Forum nicht zum Laufen.

Trotz Bemühungen und ändern der CSS -Tags ohne Erfolg, das sieht so schrecklich aus

Ich weiß auch nicht, ob ich im JavaScript Fehler dort drinnen habe. In Codepen sieht alles gut aus, da geht alles so weit, nur leider nicht hier im Xobor-Forum. Das Javascript ist mit im HTML eingefügt.

Habe auch versucht Erklärungen einzufügen, so gut ich kann, darin bin ich noch nicht so gut. Z.B. (  ) und ( /* Titel*/ ) usw. muss auch noch die Begriffe lernen, wie das alles heißt.

Hier der HTML 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
 
<div class="app-body">
  <!-- Titel -->
  <h1 class="title">Uhr mit Datum</h1>
  <!-- Uhr -->
  <div id="clock"></div>
  <!-- Datum -->
  <div id="date"></div>
</div>
 
<!-- Javascript -->
<script id="rendered-js">
let date = new Date();
let prevMin = date.getMinutes();
let prevHour = date.getHours();
 
updateTime();
setInterval(() => {
  updateTime();
}, 1000);
 
function updateTime() {
  const clock = document.getElementById("clock");
  date = new Date();
 
  let hour = formatNum(date.getHours());
  let min = formatNum(date.getMinutes());
  let sec = formatNum(date.getSeconds());
 
  clock.innerHTML = `<span id="hour" class="square">${hour}</span>
  <span id="min" class="square">${min}</span>
  <span id="sec" class="square anim">${sec}</span>`;
 
  let dayOfWeek = formatDOF(date.getDay());
  let day = date.getDate();
  let month = formatMonth(date.getMonth());
  let year = date.getFullYear();
 
  let dateDiv = document.getElementById("date");
  dateDiv.innerHTML = `<span class="dof">${dayOfWeek}</span>
  <span class="fulldate">${day}, ${month} ${year}</span>`;
 
  handleChanges(hour, min);
}
 
function formatNum(num) {
  if (num < 10) num = `0${num}`;
  return num;
}
 
function formatDOF(dayOfWeek) {
  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  return days[dayOfWeek];
}
 
function formatMonth(month) {
  const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"];
 
  return months[month];
}
 
function handleChanges(h, m) {
  const timeoutTime = 500;
  const hourSpan = document.getElementById("hour");
  const minSpan = document.getElementById("min");
  if (h != prevHour) {
    prevHour = h;
    hourSpan.classList.toggle("anim");
    setTimeout(() => {
      hourSpan.classList.toggle("anim");
    }, timeoutTime);
  }
 
  if (m != prevMin) {
    prevMin = m;
    minSpan.classList.toggle("anim");
    setTimeout(() => {
      minSpan.classList.toggle("anim");
    }, timeoutTime);
  }
}
//# sourceURL=pen.js
    </script>
 

Schließen

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
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
 
@import url("https://fonts.googleapis.com/css2?family=Redressed&display=swap");
* {
  font-size: 30px;
  font-family: "Redressed", cursive;
  color: #eee;
  box-sizing: border-box;
}
body {
  background-color: #000;
}
/* Titel*/
.title {
  text-align: center;
}
.app-body {
  border: 1px groove #eee;
  border-radius: 10px;
  padding: 1rem;
  width: 450px;
  margin: 25vh auto;
}
/* UHR */
#clock {
  display: flex;
  justify-content: center;
}
/* Datum */
#date {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.square {
  border-radius: 10px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin: 1rem 0;
  width: 100px;
  padding: 1rem 0;
  text-align: center;
  transition: 100ms all;
}
.dof {
  border-radius: 50%;
  background-color: #444;
  padding: 0.4rem;
}
.fulldate {
  border-bottom: 3px double #888;
}
/* Animation */
.anim {
  animation: 500ms update ease 1;
}
 
@keyframes update {
  50% {
    background-color: #444;
    transform: scale(1.1);
  }
}
 
 

Schließen

Ich hoffe, die Idee kommt gut an. Habe die Idee so weit umgesetzt.
Hier noch ein Bild wie es im Xobor-Forum aussieht schlimm.

Ich weiß nur nicht, wo ich einen Fehler gemacht habe. Ist nur ärgerlich, dass ich das nicht so sauber ohne Hilfe hinbekomme fürs Xobor-Forum.

Mit freundlichen Grüßen
Daishi

Daishi

Wolfgang und Kipper-Spedition finden das Top!

Antworten

#2 | Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

22.07.2022 17:15 (zuletzt bearbeitet: 11.07.2023 14:58)

Wolfgang

Administrator

Informationen anzeigen

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

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

Uhr mit Datum & Herzschlag - Formatiert fürs Forum

Hallo Daishi,
Du bist ja unermüdlich mit Deinen Ideen und Vorschläge!
Vor allen Dingen haben sie immer etwas besonderes!

Normalerweise lasse ich bei Uhren die Sekunden gerne weg, weil ein ständiger Wechsel zu viel Unruhe mit sich bringt. Ähnlich kann es bei Laufschriften sein!
Aber Dein Uhrenvorschlag ist genial!
Hier pulsiert die Sekunde wie ein Herzschlag!
Für mich fast beruhigend!

@Daishi - Zu Deinem Skript:

Der Fehler der sich eingeschlichen hat liegt wohl am fehlenden Wert für die Breite der Uhr!
Entweder ist hier für ein Semikolon ein Komma reingerutscht und die Breite wird nicht umgesetzt oder der Wert für die Breite steht auf "auto"!
Es kann auch sein, dass schon vorhandene Classes das Skript beeinflussen!
Bei mir wird die Uhr nicht so auseinandergezogen!

Um die Uhr im Forum gut darzustellen, muss man schauen was die Classes und ID's so beinflussen!

Sternchen (*) und body in der CSS wirken sich nach wie vor aufs ganze Forum aus!
Da nur die Uhr zu Geltung gebracht werden soll, muss man schauen, welche Div-Container mit Farbe und Schrift versorgt werden müssen!
Ansonsten läuft die Uhr recht gut!

Was ich geändert habe:

Das Skript ist auch genial, weil man viel verändern kann!
Habe die Datumsangabe auf Deutsch umgestellt!
Habe gleich alle CSS-Tags namendlich erweitert, damit keine doppelte Classes Ärger machen!
Habe die CSS so verändert, dass man über die Schriftgröße in Zeile 5 die Größe der Uhr verändern kann. Der Rest der Uhr passt sich automatisch an!
Habe mal wieder die Google-Importschrift herausgenommen und durch "Arial" ersetzt!
Läuft in allen Templates, auch Mobil!

Installation für alle Templates & Mobil

Das Skript und der CSS-Eintrag kann für die Templates (v1-4) in die "Kopf- oder Fußzeile", als PIugin in den "Obere Leiste / footer" oder fürs Xobor (v6) & Mobil in Eigenes Javascript, Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile kopiert werden!!
In Zeile 5 kann über die Schriftgröße die Größe der Uhr eingestellt werden!
In Zeile 4, 56, 68 + 7 kann die Farbe der Uhr bestimmt werden!

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
 
<style>
/* Uhr Hintergrung */
 .clock_date, .title_clock, #clock_div {
  background-color: #000000;
  font-size: 20px !important;
  font-family: "arial", cursive;
  color: #eee;
  box-sizing: border-box;
}
 
/* Titel*/
.title_clock {
  text-align: center;
  margin: 10px auto;
}
 
/* Uhr */
.clock_date {  
  display:inline-block;
  border: 1px groove #aaaaaa;
  border-radius: 10px;
  padding: 1rem 2rem;
  width: auto;
  margin:  auto;
}
 
/* Uhrzeit */
#clock_div {
  display: flex;
  justify-content: center;
}
 
/* Datum */
#date_div {
  margin-top:15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
/* Uhrzeit Ziffern */
.square_span {
  border-radius: 10px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin: 1rem 2px;
  width: 50px;
  padding: 7px;
  text-align: center;
  transition: 100ms all;
}
 
/* Wochentag */
.dof_date {
  border-radius: 20%;
  background-color: #444;
  padding: 0.5rem 0.8rem;
  margin-right:20px;
}
 
/* Animation Uhrzeit */
.anim_clock {
  animation: 500ms update ease 1;
}
 
@keyframes update {
  50% {
    background-color: #444;
    transform: scale(1.1);
  }
}
</style>
 

<br>
<center>
<div class="clock_date">
  <h1 class="title_clock">Uhr mit Datum</h1>
  <div id="clock_div"></div>
  <div id="date_div"></div>
</div>
</center>
<br>
 
<script>
let date = new Date();
let prevMin = date.getMinutes();
let prevHour = date.getHours();
 
updateTime();
setInterval(() => {
  updateTime();
}, 1000);
 
function updateTime() {
  const clock = document.getElementById("clock_div");
  date = new Date();
 
  let hour = formatNum(date.getHours());
  let min = formatNum(date.getMinutes());
  let sec = formatNum(date.getSeconds());
 
  clock.innerHTML = `<span id="hour1" class="square_span">${hour}</span>
  <span id="min1" class="square_span">${min}</span>
  <span id="sec1" class="square_span anim_clock">${sec}</span>`;
 
  let dayOfWeek = formatDOF(date.getDay());
  let day = date.getDate();
  let month = formatMonth(date.getMonth());
  let year = date.getFullYear();
 
  let dateDiv = document.getElementById("date_div");
  dateDiv.innerHTML = `<span class="dof_date">${dayOfWeek}</span>
  <span>${day}. ${month} ${year}</span>`;
 
  handleChanges(hour, min);
}
 
function formatNum(num) {
  if (num < 10) num = `0${num}`;
  return num;
}
 
function formatDOF(dayOfWeek) {
  const days = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
  return days[dayOfWeek];
}
 
function formatMonth(month) {
  const months = [
  "Januar",
  "Februar",
  "März",
  "April",
  "Mai",
  "Juni",
  "Juli",
  "August",
  "September",
  "Oktober",
  "November",
  "Dezember"];
 
  return months[month];
}
 
function handleChanges(h, m) {
  const timeoutTime = 500;
  const hourSpan = document.getElementById("hour1");
  const minSpan = document.getElementById("min1");
  if (h != prevHour) {
    prevHour = h;
    hourSpan.classList.toggle("anim_clock");
    setTimeout(() => {
      hourSpan.classList.toggle("anim_clock");
    }, timeoutTime);
  }
 
  if (m != prevMin) {
    prevMin = m;
    minSpan.classList.toggle("anim_clock");
    setTimeout(() => {
      minSpan.classList.toggle("anim_clock");
    }, timeoutTime);
  }
}
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Die Uhr in Funktion: Uhr mit Datum & Herzschlag

Weitere interessante Links:

  • Weltzeituhr - Verschiedene Zeiten anzeigen (4)
  • Das etwas andere Uhren-Skript
  • Countdown(up) - Timer - Zähler - Generatoren

Vielen Dank Daishi, dass wir Deine Idee und Vorschläge hier präsentieren dürfen!
Wolfgang

Daishi und Kipper-Spedition finden das Top!

Antworten

#3 | RE: Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

23.06.2023 21:11 (zuletzt bearbeitet: 23.06.2023 21:15)

Uhr in der Portalseite eingebaut.
--> gugge hier <--

60 Herzschläge in der Minute hat ein Transportunternehmer nur von Samstag 12 Uhr bis Montag 4 Uhr, ansonsten ist der bei 120...

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang und Daishi finden das Top!

Antworten

#4 | RE: Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

24.06.2023 22:48

Ich alter Nörgelsack bin es wieder...
Die Uhr habe ich heute nochmal angepasst - man kann da schön spielen.
Aber nun: auf der mobilen Seite sieht es nicht schön aus. Die Umrandungen der Uhrzeit Ziffern sind zu schmal.
Kann ich den Skript einfach ins CSS mobile Ansicht einfügen und dann verändern?

Grüße aus Radeberg
Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#5 | RE: Uhr mit Datum & Herzschlag - Formatiert fürs Forum datum

11.07.2023 08:23 (zuletzt bearbeitet: 11.07.2023 08:59)

Problem gelöst! Jetzt sieht es in der mobilen Ansicht auch gut aus.

/* Uhrzeit Ziffern */
.square_span {
border-radius: 10px;
border-bottom: 2px solid #658ba8;
border-top: 1px solid #658ba8;
margin: 0,5rem 2px;
width: 35px;
padding: 7px; vorher 10px
text-align: center;
transition: 100ms all;
}

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Daishi, 844er und Wolfgang finden das Top!

Antworten

#6 | Große Uhr mit Datum und super Animationen! datum

10.01.2025 12:44 (zuletzt bearbeitet: 12.01.2025 23:03)

Wolfgang

Administrator

Informationen anzeigen

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

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

Große Uhr mit Datum und super Animationen!

Hallo ArndtWollte hier die super Uhr präsentieren, die Du auf "Codepen" gefunden hast!

Das Skript und die Uhr selbst, sind zwar riesig, aber genial und etwas ganz besonderes!
In einem animierten Rondel wird die Uhrzeit und das komplette Datum angezeigt!
Zusätzlich kann die Landessprache über eine passende Flagge ausgewählt werden (z.Z. nur im FF)!
Ein Klick auf die Flagge oder das Landeskennzeichen in der Mitte der Uhr, ändert den Monat und den Wochentag in die gewählte Landessprache!
Das Skript läuft nicht in allen Browsern gleich gut!

Damit die Super-Uhr im Forum gut dargestellt wird, gut lesbar ist und in allen Browsern funktioniert, auch Mobil (!), habe ich das Skript angepasst!

"100 Year Clock Wheel" auf Codepen von Chris Bolson:

https://codepen.io/cbolson/pen/azoVvZm

Das 100jährige Uhren Rad

Was habe ich gemacht?

Kleine Format Korrekturen durchgeführt!
Weil die Uhr sehr groß ist, wird sie nach einem Mausklick auf eine beliebige Grafik, im Modal-Modus angezeigt!
Mit einem weiteren Klick auf die Auslösegrafik geht es wieder zurück!
Da die Flaggen für die Landesauswahl z.Z. nur im FireFox funktionieren, wurde die Unicodezeichen gegen 2 Buchstaben der Landessprache ausgetauscht!
Mobil wird die Überschrift ausgeblendet und die Uhr so hingerückt, dass das Uhrenfenster an den linken Rand geschoben wird!
Die Auslösegrafik und das Skript können beliebig in "Kopf & Fußzeile", im "Plugin" oder in "Eigene Seiten" platziert werden.

Die Super-Uhr hier im Forum!

Die große Jahrhundert-Uhr

Die Auslösegrafik und das Skript können beliebig in "Kopf & Fußzeile", im "Plugin" oder in "Eigene Seiten" platziert werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
 
<style>
.clickClock img {
  width:100px; 
  border-radius: 50%; 
  margin: 30px; 
  padding:5px; 
  position: relative;
  cursor:pointer;
  z-index: 99999; 
}
.clockStart1 {
  display: block !important;
  top: 100px;
}
.clockStart2 {
  position: fixed !important; 
  top:0px;
}
.clockStart3 {
  max-width:330px;
  position: fixed !important;
  background-color: #ffffff ;
  left:0;
  right:0; 
  top:50px;
  margin:0 auto !important;
  text-align: center !important;
  z-index: 99999; 
}
 
.backClock {
--clock-size: 800px;
--FarbeZeitFenster: #204a6b;
 
  display:none;
  position: fixed; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.9);
  z-index: 99998; 
}
.clockTitle {
  display:inline-block; 
  background: #dddddd;
  font: bold 20px Arial; 
  color: #383838;
  border-radius:10px; 
  margin: 10px;
  padding:5px 20px;  
  box-shadow: 0px 0 12px rgba(110,110, 110, 0.7);
}
.clockModal {
 box-shadow: 0px 0 12px rgba(210, 210, 210, 0.7);
  position: fixed;
  inset: 0;
  margin: auto;
  width: var(--clock-size);
  height: var(--clock-size);
  aspect-ratio: 1;
  place-content: center;
  background: var(--FarbeZeitFenster);
  border-radius: 50%;
  z-index: 9999;
}
 
@media (width < 800px) {
  .clockModal {
    left: 0;
    right: auto;
    translate: calc((50% - 2rem) * -1) 0;
  }
}
/* semi transparent mask to hide not active time data*/
.clockModal::before {
  content: "";
  position: absolute;
  inset: 1px;
  margin: auto;
  background-color: rgba(0 0 10 / 0.7);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 48%,
    50% 48%,
    50% 52%,
    100% 52%,
    100% 100%,
    0 100%
  );
  border-radius: 50%;
  z-index: 20;
}
.clockModal > div {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--clock-d);
  height: var(--clock-d);
  font-family:Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  aspect-ratio: 1;
  isolation: isolate;
  aspect-ratio: 1;
  border-radius: 50%;
}
 
/* years */
.clockModal > div:nth-of-type(1) {
 /*  --clock-d: calc(var(--clock-size) - 20px); */
  --clock-d: calc(var(--clock-size) - 2.5%);
}
/* seconds */
.clockModal > div:nth-of-type(2) {
 /*  --clock-d: calc(var(--clock-size) - 130px); */
  --clock-d: calc(var(--clock-size) - 16%);
}
/* minutes */
.clockModal > div:nth-child(3) {
 /*  --clock-d: calc(var(--clock-size) - 195px); */
  --clock-d: calc(var(--clock-size) - 24%); 
}
 
/* hours */
.clockModal > div:nth-child(4) {
  /* --clock-d: calc(var(--clock-size) - 260px); */
  --clock-d: calc(var(--clock-size) - 32%);
}
/* day numbers */
.clockModal > div:nth-child(5) {
  /* --clock-d: calc(var(--clock-size) - 350px); */
  --clock-d: calc(var(--clock-size) - 44%);
}
/* month names  */
.clockModal > div:nth-child(6) {
  /* --clock-d: calc(var(--clock-size) - 470px);*/
  --clock-d: calc(var(--clock-size) - 55%);
}
/* day names*/
.clockModal > div:nth-child(7) {
 /*  --clock-d: calc(var(--clock-size) - 600px);*/
  --clock-d: calc(var(--clock-size) - 75%);
}
 
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: 300ms linear;
}
.clock-face > * {
  position: absolute;
  transform-origin: center;
  white-space: nowrap;
  color: white;
  opacity: 0.75;
 
  &.active {
    opacity: 1;
  }
}
 
.clockModal > .current-lang-display {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 100;
  display: grid;
  place-content: center;
  background-color: var(--FarbeZeitFenster);
  border: 1px solid rgba(255 255 255 / 0.25);
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: 300ms ease-in-out;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  outline: none;
  &:focus-visible,
  &:hover {
    background-color: white;
    color: #000000;
  }
}
/* time seperators */
.current-lang-display::before,
.current-lang-display::after {
  content: ": ";
  color: white;
  position: absolute;
  z-index: 199;
  top: 50%;
  right: 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  translate: 283px -10px;
}
.current-lang-display::after {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  translate: 250px -10px;
}
 
/* Dialog styles */
dialog {
  width: min(calc(100% - 2rem), 380px);
  padding: 1rem;
  margin:auto;
  border: none;
  border-radius: 999px;
  background: rgba(50 50 50 / 0.5);
  text-align: center;
  aspect-ratio: 1;
  overflow: visible;
 
  @starting-style {
    opacity: 0;
    scale: 0;
  }
  transition: opacity 500ms ease-in,
    scale 500ms cubic-bezier(0.28, -0.55, 0.27, 1.55);
}
 
/* Backdrop styling */
dialog[open]::backdrop {
  background-color: rgba(from black r g b / 0.5);
  backdrop-filter: blur(3px);
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
  transition: opacity 1000ms ease-in; /* this doesn't appear to be working */
}
 
dialog .btn-dialog-close {
  position: absolute;
  top: 0rem;
  right: 25%;
  aspect-ratio: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color:  #444444;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  transition: rotate 300ms ease-in-out;
  z-index: 11;
  &:focus-visible,
  &:hover {
    rotate: 90deg;
  }
}
 
.language-options {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.language-options > label {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: 300ms ease-in-out;
  display: grid;
  place-content: center;
  transform-origin: center;
 
  &.active {
    color: white;
    background: var(--FarbeZeitFenster);
  }
 
  &:focus-visible,
  &:hover {
    scale: 1.1;
    z-index: 2;
  }
}
.language-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: white;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  @starting-style {
    opacity: 0;
  }
  transition: opacity 300ms ease-in-out;
}
.flag-icon {
  color: #eeeeee;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  display: grid;
  place-content: center;
}
.language-options input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
</style>
 

<div class="clockTitle">Uhr mit Auswahl der Sprache!</div>
 
<!-- Auslösegrafik -->
<div class="clickClock"><img src="//files.homepagemodules.de/b104774/a_791_6d017c7f.png" title="Das 100jährige Uhren Rad"></div>
<div style="font: bold 12px Arial; background:#eeeeee; color: #383838; padding: 3px 20px; margin: -10px 5px 5px 20px; display: inline-block; border-radius:5px;">Bitte anklicken!</div>
 
<div class="backClock">
  <div class="clockModal">
    <div>
      <div data-clock="years" data-numbers="101" class="clock-face"></div>
   </div>
   <div>
     <div data-clock="seconds" data-numbers="60" class="clock-face"></div>
   </div>
   <div>
     <div data-clock="minutes" data-numbers="60" class="clock-face"></div>
   </div>
   <div>
     <div data-clock="hours" data-numbers="24" class="clock-face"></div>
   </div>
   <div>
     <div data-clock="days" data-numbers="31" class="clock-face"></div>
   </div>
   <div>
     <div data-clock="months" data-numbers="12" class="clock-face"></div>
   </div>
   <div>
     <div data-clock="day-names" data-numbers="7" class="clock-face"></div>
   </div>
   <button type="button" id="current-lang" class="current-lang-display">DE</button>
</div>
 
<dialog id="language-dialog">
  <button type="button" id="btn-dialog-close" class="btn-dialog-close " autofocus="autofocus">&#10005;</button>
  <div id="language-options" class="language-options"></div>
</dialog>
 
</div>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
  $('.clickClock').on('click', function(e){
  $('.backClock').toggleClass('clockStart1');
  $('img', this).toggleClass('clockStart2');
 
  if (window.matchMedia('(max-width: 800px)').matches) {
      $('.clockTitle, .clickClock').hide();
  }
  if ($(".backClock").hasClass("clockStart1")) {
    $('img', this).attr('title','Zurück zum Beitrag');
    $('.clockTitle').toggleClass('clockStart3');
 
    clockStart();
  } else {
    location.reload();
    e.preventDefault();
    window.history.back();
    window.location.hash="";
  };
 
});
});
</script>
 
<script>
function clockStart(){
console.clear();
 
// array of JavaScript supported languages for local dates (not definitive)
const languageFlags = [
  { code: 'ar-SA', name: 'Arabic (Saudi Arabia)', flag: 'SA' },
  { code: 'cs-CZ', name: 'Czech (Czech Republic)', flag: 'CZ' },
  { code: 'da-DK', name: 'Danish (Denmark)', flag: 'DK' },
  { code: 'de-DE', name: 'German (Germany)', flag: 'DE' },
  { code: 'el-GR', name: 'Greek (Greece)', flag: 'GR' },
  { code: 'en-US', name: 'English (US)', flag: 'US' },
  { code: 'en-GB', name: 'English (UK)', flag: 'GB' },
  { code: 'es-ES', name: 'Spanish (Spain)', flag: 'ES' },
  { code: 'es-MX', name: 'Spanish (Mexico)', flag: 'MX' },
  { code: 'fi-FI', name: 'Finnish (Finland)', flag: 'FI' },
  { code: 'fr-CA', name: 'French (Canada)', flag: 'CA' },
  { code: 'fr-FR', name: 'French (France)', flag: 'FR' },
  { code: 'he-IL', name: 'Hebrew (Israel)', flag: 'IL' },
  { code: 'hi-IN', name: 'Hindi (India)', flag: 'IN' },
  { code: 'hu-HU', name: 'Hungarian (Hungary)', flag: 'HU' },
  { code: 'it-IT', name: 'Italian (Italy)', flag: 'IT' },
  { code: 'ja-JP', name: 'Japanese (Japan)', flag: 'JP' },
  { code: 'ko-KR', name: 'Korean (South Korea)', flag: 'KR' },
  { code: 'nl-NL', name: 'Dutch (Netherlands)', flag: 'NL' },
  { code: 'no-NO', name: 'Norwegian (Norway)', flag: 'NO' },
  { code: 'pl-PL', name: 'Polish (Poland)', flag: 'PL' },
  { code: 'pt-BR', name: 'Portuguese (Brazil)', flag: 'BR' },
  { code: 'pt-PT', name: 'Portuguese (Portugal)', flag: 'PT' },
  { code: 'ro-RO', name: 'Romanian (Romania)', flag: 'RO' },
  { code: 'ru-RU', name: 'Russian (Russia)', flag: 'RU' },
  { code: 'sv-SE', name: 'Swedish (Sweden)', flag: 'SE' },
  { code: 'th-TH', name: 'Thai (Thailand)', flag: 'TH' },
  { code: 'tr-TR', name: 'Turkish (Turkey)', flag: 'TR' },
  { code: 'vi-VN', name: 'Vietnamese (Vietnam)', flag: 'VN' },
  { code: 'zh-CN', name: 'Chinese (Simplified, China)', flag: 'CN' },
];
 
const RADIUS = 140; // Radius of the circle for flag buttons
 
// map for default regions based on languageFlags
const defaultRegions = languageFlags.reduce((map, lang) => {
  const baseLang = lang.code.split('-')[0]; // Extract the base language (e.g., 'en' from 'en-US')
  if (!map[baseLang]) {
    map[baseLang] = lang.code;
  }
  return map;
}, {});
 
function getLocale() {
  // cet the primary language from navigator.languages or fallback to navigator.language
  let language = (navigator.languages && navigator.languages[0]) || navigator.language || 'en-US';
 
  // not all browsers return the complete lang code so we have to add it from the mapped values
  if (language.length === 2) {
    language = defaultRegions[language] || `${language}-${language.toUpperCase()}`;
  }
  return language;
}
 
let locale = getLocale();
 
const currentLangDisplay = document.getElementById('current-lang');
const languageDialog = document.getElementById('language-dialog');
const languageOptionsContainer = document.getElementById('language-options');
const closeButton = document.getElementById('btn-dialog-close');
 

function drawClockFaces() {
    const clockFaces = document.querySelectorAll('.clock-face');
 
    // Get the current date details
    const currentDate = new Date();
    const currentDay = currentDate.getDate();
    const currentMonth = currentDate.getMonth();
    const currentYear = currentDate.getFullYear();
    const currentWeekday = currentDate.getDay();
    const currentHours = currentDate.getHours();
    const currentMinutes = currentDate.getMinutes();
    const currentSeconds = currentDate.getSeconds();
    const totalDaysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
 
    const weekdayNames = Array.from({ length: 7 }, (_, i) =>
        new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(new Date(2021, 0, i + 3))
    );
    const monthNames = Array.from({ length: 12 }, (_, i) =>
        new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2021, i))
    );
 
    clockFaces.forEach(clockFace => {
        clockFace.innerHTML = '';
 
        const clockType = clockFace.getAttribute('data-clock');
        const numbers = parseInt(clockFace.getAttribute('data-numbers'), 10);
        const RADIUS = (clockFace.offsetWidth / 2) - 20; // Adjusted for padding
        const center = clockFace.offsetWidth / 2;
 
        let valueSet;
        let currentValue;
 
        // define the value set and current value for each clock type
        switch (clockType) {
            case 'seconds':
                valueSet = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
                currentValue = String(currentSeconds).padStart(2, '0');
                break;
            case 'minutes':
                valueSet = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
                currentValue = String(currentMinutes).padStart(2, '0');
                break;
            case 'hours':
                valueSet = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
                currentValue = String(currentHours).padStart(2, '0');
                break;
            case 'days':
                valueSet = Array.from({ length: totalDaysInMonth }, (_, i) => i + 1);
                currentValue = currentDay;
                break;
            case 'months':
                valueSet = monthNames;
                currentValue = currentMonth;
                break;
            case 'years':
                valueSet = Array.from({ length: 101 }, (_, i) => 2000 + i);
                currentValue = currentYear;
                break;
            case 'day-names':
                valueSet = weekdayNames;
                currentValue = currentWeekday;
                break;
            default:
                return;
        }
 
        // create and position elements on the clock face
        valueSet.forEach((value, i) => {
            const angle = (i * (360 / numbers));
            const x = center + RADIUS * Math.cos((angle * Math.PI) / 180);
            const y = center + RADIUS * Math.sin((angle * Math.PI) / 180);
 
            const element = document.createElement('span');
            element.classList.add('number');
            element.textContent = value;
            element.style.left = `${x}px`;
            element.style.top = `${y}px`;
            element.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
 
            clockFace.appendChild(element);
        });
 
        // rotation to align the current value to the 3 o'clock position
        const currentIndex = valueSet.indexOf(
            typeof valueSet[0] === 'string' ? String(currentValue) : currentValue
        );
        const rotationAngle = -((currentIndex / numbers) * 360);
        clockFace.style.transform = `rotate(${rotationAngle}deg)`;
    });
}
 

 
function rotateClockFaces() {
    const clockFaces = document.querySelectorAll('.clock-face');
 
    const lastAngles = {};
    function updateRotations() {
        const now = new Date();
        const currentSecond = now.getSeconds();
        const currentMinute = now.getMinutes();
        const currentHour = now.getHours();
        const currentDay = now.getDate();
        const currentMonth = now.getMonth(); // 0-indexed
        const currentYear = now.getFullYear();
        const currentWeekday = now.getDay(); // 0 = Sunday, 6 = Saturday
 
        clockFaces.forEach(clockFace => {
            const clockType = clockFace.getAttribute('data-clock');
            const totalNumbers = parseInt(clockFace.getAttribute('data-numbers'), 10);
 
            let currentValue;
            switch (clockType) {
                case 'seconds':
                    currentValue = currentSecond;
                    break;
                case 'minutes':
                    currentValue = currentMinute;
                    break;
                case 'hours':
                    currentValue = currentHour;
                    break;
                case 'days':
                    currentValue = currentDay - 1;
                    break;
                case 'months':
                    currentValue = currentMonth;
                    break;
                case 'years':
                    currentValue = currentYear - 2000;
                    break;
                case 'day-names':
                    currentValue = currentWeekday; // 0 = Sunday
                    break;
                default:
                    return;
            }
 
            const targetAngle = (360 / totalNumbers) * currentValue;
 
            // Retrieve the last angle for this clock face
            const clockId = clockFace.id || clockType;
            const lastAngle = lastAngles[clockId] || 0;
 
            // Adjust for shortest rotation direction
            const delta = targetAngle - lastAngle;
            const shortestDelta = ((delta + 540) % 360) - 180; // Normalize between -180 and 180
 
            // update the clock face rotation
            const newAngle = lastAngle + shortestDelta;
            clockFace.style.transform = `rotate(${newAngle * -1}deg)`;
 
            // store the new angle
            lastAngles[clockId] = newAngle;
 
            // "active" class
            const numbers = clockFace.querySelectorAll('.number');
            numbers.forEach((number, index) => {
                if (index === currentValue) {
                    number.classList.add('active');
                } else {
                    number.classList.remove('active');
                }
            });
        });
        // request next frame
        requestAnimationFrame(updateRotations);
    }
 
    updateRotations();
}
 

// create language options
function createLanguageOptions() {
  const centerX = languageOptionsContainer.offsetWidth / 2;
  const centerY = languageOptionsContainer.offsetHeight / 2;
 
  languageFlags.forEach((lang, index, arr) => {
    const angle = (index / arr.length) * 2 * Math.PI;
    const x = centerX + RADIUS * Math.cos(angle);
    const y = centerY + RADIUS * Math.sin(angle);
 
    const radioWrapper = document.createElement('label');
    radioWrapper.title = lang.name;
    radioWrapper.style.left = `${x}px`;
    radioWrapper.style.top = `${y}px`;
 
    const radioInput = document.createElement('input');
    radioInput.type = 'radio';
    radioInput.name = 'language';
    radioInput.value = lang.code;
 
    if (lang.code === locale) {
      radioInput.checked = true;
      radioWrapper.classList.add('active');
    }
 
    const flag = document.createElement('span');
    flag.classList.add('flag-icon');
    flag.innerText = lang.flag;
 
    radioWrapper.appendChild(radioInput);
    radioWrapper.appendChild(flag);
    languageOptionsContainer.appendChild(radioWrapper);
 
    // Handle hover: display language name in the center of the parent container
    radioWrapper.addEventListener('mouseover', () => showTitle(lang.name, radioWrapper));
    radioWrapper.addEventListener('mouseleave', () => hideTitle());
  
    radioInput.addEventListener('change', () => {
      locale = radioInput.value;
      setCurrentLangDisplay(lang);
      drawClockFaces();
      document.querySelector('label.active')?.classList.remove('active');
      radioWrapper.classList.add('active');
      closeDialog();
    });
  });
}
 
// Show title (language name) in the center
let titleDisplay = null; // Declare titleDisplay globally for reuse
function showTitle(languageName) {
  if (titleDisplay) {
    titleDisplay.remove();
  }
  titleDisplay = document.createElement('div');
    titleDisplay.classList.add('language-title');
    titleDisplay.textContent = languageName;  // Update the title with the language name
    languageOptionsContainer.appendChild(titleDisplay);
 
  
}
function hideTitle() {
  if (titleDisplay) {
    titleDisplay.textContent = '';
  }
}
// Set current language display button flag and title
function setCurrentLangDisplay(lang) {
  currentLangDisplay.textContent = lang.flag;
  currentLangDisplay.title = lang.name;
  showTitle(lang.name)
}
function openDialog() {
  languageDialog.showModal();
  createLanguageOptions();
  addDialogCloseListener();
}
function closeDialog() {
  languageDialog.close();
  removeLanguageOptions();
  removeDialogCloseListener();
}
function removeLanguageOptions() {
  languageOptionsContainer.innerHTML = '';
}
function addDialogCloseListener() {
  languageDialog.addEventListener('click', closeDialogOnClickOutside);
}
function removeDialogCloseListener() {
  languageDialog.removeEventListener('click', closeDialogOnClickOutside);
}
function closeDialogOnClickOutside(e) {
  if (e.target === languageDialog) {
    closeDialog();
  }
}
 
// dialog close button event
closeButton.addEventListener('click', closeDialog);
 
// current language display - open dialog with lang buttons
currentLangDisplay.addEventListener('click', openDialog);
//console.log(locale);
 

// initalize
drawClockFaces();
rotateClockFaces();
setCurrentLangDisplay(languageFlags.find(lang => lang.code === locale));
 
};
</script>
 

Schließen

Interessante Links aus dem Forum:

  • Weltzeituhr - Verschiedene Zeiten anzeigen!
  • Das etwas andere Uhren-Skript
  • Countdown(up)-Zähler!
  • Hintergrundbilder wechseln automatisch nach Zeit!
  • Hintergrundbilder automatisch nach Tageszeit einstellen!

Bis dann und viel Spaß beim Ausprobieren und Testen!
Wolfgang

Kipper-Spedition findet das Top!

Antworten

Sicherung der Forum-Inhalte � � Xobor Plugins erstellen, versenden und bearbeiten!

�hnliche Themen

Antworten

Letzter Beitrag

Rotierende Animation von Bildern - Würfel Animation
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.12.2024 15:19
von

Wolfgang • Zugriffe: 418

Für die Iconbar: Wählbares + aktuelles Datum in Beiträgen einfügen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

06.09.2024 21:08
von

Wolfgang • Zugriffe: 441

Profil: Last Online & Registrierungs-Datum anzeigen lassen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von ms_fanie

09.05.2024 15:17
von

ms_fanie • Zugriffe: 1968

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: 796
YouTube-Videogalerie für das eigene Forum installieren!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 1 08.12.2020 23:42
Wolfgang • Zugriffe: 1762
Super Kategorienauswahl für das Smiley-Menü - Version 1-3
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 9 06.10.2023 19:50
bienchen • Zugriffe: 3763
Große Farbauswahl / Super Color-Picker / Auch minimiert! - Teil 1-6
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 23 28.08.2022 12:59
Wolfgang • Zugriffe: 13785
Emsisoft Anti-Malware mit Dual-Scanner - Super Programm!
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 0 18.04.2014 21:20
Wolfgang • Zugriffe: 4253

@ Taggen - Super Funktion, um Mitglieder direkt zu informieren!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

10.07.2019 23:11
von

Wolfgang • Zugriffe: 2094

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: 45 €

21%

Forum - Uhr mit Datum und super Animationen!

Uhr mit Datum & Herzschlag - Formatiert fürs Forum

Große Uhr mit Datum und super Animationen!