Work in part

src/API/APIMuscles.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace WebProjectFitness\API;
+
+use WebProjectFitness\Model\BDD;
+use WebProjectFitness\Model\BDTables;
+
+class APIMuscles extends API {
+
+    private $declaredFunctions = [
+        'get-list' => [
+            'method' => 'POST',
+            'params' => [
+                'muscle' => [
+                    'require' => true,
+                    'type' => 'string'
+                ]
+            ]
+        ],
+        'get-exercise' => [
+            'method' => 'POST',
+            'params' => [
+                'id' => [
+                    'required' => true,
+                    'type' => 'int'
+                ]
+            ]
+        ]
+    ];
+
+    public function __construct() {
+        parent::__construct( $this->declaredFunctions );
+    }
+
+    public function getList( $data ) {
+        $query = "SELECT " . BDTables::EXERCISE . ".id, title FROM " . BDTables::EXERCISE .
+            " LEFT JOIN " . BDTables::MUSCLES . " ON " . BDTables::MUSCLES . ".id = " . BDTables::EXERCISE . ".muscle
+                     WHERE " . BDTables::MUSCLES . ".muscle = :muscle";
+        $query = BDD::instance()->prepare( $query );
+        $query->execute( $data );
+
+        $this->returnJson( json_encode( $query->fetchAll() ) );
+    }
+
+    public function getExercise( $data ) {
+        $query = "SELECT `title`, `video`, `description` FROM " . BDTables::EXERCISE .
+            "   WHERE `id` = :id";
+        $query = BDD::instance()->prepare( $query );
+        $query->execute( $data );
+
+        $this->returnJson( json_encode( $query->fetch() ) );
+    }
+
+}

src/API/APIUser.php

@@ -5,14 +5,12 @@ namespace WebProjectFitness\API;
 use WebProjectFitness\Model\BDTables;
 use WebProjectFitness\Model\Model;
 
-class APIUser extends API
+class APIUser extends API {
-{
 
     private $declaredFunctions = [
         'create' => [
             'method' => 'POST',
-            'params' => [
+            'params' => []
-            ]
         ],
         'modify' => [
             'method' => 'POST',
@@ -105,19 +103,15 @@ class APIUser extends API
                 ]
             ]
         ]
-
-
     ];
 
