diff --git a/registration-system/index.php b/registration-system/index.php
index 9d71858f686ffdd5d4583fa81434e6bf5a09597e..cb7bcc1ef1558fa77969aa59e106c003fbb4bbba 100644
--- a/registration-system/index.php
+++ b/registration-system/index.php
@@ -203,6 +203,9 @@ function index_check_field($index, $check, &$datarr, &$errarr, $errmess){
function index_show_formular($fid, $bid = NULL, $bachelor = NULL){
global $index_db, $config_studitypen, $config_essen, $config_reisearten, $invalidCharsRegEx;
+ if (!isset($_GET['noscript']))
+ echo '<noscript>';
+
$possible_dates = comm_get_possible_dates($fid);
if(is_null($bachelor))
@@ -241,7 +244,13 @@ function index_show_formular($fid, $bid = NULL, $bachelor = NULL){
<button type="submit" name="submit" id="submit" value="submit">Anmelden!</button>
<div class="spacer"></div>
</form>
- </div>';
+ </div>';
+ if (!isset($_GET['noscript']))
+ {
+ echo '</noscript>';
+ echo '<div id="storybox"></div>';
+ echo '<div style="text-align:center;font-weight:bold"><a style="float:none;margin:0 auto;" href="'.$_SERVER['REQUEST_URI'].'&noscript">Seite funktioniert nicht?</a></div>';
+ }
}
/**
diff --git a/registration-system/other/drawing.svg b/registration-system/other/story_begin.svg
similarity index 100%
rename from registration-system/other/drawing.svg
rename to registration-system/other/story_begin.svg
diff --git a/registration-system/other/story_travelBegin.svg b/registration-system/other/story_travelBegin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c85df544f0dc7d6e07c8cd340054f56354e164f8
Binary files /dev/null and b/registration-system/other/story_travelBegin.svg differ
diff --git a/registration-system/view/default_index.php b/registration-system/view/default_index.php
index 89cf12219ebf16c043ca3eb17277b15686e1dd36..05f13a3f03fb01c92e438f90d2ee53549116ded7 100644
--- a/registration-system/view/default_index.php
+++ b/registration-system/view/default_index.php
@@ -7,7 +7,9 @@
<link rel="stylesheet" href="view/style.css" />
<script type="text/javascript" src="view/js/jquery-1.11.1.min.js"></script>
+ <script type="text/javascript" src="view/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="view/js/soft_protect.js"></script>
+ <script type="text/javascript" src="view/js/story.js"></script>
</head>
<body>
<div id="headerbox">
diff --git a/registration-system/view/graphics/story/begin.png b/registration-system/view/graphics/story/begin.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f211cf80b78f40d268a2fa5f66ab9cfa2f032f0
Binary files /dev/null and b/registration-system/view/graphics/story/begin.png differ
diff --git a/registration-system/view/graphics/story/bell.png b/registration-system/view/graphics/story/bell.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d9ccab8e449c0e60630ff27697786ee7e39bfe8
Binary files /dev/null and b/registration-system/view/graphics/story/bell.png differ
diff --git a/registration-system/view/js/story.js b/registration-system/view/js/story.js
new file mode 100644
index 0000000000000000000000000000000000000000..df7f6f3220392bf66b66a7208e318cbd883577e5
--- /dev/null
+++ b/registration-system/view/js/story.js
@@ -0,0 +1,96 @@
+var debug = true;
+//var debug = false;
+
+var story;
+var form_variables = {};
+
+function storyImage(filename)
+{
+ return $('<img src="view/graphics/story/' + filename + '" alt="" />');
+}
+function storyImageDiv(filename)
+{
+ return $('<div style="width:900px; height:500px; background: url(view/graphics/story/'+filename+');"></div>');
+ addFormText(bell, "eMail", "mehl", 150, 215);
+}
+
+function addFormText(parentNode, label, fieldName, x, y)
+{
+ var form_label = $('<div>'+label+':</div>');
+ var form = $('<input name="'+fieldName+'"/>');
+ form_label.css({position:'absolute', top:y+'px',left:x+'px'});
+ form.css({position:'absolute', top:(y+20)+'px',left:x+'px'});
+ parentNode.append(form_label);
+ parentNode.append(form);
+}
+
+function Story(_storybox)
+{
+ this.storybox = _storybox;
+ this.state = 0;
+
+ this.basicData = null;
+ this.travelStart = null;
+}
+Story.prototype.initTravelStart = function()
+{
+ this.travelStart = storyImageDiv('travelStart.png');
+ this.storybox.append(this.travelStart);
+}
+Story.prototype.initBasicData = function()
+{
+ this.basicData = storyImageDiv('begin.png');
+ this.storybox.append(this.basicData);
+ var bell = storyImageDiv('bell.png');
+ bell.css({position: 'relative', top: '20px', left: '20px', width: '419px', height: '438px'});
+ this.basicData.append(bell);
+ if (!debug)
+ bell.fadeOut(0);
+
+ addFormText(bell, "Vorname", "forname", 150, 60);
+ addFormText(bell, "Nachname", "name", 150, 140);
+ addFormText(bell, "Anzeigename", "anzeig", 150, 215);
+ addFormText(bell, "eMail", "mehl", 150, 290);
+ bell.append($('<div style="position:absolute;top:380px;left:120px">Bitte klingeln, wenn fertig.</div>'))
+
+ var btn_continue = $('<div style="width:60px;height:67px;position:absolute;top:48px;left:48px;cursor:pointer;" onclick="story.next();" />');
+ bell.append(btn_continue);
+ btn_continue.mouseenter(function(event) {
+ $(this).effect("highlight");
+ });
+
+ var orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
+ this.basicData.append(orig_bell);
+ if (!debug)
+ setTimeout(function() {
+ bell.fadeIn(1200);
+ orig_bell.effect("transfer", {to: bell}, 800);
+ }, 600);
+}
+Story.prototype.next = function()
+{
+ switch(this.state)
+ {
+ case 0:
+ this.initBasicData();
+ break;
+ case 1:
+ this.basicData.remove();
+ this.initTravelStart();
+ break;
+ case 2:
+ break;
+ case 3:
+ break;
+ }
+ this.state += 1;
+}
+Story.prototype.begin = function()
+{
+ this.next();
+}
+
+$(function() {
+ story = new Story($('#storybox'));
+ story.begin();
+});
diff --git a/registration-system/view/style.css b/registration-system/view/style.css
index 2634cf579273668291c7fa4ab3ccdf6cb86ed27f..822fa99d1e3c6ef86c744f82dd92f1cde5bd3b11 100644
--- a/registration-system/view/style.css
+++ b/registration-system/view/style.css
@@ -100,6 +100,12 @@ div.headerboxshade {
background-color: rgba(20,20,20,0.5);
}
+div#storybox {
+ position:relative;
+ margin: 0 auto;
+ width:900px;
+}
+
div#headerbox h2 {
padding-top: 10px;
margin-left: 60px;
@@ -108,6 +114,8 @@ div#headerbox h2 {
font-family: sans-serif;
}
+.ui-effects-transfer { border: 2px solid black; }
+
div#headerbox p {
color: white;
margin-top: 0px;