From b31908029a2d301856a7d66364c056e3055f2423 Mon Sep 17 00:00:00 2001
From: Bryan Pedini <bryanpedini@bryanpedini.it>
Date: Thu, 17 Jan 2019 00:40:15 +0100
Subject: [PATCH] Added templating, added sessions Added templating to the one
 page app, added and configured sessions to remember the last position and
 stored sessions for one day, even after browser close.

---
 index.php               | 121 +++++++++++++++-------------------------
 tmpl/contact-form.phtml |   0
 tmpl/description.phtml  |  13 +++++
 tmpl/home.phtml         |  48 ++++++++++++++++
 tmpl/ideas.phtml        |   0
 tmpl/projects.phtml     |   0
 6 files changed, 106 insertions(+), 76 deletions(-)
 create mode 100644 tmpl/contact-form.phtml
 create mode 100644 tmpl/description.phtml
 create mode 100644 tmpl/home.phtml
 create mode 100644 tmpl/ideas.phtml
 create mode 100644 tmpl/projects.phtml

diff --git a/index.php b/index.php
index 93a258f..d55bc1c 100644
--- a/index.php
+++ b/index.php
@@ -1,5 +1,8 @@
 <?php
+    session_set_cookie_params ( 1*24*60*60, "/" );
+    session_start ();
     $sections = [
+        0 => 'Previous',
         1 => 'Home',
         2 => 'About myself',
         3 => 'What I\'ve done so far',
@@ -11,71 +14,22 @@
     }
     else {
         $section = $_POST ['section'];
+        if ( $section == 0 ) {
+            if ( isset ( $_SESSION [ 'section' ] ) ) {
+                $section = $_SESSION [ 'section' ];
+            }
+            else {
+                $section = 1;
+            }
+        }
+        $_SESSION [ 'section' ] = $section;
         $section_title = $sections [ $section ];
         $sections_content = [
-            1 =>
-            '<header class="masthead" style="background-image:  url(\'img/bg-1.jpg\')">
-                <div class="overlay"></div>
-                <div class="container">
-                    <div class="row">
-                        <div class="col-lg-9 col-md-10 mx-auto">
-                            <div class="site-heading">
-                                <h1>Bryan Joshua Pedini</h1>
-                                <span class="subheading">An eighteen years old guy from Italy, with just some great ideas</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </header>
-            <footer>
-                <div class="container">
-                    <div class="row">
-                        <div class="col-lg-8 col-md-10 mx-auto">
-                            <ul class="list-inline text-center">
-                                <li class="list-inline-item">
-                                    <a href="#">
-                                        <span class="fa-stack fa-lg">
-                                            <i class="fas fa-circle fa-stack-2x"></i>
-                                            <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
-                                        </span>
-                                    </a>
-                                </li>
-                                <li class="list-inline-item">
-                                    <a href="#">
-                                        <span class="fa-stack fa-lg">
-                                            <i class="fas fa-circle fa-stack-2x"></i>
-                                            <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
-                                        </span>
-                                    </a>
-                                </li>
-                                <li class="list-inline-item">
-                                    <a href="#">
-                                        <span class="fa-stack fa-lg">
-                                            <i class="fas fa-circle fa-stack-2x"></i>
-                                            <i class="fab fa-github fa-stack-1x fa-inverse"></i>
-                                        </span>
-                                    </a>
-                                </li>
-                            </ul>
-                            <p class="copyright text-muted">Copyright &copy; Bryan Pedini <?php echo date("Y"); ?></p>
-                        </div>
-                    </div>
-                </div>
-            </footer>',
-            2 =>
-            '<header class="masthead" style="background-image: url(\'img/bg-2.jpg\')">
-                <div class="overlay"></div>
-                <div class="container">
-                    <div class="row">
-                        <div class="col-lg-8 col-md-10 mx-auto">
-                            <div class="page-heading">
-                                <h1>About Me</h1>
-                                <span class="subheading">This is what I do.</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </header>',
+            1 => file_get_contents ( 'tmpl/home.phtml' ),
+            2 => file_get_contents ( 'tmpl/description.phtml' ),
+            3 => file_get_contents ( 'tmpl/projects.phtml' ),
+            4 => file_get_contents ( 'tmpl/ideas.phtml' ),
+            5 => file_get_contents ( 'tmpl/contact-form.phtml' ),
         ];
         $arr_res = [
             'status' => 200,
@@ -101,6 +55,14 @@
         <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
         <link href="css/clean-blog.min.css" rel="stylesheet">
+        <style>
+            html,body {
+                scrollbar-width: none;
+            }
+            ::-webkit-scrollbar {
+                width: 0;
+            }
+        </style>
     </head>
     <body>
         <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
@@ -113,11 +75,12 @@
                     <ul class="navbar-nav ml-auto">
                         <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About me</a>
-                            <div class="dropdown-menu">
-                            <a href="#" class="dropdown-item" id="navbar-description">A brief description</a>
-                            <a href="#" class="dropdown-item" id="navbar-work">My current projects</a>
-                            <a href="#" class="dropdown-item" id="navbar-ideas">My ideas</a>
-                            </div>
+                            <ul class="dropdown-menu">
+                            <li class="dropdown-item"><a href="#" id="navbar-description">A brief description</a></li>
+                            <li class="dropdown-divider"></li>
+                            <li class="dropdown-item"><a href="#" id="navbar-work">My current projects</a></li>
+                            <li class="dropdown-item"><a href="#" id="navbar-ideas">My future ideas</a></li>
+                        </ul>
                         </li>
                         <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact me</a>
@@ -131,13 +94,14 @@
             </div>
         </nav>
         <div id="user-content">
+
         </div>
         <script src="vendor/jquery/jquery.min.js"></script>
         <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
         <script src="js/clean-blog.min.js"></script>
         <script>
             var $ = jQuery;
-            function setOnClick (section) {
+            function getPageContent (section) {
                 $.ajax({
                     url: 'index.php',
                     method: 'POST',
@@ -159,14 +123,19 @@
                     },
                 });
             }
-            $('#navbar-home').on('click', function (clickEvent) { setOnClick(1) } );
-            $('#navbar-description').on('click', function (clickEvent) { setOnClick(2) });
-            $('#navbar-work').on('click', function (clickEvent) { setOnClick(3) });
-            $('#navbar-ideas').on('click', function (clickEvent) { setOnClick(4) });
-            $('#navbar-contact-form').on('click', function (clickEvent) { setOnClick(5) });
-            $('#navbar-contact-email').on('click', function (clickEvent) { window.location.href = "mailto:bryanpedini@bryanpedini.it"; });
             $(function() {
-                setOnClick(1);
+                $('#navbar-home').on('click', function (clickEvent) { getPageContent (1) } );
+                $('#navbar-description').on('click', function (clickEvent) { getPageContent (2) });
+                $('#navbar-work').on('click', function (clickEvent) { getPageContent (3) });
+                $('#navbar-ideas').on('click', function (clickEvent) { getPageContent (4) });
+                $('#navbar-contact-form').on('click', function (clickEvent) { getPageContent (5) });
+                $('#navbar-contact-email').on('click', function (clickEvent) { window.location.href = "mailto:bryanpedini@bryanpedini.it"; });
+                $('ul.nav li.dropdown').hover(function() {
+                    $(this).find('.dropdown-menu').stop(true, true).fadeIn(500);
+                }, function() {
+                    $(this).find('.dropdown-menu').stop(true, true).fadeOut(500);
+                });
+                getPageContent(0);
             });
         </script>
     </body>
diff --git a/tmpl/contact-form.phtml b/tmpl/contact-form.phtml
new file mode 100644
index 0000000..e69de29
diff --git a/tmpl/description.phtml b/tmpl/description.phtml
new file mode 100644
index 0000000..082d47d
--- /dev/null
+++ b/tmpl/description.phtml
@@ -0,0 +1,13 @@
+<header class="masthead" style="background-image: url(img/bg-2.jpg)">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+                <div class="page-heading">
+                    <h1>About Me</h1>
+                    <span class="subheading">This is what I do.</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
\ No newline at end of file
diff --git a/tmpl/home.phtml b/tmpl/home.phtml
new file mode 100644
index 0000000..a5d6634
--- /dev/null
+++ b/tmpl/home.phtml
@@ -0,0 +1,48 @@
+<header class="masthead" style="background-image:  url(img/bg-1.jpg)">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-9 col-md-10 mx-auto">
+                <div class="site-heading">
+                    <h1>Bryan Joshua Pedini</h1>
+                    <span class="subheading">An eighteen years old guy from Italy, with just some great ideas</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+                <ul class="list-inline text-center">
+                    <li class="list-inline-item">
+                        <a href="#">
+                            <span class="fa-stack fa-lg">
+                                <i class="fas fa-circle fa-stack-2x"></i>
+                                <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                            <span class="fa-stack fa-lg">
+                                <i class="fas fa-circle fa-stack-2x"></i>
+                                <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                            <span class="fa-stack fa-lg">
+                                <i class="fas fa-circle fa-stack-2x"></i>
+                                <i class="fab fa-github fa-stack-1x fa-inverse"></i>
+                            </span>
+                        </a>
+                    </li>
+                </ul>
+                <p class="copyright text-muted">Copyright &copy; Bryan Pedini <?php echo date("Y"); ?></p>
+            </div>
+        </div>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/tmpl/ideas.phtml b/tmpl/ideas.phtml
new file mode 100644
index 0000000..e69de29
diff --git a/tmpl/projects.phtml b/tmpl/projects.phtml
new file mode 100644
index 0000000..e69de29