implement homepage page draft

2025-03-13 05:51:46 +00:00 · 2021-12-29 12:10:47 +02:00 · 2021-12-29 12:10:47 +02:00 · 9b06c6b9c4
commit 9b06c6b9c4
parent ae0bdb926f
18 changed files with 251 additions and 17 deletions
--- a/src/application/controller/common/footer/guest.php
+++ b/src/application/controller/common/footer/guest.php
@ -0,0 +1,6 @@
+<?php
+
+$usersTotal  = $_modelUser->getTotal();
+$blocksTotal = $_modelBlock->getTotal();
+
+require(PROJECT_DIR . '/application/view/common/footer/guest.phtml');
--- a/src/application/controller/common/footer/user.php
+++ b/src/application/controller/common/footer/user.php
@ -3,4 +3,4 @@
 $usersTotal  = $_modelUser->getTotal();
 $blocksTotal = $_modelBlock->getTotal();

-require(PROJECT_DIR . '/application/view/common/footer.phtml');
+require(PROJECT_DIR . '/application/view/common/footer/user.phtml');
--- a/src/application/controller/common/header.php
+++ b/src/application/controller/common/header.php
@ -1,3 +0,0 @@
-<?php
-
-require(PROJECT_DIR . '/application/view/common/header.phtml');
--- a/src/application/controller/common/header/guest.php
+++ b/src/application/controller/common/header/guest.php
@ -0,0 +1,3 @@
+<?php
+
+require(PROJECT_DIR . '/application/view/common/header/guest.phtml');
--- a/src/application/controller/common/header/user.php
+++ b/src/application/controller/common/header/user.php
@ -0,0 +1,3 @@
+<?php
+
+require(PROJECT_DIR . '/application/view/common/header/user.phtml');
--- a/src/application/controller/index.php
+++ b/src/application/controller/index.php
@ -7,4 +7,4 @@ if (!isset($_SESSION['username'])) {

 $metaTitle = _('Home | Twisterarmy Cloud');

-require(PROJECT_DIR . '/application/view/index.phtml');
+require(PROJECT_DIR . '/application/view/home.phtml');
--- a/src/application/view/common/footer/guest.phtml
+++ b/src/application/view/common/footer/guest.phtml
--- a/src/application/view/common/footer/user.phtml
+++ b/src/application/view/common/footer/user.phtml
@ -0,0 +1,5 @@
+  <div class="t-center c-2">
+    <p><small><?php echo sprintf(_('Network status: %s users in %s blocks'), $usersTotal, $blocksTotal) ?></small></p>
+    <p class="mt-10"><small><?php echo sprintf(_('version %s'), SERVER_VERSION) ?> <i class="bi bi-suit-heart"></i></small></p>
+  </div>
+</body>
--- a/src/application/view/common/header/guest.phtml
+++ b/src/application/view/common/header/guest.phtml
--- a/src/application/view/common/header/user.phtml
+++ b/src/application/view/common/header/user.phtml
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title><?php echo $metaTitle ?></title>
+  <meta name="description" content="Twisterarmy Cloud is the open source web interface to interact twister network without node installation." />
+  <link rel="stylesheet" type="text/css" href="css/font.css" />
+  <link rel="stylesheet" type="text/css" href="css/bi.css" />
+  <link rel="stylesheet" type="text/css" href="css/common.css" />
+  <link rel="stylesheet" type="text/css" href="css/mobile.css" />
+  <link rel="stylesheet" type="text/css" href="css/user.css" />
+  <script src="js/jquery.js"></script>
+</head>
+<body class="bg-c-1 bg-img-1 c-0">
+  <div class="bg-c-2 bg-img-2 c-1 of-hidden">
+    <div class="mw-1024 mx-auto">
+      <div class="nav float-left h-48 lh-48">
+        <div class="px-16">
+          <a class="c-1 f-size-18" href="<?php echo PROJECT_HOST ?>">Twisterarmy <i><?php echo _('Cloud') ?></i></a>
+        </div>
+      </div>
+      <div class="nav bg-c-2 bg-img-2 float-right t-right h-48 lh-48">
+        <div class="px-16">
+          <a class="c-1 ml-16" href="https://github.com/twisterarmy/cloud-server" target="_blank"><i class="bi bi-github"></i></a>
+          <a class="c-1 ml-16" href="https://github.com/twisterarmy/cloud-server/issues" target="_blank"><i class="bi bi-question-circle"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
--- a/src/application/view/home.phtml
+++ b/src/application/view/home.phtml
@ -0,0 +1,61 @@
+<?php include(PROJECT_DIR . '/application/controller/common/header/user.php') ?>
+<div class="container">
+  <div class="main">
+    <div class="menu">
+      <a class="item active" href="<?php echo PROJECT_HOST ?>" title="<?php echo _('Home') ?>">
+        <i class="bi bi-house"></i>
+      </a>
+      <a class="item" href="following" title="<?php echo _('Following') ?>">
+        <i class="bi bi-person"></i>
+        <span>12</span>
+      </a>
+      <a class="item" href="bookmarks" title="<?php echo _('Bookmarks') ?>">
+        <i class="bi bi-bookmarks"></i>
+        <span>4</span>
+      </a>
+      <a class="item" href="mentions" title="<?php echo _('Mentions') ?>">
+        <i class="bi bi-at"></i>
+      </a>
+      <a class="item" href="messages" title="<?php echo _('Messages') ?>">
+        <i class="bi bi-envelope"></i>
+      </a>
+      <a class="item" href="settings" title="<?php echo _('Messages') ?>">
+        <i class="bi bi-gear"></i>
+      </a>
+    </div>
+    <form action="<?php echo PROJECT_HOST ?>" method="POST" name="post" class="post">
+      <div>
+        <textarea name="post" placeholder="<?php echo _('Enter your post...') ?>"></textarea>
+      </div>
+      <!--<span>220</span>-->
+      <button><?php echo _('Send') ?></button>
+    </form>
+    <div class="content">
+      <div class="item">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+      </div>
+      <div class="item">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+      </div>
+    </div>
+    <div class="footer">
+      <?php include(PROJECT_DIR . '/application/controller/common/footer/user.php') ?>
+    </div>
+  </div>
+  <div class="side">
+
+    <!-- todo
+      <form action="<?php echo PROJECT_HOST ?>" method="POST" name="search" class="search">
+        <input type="text" value="" placeholder="Search...">
+      </form>
+    -->
+
+    <div class="suggestions">
+      <h4><?php echo _('Who to follow') ?></h4>
+      <h4><?php echo _('New users') ?></h4>
+      <h4><?php echo _('Last activity') ?></h4>
+      <h4><?php echo _('Related posts') ?></h4>
+    </div>
+
+    </div>
+</div>
--- a/src/application/view/index.phtml
+++ b/src/application/view/index.phtml
@ -1,2 +0,0 @@
-<?php include(PROJECT_DIR . '/application/controller/common/header.php') ?>
-<?php include(PROJECT_DIR . '/application/controller/common/footer.php') ?>
--- a/src/application/view/login.phtml
+++ b/src/application/view/login.phtml
@ -1,4 +1,4 @@
-<?php include(PROJECT_DIR . '/application/controller/common/header.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/header/guest.php') ?>
 <div class="mw-1024 mx-auto of-hidden">
  <div class="mw-360 mx-auto my-100 bg-c-4 b-r-3 py-28 px-24">
    <h1 class="f-size-20 f-normal mb-20"><?php echo _('Login') ?></h1>
@ -18,4 +18,4 @@
    </form>
  </div>
 </div>
-<?php include(PROJECT_DIR . '/application/controller/common/footer.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/footer/guest.php') ?>
--- a/src/application/view/register_off.phtml
+++ b/src/application/view/register_off.phtml
@ -1,4 +1,4 @@
-<?php include(PROJECT_DIR . '/application/controller/common/header.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/header/guest.php') ?>
 <div class="mw-1024 mx-auto of-hidden">
  <div class="mw-360 mx-auto my-100 bg-c-4 b-r-3 py-28 px-24">
    <h1 class="f-size-20 f-normal mb-20"><?php echo _('Register') ?></h1>
@ -10,4 +10,4 @@
    </div>
  </div>
 </div>
-<?php include(PROJECT_DIR . '/application/controller/common/footer.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/footer/guest.php') ?>
--- a/src/application/view/register_on.phtml
+++ b/src/application/view/register_on.phtml
@ -1,4 +1,4 @@
-<?php include(PROJECT_DIR . '/application/controller/common/header.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/header/guest.php') ?>
 <div class="mw-1024 mx-auto of-hidden">
  <div class="mw-360 mx-auto my-100 bg-c-4 b-r-3 py-28 px-24">
    <h1 class="f-size-20 f-normal mb-20"><?php echo _('Register') ?></h1>
@ -14,4 +14,4 @@
    </form>
  </div>
 </div>
-<?php include(PROJECT_DIR . '/application/controller/common/footer.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/footer/guest.php') ?>
--- a/src/application/view/welcome.phtml
+++ b/src/application/view/welcome.phtml
@ -1,4 +1,4 @@
-<?php include(PROJECT_DIR . '/application/controller/common/header.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/header/guest.php') ?>
 <div class="mw-1024 mx-auto of-hidden">
  <div class="mw-360 mx-auto my-100 bg-c-4 b-r-3 py-28 px-24">
    <h1 class="f-size-20 f-normal mb-20"><?php echo _('Welcome') ?></h1>
@ -18,4 +18,4 @@
    </div>
  </div>
 </div>
-<?php include(PROJECT_DIR . '/application/controller/common/footer.php') ?>
+<?php include(PROJECT_DIR . '/application/controller/common/footer/guest.php') ?>
--- a/src/bootstrap.php
+++ b/src/bootstrap.php
@ -51,7 +51,7 @@ if (isset($_GET['_route_'])) {

    switch ($_GET['_route_']) {
      case '':
-        require(PROJECT_DIR . '/application/controller/index.php');
+        require(PROJECT_DIR . '/application/controller/home.php');
      break;
      case 'login':
        require(PROJECT_DIR . '/application/controller/login.php');
@ -70,5 +70,5 @@ if (isset($_GET['_route_'])) {
    }

 } else {
-  require(PROJECT_DIR . '/application/controller/index.php');
+  require(PROJECT_DIR . '/application/controller/home.php');
 }
--- a/src/public/css/user.css
+++ b/src/public/css/user.css
@ -0,0 +1,132 @@
+* {
+  -moz-transition: all .4s ease-in;
+  -o-transition: all .4s ease-in;
+  /* issue #2
+  -webkit-transition: all .5s ease-in;
+  transition: all .5s ease-in; */
+}
+
+a,
+a:visited,
+a:active {
+  color: #fff
+}
+
+.container {
+  max-width: 1024px;
+  margin: 16px auto;
+  padding: 0 16px;
+  overflow: hidden
+}
+
+.container .side  {
+  float: left;
+  width: 30%;
+  padding-right: 16px
+}
+
+.container .side form input {
+  height: 36px;
+  width: 100%;
+  padding: 16px 8px;
+  border-radius: 3px;
+  margin-bottom: 16px;
+  font-family: Roboto-Regular, Sans-Serif, Verdana;
+  font-size: 14px;
+  background: rgb(56, 65, 78);
+  color: #dfe8f4;
+  outline: none;
+}
+
+.container .side .suggestions {
+  padding: 16px 8px;
+}
+
+.container .side .suggestions h4 {
+  text-align: center;
+  text-transform: uppercase
+}
+
+.container .main  {
+  float: left;
+  width: 70%
+}
+
+.container .main .menu .item {
+  display: inline-block;
+  /* background: rgba(39, 46, 57, 0.28); */
+  background: rgba(101, 114, 134, 0.28);
+  border-radius: 3px;
+  cursor: pointer;
+  text-align: center;
+  padding: 8px 16px
+}
+
+.container .main .menu .item.active,
+.container .main .menu .item:hover {
+  background: #272E39;
+}
+
+.container .main .menu .item span {
+  font-size: 12px;
+  margin: 0 8px
+}
+
+.container .main .post {
+  margin: 8px 0;
+  padding: 16px;
+  background: #272E39;
+  border-radius: 3px;
+  overflow: hidden
+}
+
+.container .main .post textarea {
+  height: 52px;
+  width: 100%;
+  padding: 16px 8px;
+  border-radius: 3px;
+  margin-bottom: 16px;
+  font-family: Roboto-Regular, Sans-Serif, Verdana;
+  font-size: 14px;
+  background: rgba(101, 114, 134, 0.28);
+  color: #dfe8f4;
+  outline: none
+
+}
+
+.container .main .post textarea:focus {
+  height: 120px;
+  /*background: rgb(79, 90, 107);*/
+}
+
+.container .main .post button {
+  float: right;
+  padding: 8px 16px;
+  border-radius: 3px;
+  cursor: pointer;
+  background-color: #337ab7;
+  color: #fff;
+  border: 0
+}
+
+.container .main .post button:hover {
+  background-color: #437baa
+}
+
+.container .main .post .content {
+  background: rgb(89,99,116);
+  border-radius: 3px;
+  padding: 16px;
+}
+
+.container .main .content .item {
+  padding: 16px;
+  margin-bottom: 8px;
+  background: rgba(101, 114, 134, 0.28);
+  border-radius: 3px;
+  color: #dfe8f4
+}
+
+.container .main .footer {
+  margin: 36px 0
+}