Baustelle - CommingSoon
Scripte > Attachment
CommingSoon - Webseitenbaustellen-Skript
Eine in "Diese Webseite wird bearbeitet!" befindliche Vorlage mit einem schönen Countdown-Timer und Anmeldeformular. Es kann für jede Website verwendet werden, um den baldigen Start anzukündigen. Es ist einfach anzupassen und mit den meisten Browsern kompatibel. Ausgestattet mit einem Countdown-Timer und einem Anmeldeformular sorgt diese Vorlage in Kürze für Aufsehen auf der bevorstehenden Website und bietet die Möglichkeit, frühzeitig Leads zu sammeln. Teile den Besuchern Deiner Website mit, wann die Website wieder online sein wird, und senden Benachrichtigungs-E-Mails an die enthusiastischsten Besucher.
Öffne die Datei "js/options.js" und stelle Datum, die Uhrzeit ind ggf. die Timezone für den Start Deiner Website ein.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Skript auf mehreren Seiten eingesetzt werden empfiehlt sich die Variante per
<?php include "...."; ?> , um Änderungen nur in einer Datei durchführen zu müssen, wobei dann die ausführende Datei die
Dateiendung .php aufweisen muss.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Diese Webseite wird bearbeitet!
Wir werden voraussichtlich wieder Live sein in:
0
Tage
0
Stunden
0
Minuten
0
Sekunden
(Die "Text speichern" -Button sind hier in der Demo inaktiv)
Code für den <HEAD> Bereich
<script src="wsX5Obj/Obj183_0/js/load.js"></script>
Code für den <BODY> Bereich
<!-- Subscriber-Code, ggf. auf geschützter Seite einfügen -->
<form action="wsX5Obj/Obj183_0/subscribe_view.php" target="_blank">
<input type="submit" value="Subscriber-Liste">
</form>
<!-- Countdown-Code -->
<?php include "wsX5Obj/Obj183_0/include.html"; ?>
alternative Einbindung:
<div class="Obj183_countdown-container">
<h1>Diese Webseite wird bearbeitet!</h1><h4>Wir werden voraussichtlich wieder Live sein in:</h4><div class="Obj183_clock-container">
<div class="Obj183_clock-days-container">
<div class="Obj183_bg-layer">
<canvas class="Obj183_days-canvas" width="147" height="147"></canvas><div class="Obj183_text">
<p class="Obj183_value">0</p><p class="Obj183_days-text">Tage</p>
</div>
</div>
</div><div class="Obj183_clock-hours-container">
<div class="Obj183_bg-layer">
<canvas class="Obj183_hours-canvas" width="147" height="147"></canvas><div class="Obj183_text">
<p class="Obj183_value">0</p><p class="Obj183_hours-text">Stunden</p>
</div>
</div>
</div><div class="Obj183_clock-minutes-container">
<div class="Obj183_bg-layer">
<canvas class="Obj183_minutes-canvas" width="147" height="147"></canvas><div class="Obj183_text">
<p class="Obj183_value">0</p><p class="Obj183_minutes-text">Minuten</p>
</div>
</div>
</div>
<div class="Obj183_clock-seconds-container">
<div class="Obj183_bg-layer">
<canvas class="Obj183_seconds-canvas" width="147" height="147"></canvas><div class="Obj183_text">
<p class="Obj183_value">0</p><p class="Obj183_seconds-text">Sekunden</p>
</div></div>
</div>
</div><div class="Obj183_subscribe-container"><form class="Obj183_subscribe-form">
<p class="Obj183_title">Gebe Deine E-Mail-Adresse ein, um ein Live-Update zu erhalten</p><p>
<input type="text" name="email_address" class="Obj183_input" placeholder="E-Mail-Adresse" />
<a href="javascript: void(0);" class="Obj183_CountdownSubscribeSelector Obj183_btn">Abonnieren</a>
</p><p class="Obj183_error-container"></p>
</form>
</div>
</div>
Code Datei "js/options.js"
var Obj183_CountdownDefaultOptions = ssCountdownDefaultOptions || {};
Obj183_CountdownDefaultOptions.secondsColor = "#11c8ea";
Obj183_CountdownDefaultOptions.minutesColor = "#ff5153";
Obj183_CountdownDefaultOptions.hoursColor = "#23d0a2";
Obj183_CountdownDefaultOptions.daysColor = "#f9b401";
/*
* WICHTIGE NOTIZEN:
* Die folgenden Parameter müssen im richtigen Format vorliegen, einschließlich ihrer Länge.
*/
/*Datum Format: YYYY-MM-DD*/
Obj183_CountdownDefaultOptions.date = "2019-11-14";
/*Uhrzeit Format: hh:mm:ss*/
Obj183_CountdownDefaultOptions.time = "15:00:00";
/*Timezone Format: GMT+HH:MM
* Beispiele:
* GMT+00:00
* GMT+08:00
* GMT-08:30
*/
Obj183_CountdownDefaultOptions.timezone = "GMT+01:00";
Code Datei "subscribe.php"
<?php
if(isset($_POST['email']) && !empty($_POST['email'])) {
$handle = fopen("subscribe_list.txt", "a"); // Dateiname ggf.anpassen, dann auch in "subscribe_view.php"
fwrite($handle, PHP_EOL . $_POST['email']);
fclose($handle);
}
?>
» nach oben «