diff --git a/data/uploads/news_01.json b/data/uploads/news_01.json index 7061226f78abcaba8553ab93c5f4a72d5106c3fd..f6aaae5071d6d3cee022aa14b79a841442306ade 100644 --- a/data/uploads/news_01.json +++ b/data/uploads/news_01.json @@ -2,7 +2,7 @@ "news":[ { "title": "SpaceX's Next Starship Prototype Taking Shape ", - "imgurl": "../img/astronaut.jpg", + "imgurl": "", "content": "Construction of the test craft is proceeding apace, as two new photos posted on Twitter today (Sept. 17) by company founder and CEO Elon Musk reveal." }, { diff --git a/data/uploads/news_02.json b/data/uploads/news_02.json index 4814fef86defd460ffdedf5d98ca3fc6f56f2a32..cbd2690f569b1913a71b790861ea547be9dd1edc 100644 --- a/data/uploads/news_02.json +++ b/data/uploads/news_02.json @@ -2,17 +2,17 @@ "news":[ { "title":"NASA Events", - "imgurl":"", + "imgurl":"../img/astronaut.jpg", "content":"Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV" }, { "title":"Expedition 48", - "imgurl":"../img/astronaut.jpg", + "imgurl":"../img/nasa_launch.jpg", "content":"NASA's Record-braking Astronaut Crewmates Safely Return to Earth" }, { "title":"NASA to Launch First U.S. Asteroid Sample Return Mission", - "imgurl":"../img/nasa_launch.jpg", + "imgurl":"../img/nasa_news_1.jpg", "content":"Launching on Sept. 8, 2016 OSIRIS-REx will travel to a near-Earth asteroid called Bennu and bring a small sample back for study." } ] diff --git a/index.html b/index.html index 1a37ffb8275bbb344acac6f05b83e8dd2e9fdea8..c53723d61df1426c116539339e2cafe0207f3e63 100644 --- a/index.html +++ b/index.html @@ -94,6 +94,8 @@ <article class="content-small"> <div> <div class="article-content-container"> + <div class="article-background"></div> + <a class="article-link" href="#"></a> <img class="article-image" src="img/astronaut.jpg" alt="" /> @@ -108,6 +110,8 @@ <article class="content-medium"> <div> <div class="article-content-container"> + <div class="article-background"></div> + <a class="article-link" href="#"></a> <img class="article-half-image" src="img/nasa_launch.jpg" alt="" /> diff --git a/login.html b/login.html new file mode 100644 index 0000000000000000000000000000000000000000..7151ce1f6365957530a4e1c765f4d1364a153e2a --- /dev/null +++ b/login.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="de"> + <head> + <title>Login</title> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" style="text/css" href="../styles.css" /> + </head> + <body> + <header class="login-header"><h1>Login-Page</h1></header> + + <form class="login-form" action="Login.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8"> + <fieldset> + <legend>Login</legend> + <div class="input-container"> + <label for="username">Username:</label> + <input id="username" name="username" type="text" placeholder="Username..." size="10" tabindex="1" required /> + </div> + <div class="input-container"> + <label for="password">Password:</label> + <input id="password" name="password" type="password" placeholder="Password..." size="10" tabindex="2" required /> + </div> + <input class="submit-btn" type="submit" value="Login" /> + </fieldset> + </form> + </body> +</html> \ No newline at end of file diff --git a/php/Admin.php b/php/Admin.php index 8491b3e2a0d6a6e835303e0d98c0e6883bbbf892..dfbaac9498ad607128e4661521f0e90526dedd06 100644 --- a/php/Admin.php +++ b/php/Admin.php @@ -5,7 +5,8 @@ require_once 'constants.php'; class Admin extends Page { - private const FILE = "file"; + private const FILE = 'file'; + private const EXPIRES = 'EXPIRES'; protected function __construct() { @@ -13,13 +14,11 @@ class Admin extends Page session_start(); - /*if (isset($_SESSION['EXPIRES']) && (time() - $_SESSION['EXPIRES'] > 3600)) { + if (!isset($_SESSION[EXPIRES]) || time() - $_SESSION[EXPIRES] > 60) { session_unset(); session_destroy(); - header("Location: login.php"); - } else { - header("Location: login.php"); - }*/ + header("Location: Login.php"); + } } public function __destruct() diff --git a/php/Index.php b/php/Index.php index b8d4f947ae6f47c9f22b1df2540910c7bf025ee3..3ae6056629fe6c53e33f97fa14f8eb6e2be4c6d0 100644 --- a/php/Index.php +++ b/php/Index.php @@ -76,7 +76,7 @@ class Index extends Page { <input type="button" value="" /> </form> </li> - <li><img src="img/share_icon.png" alt="" /></li> + <li><img src="../img/share_icon.png" alt="" /></li> <li class="admin-button"><a href="Admin.php">Admin</a></li> </ul> @@ -123,6 +123,9 @@ EOT; $content = $data[0]->content(); echo <<<EOT + + <div class="article-background"></div> + <a class="article-link" href="#"></a> <img class="article-image" src="$imgurl" alt="" /> @@ -160,6 +163,8 @@ EOT; echo <<<EOT + <div class="article-background"></div> + <a class="article-link" href="#"></a> <img class="article-image" src="$imgurl" alt="" /> @@ -180,6 +185,7 @@ EOT; $content = $data[2]->content(); echo <<<EOT + <div class="article-background"></div> <a class="article-link" href="#"></a> @@ -216,6 +222,8 @@ EOT; <article class="content-medium"> <div> <div class="article-content-container"> + <div class="article-background"></div> + <a class="article-link" href="#"></a> <img class="article-image" src="../img/ocean_worlds.jpg" alt="" /> @@ -225,6 +233,8 @@ EOT; <article class="content-small"> <div> <div class="article-content-container"> + <div class="article-background"></div> + <a class="article-link" href="#"></a> <img class="article-image article-image-full" src="../img/tweet.png" alt="" /> diff --git a/php/Login.php b/php/Login.php new file mode 100644 index 0000000000000000000000000000000000000000..9b093fd905222179c3579a5a8d21da0ab6f4f40c --- /dev/null +++ b/php/Login.php @@ -0,0 +1,87 @@ +<?php declare(strict_types=1); + +require_once 'Page.php'; +require_once 'constants.php'; + +class Login extends Page +{ + private const USERNAME = 'username'; + private const PASSWORD = 'password'; + + protected function __construct() + { + parent::__construct(); + + session_start(); + } + + public function __destruct() + { + parent::__destruct(); + } + + protected function getViewData():array + { + return array(); + } + + protected function generateView():void + { + $data = $this->getViewData(); + $this->generatePageHeader('Login'); + + $username = self::USERNAME; + $password = self::PASSWORD; + + echo <<<EOT +<body> + <header class="login-header"><h1>Login-Page</h1></header> + + <form class="login-form" action="Login.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8"> + <fieldset> + <legend>Login</legend> + <div class="input-container"> + <label for="$username">Username:</label> + <input id="$username" name="$username" type="text" placeholder="Username..." size="10" tabindex="1" required /> + </div> + <div class="input-container"> + <label for="$password">Password:</label> + <input id="$password" name="$password" type="password" placeholder="Password..." size="10" tabindex="2" required /> + </div> + <input class="submit-btn" type="submit" value="Login" /> + </fieldset> + </form> +</body> +EOT; + + $this->generatePageFooter(); + } + + protected function processReceivedData():void + { + parent::processReceivedData(); + + if ($_SERVER['REQUEST_METHOD'] === 'POST') { + if (isset($_POST[self::USERNAME]) && isset($_POST[self::PASSWORD])) { + $_SESSION[EXPIRES] = time(); + + header('Location: Admin.php'); + die(); + } + } + } + + public static function main():void + { + try { + $page = new Login(); + $page->processReceivedData(); + $page->generateView(); + } catch (Exception $e) { + header("Content-type: text/html; charset=UTF-8"); + echo $e->getMessage(); + } + } +} + +Login::main(); \ No newline at end of file diff --git a/php/constants.php b/php/constants.php index eeb262a59b012ee9a7e12764fcbfdbb5ddf3dc54..8fdace0216502452a1ed69b1de4932e3c2a635bc 100644 --- a/php/constants.php +++ b/php/constants.php @@ -1,4 +1,5 @@ <?php - define("NEWS_FILE", "news_file"); - define("DEFAULT_NEWS_FILE", "../data/upload/news_01.json"); + define('NEWS_FILE', 'news_file'); + define('DEFAULT_NEWS_FILE', '../data/upload/news_01.json'); + define('EXPIRES', 'EXPIRES') ?> \ No newline at end of file diff --git a/styles.css b/styles.css index 2cb4474e2fca745c08c5254b6bd8135b12d99f66..e6074b35d8349cad30d7566bb24b76cf2cf0ad09 100644 --- a/styles.css +++ b/styles.css @@ -208,6 +208,23 @@ main { background-color: white; } +.article-content-container > .article-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #39719e; +} + +.article-content-container > .article-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + .article-content-container > .article-link { position: absolute; top: 0; @@ -308,7 +325,6 @@ main { display: flex; flex-direction: column; justify-content: space-between; - background-color: #39719e; padding: 0.3rem 0.5rem 0; width: 100%; height: 100%; @@ -419,19 +435,19 @@ main { /* admin.html Page */ -.admin-header { +.admin-header, .login-header { text-align: center; } -.admin-header > h1 { +.admin-header > h1, .login-header > h1 { font-size: 1.5rem; } -.admin-form { +.admin-form, .login-form { text-align: center; } -.admin-form > fieldset { +.admin-form > fieldset, .login-form > fieldset { font-size: 1rem; display: inline; } @@ -451,6 +467,39 @@ main { background-color: lightgray; } +/* Login.php */ + +.login-form fieldset > * { + padding: 0.5em 0; +} + +.input-container { + display: flex; + justify-content: space-between; + align-items: center; + column-gap: 0.5em; +} + +.login-form > fieldset, .input-container > label { + font-size: 1rem;; +} + +.input-container > input { + padding: 0.5em; + font-size: 0.8rem; +} + +.login-form input[type="submit"] { + width: 100%; + background-color: lightgray; + cursor: pointer; + font-size: 0.8rem; + padding: 0.5rem; + border-radius: 0.1rem; +} + + + /*.content-small div div, .content-medium div div, .content-large div div { background-color: blue;