-    public function __construct()
+    public function __construct() {
-    {
         parent::__construct( $this->declaredFunctions );
     }
 
 
     //functions for user table.
-    public function create($data)
+    public function create() {
-    {
         $id = uniqid();
         $id = substr( $id, 0, 6 );
         Model::insert( BDTables::USER, [
@@ -127,43 +121,37 @@ class APIUser extends API
         $this->returnJson( [ 'id' => $id ] );
     }
 
-    public function modify($data)
+    public function modify( $data ) {
-    {
         Model::update( BDTables::USER, [ 'name' => $data[ 'name' ] ], "user_id", $data[ 'user_id' ] );
         $this->returnJson( [ 'name' => $data[ 'name' ], 'id' => $data[ 'user_id' ] ] );
     }
 
 
     //Functions for favorite table.
-    public function favoriteAdd($data)
+    public function favoriteAdd( $data ) {
-    {
         Model::insert( BDTables::FAVORITE, [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ] ] );
         $this->returnJson( [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ] ] );
     }
 
-    public function favoriteDelete($data)
+    public function favoriteDelete( $data ) {
-    {
         Model::delete( BDTables::FAVORITE, [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ] ] );
         $this->returnJson( [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ] ] );
 
     }
 
     //functions for training table
-    public function trainingAdd($data)
+    public function trainingAdd( $data ) {
-    {
         Model::insert( BDTables::TRAINING, [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ], 'id_order' => $data[ 'id_order' ] ] );
         $this->returnJson( [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ], 'id_order' => $data[ 'id_order' ] ] );
     }
 
-    public function trainingDelete($data)
+    public function trainingDelete( $data ) {
-    {
         Model::delete( BDTables::TRAINING, [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ], 'id_order' => $data[ 'id_order' ] ] );
 
         $this->returnJson( [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ], 'id_order' => $data[ 'id_order' ] ] );
     }
 
-    public function trainingChangeOrder($data)
+    public function trainingChangeOrder( $data ) {
-    {
         Model::update_order( BDTables::TRAINING, [ 'id_user' => $data[ 'id_user' ], 'id_order' => $data[ 'id_order' ], 'id_exercise' => $data[ 'id_exercise' ] ], $data[ 'new_order' ] );
 
         $this->returnJson( [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ], 'id_order' => $data[ 'id_order' ], 'new_order' => $data[ 'new_order' ] ] );

src/Model/BDTables.php

@@ -12,6 +12,7 @@ abstract class BDTables {
     const FAVORITE = "favorite";
     const EXERCISE = "exercise";
     const TRAINING = "training";
+    const MUSCLES = "muscles";
 }
 
 ?>

src/View/Site/Index.php

@@ -2,7 +2,7 @@
     <div class="col l3 m4 s6 green lighten-1 white-text" style="height: 750px;">
         <div class="row">
             <div class="col s12 center-align">
-                <h5>Selected part of the body</h5>
+                <h5 id="exercise-title">Selected part of the body</h5>
             </div>
             <div class="col s12" id="point-container">
                 <img src="/img/muscles.jpg" style="width: 100%;">
@@ -10,22 +10,15 @@
             <div class="col s12" id="list-exercices-select-part">
                 <div class="container">
                     <h5>Exercise List</h5>
+                    <div id="exercises-container">
                         <div>Please select a muscle</div>
                     </div>
                 </div>
             </div>
         </div>
+    </div>
     <div class="col l9 m8 s6">
-        <div class="container">
+        <div class="container" id="main-container">
-            <h2>Title</h2>
-            <div class="center-align">
-                <!--                <iframe width="560" height="315" src="https://www.youtube.com/embed/1gLmEOSwQMs" frameborder="0"-->
-                <!--                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"-->
-                <!--                        allowfullscreen></iframe>-->
-                <div class="exercise-info-container blue-grey lighten-4 left-align">
-                    Test
-                </div>
-            </div>
         </div>
     </div>
 </div>

src/View/Site/tpl/footer.php

@@ -1,5 +1,23 @@
 </main>
 
+<div id="modal" class="md-modal">
+    <div class="md-content">
+
+        <h3 class="md-header md-title"></h3>
+
+        <div class="md-container row">
+        </div>
+
+        <div class="md-footer">
+            <a class="waves-effect waves-green btn-flat" id="md-validate">Validate</a>
+            <a class="waves-effect waves-red btn-flat" id="md-cancel">Cancel</a>
+        </div>
+
+    </div>
+</div>
+<div class="md-overlay"></div>
+
+
 <footer class="page-footer green darken-3">
     <div class="footer-copyright">
         <div class="container">

src/View/Site/tpl/head.php

@@ -25,6 +25,7 @@
     <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700%7CRoboto+Condensed:400,700%7CMaterial+Icons'
           rel='stylesheet' type='text/css'>
     <link href="/css/materialize.min.css" rel="stylesheet">
+    <link href="/css/modal.css" rel="stylesheet">
 
     <link href="/css/style.css?v=<?= WebProjectFitness\Config::SITE_CSS_VERSION ?>" rel="stylesheet">
 
@@ -43,7 +44,7 @@
 <body class="grey lighten-4">
 
 <ul id="user" class="dropdown-content">
-    <li><a>Your Account</a></li>
+    <li><a id="change-name">Change Your Name</a></li>
     <li class="divider"></li>
     <li><a>Your Saved Exercises</a></li>
     <li class="divider"></li>
@@ -59,7 +60,7 @@
 
             <ul class="right hide-on-med-and-down">
                 <li>
-                    <a class="dropdown-trigger" data-target="user">Name Of The Account<i class="material-icons right">arrow_drop_down</i></a>
+                    <a class="dropdown-trigger" data-target="user">Your Account<i class="material-icons right">arrow_drop_down</i></a>
                 </li>
             </ul>
         </div>

static/css/modal.css

@@ -0,0 +1,773 @@
+/* General styles for the modal */
+
+/*
+Styles for the html/body for special modal where we want 3d effects
+Note that we need a container wrapping all content on the page for the
+perspective effects (not including the modals and the overlay).
+*/
+.md-perspective,
+.md-perspective body {
+    height: 100%;
+    overflow: hidden;
+}
+
+.md-perspective body {
+    background: #222;
+    -webkit-perspective: 600px;
+    -moz-perspective: 600px;
+    perspective: 600px;
+}
+
+.md-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    max-width: 630px;
+    min-width: 320px;
+    height: auto;
+    z-index: 2000;
+    visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    -moz-transform: translateX(-50%) translateY(-50%);
+    -ms-transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.md-show {
+    visibility: visible;
+}
+
+.md-overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    opacity: 0;
+    background: rgba(150, 150, 150, 0.8);
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show ~ .md-overlay {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Content styles */
+.md-content {
+    color: #000;
+    background: #FFF;
+    position: relative;
+    border-radius: 3px;
+    margin: 0 auto;
+}
+
+.md-content h3 {
+    margin: 0;
+    padding: 0.4em;
+    text-align: center;
+    font-size: 2.4em;
+    font-weight: 300;
+    opacity: 0.8;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px 3px 0 0;
+}
+
+.md-content > div {
+    padding: 15px 40px;
+    margin: 0;
+    font-weight: 300;
+    font-size: 1.15em;
+}
+
+.md-content > div p {
+    margin: 0;
+    padding: 10px 0;
+}
+
+.md-content > div ul {
+    margin: 0;
+    padding: 0 0 30px 20px;
+}
+
+.md-content > div ul li {
+    padding: 5px 0;
+}
+
+.md-content button {
+    display: block;
+    margin: 0 auto;
+    font-size: 0.8em;
+}
+
+/* Individual modal styles with animations/transitions */
+
+/* Effect 1: Fade in and scale up */
+.md-effect-1 .md-content {
+    -webkit-transform: scale(0.7);
+    -moz-transform: scale(0.7);
+    -ms-transform: scale(0.7);
+    transform: scale(0.7);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-1 .md-content {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Effect 2: Slide from the right */
+.md-effect-2 .md-content {
+    -webkit-transform: translateX(20%);
+    -moz-transform: translateX(20%);
+    -ms-transform: translateX(20%);
+    transform: translateX(20%);
+    opacity: 0;
+    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+}
+
+.md-show.md-effect-2 .md-content {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+}
+
+/* Effect 3: Slide from the bottom */
+.md-effect-3 .md-content {
+    -webkit-transform: translateY(20%);
+    -moz-transform: translateY(20%);
+    -ms-transform: translateY(20%);
+    transform: translateY(20%);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-3 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Effect 4: Newspaper */
+.md-effect-4 .md-content {
+    -webkit-transform: scale(0) rotate(720deg);
+    -moz-transform: scale(0) rotate(720deg);
+    -ms-transform: scale(0) rotate(720deg);
+    transform: scale(0) rotate(720deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-4 ~ .md-overlay,
+.md-effect-4 .md-content {
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.md-show.md-effect-4 .md-content {
+    -webkit-transform: scale(1) rotate(0deg);
+    -moz-transform: scale(1) rotate(0deg);
+    -ms-transform: scale(1) rotate(0deg);
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+}
+
+/* Effect 5: fall */
+.md-effect-5.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-5 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateZ(600px) rotateX(20deg);
+    -moz-transform: translateZ(600px) rotateX(20deg);
+    -ms-transform: translateZ(600px) rotateX(20deg);
+    transform: translateZ(600px) rotateX(20deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-5 .md-content {
+    -webkit-transition: all 0.3s ease-in;
+    -moz-transition: all 0.3s ease-in;
+    transition: all 0.3s ease-in;
+    -webkit-transform: translateZ(0px) rotateX(0deg);
+    -moz-transform: translateZ(0px) rotateX(0deg);
+    -ms-transform: translateZ(0px) rotateX(0deg);
+    transform: translateZ(0px) rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 6: side fall */
+.md-effect-6.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-6 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
+    -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
+    -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
+    transform: translate(30%) translateZ(600px) rotate(10deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-6 .md-content {
+    -webkit-transition: all 0.3s ease-in;
+    -moz-transition: all 0.3s ease-in;
+    transition: all 0.3s ease-in;
+    -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
+    -moz-transform: translate(0%) translateZ(0) rotate(0deg);
+    -ms-transform: translate(0%) translateZ(0) rotate(0deg);
+    transform: translate(0%) translateZ(0) rotate(0deg);
+    opacity: 1;
+}
+
+/* Effect 7:  slide and stick to top */
+.md-effect-7 {
+    top: 0;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.md-effect-7 .md-content {
+    -webkit-transform: translateY(-200%);
+    -moz-transform: translateY(-200%);
+    -ms-transform: translateY(-200%);
+    transform: translateY(-200%);
+    -webkit-transition: all .3s;
+    -moz-transition: all .3s;
+    transition: all .3s;
+    opacity: 0;
+}
+
+.md-show.md-effect-7 .md-content {
+    -webkit-transform: translateY(0%);
+    -moz-transform: translateY(0%);
+    -ms-transform: translateY(0%);
+    transform: translateY(0%);
+    border-radius: 0 0 3px 3px;
+    opacity: 1;
+}
+
+/* Effect 8: 3D flip horizontal */
+.md-effect-8.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-8 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: rotateY(-70deg);
+    -moz-transform: rotateY(-70deg);
+    -ms-transform: rotateY(-70deg);
+    transform: rotateY(-70deg);
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+    opacity: 0;
+}
+
+.md-show.md-effect-8 .md-content {
+    -webkit-transform: rotateY(0deg);
+    -moz-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+    opacity: 1;
+}
+
+/* Effect 9: 3D flip vertical */
+.md-effect-9.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-9 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: rotateX(-70deg);
+    -moz-transform: rotateX(-70deg);
+    -ms-transform: rotateX(-70deg);
+    transform: rotateX(-70deg);
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+    opacity: 0;
+}
+
+.md-show.md-effect-9 .md-content {
+    -webkit-transform: rotateX(0deg);
+    -moz-transform: rotateX(0deg);
+    -ms-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 10: 3D sign */
+.md-effect-10.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-10 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: rotateX(-60deg);
+    -moz-transform: rotateX(-60deg);
+    -ms-transform: rotateX(-60deg);
+    transform: rotateX(-60deg);
+    -webkit-transform-origin: 50% 0;
+    -moz-transform-origin: 50% 0;
+    transform-origin: 50% 0;
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-10 .md-content {
+    -webkit-transform: rotateX(0deg);
+    -moz-transform: rotateX(0deg);
+    -ms-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 11: Super scaled */
+.md-effect-11 .md-content {
+    -webkit-transform: scale(2);
+    -moz-transform: scale(2);
+    -ms-transform: scale(2);
+    transform: scale(2);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-11 .md-content {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Effect 12:  Just me */
+.md-effect-12 .md-content {
+    -webkit-transform: scale(0.8);
+    -moz-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    transform: scale(0.8);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-12 ~ .md-overlay {
+    background: #e74c3c;
+}
+
+.md-effect-12 .md-content h3,
+.md-effect-12 .md-content {
+    background: transparent;
+}
+
+.md-show.md-effect-12 .md-content {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Effect 13: 3D slit */
+.md-effect-13.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-13 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateZ(-3000px) rotateY(90deg);
+    -moz-transform: translateZ(-3000px) rotateY(90deg);
+    -ms-transform: translateZ(-3000px) rotateY(90deg);
+    transform: translateZ(-3000px) rotateY(90deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-13 .md-content {
+    -webkit-animation: slit .7s forwards ease-out;
+    -moz-animation: slit .7s forwards ease-out;
+    animation: slit .7s forwards ease-out;
+}
+
+@-webkit-keyframes slit {
+    50% {
+        -webkit-transform: translateZ(-250px) rotateY(89deg);
+        opacity: .5;
+        -webkit-animation-timing-function: ease-out;
+    }
+    100% {
+        -webkit-transform: translateZ(0) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes slit {
+    50% {
+        -moz-transform: translateZ(-250px) rotateY(89deg);
+        opacity: .5;
+        -moz-animation-timing-function: ease-out;
+    }
+    100% {
+        -moz-transform: translateZ(0) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+@keyframes slit {
+    50% {
+        transform: translateZ(-250px) rotateY(89deg);
+        opacity: 1;
+        animation-timing-function: ease-in;
+    }
+    100% {
+        transform: translateZ(0) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+/* Effect 14:  3D Rotate from bottom */
+.md-effect-14.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-14 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateY(100%) rotateX(90deg);
+    -moz-transform: translateY(100%) rotateX(90deg);
+    -ms-transform: translateY(100%) rotateX(90deg);
+    transform: translateY(100%) rotateX(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+}
+
+.md-show.md-effect-14 .md-content {
+    -webkit-transform: translateY(0%) rotateX(0deg);
+    -moz-transform: translateY(0%) rotateX(0deg);
+    -ms-transform: translateY(0%) rotateX(0deg);
+    transform: translateY(0%) rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 15:  3D Rotate in from left */
+.md-effect-15.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-15 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-15 .md-content {
+    -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    opacity: 1;
+}
+
+/* Effect 16:  Blur */
+.md-show.md-effect-16 ~ .md-overlay {
+    background: rgba(180, 46, 32, 0.5);
+}
+
+.md-show.md-effect-16 ~ .container {
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    filter: blur(3px);
+}
+
+.md-effect-16 .md-content {
+    -webkit-transform: translateY(-5%);
+    -moz-transform: translateY(-5%);
+    -ms-transform: translateY(-5%);
+    transform: translateY(-5%);
+    opacity: 0;
+}
+
+.md-show.md-effect-16 ~ .container,
+.md-effect-16 .md-content {
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-16 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Effect 17:  Slide in from bottom with perspective on container */
+.md-show.md-effect-17 ~ .container {
+    height: 100%;
+    overflow: hidden;
+    -webkit-transition: -webkit-transform 0.3s;
+    -moz-transition: -moz-transform 0.3s;
+    transition: transform 0.3s;
+}
+
+.md-show.md-effect-17 ~ .container,
+.md-show.md-effect-17 ~ .md-overlay {
+    -webkit-transform: rotateX(-2deg);
+    -moz-transform: rotateX(-2deg);
+    -ms-transform: rotateX(-2deg);
+    transform: rotateX(-2deg);
+    -webkit-transform-origin: 50% 0%;
+    -moz-transform-origin: 50% 0%;
+    transform-origin: 50% 0%;
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+.md-effect-17 .md-content {
+    opacity: 0;
+    -webkit-transform: translateY(200%);
+    -moz-transform: translateY(200%);
+    -ms-transform: translateY(200%);
+    transform: translateY(200%);
+}
+
+.md-show.md-effect-17 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+    -webkit-transition: all 0.3s 0.2s;
+    -moz-transition: all 0.3s 0.2s;
+    transition: all 0.3s 0.2s;
+}
+
+/* Effect 18:  Slide from right with perspective on container */
+.md-show.md-effect-18 ~ .container {
+    height: 100%;
+    overflow: hidden;
+}
+
+.md-show.md-effect-18 ~ .md-overlay {
+    background: rgba(143, 27, 15, 0.8);
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.md-show.md-effect-18 ~ .container,
+.md-show.md-effect-18 ~ .md-overlay {
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform-origin: 0% 50%;
+    -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
+    -moz-transform-style: preserve-3d;
+    -moz-transform-origin: 0% 50%;
+    -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
+    transform-style: preserve-3d;
+    transform-origin: 0% 50%;
+    animation: rotateRightSideFirst 0.5s forwards ease-in;
+}
+
+@-webkit-keyframes rotateRightSideFirst {
+    50% {
+        -webkit-transform: translateZ(-50px) rotateY(5deg);
+        -webkit-animation-timing-function: ease-out;
+    }
+    100% {
+        -webkit-transform: translateZ(-200px);
+    }
+}
+
+@-moz-keyframes rotateRightSideFirst {
+    50% {
+        -moz-transform: translateZ(-50px) rotateY(5deg);
+        -moz-animation-timing-function: ease-out;
+    }
+    100% {
+        -moz-transform: translateZ(-200px);
+    }
+}
+
+@keyframes rotateRightSideFirst {
+    50% {
+        transform: translateZ(-50px) rotateY(5deg);
+        animation-timing-function: ease-out;
+    }
+    100% {
+        transform: translateZ(-200px);
+    }
+}
+
+.md-effect-18 .md-content {
+    -webkit-transform: translateX(200%);
+    -moz-transform: translateX(200%);
+    -ms-transform: translateX(200%);
+    transform: translateX(200%);
+    opacity: 0;
+}
+
+.md-show.md-effect-18 .md-content {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+    -webkit-transition: all 0.5s 0.1s;
+    -moz-transition: all 0.5s 0.1s;
+    transition: all 0.5s 0.1s;
+}
+
+/* Effect 19:  Slip in from the top with perspective on container */
+.md-show.md-effect-19 ~ .container {
+    height: 100%;
+    overflow: hidden;
+}
+
+.md-show.md-effect-19 ~ .md-overlay {
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.md-show.md-effect-19 ~ .container,
+.md-show.md-effect-19 ~ .md-overlay {
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform-origin: 50% 100%;
+    -webkit-animation: OpenTop 0.5s forwards ease-in;
+    -moz-transform-style: preserve-3d;
+    -moz-transform-origin: 50% 100%;
+    -moz-animation: OpenTop 0.5s forwards ease-in;
+    transform-style: preserve-3d;
+    transform-origin: 50% 100%;
+    animation: OpenTop 0.5s forwards ease-in;
+}
+
+@-webkit-keyframes OpenTop {
+    50% {
+        -webkit-transform: rotateX(10deg);
+        -webkit-animation-timing-function: ease-out;
+    }
+}
+
+@-moz-keyframes OpenTop {
+    50% {
+        -moz-transform: rotateX(10deg);
+        -moz-animation-timing-function: ease-out;
+    }
+}
+
+@keyframes OpenTop {
+    50% {
+        transform: rotateX(10deg);
+        animation-timing-function: ease-out;
+    }
+}
+
+.md-effect-19 .md-content {
+    -webkit-transform: translateY(-200%);
+    -moz-transform: translateY(-200%);
+    -ms-transform: translateY(-200%);
+    transform: translateY(-200%);
+    opacity: 0;
+}
+
+.md-show.md-effect-19 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+    -webkit-transition: all 0.5s 0.1s;
+    -moz-transition: all 0.5s 0.1s;
+    transition: all 0.5s 0.1s;
+}
+
+@media screen and (max-width: 32em) {
+    body {
+        font-size: 75%;
+    }
+}
+
+.md-footer {
+    height: 70px;
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
+    text-align: right;
+}

static/css/style.css

@@ -21,7 +21,6 @@
 /* Selector point */
 #point-container .point {
     position: absolute;
-    background: red;
     width: 10px;
     height: 10px;
     border-radius: 50%;
@@ -32,3 +31,30 @@
 #point-container.start .point {
     display: inherit;
 }
+
+#point-container.start .point.stop, #point-container.start .point.selected {
+    animation: none;
+}
+
+#point-container.start .point div {
+    display: none;
+    position: relative;
+    width: 24px;
+    height: 24px;
+    margin: -7px 0 0 -7px;
+    z-index: 0;
+    border-radius: 50%;
+    border: 4px solid #1565C0
+}
+
+#point-container.start .point.selected div {
+    display: inherit;
+}
+
+#exercises-container div {
+    cursor: pointer;
+}
+
+#exercises-container div.selected {
+    cursor: pointer;
+}

static/js/javascript.js

@@ -1,30 +1,63 @@
 let pointConfig = [
     {
-        title: "Test",
+        title: "Shoulder",
         top: 45,
         left: 80,
     },
     {
-        title: "Test3",
+        title: "Biceps",
-        top: 125,
-        left: 53,
-    },
-    {
-        title: "Test4",
         top: 85,
         left: 170,
     },
     {
-        title: "Test5",
+        title: "Abs",
         top: 115,
         left: 121,
     },
+    {
+        title: "Quadriceps",
+        top: 200,
+        left: 146,
+    },
+    {
+        title: "Back",
+        top: 75,
+        left: 347,
+    },
+    {
+        title: "Shoulder",
+        second: "1",
+        top: 43,
+        left: 392,
+    },
+    {
+        title: "Buttocks",
+        top: 145,
+        left: 327,
+    },
+    {
+        title: "Triceps",
+        top: 76,
+        left: 300,
+    },
+    {
+        title: "Hamstrings",
+        top: 208,
+        left: 375,
+    },
 ];
 
 let Point = ( function () {
 
     let Point = function ( conf, callback ) {
         this.config = conf;
+        for ( let i = 0; i < this.config.length; i++ ) {
+            if ( this.config[ i ].second ) {
+                this.config[ i ].class = this.config[ i ].title.toLowerCase() + this.config[ i ].second;
+            } else {
+                this.config[ i ].class = this.config[ i ].title.toLowerCase();
+            }
+        }
         this.callback = callback;
         this.addSpecificCSS();
         this.adHtml();
@@ -38,15 +71,15 @@ let Point = ( function () {
 
         for ( let conf of this.config ) {
             css += `
-                .${ conf.title }-css {
+                .${ conf.class }-css {
-                    animation: ${ conf.title }-animation 1s linear 0s infinite normal none running;
+                    animation: ${ conf.class }-animation 1s linear 0s infinite normal none running;
                     top: ${ conf.top }px;
                     left: ${ conf.left }px;
                 }
-                .${ conf.title }-css.stop {
+                .${ conf.class }-css.stop {
                     animation: none;
                 }
-                @keyframes ${ conf.title }-animation {
+                @keyframes ${ conf.class }-animation {
                     0% {
                         width: 10px;
                         height: 10px;
@@ -79,16 +112,93 @@ let Point = ( function () {
         let html = ``;
 
         for ( let conf of this.config ) {
-            html += `<div class="blue darken-3 point ${ conf.title }-css ${ conf.noAnim ? "stop" : "" }"></div>`;
+            html += `<div data-name="${ conf.title.toLowerCase() }" title="${ conf.title }" class="blue darken-3 point ${ conf.class }-css${ conf.noAnim ? " stop" : "" }"><div></div></div>`;
         }
         container.append( html.replace( /  |\n/g, "" ) );
         this.callback( this );
     };
 
+    proto.listen = function () {
+        // Click on a point not selected
+        $( document ).on( "click", ".point:not(.selected)", ( elem ) => {
+            let $elem = $( elem.target );
+
+            $( ".point" ).each( ( i, e ) => {
+                let $e = $( e );
+
+                $e.removeClass( "selected" );
+            } );
+
+            $elem.addClass( "selected" );
+            $( "#exercise-title" ).text( $elem.attr( "title" ) );
+            $.ajax( {
+                url: "/api/muscles/get-list",
+                method: "POST",
+                data: {
+                    muscle: $elem.data( "name" )
+                },
+                success: function ( data ) {
+                    let c = $( "#exercises-container" );
+
+                    data = JSON.parse( data );
+                    localStorage.setItem( $elem.data( "name" ), data );
+                    c.empty();
+                    if ( data.length > 0 ) {
+                        for ( let exercise of data ) {
+                            c.append( `<div data-id="${ exercise.id }">${ exercise.title }</div>` );
+                        }
+                    } else {
+                        c.append( "<div>Please select a muscle</div>" );
+                    }
+                }
+            } );
+        } );
+
+        // Click on a point selected
+        $( document ).on( "click", ".point.selected", ( elem ) => {
+            let $elem = $( elem.currentTarget );
+            let c = $( "#exercises-container" );
+
+            $elem.removeClass( "selected" );
+            $( "#exercise-title" ).text( "Selected part of the body" );
+            c.html( "<div>Please select a muscle</div>" );
+        } );
+
+        // Click on an exercise
+        $( document ).on( "click", "#exercises-container div", ( elem ) => {
+            let $elem = $( elem.target );
+
+            if ( $elem.data( "id" ) ) {
+                $.ajax( {
+                    url: "/api/muscles/get-exercise",
+                    method: "POST",
+                    data: {
+                        id: $elem.data( "id" ),
+                    },
+                    success: function ( data ) {
+                        data = JSON.parse( data );
+                        let main = $( "#main-container" );
+
+                        main.html( `
+                                <h2>${ data.title }</h2>
+                                <div class="center-align">
+                                    <iframe width="560" height="315" src="${ data.video.replace( "https://youtu.be/", "https://www.youtube.com/embed/" ) }" frameborder="0"
+                                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                                            allowfullscreen></iframe>
+                                    <div class="exercise-info-container blue-grey lighten-4 left-align">${ ( data.description ? data.description : "" ) }</div>
+                                </div>
+                        ` );
+                    }
+                } );
+            }
+        } );
+    };
+
     proto.start = function () {
         let container = $( "#point-container" );
 
         container.addClass( "start" );
+        this.listen();
     };
 
     return Point;
@@ -96,6 +206,9 @@ let Point = ( function () {
 
 $( document ).ready( () => {
 
+    let userId = localStorage.getItem( "userId" );
+    let userName = localStorage.getItem( "userName" );
+
     $( ".dropdown-trigger" ).dropdown();
 
     let point;
@@ -105,4 +218,58 @@ $( document ).ready( () => {
         point.start();
     } );
 
+    if ( userId === null ) {
+        $.ajax( {
+            url: "/api/user/create",
+            method: "POST",
+            success: function ( data ) {
+                localStorage.setItem( "userId", data.id );
+                userId = data.id;
+            }, error: function () {
+            }
+        } );
+    }
+    if ( userName !== null ) {
+        $( "a[data-target=user]" ).html( userName + `<i class="material-icons right">arrow_drop_down</i>` );
+    }
+
+    $( document ).on( "click", "#change-name", function () {
+        let modal = $( "#modal" );
+
+        modal.find( ".md-title" ).text( "Change Your Name" );
+        modal.find( ".md-container" ).html( `
+            <div class="row">
+                <div class="input-field col s12">
+                    <input id="name" type="text" class="validate" value="${ userName !== null ? userName : "" }">
+                    <label for="name" ${ userName !== null ? `class="active"` : "" }>Your Name</label>
+                </div>
+            </div>
+        ` );
+
+        modal.find( "#md-validate" ).click( () => {
+            $.ajax( {
+                url: "/api/user/modify",
+                method: "POST",
+                data: {
+                    "user_id": userId,
+                    "name": $( "#name" ).val()
+                },
+                success: function ( data ) {
+                    localStorage.setItem( "userId", data.is );
+                    localStorage.setItem( "userName", data.name );
+                    $( "a[data-target=user]" ).html( data.name + `<i class="material-icons right">arrow_drop_down</i>` );
+                    modal.removeClass( "md-show" );
+                    modal.find( "md-title" ).empty();
+                    modal.find( ".md-container" ).empty();
+                },
+            } );
+        } );
+        modal.find( "#md-cancel" ).click( () => {
+            modal.removeClass( "md-show" );
+            modal.find( "md-title" ).empty();
+            modal.find( ".md-container" ).empty();
+        } );
+        modal.addClass( "md-show" );
+    } );
+
 } );