mathieu/CAU-Web-Fall-2018-Project-1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Work in part

Browse Source
This commit is contained in:
Mathieu Sanchez 2018-12-15 14:50:08 +09:00
parent 46be9eb7f4
commit 2a1c7da008
10 changed files with 1091 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/API/APIMuscles.php Normal file
View File

@ -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() ) );
}
}

66
src/API/APIUser.php
View File

@ -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,68 +103,58 @@ class APIUser extends API
]
]
]
];
public function __construct()
{
parent::__construct($this->declaredFunctions);
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, [
$id = substr( $id, 0, 6 );
Model::insert( BDTables::USER, [
"name" => "",
"user_id" => $id
]);
$this->returnJson(['id' => $id]);
] );
$this->returnJson( [ 'id' => $id ] );
}
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']]);
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)
{
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 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)
{
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']]);
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)
{
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 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)
{
Model::delete(BDTables::TRAINING, ['id_user' => $data['id_user'], 'id_exercise' => $data['id_exercise'], 'id_order' => $data['id_order']]);
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']]);
$this->returnJson( [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ], 'id_order' => $data[ 'id_order' ] ] );
}
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']);
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']]);
$this->returnJson( [ 'id_user' => $data[ 'id_user' ], 'id_exercise' => $data[ 'id_exercise' ], 'id_order' => $data[ 'id_order' ], 'new_order' => $data[ 'new_order' ] ] );
}
}

1
src/Model/BDTables.php
View File

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

4
src/Model/Model.php
View File

@ -46,7 +46,7 @@ class Model {
$req->execute( $data );
}
public static function delete (string $tableName, array $data){
public static function delete( string $tableName, array $data ) {
$reqStr = 'DELETE FROM ' . $tableName . ' WHERE ';
$lastKey = endKey( $data );
foreach ( $data as $key => $value ) {
@ -63,7 +63,7 @@ class Model {
}
public static function update_order( string $tableName, array $data, string $newOrder) {
public static function update_order( string $tableName, array $data, string $newOrder ) {
$reqStr = 'UPDATE ' . $tableName . ' SET id_order = :newOrder WHERE ';
$lastKey = endKey( $data );
foreach ( $data as $key => $value ) {

17
src/View/Site/Index.php
View File

@ -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>Please select a muscle</div>
<div id="exercises-container">
<div>Please select a muscle</div>
</div>
</div>
</div>
</div>
</div>
<div class="col l9 m8 s6">
<div class="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 class="container" id="main-container">
</div>
</div>
</div>

18
src/View/Site/tpl/footer.php
View File

@ -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">

5
src/View/Site/tpl/head.php
View File

@ -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>

773
static/css/modal.css Normal file
View File

@ -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;
}

30
static/css/style.css
View File

@ -21,7 +21,6 @@
/* Selector point */
#point-container .point {
position: absolute;
background: red;
width: 10px;
height: 10px;
border-radius: 50%;
@ -31,4 +30,31 @@
#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;
}

193
static/js/javascript.js
View File

@ -1,30 +1,63 @@
let pointConfig = [
{
title: "Test",
title: "Shoulder",
top: 45,
left: 80,
},
{
title: "Test3",
top: 125,
left: 53,
},
{
title: "Test4",
title: "Biceps",
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 {
animation: ${ conf.title }-animation 1s linear 0s infinite normal none running;
.${ conf.class }-css {
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" );
} );
} );