Add robots.txt
Rename for case sensitive Optimize search engine Remove useless options htaccess Add Modal Add delete, add contact
This commit is contained in:
@@ -12,10 +12,10 @@ date_default_timezone_set( 'Europe/Paris' );
|
||||
setlocale( LC_TIME, "fr_FR.UTF-8" );
|
||||
error_reporting( E_ALL );
|
||||
|
||||
require( 'src/lib/functions.php' );
|
||||
require( 'src/config.php' );
|
||||
require( "src/lib/functions.php" );
|
||||
require( "src/Config.php" );
|
||||
|
||||
require 'src/Autoloader.php';
|
||||
require( "src/Autoloader.php" );
|
||||
Autoloader::register();
|
||||
|
||||
new BDD();
|
||||
|
||||
2
robots.txt
Normal file
2
robots.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
@@ -172,7 +172,7 @@ class APIContact extends API {
|
||||
}
|
||||
|
||||
public function search( array $data ) {
|
||||
if ( count_chars( $data[ "query" ] ) >= 3 ) {
|
||||
if ( count_chars( $data[ "query" ] ) >= 2 ) {
|
||||
$result = Contact::search( $data[ "query" ] );
|
||||
if ( $result !== null ) {
|
||||
$this->returnJson( [
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
namespace CAUProject3Contact;
|
||||
|
||||
class Config {
|
||||
const SITE_JS_VERSION = '0.01';
|
||||
const SITE_CSS_VERSION = '0.01';
|
||||
const SITE_JS_VERSION = '0.02';
|
||||
const SITE_CSS_VERSION = '0.02';
|
||||
|
||||
const TITLE_HEADER = 'Your contact';
|
||||
const DESCRIPTION_HEADER = 'Manage your contact easly';
|
||||
|
||||
@@ -8,16 +8,16 @@ use PDO;
|
||||
class BDD {
|
||||
|
||||
// Server BDD
|
||||
// const SQL_SERVER = 'sql.sanchez-mathieu.fr'; // BDD Server
|
||||
// const SQL_LOGIN = 'why7n0_contact'; // BDD Login
|
||||
// const SQL_PASSWORD = 'fC3c87Gy'; // BDD Password
|
||||
// const SQL_DB = 'why7n0_contact'; // BDD Name
|
||||
const SQL_SERVER = 'sql.sanchez-mathieu.fr'; // BDD Server
|
||||
const SQL_LOGIN = 'why7n0_contact'; // BDD Login
|
||||
const SQL_PASSWORD = 'fC3c87Gy'; // BDD Password
|
||||
const SQL_DB = 'why7n0_contact'; // BDD Name
|
||||
|
||||
// Local BDD
|
||||
const SQL_SERVER = 'localhost'; // BDD Server
|
||||
const SQL_LOGIN = 'root'; // BDD Login
|
||||
const SQL_PASSWORD = ''; // BDD Password
|
||||
const SQL_DB = 'contact'; // BDD Name
|
||||
// const SQL_SERVER = 'localhost'; // BDD Server
|
||||
// const SQL_LOGIN = 'root'; // BDD Login
|
||||
// const SQL_PASSWORD = ''; // BDD Password
|
||||
// const SQL_DB = 'contact'; // BDD Name
|
||||
|
||||
private static $bdd;
|
||||
|
||||
|
||||
@@ -93,7 +93,7 @@ class Contact {
|
||||
$lastKey = endKey( $words );
|
||||
foreach ( $words as $key => $word ) {
|
||||
$normal = self::getQuerySearch( $word, [ "first_name", "last_name", "surname" ] );;
|
||||
$hard = self::getQuerySearch( $word, [ "email", "address", "phone_number" ] );
|
||||
$hard = self::getQuerySearch( $word, [ "email", "address", "phone_number", "birthday" ] );
|
||||
$q1 .= $normal;
|
||||
$q2 .= $normal;
|
||||
$q3 .= $hard;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12 main-container">
|
||||
<table class="highlight centered">
|
||||
<table class="highlight centered responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
@@ -12,12 +12,13 @@
|
||||
<th>Address</th>
|
||||
<th>Phone Number</th>
|
||||
<th>Birthday</th>
|
||||
<th colspan="2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
foreach ( $contacts as $contact ) {
|
||||
echo "<tr>";
|
||||
echo "<tr data-id='" . $contact->getId() . "'>";
|
||||
echo " <td>" . $contact->getFirstName() . "</td>";
|
||||
echo " <td>" . $contact->getLastName() . "</td>";
|
||||
echo " <td>" . ( $contact->getSurname() ? $contact->getSurname() : "" ) . "</td>";
|
||||
@@ -25,6 +26,8 @@
|
||||
echo " <td>" . ( $contact->getAddress() ? $contact->getAddress() : "" ) . "</td>";
|
||||
echo " <td>" . ( $contact->getPhoneNumber() ? $contact->getPhoneNumber() : "" ) . "</td>";
|
||||
echo " <td>" . ( $contact->getBirthday() ? date( "Y-m-d", strtotime( $contact->getBirthday() ) ) : "" ) . "</td>";
|
||||
echo " <td><i class=\"material-icons left modify\">create</i></td>";
|
||||
echo " <td><i class=\"material-icons left delete\">delete</i></td>";
|
||||
echo "</tr>";
|
||||
}
|
||||
?>
|
||||
|
||||
@@ -1,16 +1,55 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="modal" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4>Add new contact</h4>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="waves-effect waves-green btn-flat">Validate</a>
|
||||
<a class="waves-effect waves-red btn-flat">Cancel</a>
|
||||
<div id="modal" class="md-modal">
|
||||
<div class="md-content">
|
||||
|
||||
<h3 class="md-header">Add contact</h3>
|
||||
|
||||
<div class="md-container row">
|
||||
<form class="col s12">
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<input id="first_name" type="text" class="validate" required>
|
||||
<label for="first_name">First Name*</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="last_name" type="text" class="validate" required>
|
||||
<label for="last_name">Last Name*</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="surname" type="text" class="validate">
|
||||
<label for="surname">Surname</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="email" type="email" class="validate">
|
||||
<label for="email">Email</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="address" type="text" class="validate">
|
||||
<label for="address">Address</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="phone_number" type="tel" class="validate">
|
||||
<label for="phone_number">Phone Number</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="birthday" type="date" class="validate">
|
||||
<label for="birthday">Birthday</label>
|
||||
</div>
|
||||
<div class="col s12 mandatory">* fields mandatory</div>
|
||||
</div>
|
||||
</form>
|
||||
</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 blue">
|
||||
<div class="footer-copyright">
|
||||
@@ -21,12 +60,12 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/js/jquery-3.3.1.min.js"></script>
|
||||
<script async src="/js/materialize.min.js"></script>
|
||||
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="/js/materialize.min.js"></script>
|
||||
|
||||
<script async src="/js/javascript.js?v=<?= CAUProject3Contact\Config::SITE_JS_VERSION ?>"></script>
|
||||
<script async type="text/javascript"
|
||||
src="/js/javascript.js?v=<?= CAUProject3Contact\Config::SITE_JS_VERSION ?>"></script>
|
||||
|
||||
<link href="/css/materialize.min.css" rel="stylesheet">
|
||||
<link href="/css/style.css?v=<?= CAUProject3Contact\Config::SITE_CSS_VERSION ?>" rel="stylesheet">
|
||||
|
||||
</body>
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
content="https://<?= $_SERVER[ 'SERVER_NAME' ] . \CAUProject3Contact\Config::FAVICON_PATH ?>"/>
|
||||
<!-- <meta property="fb:app_id" content="1000452166691027" /> -->
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<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'>
|
||||
|
||||
@@ -32,6 +34,10 @@
|
||||
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link type="text/css" rel="stylesheet" href="/css/materialize.min.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="/css/modal.css">
|
||||
|
||||
<?php if ( isset( $this->head[ 'robotNoIndex' ] ) && $this->head[ 'robotNoIndex' ] == true ) { ?>
|
||||
<meta name="robots" content="noindex"/>
|
||||
<?php } ?>
|
||||
|
||||
767
static/css/modal.css
Normal file
767
static/css/modal.css
Normal file
@@ -0,0 +1,767 @@
|
||||
/* 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%;
|
||||
}
|
||||
}
|
||||
@@ -34,4 +34,22 @@ img.add-contacts {
|
||||
|
||||
#search:focus {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.md-footer {
|
||||
height: 70px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mandatory {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
nav ul a.nav-search:hover {
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.delete, .modify {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -6,7 +6,7 @@ let displayContacts = (contacts) => {
|
||||
|
||||
for (let contact of contacts) {
|
||||
tbody.append(`
|
||||
<tr>
|
||||
<tr data-id="${contact["id"]}">
|
||||
<td>${(contact["first_name"] ? contact["first_name"] : (contact["firstName"] ? contact["firstName"] : ""))}</td>
|
||||
<td>${(contact["last_name"] ? contact["last_name"] : (contact["lastName"] ? contact["lastName"] : ""))}</td>
|
||||
<td>${(contact["surname"] ? contact["surname"] : "")}</td>
|
||||
@@ -14,6 +14,8 @@ let displayContacts = (contacts) => {
|
||||
<td>${(contact["address"] ? contact["address"] : "")}</td>
|
||||
<td>${(contact["phone_number"] ? contact["phone_number"] : (contact["phoneNumber"] ? contact["phoneNumber"] : ""))}</td>
|
||||
<td>${(contact["birthday"] ? new Date(contact["birthday"]).toLocaleDateString() : "")}</td>
|
||||
<td><i class="material-icons left modify">create</i></td>
|
||||
<td><i class="material-icons left delete">delete</i></td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
@@ -26,7 +28,7 @@ $(document).ready(() => {
|
||||
modal.modal();
|
||||
|
||||
let search = (query) => {
|
||||
if (query.length >= 3) {
|
||||
if (query.length >= 2) {
|
||||
working = true;
|
||||
$.ajax({
|
||||
url: "/api/contact/search",
|
||||
@@ -60,15 +62,85 @@ $(document).ready(() => {
|
||||
|
||||
if (!working) {
|
||||
search(query);
|
||||
} else {
|
||||
lastQuery = query;
|
||||
} else {
|
||||
let i = setInterval(() => {
|
||||
let newQuery = $("#search").val();
|
||||
|
||||
if (newQuery !== query) {
|
||||
clearInterval(i);
|
||||
} else {
|
||||
if (!working) {
|
||||
search(query);
|
||||
lastQuery = query;
|
||||
clearInterval(i);
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("click", ".add-contacts", () => {
|
||||
modal.open();
|
||||
$("#modal").addClass("md-show");
|
||||
});
|
||||
|
||||
$("[data-tooltip]").tooltip();
|
||||
$(document).on("click", "#md-cancel", () => {
|
||||
$("#modal").removeClass("md-show");
|
||||
});
|
||||
|
||||
$(document).on("click", "#md-validate", () => {
|
||||
let firstName = $("#first_name").val();
|
||||
let lastName = $("#last_name").val();
|
||||
let surname = $("#surname").val();
|
||||
let email = $("#email").val();
|
||||
let address = $("#address").val();
|
||||
let phoneNumber = $("#phone_number").val();
|
||||
let birthday = $("#birthday").val();
|
||||
|
||||
if (firstName !== "" && lastName !== "") {
|
||||
let data = {
|
||||
firstName,
|
||||
lastName,
|
||||
surname: (surname !== "" ? surname : null),
|
||||
email: (email !== "" ? email : null),
|
||||
address: (address !== "" ? address : null),
|
||||
phoneNumber: (phoneNumber !== "" ? phoneNumber : null),
|
||||
birthday: (birthday !== "" ? birthday : null),
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: "/api/contact/insert",
|
||||
method: "POST",
|
||||
data,
|
||||
success: function (result) {
|
||||
result = JSON.parse(result);
|
||||
data["id"] = parseInt(result.data["id"], 10);
|
||||
contacts.push(data);
|
||||
|
||||
$("table tbody").empty();
|
||||
displayContacts(contacts);
|
||||
$("#modal").removeClass("md-show");
|
||||
}, error: function () {
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("click", ".delete", function () {
|
||||
let $contact = $(this).closest("tr");
|
||||
let id = parseInt($contact.attr("data-id"), 10);
|
||||
|
||||
$.ajax({
|
||||
url: "/api/contact/delete",
|
||||
method: "POST",
|
||||
data: {
|
||||
id
|
||||
},
|
||||
success: function () {
|
||||
contacts = contacts.filter((c) => c.id !== id);
|
||||
$contact.remove();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user