From 0540e04c77864186ce48193456634b897a11f5aa Mon Sep 17 00:00:00 2001
From: Jonas Kohl <git@jonaskohl.de>
Date: Fri, 6 Sep 2024 14:38:26 +0200
Subject: Add mobile version

---
 pages/about.php | 86 ++++++++++++++++++++++++++++++++++++++++++---------------
 pages/start.php |  7 +++++
 2 files changed, 71 insertions(+), 22 deletions(-)

(limited to 'pages')

diff --git a/pages/about.php b/pages/about.php
index 09d5771..5ddf3c5 100644
--- a/pages/about.php
+++ b/pages/about.php
@@ -1,5 +1,6 @@
 <?php $PAGE_TITLE = "Ueber"; ?>
 <?php include __DIR__ . "/../includes/template_head_start.php"; ?>
+<?php if (!$__mobile): ?>
 <style type="text/css">
 <!--
 textarea, input {
@@ -18,8 +19,9 @@ button {
     border-color: #53483d #0f0c0a #0f0c0a #53483d;
     padding: 4px;
 }
--->
+<?= "-->"; ?>
 </style>
+<?php endif; ?>
 <?php include __DIR__ . "/../includes/template_head_end.php"; ?>
 
 <h1>&Uuml;ber die Mystic House Corner</h1>
@@ -36,32 +38,72 @@ Mystic House Corner: Ein Projekt von Jan W. und Jonas K.
 
 <h2>Kontakt</h2>
 
-<form action="/cgi/contact.php" method="post" accept-charset="UTF-8">
-    <input name="utf8" type="hidden" value="&#x2713;">
-    <table>
-        <tr><th align="left">Ihre eMail-Adresse:</th></tr>
-        <tr><td><input type="text" name="email" size="40"></td></tr>
+<?php if ($__mobile): ?>
+    <form action="/cgi/contact.php" method="post" accept-charset="UTF-8">
+        <input name="utf8" type="hidden" value="&#x2713;">
+        
+        <div class="form-group">
+            <label for="i_email">Ihre eMail-Adresse:</label>
+            <input class="form-control" type="text" id="i_email" name="email" size="40">
+        </div>
 
-        <tr><th align="left">Ihr Name:</th></tr>
-        <tr><td><input type="text" name="name" size="40"></td></tr>
+        <div class="form-group">
+            <label for="i_name">Ihr Name:</label>
+            <input class="form-control" type="text" id="i_name" name="name" size="40">
+        </div>
 
-        <tr><th align="left">Betreff:</th></tr>
-        <tr><td><input type="text" name="subject" size="40"></td></tr>
+        <div class="form-group">
+            <label for="i_subject">Betreff:</label>
+            <input class="form-control" type="text" id="i_subject" name="subject" size="40">
+        </div>
 
-        <tr><th align="left">Ihre Nachricht:</th></tr>
-        <tr><td><textarea name="message" cols="40" rows="8"></textarea></td></tr>
+        <div class="form-group">
+            <label for="i_message">Ihre Nachricht:</label>
+            <textarea class="form-control" id="i_message" name="message" cols="40" rows="8"></textarea>
+        </div>
 
-        <tr><th align="left">CAPTCHA:</th></tr>
-        <tr><td>
-            <iframe src="/cgi/captcha.php" border="0" frameborder="0" width="256" height="64" name="captchafr"></iframe>
+        <div class="form-group">
+            <label for="i_captcha">CAPTCHA:</label>
             <br>
-            <small><a href="/cgi/captcha.php" target="captchafr">Neues Bild</a></small>
-            <br>
-            <input type="text" name="captcha" id="input-captcha" size="40">
-        </td></tr>
+            <div class="text-center">
+                <iframe src="/cgi/captcha.php" border="0" frameborder="0" width="256" height="64" name="captchafr"></iframe>
+            </div>
+            <div class="input-group">
+                <input type="text" name="captcha" id="i_captcha" size="40" class="form-control">
+                <a class="btn btn-default input-group-addon" href="/cgi/captcha.php" target="captchafr"><i class="glyphicon glyphicon-refresh"></i></a>
+            </div>
+        </div>
+
+        <button type="submit" class="btn btn-primary">Absenden</button>
+    </form>
+<?php else: ?>
+    <form action="/cgi/contact.php" method="post" accept-charset="UTF-8">
+        <input name="utf8" type="hidden" value="&#x2713;">
+        <table>
+            <tr><th align="left">Ihre eMail-Adresse:</th></tr>
+            <tr><td><input type="text" name="email" size="40"></td></tr>
+
+            <tr><th align="left">Ihr Name:</th></tr>
+            <tr><td><input type="text" name="name" size="40"></td></tr>
+
+            <tr><th align="left">Betreff:</th></tr>
+            <tr><td><input type="text" name="subject" size="40"></td></tr>
+
+            <tr><th align="left">Ihre Nachricht:</th></tr>
+            <tr><td><textarea name="message" cols="40" rows="8"></textarea></td></tr>
+
+            <tr><th align="left">CAPTCHA:</th></tr>
+            <tr><td>
+                <iframe src="/cgi/captcha.php" border="0" frameborder="0" width="256" height="64" name="captchafr"></iframe>
+                <br>
+                <small><a href="/cgi/captcha.php" target="captchafr">Neues Bild</a></small>
+                <br>
+                <input type="text" name="captcha" id="input-captcha" size="40">
+            </td></tr>
 
-        <tr><td><button type="submit">Absenden</button></td></tr>
-    </table>
-</form>
+            <tr><td><button type="submit">Absenden</button></td></tr>
+        </table>
+    </form>
+<?php endif; ?>
 
 <?php include __DIR__ . "/../includes/template_end.php"; ?>
diff --git a/pages/start.php b/pages/start.php
index bbfeed6..07dfd88 100644
--- a/pages/start.php
+++ b/pages/start.php
@@ -3,6 +3,12 @@
 
 <h1 align="center">Herzlich willkommen bei der <i>Mystic House Corner</i>!</h1>
 
+<?php if ($__mobile): ?>
+<div class="alert alert-warning">
+<i class="glyphicon glyphicon-warning-sign"></i>
+<b>Achtung:</b> Diese Seite befindet sich noch im Aufbau!
+</div>
+<?php else: ?>
 <center>
 <table bgcolor="olive" cellspacing="0" cellpadding="2"><tr><td>
 <table bgcolor="yellow" cellspacing="0" cellpadding="12"><tr><td>
@@ -14,5 +20,6 @@
 </td></tr></table>
 </td></tr></table>
 </center>
+<?php endif; ?>
 
 <?php include __DIR__ . "/../includes/template_end.php"; ?>
-- 
cgit v1.2.3