Work done by Andreas Burburan

Andreas Burburan <andreas dot burburan at adaptcentre.ie>
as part of internship at ADAPT Centre, Trinity College Dublin.

.gitignore

@@ -0,0 +1,9 @@
+php/config.php
+php/phpmailer
+canvas/mpdf
+canvas/json
+canvas/saved-pdf
+canvas/1.7/mpdf
+canvas/1.7/json
+canvas/1.7/saved-pdf
+icon

canvas/1.7/css/canvas.css

@@ -0,0 +1,879 @@
+* {
+    font-family: 'Open Sans', sans-serif;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+html, body {
+    height: 100%;
+}
+p {
+    font-size: 0.95em;
+}
+pre {
+    border: none;
+    background-color: #eceff1;
+    visibility: hidden;
+}
+
+/*-------------------------------
+           LOGO
+ --------------------------------*/
+
+a.logo {
+    display: block;
+}
+a.logo img {
+    display: block;
+    width: 60%;
+    margin: auto;
+}
+
+/* ------------------------------
+        Form header
+ ------------------------------ */
+
+.form-header {
+    width: 100%;
+    margin: 0 auto 2.14em auto;
+    /*background-color:#546e7a;*/
+    background-color: #eceff1;
+    border-radius: 0 0 5px 5px;
+    min-height: 6em;
+}
+.form-header h1 {
+    color: #444;
+    font-size: 1.9em;
+    text-align: left;
+}
+.form-header h2 {
+    font-size: 1.4em;
+    color: #444;
+}
+.form-header p {
+    font-size: 0.9em;
+    margin-top: 1em;
+    color: #444;
+}
+.form-header label {
+    font-size: 1.1em;
+    margin-top: 1.8em;
+    margin-right: 0.3em;
+    color: #444;
+}
+.form-header input {
+    width: 62%;
+    outline: none;
+    border: 1px solid #eceff1;
+    border-radius: 4px;
+    padding: 0.45em;
+}
+
+/*----------------------------------
+   DROPDOWN MENU (User DASHBORD menu)
+ -----------------------------------*/
+
+
+/*User area button and dropdown menu in the header :
+  only shown when logged in*/
+
+.form-header .user-profile {
+    font-size: 1em;
+    margin-top: 1.8em;
+    margin-right: 0.3em;
+    color: #444;
+    min-width: 80%;
+    margin-left: 3.5em;
+}
+.form-header .user-profile img {
+    width: 2.6em;
+    margin-right: 0.5em;
+}
+.form-header .user-profile button {
+    padding: 0.2em 1em;
+    width: 90%;
+    border: none;
+    border-radius: 2px;
+    outline: 0;
+    background-color: transparent;
+    transition: all 0.5s;
+}
+.form-header .user-profile button:hover {
+    padding: 0.2em;
+    background-color: #fff;
+}
+
+/*Boortstrap dropdown classes*/
+
+ul.dropdown-menu {
+    border: none;
+    border-radius: 2px;
+    width: 90%;
+    margin: 0 5%;
+    box-shadow: none;
+    background-color: #48585f;
+}
+ul.dropdown-menu a {
+    color: #fff;
+}
+
+/*The button When the drop down menu is open*/
+
+.dropdown.open button#dropdownMenu1 {
+    background-color: #fff;
+}
+
+/* ------------------------------
+        Masonry Blocks
+ ------------------------------ */
+
+.masonry-layout8-5 {
+    -webkit-column-count: 5;
+    /* Chrome, Safari, Opera */
+    -moz-column-count: 5;
+    /* Firefox */
+    column-count: 5;
+    -webkit-column-gap: 0;
+    /* Chrome, Safari, Opera */
+    -moz-column-gap: 0;
+    /* Firefox */
+    column-gap: 0;
+}
+.masonry-layout4 {
+    -webkit-column-count: 4;
+    /* Chrome, Safari, Opera */
+    -moz-column-count: 4;
+    /* Firefox */
+    column-count: 4;
+    -webkit-column-gap: 0;
+    /* Chrome, Safari, Opera */
+    -moz-column-gap: 0;
+    /* Firefox */
+    column-gap: 0;
+}
+.masonry-layout__panel {
+    break-inside: avoid;
+    padding: 0.36em;
+}
+.masonry-layout__panel-content {
+    padding: 5px 4px;
+    border-radius: 10px;
+}
+
+/* ---------------------------------
+    Field Content & Items
+ ----------------------------------- */
+
+
+/*The field introduction text*/
+
+.intro {
+    padding: 1em 1.3em 0 1.3em;
+    color: rgba(0, 0, 0, 0.6);
+    font-style: italic;
+}
+
+/*The description text toggler btn*/
+
+.intro-toggle {
+    padding: 0.25em 1.2em;
+    border: none;
+    outline: none;
+    background-color: transparent;
+}
+
+/*the show/hide text bootstrap glyphicon icon*/
+
+.intro-toggle-icon {
+    padding: 0.4em;
+    font-size: 1em;
+}
+.field-title {
+    font-size: 1.4em;
+    margin-left: 0.8em;
+    line-height: 1.5;
+}
+
+/*Item list in the field*/
+
+ul.item_list {
+    list-style-type: none;
+    padding-left: 0;
+    width: 100%;
+    /*to make a place holder for empty lists.
+   Being able to drop cards in empty fields*/
+    min-height: 4em;
+}
+li.added_item {
+    width: 100%;
+    margin: 0.5em auto;
+    height: auto;
+    overflow: visible;
+    cursor: move;
+}
+ul.item_list textarea {
+    font-size: 0.95em;
+    padding: 0.5em 0.5em 0.5em 1em;
+    border-radius: 0.35em;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    width: 87%;
+    max-width: 87%;
+    outline: none;
+    background-color: rgba(255, 255, 255, 0.6);
+    /*for auto expantion jQuery code*/
+    box-sizing: padding-box;
+    overflow: hidden;
+}
+
+/* -----------------------------------------
+   List item handles : bootstrap glyphicon
+  -----------------------------------------*/
+
+span.handle {
+    position: relative;
+    /* Neccessary for handle in sortable to work*/
+    top: -3em;
+    right: -0.18em;
+    color: #fff;
+    font-size: 1.2em;
+    cursor: move;
+}
+
+/* the remove icon for each item*/
+
+span.remove {
+    top: -50px;
+    right: 0px;
+    margin-right: -22px;
+    font-size: 1.2em;
+    font-weight: 400;
+    color: #fff;
+    border-radius: 100%;
+    cursor: auto;
+}
+span.remove:hover {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+/* Placeholder for sorting items*/
+
+.sort-placeholder {
+    border-radius: 0.35em;
+    background-color: rgba(40, 40, 40, 0.35);
+    width: 85%;
+    height: 2.5em;
+    padding: 0.5em 0.5em;
+    margin-left: 1em;
+}
+
+/* -----------------------------------
+    USER INPUT:
+    Add new items in each field
+   ----------------------------------- */
+
+.user-input {
+    width: 100%;
+    margin-left: 1em;
+    margin-top: 2em;
+    padding-bottom: 1.5em;
+    display: none;
+    /* Shown (slide up and down) by jQuery when adding ideas*/
+}
+
+/*The div containing all the user input things*/
+
+.add_box {
+    /*make room for the absolutely positioned div at the buttom each card
+  always keeping a distance from the buttom of the card (as high as the height of the absolutely positined icon div + some distance)*/
+    padding-bottom: 5.3em;
+}
+
+/*Ad an idea link*/
+
+a.add-idea {
+    color: #fff;
+    margin-left: 1em;
+    margin-top: 2em;
+    padding: 1em 1em 1em 2em;
+    background-image: url('../icons/lamp.svg');
+    background-size: 1.4em;
+    background-position: left;
+    background-repeat: no-repeat;
+}
+
+/*textarea of a new item input*/
+
+textarea.new_item {
+    width: 90%;
+    border: 1px solid #fff;
+    border-radius: 0.35em;
+    outline: none;
+    padding-left: 0.5em;
+    /*for auto expantion jQuery code*/
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+/*The add button*/
+
+.add_btn {
+    background-color: transparent;
+    color: #fff;
+    padding: 0.25em 1.2em;
+    border: 0.12em solid #fff;
+    border-radius: 0.5em;
+}
+.add_btn:hover {
+    color: #222;
+    border-color: #222;
+}
+textarea.expandable {
+    box-sizing: border-box;
+    /*remove the user resizing for the text fields*/
+    resize: none;
+}
+span.chars {
+    font-size: 1.1em;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* ----------------------------------------
+           FIELD ID ICONS
+  -----------------------------------------*/
+
+
+/*  Background images for each field (field icons)*/
+
+.field_01 {
+    background-image: url('../icons/field1.svg');
+}
+.field_02 {
+    background-image: url('../icons/field2.svg');
+}
+.field_03 {
+    background-image: url('../icons/field3.svg');
+}
+.field_04 {
+    background-image: url('../icons/field4.svg');
+}
+.field_05 {
+    background-image: url('../icons/field5.svg');
+}
+.field_06 {
+    background-image: url('../icons/field6.svg');
+}
+.field_07 {
+    background-image: url('../icons/field7.svg');
+}
+.field_08 {
+    background-image: url('../icons/field8.svg');
+}
+.field_09 {
+    background-image: url('../icons/field9.svg');
+}
+.field_10 {
+    background-image: url('../icons/field10.svg');
+}
+.field_11 {
+    background-image: url('../icons/field11.svg');
+}
+.field_12 {
+    background-image: url('../icons/field12.svg');
+}
+
+/*general background options for all fields*/
+
+.field_01, .field_02, .field_03, .field_04, .field_05, .field_06, .field_07, .field_08, .field_09, .field_10, .field_11, .field_12 {
+    /*make the svg images cover the whole width*/
+    background-size: 106%;
+    background-position: 100% 100%;
+    /*background-position:bottom left;*/
+    background-repeat: no-repeat;
+}
+
+/* ---------------------------------
+     FORM Import & Export buttons
+  ----------------------------------- */
+
+.imp-exp-btn {
+    margin-top: 2.5em;
+}
+button.json_exp, button.share_canvas, .pdf_exp {
+    border: none;
+    border-radius: 0.5em;
+    padding: 1em 0;
+    width: 60%;
+    outline: none;
+}
+button.json_exp:hover, button.share_canvas:hover, .pdf_exp:hover {
+    opacity: 0.6;
+}
+button.json_exp {
+    background-color: #aed581;
+    margin: 1em auto 0 auto;
+}
+button.share_canvas {
+    background-color: #a67de0;
+    margin: 0.5em auto 0.4em auto;
+}
+.pdf_exp {
+    background-color: #85ade5;
+    margin: 0.5em auto 0.4em auto;
+}
+
+/*the sign up or login to save link for unregistered users*/
+
+a.login-to-save {
+    display: block;
+    padding: 1em;
+    color: #444;
+    border: none;
+    border-radius: 0.5em;
+    padding: 1em 0;
+    width: 60%;
+    outline: none;
+    margin: 1em auto 0 auto;
+    background-color: #aed581;
+}
+
+/*The save canvas php under the save/export buttons*/
+
+.save-canvas-feedback p {
+    text-align: center;
+    color: #15af97;
+}
+.save-canvas-feedback span {
+    color: #15af97;
+    margin-right: 0.4em;
+}
+.save-canvas-feedback-fail p {
+    text-align: center;
+    color: #37474f;
+}
+.save-canvas-feedback-fail span {
+    color: #37474f;
+    margin-right: 0.4em;
+}
+/*SHARING THE CANVAS*/
+/*share canvas button*/
+.share_canvas{
+
+}
+.share_canvas_email{
+  display:none;
+}
+.share_canvas_email input{
+  width:80%;
+  padding:1em;
+  border-radius:5px;
+  border:1px solid #444;
+
+}
+.share_canvas_email input:focus{
+outline :none;
+}
+/*the send btn*/
+.share_canvas_send{
+  border: none;
+  border-radius: 0.5em;
+  padding: 1em 0;
+  width: 25%;
+  outline: none;
+  background-color:#546e7a;
+  color:#fff;
+}
+/* ------------------------------
+        Footer
+ ------------------------------ */
+
+footer {
+    font-size: 1em;
+    margin-top: 2em;
+    padding: 1.5em;
+    background-color: #37474f;
+    color: white;
+}
+footer .license a {
+    color: #759BCF;
+}
+footer .license {
+    margin: 0.5em auto 1.8em auto;
+}
+footer .contact p {
+    color: #18AE90;
+}
+footer .contact h2 {
+    color: #6bb5b4;
+}
+footer p.ethics-copy.terms, footer p.ethics-copy.privacy {
+    text-decoration: none;
+    padding: 0 0.5em;
+    display: inline-block;
+}
+footer p.cc {
+    margin-top: 2.8em;
+}
+footer p.terms, footer p.privacy {
+    margin: 1.9em auto;
+}
+footer .privacy a {
+    color: #a67de0;
+}
+footer .terms a {
+    color: #aed581;
+}
+
+/*footer license icons */
+
+footer .license-icons ul {
+    list-style-type: none;
+    margin-left: 0;
+    padding-left: 0;
+}
+footer .license-icons li {
+    display: inline-block;
+    margin: 1.2em 0.2em;
+}
+footer .license-icons ul img {
+    width: 3.5em;
+}
+
+/* ------------------------------
+        Masonry Colors (ADAPT)
+ ------------------------------ */
+
+.bg--blue {
+    background-color: #7297ce;
+    background-color: #85ade5;
+}
+.bg--darkblue {
+    background-color: #7986cb;
+    background-color: #8b99e0;
+}
+.bg--green {
+    /*background-color: #94c356;
+    background-color: #9dc963;*/
+    background-color: #aed581;
+}
+.bg--seagreen {
+    /*background-color: #48D1CC;*/
+    background-color: #6bb5b4;
+}
+.bg--purple {
+    /*background-color: #59358c;*/
+    background-color: #a281d1;
+}
+.bg--green1 {
+    /*background-color: #15af97;*/
+    background-color: #29bca4;
+}
+.bg--x {
+    background-color: #ce93d8;
+}
+.bg--mineral {
+    background-color: #607d8b;
+}
+
+/* =================================================
+           MEDIA QUERIES
+ ==================================================*/
+
+
+/* ----------------- 1 COL ------------------  */
+
+@media (max-width: 499px) {
+    .masonry-layout8-5 {
+        column-count: 1;
+        column-gap: 0;
+    }
+    .masonry-layout4 {
+        column-count: 1;
+        column-gap: 0;
+    }
+    /*Adjust the height of culumns to maintain the layout*/
+    .field_01, .field_06, .field_12, .field_08 {
+        min-height: 250px;
+    }
+    .field_05, .field_11, .field_07, .field_02 {
+        min-height: 250px;
+    }
+    .field_03, .field_09, .field_10, .field_04 {
+        min-height: 250px;
+    }
+    /* Form Header */
+    .form-header {
+        width: 100%;
+        padding-bottom: 2em;
+    }
+    .form-header h1 {
+        margin-bottom: 1em;
+    }
+    .form-header label {
+        margin-top: 0.6em;
+        display: block;
+        text-align: left;
+    }
+    .form-header input {
+        width: 95%;
+        display: block;
+    }
+    .form-header p {
+        margin-top: 1.85em;
+    }
+    /*User area button and dropdown menu in the header :
+     only shown when logged in*/
+    .form-header .user-profile {
+        margin-left: 0;
+        width: 95%;
+    }
+    /*The button When the drop down menu is open*/
+    .dropdown button#dropdownMenu1 {
+        width: 100%;
+        margin: auto;
+    }
+    /*Boortstrap dropdown classes*/
+    ul.dropdown-menu {
+        margin-left: 0;
+        width: 100%;
+        margin: auto;
+    }
+}
+
+/* ----------------- 2 COL ------------------  */
+
+@media (min-width: 500px) and (max-width: 934px) {
+    .masonry-layout8-5 {
+        column-count: 2;
+        column-gap: 0;
+    }
+    .masonry-layout4 {
+        column-count: 2;
+        column-gap: 0;
+    }
+    /*Adjust the height of culumns to maintain the layout*/
+    .field_01, .field_06, .field_12, .field_08 {
+        min-height: 460px;
+    }
+    .field_05, .field_11, .field_07, .field_02 {
+        min-height: 460px;
+    }
+    .field_03, .field_09, .field_10, .field_04 {
+        min-height: 460px;
+    }
+    /* Form Header */
+    .form-header {
+        width: 100%;
+    }
+    .form-header h1 {
+        text-align: center;
+    }
+    .form-header label {
+        margin-top: 1.8em;
+        display: block;
+        text-align: center;
+    }
+    .form-header input {
+        width: 50%;
+        display: block;
+        margin: auto;
+    }
+    .form-header p {
+        margin-top: 1.85em;
+    }
+    a.logo img {
+        display: block;
+        width: 40%;
+        margin: auto;
+    }
+    /*User area button and dropdown menu in the header :
+     only shown when logged in*/
+    .form-header .user-profile {
+        margin-left: 0;
+        width: 50%;
+        margin: 2em auto;
+    }
+    /*The button When the drop down menu is open*/
+    .dropdown button#dropdownMenu1 {
+        width: 60%;
+        margin: 0 20%;
+    }
+    /*Boortstrap dropdown classes*/
+    ul.dropdown-menu {
+        margin-left: 0;
+        width: 60%;
+        margin: 0 20%;
+    }
+}
+@media (min-width: 502px)and (max-width: 708px) {
+    /*adjusting textarea heights*/
+    .added_item textarea {
+        height: 8em;
+        /*background-color:orange;*/
+    }
+}
+
+/* ----------------- 4 COL Smaller------------------- */
+
+@media (min-width: 935px) and (max-width: 991px) {
+    .masonry-layout8-5 {
+        column-count: 4;
+        column-gap: 0;
+    }
+    .masonry-layout4 {
+        column-count: 4;
+        column-gap: 0;
+    }
+    /*Adjust the height of culumns to maintain the layout*/
+    .field_01, .field_06, .field_12, .field_08 {
+        min-height: 500px;
+    }
+    .field_05, .field_11, .field_07, .field_02 {
+        min-height: 500px;
+    }
+    .field_03, .field_09, .field_10, .field_04 {
+        min-height: 500px;
+    }
+    /* Form Header */
+    .form-header {
+        width: 100%;
+    }
+    .form-header h1 {
+        text-align: center;
+    }
+    .form-header label {
+        margin-top: 1.8em;
+        display: block;
+        text-align: center;
+    }
+    .form-header input {
+        width: 50%;
+        display: block;
+        margin: auto;
+    }
+    .form-header p {
+        margin-top: 1.85em;
+    }
+    /*User area button and dropdown menu in the header :
+     only shown when logged in*/
+    .form-header .user-profile {
+        margin-left: 0;
+        width: 60%;
+        margin: 2em auto;
+        transition: all 0.4s;
+    }
+    /*The button When the drop down menu is open*/
+    .dropdown button#dropdownMenu1 {
+        width: 62%;
+        margin: 0 18%;
+    }
+    /*Boortstrap dropdown classes*/
+    ul.dropdown-menu {
+        margin-left: 0;
+        width: 62%;
+        margin: 0 18%;
+    }
+}
+@media (min-width: 935px) and (max-width: 1153px) {
+    /*adjusting textarea heights*/
+    .added_item textarea {
+        height: 8.6em;
+        /*background-color:seagreen;*/
+    }
+}
+
+/* ------------   COL 4 Large ----------------  */
+
+@media (min-width: 992px) and (max-width: 1153px) {
+    .masonry-layout8-5 {
+        column-count: 4;
+        column-gap: 0;
+    }
+    .masonry-layout4 {
+        column-count: 4;
+        column-gap: 0;
+    }
+    /*DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM*/
+    /*Adjust the height of culumns to maintain the layout*/
+    .field_01, .field_06, .field_12, .field_08 {
+        min-height: 480px;
+    }
+    .field_05, .field_11, .field_07, .field_02 {
+        min-height: 480px;
+    }
+    .field_03, .field_09, .field_10, .field_04 {
+        min-height: 480px;
+    }
+    /* Form Header */
+    .form-header {
+        width: 100%;
+        min-height: 8em;
+    }
+    .form-header h1 {
+        font-size: 1.7em;
+    }
+    .form-header label {
+        margin-top: 1.8em;
+        display: block;
+        text-align: left;
+    }
+    .form-header input {
+        width: 100%;
+        display: block;
+    }
+    .form-header p {
+        margin-top: 2em;
+    }
+}
+@media (min-width: 1052px) and (max-width: 1152px) {
+    /*adjusting textarea heights*/
+    .added_item textarea {
+        height: 6.5em;
+        /*background-color:khaki;*/
+    }
+    .new_item {}
+}
+
+/* --------------- 5 COL -----------------  */
+
+@media (min-width: 1154px) and (max-width: 1650px) {
+    /*DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM*/
+    /*Adjust the height of culumns to maintain the layout*/
+    .field_01, .field_02 {
+        min-height: 894px;
+    }
+    .field_05, .field_07, .field_11 {
+        min-height: 405px;
+    }
+    .field_06, .field_08, .field_12 {
+        min-height: 478px;
+    }
+    .field_03, .field_09, .field_10, .field_04 {
+        min-height: 390px;
+    }
+}
+@media (min-width: 1154px)and (max-width: 1702px) {
+    /*adjusting textarea heights*/
+    .added_item textarea {
+        height: 8.5em;
+        /*background-color:#535353;*/
+    }
+    .new_item {}
+}
+
+/* ----------------------------------------- */
+
+@media (min-width: 1651px) {
+    /*DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM*/
+    /*Adjust the height of culumns to maintain the layout*/
+    .field_01, .field_02 {
+        min-height: 765px;
+    }
+    .field_05, .field_07, .field_11 {
+        min-height: 365px;
+    }
+    .field_06, .field_08, .field_12 {
+        min-height: 390px;
+    }
+    .field_03, .field_09, .field_10, .field_04 {
+        min-height: 340px;
+    }
+}

canvas/1.7/favicons/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

canvas/1.7/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

canvas/1.7/index.php

@@ -0,0 +1,800 @@
+<?php
+  session_start();
+  if (isset($_SESSION['userlogin'], $_SESSION['userfirstname'])) {
+    $email = $_SESSION['userlogin'];
+    $name = $_SESSION['userfirstname'];
+    if (isset($_SESSION['canvas_id'])) {
+      $canvas_id = $_SESSION['canvas_id'];
+    }
+  }
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="Brainstorm about the ethical implications of your project and represent them in a canvas.">
+        <meta name="keywords" content="ethics canvas, ethics, social entrepreneurship, research, innovation, privacy, business development, business model canvas, open source tools">
+        <title>The Ethics Canvas</title>
+
+        <!-- favicons -->
+        <link rel="icon" href="../../icon/favicon.ico"/>
+
+        <!-- Bootstrap -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+        <!-- Google font -->
+        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
+        <!-- App style -->
+        <link rel="stylesheet" type="text/css" href="css/canvas.css">
+
+        <!-- php variables have to be retieved here as js variables -->
+        <script type="text/javascript">
+          var email_save_canvas = '<?php echo $email; ?>';
+          var user_save_canvas = '<?php echo $name; ?>';
+          var current_canvas_id = '<?php echo $canvas_id; ?>';
+        </script>
+
+    </head>
+    <body>
+
+        <div class="container-fluid">
+
+            <form class="canvas-form form" action="mpdf/canvas-pdf.php" method="post" target="_blank">
+                <!-- Canvas Form Header -->
+                <div class="form-header row text-center">
+                    <div class="col-md-3 ">
+                        <!--logo -->
+                        <h1 class="page_title ">
+                            <a class="logo" href="../../index.html">
+                                <img src="icons/logo-black-text.svg" alt="Online Ethics Canvas"/>
+                            </a>
+                        </h1>
+                    </div>
+                    <div class="col-md-3  ">
+                        <label class="project_title">Project Title</label>
+                        <input class="proj_title" name="field_00[]" type="text"/>
+                    </div>
+                    <div class="col-md-3  ">
+                        <label class="project_date">Date</label>
+                        <input class="proj_date" name="field_00[]" type="date"/>
+                    </div>
+                    <!-- login coming soon -->
+                    <div class="col-md-3  ">
+                    <?php if (!empty($name)) { ?>
+
+                          <!-- bootstrap dropdown component -->
+                        <div class="dropdown user-profile">
+                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                            <img src="../../icon/profile.svg"/><span><?php echo $name; ?></span>
+                            <span class="caret"></span>
+                          </button>
+                          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                            <li><a id="toDashboard" href="../php/dashboard.php">Your Canvases</a></li>
+                            <!-- <li><a href="#">Something else here</a></li> -->
+                            <li role="separator" class="divider"></li>
+                            <li><a id="logout" href="#">Log Out</a></li>
+                          </ul>
+                        </div>
+                    <?php } ?>
+                    </div>
+
+                </div>
+
+                <!-- LAYOUT -->
+                <!-- ================ 8/5 col=================== -->
+                <div class="canvas-box">
+                    <div class="masonry-layout8-5" id="8-5-col-layout">
+                        <div class="masonry-layout__panel ">
+                            <div class="card field_01 masonry-layout__panel-content bg--purple ">
+                                <h2 class="field-title">
+                                    <!-- FIELD 1 -->
+                                    Individuals Affected
+                                </h2>
+
+                                <p class="intro">
+                                    Relevant types of individual stakeholders affected by the project, such as men/women, user/non-user, age, category, etc.
+                                </p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_01" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                        <span class=" handle glyphicon glyphicon-th"></span>
+                                        <span class="glyphicon glyphicon-trash remove"></span>
+                                        <textarea name="field_01[]">Item 1</textarea>
+
+                                    </li> -->
+
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea data-limit-rows="true" class="new_item expandable" rows="2" maxlength="100" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel ">
+                            <div class="card field_05 masonry-layout__panel-content bg--blue">
+                                <h2 class="field-title">
+                                    <!-- FIELD 5 -->
+                                    Changes in Behaviour
+                                </h2>
+                                <p class="intro">
+                                    Problematic differences in behaviour such as differences in habits, time schedules, choice of activities, etc.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_05" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                        <span class=" handle glyphicon glyphicon-th"></span>
+                                        <span class="glyphicon glyphicon-trash remove"></span>
+                                        <textarea name="field_05[]">Item 1</textarea>
+
+                                    </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+                                <!-- the field id icons -->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel">
+                            <div class="card field_06 masonry-layout__panel-content bg--green ">
+                                <h2 class="field-title">
+                                    <!-- Field 6 -->
+                                    Changes in Relations
+                                </h2>
+                                <p class="intro">
+                                    Problematic changes in relations between people, such ways of communication, frequency of interpersonal contact etc.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_06" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                        <span class=" handle glyphicon glyphicon-th"></span>
+                                        <span class="glyphicon glyphicon-trash remove"></span>
+                                        <textarea name="field_06[]">Item 1</textarea>
+
+                                    </li> -->
+
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel">
+                            <div class="card field_11 masonry-layout__panel-content bg--green1 ">
+                                <h2 class="field-title">
+                                    <!-- Field 11 -->
+                                    Social Conflicts
+                                </h2>
+                                <p class="intro">
+                                    Possible social conflicts that could be caused by the project, such as labour conflicts, minority conflicts etc.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_11" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                        <span class=" handle glyphicon glyphicon-th"></span>
+                                        <span class="glyphicon glyphicon-trash remove"></span>
+                                        <textarea name="field_11[]">Item 1</textarea>
+                                    </li> -->
+
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel">
+                            <div class="card field_12 masonry-layout__panel-content bg--darkblue">
+                                <h2 class="field-title">
+                                    <!-- Field 12 -->
+                                    Resolving Ethical Impacts
+                                </h2>
+                                <p class="intro">
+                                    Select the four most important ethical impacts you discussed. Discuss ways of solving these impacts by changing your project’s product/service design, organisation or by providing recommendations.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_12" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                        <span class=" handle glyphicon glyphicon-th"></span>
+                                        <span class="glyphicon glyphicon-trash remove"></span>
+                                        <textarea name="field_12[]">Item 1</textarea>
+                                    </li> -->
+
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel">
+                            <div class="card field_07 masonry-layout__panel-content bg--green">
+                                <h2 class="field-title">
+                                    <!-- Field 7 -->
+                                    Group Interests
+                                </h2>
+                                <p class="intro">
+                                    Relevant ethical interests that other groups might have in your project; such as environmental, privacy, justice interests.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_07" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                      <span class=" handle glyphicon glyphicon-th"></span>
+                                      <span class="glyphicon glyphicon-trash remove"></span>
+                                      <textarea name="field_07[]">Item 1</textarea>
+                                  </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel">
+                            <div class="card field_08 masonry-layout__panel-content bg--seagreen">
+                                <h2 class="field-title">
+                                    <!-- Field 8 -->
+                                    Public Sphere
+                                </h2>
+                                <p class="intro">
+                                    How the general perception of somebody’s role in society can be affected by the project, e.g. people behaving more individualistic or collectivist, people behaving more or less materialistic.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_08" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                      <span class=" handle glyphicon glyphicon-th"></span>
+                                      <span class="glyphicon glyphicon-trash remove"></span>
+                                      <textarea name="field_08[]">Item 1</textarea>
+                                  </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel ">
+                            <div class="card field_02 masonry-layout__panel-content bg--purple ">
+                                <h2 class="field-title">
+                                    <!-- Field 2 -->
+                                    Organisations and Groups Affected
+                                </h2>
+                                <p class="intro">
+                                    Relavant collective stakeholders that can be affected by your project, such as environmental and religious groups, competing companies and government agencies; considering any interest they might have in the effects of the project.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_02" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                      <span class=" handle glyphicon glyphicon-th"></span>
+                                      <span class="glyphicon glyphicon-trash remove"></span>
+                                      <textarea name="field_02[]">Item 1</textarea>
+                                  </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+
+                    </div>
+
+                    <!-- ================ 4 col ==================== -->
+                    <div class="masonry-layout4 " id="4-col-layout">
+                        <div class="masonry-layout__panel ">
+                            <div class="card field_03 masonry-layout__panel-content bg--seagreen ">
+                                <h2 class="field-title">
+                                    <!-- Field 3 -->
+                                    Products and Services provided
+                                </h2>
+                                <p class="intro">
+                                    Discuss the different types of products and services that your project will provide.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_03" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                      <span class=" handle glyphicon glyphicon-th"></span>
+                                      <span class="glyphicon glyphicon-trash remove"></span>
+                                      <textarea name="field_03[]">Item 1</textarea>
+                                  </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel">
+                            <div class="card field_09 masonry-layout__panel-content bg--blue ">
+                                <h2 class="field-title">
+                                    <!-- Field 9 -->
+                                    Impact of Product or Service Failure
+                                </h2>
+                                <p class="intro">
+                                    Negative impacts of failure of your products or services such as technical failure, human failure, etc.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_09" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                      <span class=" handle glyphicon glyphicon-th"></span>
+                                      <span class="glyphicon glyphicon-trash remove"></span>
+                                      <textarea name="field_09[]">Item 1</textarea>
+                                  </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel ">
+                            <div class="card field_10 masonry-layout__panel-content bg--green ">
+                                <h2 class="field-title">
+                                    <!-- Field 10 -->
+                                    Impact of Resource Consumption
+                                </h2>
+                                <p class="intro">
+                                    Possible negative impacts of the consumption of resources of your project, e.g. climate impacts, privacy impacts, employment impacts.</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_10" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                      <span class=" handle glyphicon glyphicon-th"></span>
+                                      <span class="glyphicon glyphicon-trash remove"></span>
+                                      <textarea name="field_10[]">Item 1</textarea>
+                                  </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                        <div class="masonry-layout__panel ">
+                            <div class="card field_04 masonry-layout__panel-content bg--green1 ">
+                                <h2 class="field-title">
+                                    <!-- Field 4 -->
+                                    Resources Needed
+                                </h2>
+                                <p class="intro">
+                                    The consumption of energy or raw materials, but also about the consumption of human resources for your project</p>
+                                <!-- Into text toggler -->
+                                <button type="button" class="intro-toggle">
+                                    <!-- glyphicon glyphicon-minus-sign -->
+                                    <span class="intro-toggle-icon glyphicon glyphicon-minus-sign"></span>
+                                    <span class="intro-toggle-text">Hide description</span>
+                                </button>
+                                <!-- Item list in the field -->
+                                <!-- the ul id is used in js code to give the right name attribute to the added cards (user input) -->
+                                <ul id="field_04" class="item_list sortable connectedList">
+                                    <!-- html format of the added items:  -->
+                                    <!-- <li class="added_item">
+                                      <span class=" handle glyphicon glyphicon-th"></span>
+                                      <span class="glyphicon glyphicon-trash remove"></span>
+                                      <textarea name="field_04[]">Item 1</textarea>
+                                  </li> -->
+                                </ul>
+                                <!-- The Box With All User input Things -->
+                                <div class="add_box">
+                                    <!--  # Add idea link   -->
+                                    <a class="add-idea" href="#">
+                                        Add an idea
+                                    </a>
+                                    <!--  # User Input   -->
+                                    <div class="user-input">
+                                        <label>Your Idea</label><br>
+                                        <p>
+                                            <textarea class="new_item expandable" rows="2" maxlength="100" data-limit-rows="true" data-autoresize type="text" name="new_item" placeholder="Write an idea here ..."></textarea>
+                                        </p>
+                                        <p class="chars-count">
+                                            <span class="chars">100</span>
+                                            characters remaining</p>
+                                        <button type="button" class="add_btn">Add</button>
+                                    </div>
+                                    <!-- end of user input -->
+                                </div>
+                                <!-- end of add_box-->
+
+                            </div>
+                            <!-- end of .card -->
+                        </div>
+                    </div>
+                </div>
+                <!-- end of .canvas.box -->
+                <!-- FORM BUTTON BOX -->
+                <div class="row">
+
+                    <div class="imp-exp-btn col-md-4 col-md-offset-4">
+
+                        <!-- form buttons -->
+
+
+                        <?php if (!empty($name)) { ?>
+
+                          <p class="text-center">
+                            <!-- Export JSON and also save the canvas for the registered user -->
+                              <button class="json_exp" type="button" name="json_exp">Save This Canvas</button>
+                          </p>
+ 
+                        <!-- BEGIN SHARE CANVAS -->
+                        <p class="text-center">
+                          <button class="share_canvas" type="submit" name="share-canvas">Share This Canvas</button>
+                        </p>
+                        <div class="share_canvas_email text-center">
+                          <p>
+                            <label>Send this canvas to:</label>
+                          </p>
+                          <p>
+                            <input type="email" name="share-canvas-email" placeholder="type an email adress here..."/>
+                          </p>
+                          <p class="text-center">
+                            <button class="share_canvas_send" type="button" name="share-canvas-send">Send</button>
+                          </p>
+                        </div>
+                       <!-- END SHARE CANVAS -->
+
+
+                        <?php } else{?>
+
+                          <p class="text-center">
+                            <!-- Export JSON and also save the canvas for the registered user -->
+                              <a class="login-to-save"  href="../../index.html">Sign up or login to save your canvas</a>
+                          </p>
+  <?php }?>
+
+
+                        <!-- BEGIN EXPORT PDF -->
+                        <p class="text-center">
+                          <input class="pdf_exp" type="submit" name="export-pdf" value="Download as PDF">
+                        </p>
+                        <!-- END EXPORT PDF -->
+                        
+                    </div>
+
+                </div>
+
+            </form>
+            <!-- end of .form -->
+            <!-- hidden place to show JSON info -->
+            <pre id="result" class="text-center">
+
+             </pre>
+
+            <div class="row">
+                <footer class="col-md-12 text-center">
+                  <div class="contact">
+                    <h2>Contact us:</h2>
+                    <p> hello@ethicscanvas.org  </p>
+                  </div>
+                    <div class="license">
+                        <p>The Ethics Canvas is adapted from Alex Osterwalder’s Business Model Canvas.</p>
+                        <p>The Business Model Canvas is designed by: Business Model Foundry AG.
+                        </p>
+                        <p>
+                            This work is licensed under the Creative Commons Attribution-Share Alike 3.0 unported license.</p>
+                          <p class="cc"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> View a copy of this license on:</p>
+                        <p>
+                          <a href="https://creativecommons.org/licenses/by-sa/3.0/">creativecommons.org</a>
+
+                        </p>
+                        <p class="bmc"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
+                            View the original Business Model Canvas on:
+                        </p>
+                        <p>
+                          <a href="https://strategyzer.com/canvas">strategyzer.com</a>
+                        </p>
+                    </div>
+                     <div class="license-icons">
+                       <ul>
+                         <li><img src="../../icon/by.large.png" alt="ethics-canvas-by-icon"/> </li>
+                            <li><img src="../../icon/share.large.png" alt="ethics-canvas-share-icon"/> </li>
+                         <li><img src="../../icon/cc.large.png" alt="ethics-canvas-cc-icon"/> </li>
+                         <li> <img src="../../icon/remix.large.png" alt="ethics-canvas-remix-icon"/></li>
+                         <li> <img src="../../icon/sa.large.png" alt="ethics-canvas-sa-icon"/></li>
+                       </ul>
+                     </div>
+                      <p class="ethics-copy terms"><a href="../../privacy-terms/terms.html">Terms of Service</a></p>
+                      <p class="ethics-copy privacy"><a href="../../privacy-terms/privacy.html">Privacy Policy</a></p>
+
+                    <p class="ethics-copy">The ADAPT Centre for Digital Content Technology</p> <p class="ethics-copy">is funded under the SFI Research Centres Programme (Grant 13/RC/2106).</p><p class="ethics-copy">It is co-funded under the European Regional Development Fund.</p>
+                    <p class="ethics-copy">Ethics Canvas v1.7|&copy; ADAPT Center & Trinity College Dublin & Dublin City University, 2016</p>
+
+
+                </footer>
+            </div>
+        </div>
+        <!-- end of container-fluid -->
+
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+        <!-- jquery UI  -->
+        <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>
+        <!-- Bootstrap -->
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+        <!-- The app javascript -->
+        <script src="js/canvas.js" charset="utf-8"></script>
+        <script language="javascript" type="text/javascript"></script>
+
+    </body>
+
+</html>

canvas/1.7/js/canvas.js

@@ -0,0 +1,626 @@
+/* Contains all the Javascript logic of the canvas and its main features: save, export and share */
+
+$(function() {
+    // Prevent AJAX requests from being cached
+    $.ajaxSetup({ cache: false });
+    
+    /*This piece of code is for making the column-count and column-gap CSS to work in Firefox*/
+    document.getElementById("8-5-col-layout").style.MozColumnCount =
+        "5";
+    document.getElementById("4-col-layout").style.MozColumnCount =
+        "4"; // end of Firefox fix
+
+
+    /* Prevent pressing ENTER on Project Title from submitting the form */
+    $('.proj_title').keydown(function(event){
+      if(event.keyCode == 13) {
+        event.preventDefault();
+        return false;
+      }
+    });
+
+
+    /*================================
+       Serialize Form to JSON
+      ================================*/
+    $.fn.serializeObject = function() {
+        var o = {};
+        var a = this.serializeArray();
+        $.each(a, function() {
+
+            if (o[this.name]) {
+                if (!o[this.name].push) {
+                    o[this.name] = [o[this.name]];
+                }
+                o[this.name].push(this.value || '');
+            } else {
+                o[this.name] = this.value || '';
+            }
+        });
+        return o;
+    }; // end of $.fn.serializeObject ...
+    /*=====================================
+        Getting the current date
+     =====================================*/
+    var fullDate = new Date();
+    var twoDigitMonth = fullDate.getMonth() + "";
+    if (twoDigitMonth.length == 1) twoDigitMonth = "0" + twoDigitMonth;
+    var twoDigitDate = fullDate.getDate() + "";
+    if (twoDigitDate.length == 1) twoDigitDate = "0" + twoDigitDate;
+
+    var currentDate = fullDate.getFullYear() + "-" + twoDigitMonth + "-" +
+        twoDigitDate;
+    // set the currebt date in the date input field
+    $('.proj_date').val(currentDate);
+    /*========================================
+        USER LOGS OUT (dropdown menu)
+    ==========================================*/
+    $('.user-profile').on('click', '#logout', function() {
+        var url = 'php/logout.php';
+        $.post(url, function(data, status) {
+            if (data == 200) {
+                $('.user-profile').hide();
+                window.location.href="https://www.ethicscanvas.org";
+            }
+        });
+    });
+
+    /*========================================
+     When the page loads, Import the chosen canvas if the user has picked one from the dashbord,
+    otherwise load an empty canvas
+    ==========================================*/
+
+    // if a canvas is chosen by the user to be loaded
+    if (current_canvas_id !== '') {
+
+        var url = '../json/' + current_canvas_id + '.json';
+        // var url= 'json/test_canvas.json';
+
+        // get the saved ISON object in the sendJSON.text file
+        $.getJSON(url, function(returnedObj) {
+
+            //Display the json data in the html
+
+            var itemListHTML = '';
+            //iterate through the object
+            $.each(returnedObj, function(key, value) {
+                /* project name and tem field*/
+                if (key === 'field_00[]') {
+
+                    $('.form-header').find('input.proj_title').val(value[
+                        0]);
+                    $('.form-header').find('input.proj_date').val(value[1]);
+
+
+                } // end of if(key === 'field_00[]')
+                else if (key !== 'new_item') {
+
+                    if ($.type(value) === "array") {
+                        $.each(value, function(i, itm) {
+
+                            /** FIX DUPLICATIONs in the canvas when importing
+                            /*  Importing will override the canvas content
+                              clear the canvas by giving en emty content to the ul list (remove previous list items) */
+                            $('.canvas-form').find('.card').filter('.' +
+                                key.substr(0, 8)).find('ul.item_list').html(
+                                '');
+
+                            /* Create a list item with each value item
+                            and give it text area with the name attribute as the "key" (right field name) */
+
+                            itemListHTML +=
+                                '<li class="added_item"><span class="handle glyphicon glyphicon-th"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true"  data-autoresize  name="' +
+                                key + '">' + itm +
+                                '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
+
+                        }); //end of $.each(value ...
+                    } // end of if($.type(value)==="array")
+                    else { // a single value string
+                        itemListHTML +=
+                            '<li class="added_item"><span class="handle glyphicon glyphicon-th"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true"  data-autoresize  name="' +
+                            key + '">' + value +
+                            '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
+                    }
+                    /* Append the created list items/textatreas to the right field based on the "key"*/
+                    /* the str.substr(start,length)
+                    is used to remove the [] from the end of the "key"name (for each field. also the name attributes accociated with each fiels) so that we can select the right class (right field) and append the created lists to the right field
+                    so field names/key/name attribute will tuen into class names: ex:  field_1[] becomes field_1
+                    */
+                    // find the field by its class names besed on the current key name
+                    // append the created list of item values to that right field
+
+                    $('.canvas-form').find('.card').filter('.' + key.substr(
+                        0, 8)).find('ul.item_list').append(itemListHTML);
+                    /*$('form').find('.card').filter('.field_1').find('ul.item_list').append(itemListHTML); */
+                    /* !! Empty the item list after each count of "key" so that the previous item lists from the other fields (associated with the previous key) don't get added up to the item list of other fields */
+                    itemListHTML = '';
+
+                } //end of   if(key !== ...
+            }); //end of $.each(returnedObj...
+
+        }); // end of $.getJSON
+
+        /*--- fix the heights after importing  ---*/
+        fixHeights();
+        /*--------------------------------*/
+
+    }
+
+
+
+    /*=======================================
+       Toggle the introduction text in fields
+     =======================================*/
+    //$(selector).toggle(speed,easing,callback)
+    $('.card').on('click', '.intro-toggle', function() {
+        var $TogglingText = $($(this).closest('.card').find('.intro'));
+        var $Toggler = $($(this).closest('.card').find('.intro-toggle'));
+        $TogglingText.toggle('slow', function() {
+            /*Do this when toggling: */
+            // the boolean .is(':visible') of the current toggle state
+            if ($TogglingText.is(':visible')) {
+                // change the text of the toggle
+                $Toggler.find('.intro-toggle-text').text('Hide description');
+                // change the icon of the toggle
+                $Toggler.find('.intro-toggle-icon').switchClass(
+                    "glyphicon-plus-sign", "glyphicon-minus-sign", 1000,
+                    "easeInOutQuad");
+            } else {
+                $Toggler.find('.intro-toggle-text').text('Show description');
+                $Toggler.find('.intro-toggle-icon').switchClass(
+                    "glyphicon-minus-sign", "glyphicon-plus-sign", 1000,
+                    "easeInOutQuad");
+
+            }
+
+        }); //end of toggle
+
+    }); //end of click
+
+    /*================================
+       Auto expand user input textareas
+     ================================*/
+    /*Works for textareas already exsting in the html when the page loads -> User input*/
+    $.each(jQuery('textarea[data-autoresize]'), function() {
+        var offset = this.offsetHeight - this.clientHeight;
+
+        var resizeTextarea = function(el) {
+            $(el).css('height', 'auto').css('height', el.scrollHeight +
+                offset);
+        };
+        $(this).on('keyup input', function() {
+            resizeTextarea(this);
+        }).removeAttr('data-autoresize');
+    });
+    /*===========================================
+       Limiting the number of lines in textareas
+      ===========================================*/
+    // <textarea data-limit-rows="true" cols="60" rows="8"></textarea>
+    $('.card').on('keypress', 'textarea[data-limit-rows=true]', function(
+        event) {
+        var textarea = $(this),
+            text = textarea.val(),
+            /* match() -> Searches a string for a match against a regular expression, and returns the matches, as an Array object.*/
+            numberOfLines = (text.match(/\n/g) || []).length + 1,
+            maxRows = parseInt(textarea.attr('rows'));
+
+        // if the number of lines have reached the max rows
+        if (numberOfLines === maxRows) {
+            return false;
+        }
+
+    });
+    /*================================
+      Handling user input, ADD items
+      A. Add button
+      B. Clicking enter
+      ================================*/
+    /*------------------------------
+       add new idea slide effect
+    ------------------------------*/
+    /* When clicking on "add a new idea", Slide down and show the  input field for adding a new item (from the begining,it is set to display:hidden with CSS).If clicked again, slide it up. After that, set the textarea in automatic focus*/
+    $('.card').on('click', 'a.add-idea', function(event) {
+        //  stop the default behavior of the link (jumping back to the start of the page)
+        event.preventDefault();
+        //set the textarea automatically in focus
+        $(this).closest('.card').find('.user-input').slideToggle("slow",
+            function() {
+                //When the toggle animation is complete:
+                // set the text area in focus
+                $(this).closest('.card').find('.new_item').val('');
+                 $(this).closest('.card').find('.chars').text(maxLength);
+                $(this).closest('.card').find('.new_item').focus();
+            });
+
+    });
+
+    /*----------------------------------------
+     Limiting the number of characters to type
+    ------------------------------------------*/
+    var maxLength = 100;
+    $('.card').on('keyup', '.new_item', function() {
+        var length = $(this).val().length;
+        length = maxLength - length;
+        //show the characters remaining only on this field
+        $(this).closest('.user-input').find('.chars').text(length);
+    });
+
+
+
+    /*-------------------------------
+        A. When we click the add btn to
+         add the item to the list
+    ---------------------------------- */
+    //event deligation to handle the present and future elements that are dynamically added
+    $('.card').on('click', '.add_btn', function() {
+        var new_item = $(this).closest('.card').find('.new_item').val();
+        var new_item_height = $(this).closest('.card').find('.new_item').height();
+        //number of items are in the list
+        var fieldItemCount = $(this).closest('.card').find('ul.item_list').find(
+            'li').length;
+        // new item added, increment the number of items
+        fieldItemCount++;
+        //add the input value as a textarea item
+        /* create a name attribute in the "field_nr[]" format to be able to tag each new item with the right field attr name (based on the field they are added to). This is to format the json file for each group of dynamically added items. We get the name attribute directly from the id attribute of the ul list in each card (the one we pressed the add button in) */
+        // if the new item input exist (is not empty), add the item
+
+        if (new_item) {
+            var field_attr = $(this).closest('.card').find('ul.item_list').attr(
+                'id') + '[]';
+            /*The height of the newly added item = the height of the add new idea textarea*/
+            $(this).closest('.card').find('ul.item_list').append(
+                '<li class="added_item"><span class="handle glyphicon glyphicon-th"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize   name="' +
+                field_attr + '">' +
+                new_item +
+                '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
+            );
+
+            // Fix the heights only after a new item is added
+            //  fixHeights();
+        } // end of if(new_item){
+        //clear the new item the text area value
+        $(this).closest('.card').find('.new_item').val('');
+        /* When clicking on "add idea",  hide the  input field for adding a new item (slideUp() doesn't work nicely here)*/
+        $(this).closest('.card').find('.user-input').hide("fast", function() {
+            // Animation complete.
+        });
+
+    });
+
+    /*----------------------------------------
+       B. Clicking enter in the add idea textarea,
+       will add the new item to the card
+    -------------------------------------------*/
+    //<textarea data-limit-rows="true" ></textarea>
+    $('.card').on('keypress', 'textarea[data-limit-rows=true]', function(
+        event) {
+        var textarea = $(this);
+        var text = textarea.val();
+
+        /* The jQuery event.which -->
+         Returns which keyboard key was pressed: */
+        // if the enter is pressed, event.which === 13
+        if (event.which === 13) {
+            var new_item = $(this).closest('.card').find('.new_item').val();
+            var new_item_height = $(this).closest('.card').find('.new_item').height();
+            //number of items are in the list
+            var fieldItemCount = $(this).closest('.card').find('ul.item_list')
+                .find(
+                    'li').length;
+            // new item added, increment the number of items
+            fieldItemCount++;
+            //add the input value as a textarea item
+            /* create a name attribute in the "field_nr[]" format to be able to tag each new item with the right field attr name (based on the field they are added to). This is to format the json file for each group of dynamically added items. We get the name attribute directly from the id attribute of the ul list in each card (the one we pressed the add button in) */
+            // if the new item input exist (is not empty), add the item
+
+            if (new_item) {
+                var field_attr = $(this).closest('.card').find('ul.item_list').attr(
+                    'id') + '[]';
+                /*The height of the newly added item = the height of the add new idea textarea*/
+                $(this).closest('.card').find('ul.item_list').append(
+                    '<li class="added_item"><span class="handle glyphicon glyphicon-th"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize   name="' + field_attr + '">' + new_item + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>');
+                // Fix the heights only after a new item is added
+                //  fixHeights();
+            } // end of if(new_item){
+            //clear the new item the text area value
+            $(this).closest('.card').find('.new_item').val('');
+            /* When clicking on "add idea",  hide the  input field for adding a new item (slideUp() doesn't work nicely here)*/
+            $(this).closest('.card').find('.user-input').hide("fast",
+                function() {
+                    // Animation complete.
+                });
+
+        }
+
+    });
+
+
+    /*================================
+            Deleting items
+    ================================*/
+    //  when the cross beside the textarea is clicked (span.remove)
+    // remove that list item
+    $('.card').on('click', 'span.remove', function() {
+        $(this).closest('li').remove();
+    });
+
+    /*================================
+          Sortable field items
+     ================================*/
+    //make items sortable in their fields and between fields
+    $('.sortable').sortable({
+        connectWith: '.connectedList',
+        placeholder: "sort-placeholder",
+        //  revert: true
+
+        zIndex: 300 //or greater than any other relative/absolute/fixed elements and droppables
+    });
+
+    /*================================
+        Sorting and Dragging events
+     ================================*/
+
+    /*sortstart
+     sortover
+     sortstop*/
+    /**
+      every textarea in a item needs to get the right name attribute once they have been dropped in another field (so it ends up in the right place in the json file)
+    **/
+
+    /*Dragging starts*/
+    $(".sortable").on("sortstart", function(event, ui) {
+        // WHEN WE SORT CARDS, $(this) ---> the "begining" ul with the class of .sortable
+    });
+    /*Dragging ends: item dropped*/
+    $(".sortable").on("sortstop", function(event, ui) {
+        // get the id of the field ul (to set the name attribute of textareas)
+        // # mouseleave is the right event for when we release and leave a card mouseup doesn't work properly in this case
+        $('.card').on('mouseleave', 'li', function() {
+            //$(selector).attr(attribute,value)
+            var fieldAttr = $(this).closest('ul.item_list').attr('id');
+            $(this).find('textarea').attr('name', fieldAttr + '[]');
+        });
+
+    }); // end of $(".sortable").on("sortstop"...
+
+
+    /* ===============================================
+         SAVING THE CANVAS:
+         CLICK ON #EXPORT JSON# form button
+      ================================================*/
+
+
+    /*---------------------------------------------------
+       When the user clicks on the SAVE CANVAS button
+     ---------------------------------------------------*/
+    $('.canvas-form').on('click', '.json_exp', function() {
+
+
+        /* ---------------------------------------------
+            A: saving the canvas
+            as a registered user
+         ----------------------------------------------*/
+        //   php variables are retieved in the header of the canvas index.php as js variables -->
+        var name_save_canvas = $('.form-header').find('.proj_title').val();
+        var date_save_canvas = $('.form-header').find('.proj_date').val();
+        var save_canvas_obj = {
+            'email_save_canvas': email_save_canvas,
+            'name_save_canvas': name_save_canvas,
+            'date_save_canvas': date_save_canvas
+        };
+
+        var save_canvas = $.param(save_canvas_obj);
+        /*  Post the JSON stringified object to the php file
+        (the php script will save it in a .json file )*/
+        var save_reg_url = "php/save-canvas.php";
+
+        $.post(save_reg_url, {
+            save_canvas: save_canvas
+        }, function(data, status) {
+            //the returned data is successful, is the $canvas_id
+            var canvas_id = data;
+            // send this canvas_id with the next ajax requestedto the php/canvas.php file and use it as the name of the json file to be saved
+
+            // Give the user feedback that the canvas is saved
+            if (data !== 400 || data !== 401) {
+                if ($('.imp-exp-btn ').find(".save-canvas-feedback") !== null) {
+                    $('.imp-exp-btn ').find(".save-canvas-feedback").remove();
+
+
+                }
+                $('.canvas-form').find('.imp-exp-btn ').append('<div class="save-canvas-feedback"><p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Your canvas is saved in your dashbord</p></div>');
+                // remove the canvas is saves message as soon as user changes the canvas
+                $('.canvas-form').on("change keyup", 'textarea', function() {
+                    $('.imp-exp-btn ').find(".save-canvas-feedback").remove();
+                });
+            } else {
+
+                $('.canvas-form').find('.imp-exp-btn ').append('<div class="save-canvas-feedback-fail"><p>Oh! We could not save your canvas. Please try again or contact us at hello@ethicscanvas.org</p></div>');
+            }
+            //For the second AJAX request:
+            /*#########################################################*/
+
+            /*----------------------------------------
+              B: Exporing the form data json to a file
+             and save it on the server
+             ----------------------------------------*/
+
+            // $('#result').text(JSON.stringify($('.canvas-form').serializeObject()));
+
+
+            //Make the JSON object into a JSON string
+            var JSONstrObj = JSON.stringify($('.canvas-form').serializeObject());
+            var url = "php/canvas.php";
+            /*  Post the JSON stringified object to the php file
+            (the php script will save it in a .json file )*/
+            //also, send the canvas_id and use it for naming the file
+            $.post(url, {
+                JSONstrObj: JSONstrObj,
+                canvas_id: canvas_id
+            }, function(data, status) {
+                console.log(
+                    'Response from php when sending the form json object: \n' +
+                    'data:' + data + '\n status: ' + status);
+            }).fail(function(jqXHR) {
+                console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
+            });
+
+            /*########################################################*/
+
+        }).fail(function(jqXHR) {
+            console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
+        });
+
+
+        /*Prevent the card item list from reseting itself after clicking
+        on the export button (submission). Because the type of the button is submit */
+
+        return false;
+    }); // end of handling the click on EXPORT button
+
+    /*===========================================
+    HANDLING CLICK ON : Share This Canvas BUTTON
+     ===========================================*/
+    $('.canvas-form').on('click', '.share_canvas', function() {
+        $('.share_canvas_email').slideDown(1000, function() {
+
+            // SAVE THE PDF AS file
+            $.post('mpdf/canvas-pdf-save.php', function(data, status) {
+
+            }); // save pdf as file
+
+        }); // end of slide down animation
+    }); // end of click on share_canvas button
+
+    $('.canvas-form').on('click', '.share_canvas_send', function() {
+
+            var share_email = $('.share_canvas_email').find('input').serialize();
+            /*This sends a serialized array share_email to the php file.
+              exapmple: the value of this array will be:  share-canvas-email=eternalflame.f%40gmail.com
+            */
+            $.post('php/share-canvas.php', {
+                share_email: share_email
+            }, function(data, status) {
+                if (data == 200) { // canvas successfully shared
+                    $('.canvas-form').find('.imp-exp-btn ').append('<div class="save-canvas-feedback"><p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Your canvas has been shared by email</p></div>')
+                }
+                else { 
+                   $('.canvas-form').find('.imp-exp-btn ').append('<div class="save-canvas-feedback"><p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Your canvas could not be shared by email</p></div>')
+                }
+            }); // end of post email
+
+            // slide up the .share_canvas_email area
+
+            $('.share_canvas_email').slideUp(); // end of slide up animation
+    }); // end of click on "send"
+
+
+    /*===========================================
+      Controlling the height of divs dynamically
+     ===========================================*/
+
+    //Call this function after adding a new item and importing
+    // $( window ).width(); ->Returns width of browser viewport
+    function fixHeights() {
+
+        // --------------------------------------------------
+        // Returns width of browser viewport
+        var screenSize = $(window).width();
+        //the longest card of the group 1 .masonry-layout8-5
+        var longest_1 = $('.masonry-layout8-5').height();
+        //the longest card of the group 2 .masonry-layout8-5
+        var longest_2 = $('.masonry-layout4').height();
+
+        /* --- 5 COL Range ---- */
+        if (screenSize >= 1139) {
+            // inforcing a fixed height ".height(longest_1/2)" will create some layout issues when we try to add new items the add item area will go outside the box and the heights don't increase naturally
+
+            // card group1:
+            // $('.field_05,.field_11, .field_07').css('min-height', longest_1 -
+            //     longest_1 * 5 / 100);
+            // $('.field_06,.field_08, .field_12').css('min-height', longest_1 +
+            //     longest_1 * 5 / 100);
+            // $('.field_01, .field_02').css('min-height', longest_1 * 2 +
+            //     longest_1 * 1 / 100);
+            // // card group 2
+            // $('.field_03, .field_09, .field_10, .field_04').css('min-height',
+            //     longest_2 * 2 - longest_2 * 20 / 100);
+
+            $('.field_05,.field_11, .field_07').css('min-height', longest_1 -
+                longest_1 * 20 / 100);
+            $('.field_06,.field_08, .field_12').css('min-height', longest_1 -
+                longest_1 * 20 / 100);
+            $('.field_01, .field_02').css('min-height', longest_1 + longest_1 * 40 / 100);
+            // card group 2
+            $('.field_03, .field_09, .field_10, .field_04').css('min-height',
+                longest_2 - longest_2 * 10 / 100);
+        }
+        /*  4 COL Range */
+        else if (screenSize >= 977 && screenSize <= 1138) {
+            // card group1:
+            // row 1
+            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height',
+                longest_1 + longest_2 * 20 / 100);
+            // row 2
+            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height',
+                longest_1 + longest_2 * 20 / 100);
+
+            // card group 2
+            // row 3
+            $('.field_03, .field_09, .field_10, .field_04').css('min-height',
+                longest_2 * 2 - longest_2 * 20 / 100);
+
+        } else if (screenSize >= 920 && screenSize <= 976) {
+            // card group1:
+            // row 1
+            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height',
+                longest_1 + longest_2 * 20 / 100);
+            // row 2
+            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height',
+                longest_1 + longest_2 * 20 / 100);
+
+            // card group 2
+            // row 3
+            $('.field_03, .field_09, .field_10, .field_04').css('min-height',
+                longest_2 * 2 - longest_2 * 20 / 100);
+        } else if (screenSize >= 485 && screenSize <= 919) {
+            // else if (500 <= screenSize < 920) {
+
+            // card group1:
+
+            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height',
+                longest_1 * 80 / 100);
+
+            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height',
+                longest_1 * 80 / 100);
+
+            // card group 2
+
+            $('.field_03, .field_09, .field_10, .field_04').css('min-height',
+                longest_2 * 80 / 100);
+
+            /* --- 1 COL Range ---- */
+        } else {
+
+            // card group1:
+
+            // card group1:
+
+            $('.field_01,.field_06, .field_12,.field_08 ').css('min-height',
+                longest_1 * 20 / 100);
+
+            $('.field_05,.field_11, .field_07,.field_02 ').css('min-height',
+                longest_1 * 20 / 100);
+
+            // card group 2
+
+            $('.field_03, .field_09, .field_10, .field_04').css('min-height',
+                longest_2 * 20 / 100);
+
+
+        }
+
+    } // end of fixHeights()
+
+
+}); // end of jQuery code

canvas/1.7/php/canvas.php

@@ -0,0 +1,24 @@
+<?php
+//for the ajax post call
+echo 'JSON stringified Object: '.$_POST['JSONstrObj'].' was sent to the php file\n';
+//for the ajax post call in stringified object data form
+$post_data = $_POST['JSONstrObj'];
+$canvas_id_data = $_POST['canvas_id'];
+
+$filename ='../../json/'.$canvas_id_data.'.json';
+$handle = fopen($filename, "w");
+
+if (empty($post_data)) {
+    echo 'Hmm... I did NOT get any data posted by AJAX.';
+}
+if (!empty($post_data)) {
+  echo 'Awesome! got the json info :)';
+    //$dir = 'YOUR-SERVER-DIRECTORY/files';
+    //$file = uniqid().getmypid();
+    //$filename = $dir.$file.'.txt';
+     // Write to file
+    fwrite($handle, $post_data);
+}
+    // Close the file
+     fclose($handle);
+?>

canvas/1.7/php/logout.php

@@ -0,0 +1,13 @@
+<?php
+/* Signs-out the user currently logged in */
+
+session_start();
+unset($_SESSION['userlogin']);
+unset($_SESSION['canvas_id']);
+unset($_SESSION['userfirstname']);
+session_unset();
+session_destroy();
+
+echo 200;
+
+?>

canvas/1.7/php/save-canvas.php

@@ -0,0 +1,67 @@
+<?php
+ /* Receives the email of the user, the name of the canvas and the date
+    and stores it in the database with a randomly-generated canvas_id,
+    that is returned.                                                */
+ 
+ session_start();
+ $params = array();
+ parse_str($_POST['save_canvas'], $params);
+
+ if(!array_key_exists('email_save_canvas', $params) OR
+    !array_key_exists('name_save_canvas', $params) OR
+    !array_key_exists('date_save_canvas', $params)) {
+   echo 400; // Missing parameters
+ }
+
+ else {
+
+   if(isset($_SESSION['canvas_id'])) {
+     // Canvas already exists. Return canvas_id to overwrite JSON file.
+     echo $_SESSION['canvas_id'];
+   }
+
+   else { // New canvas in the database
+
+     // Retrieve user credentials
+     $email = $params['email_save_canvas'];
+     $canvas_name = $params['name_save_canvas'];
+     $date = $params['date_save_canvas'];
+
+     require_once('../../../php/db_utils.php');
+     $conn = db_connect(); // Connect to the database
+
+     // Check if the username already exists
+     if(!($result = mysqli_query($conn, "SELECT name FROM user WHERE username = '$email'"))) {
+       echo 400; // Wrong query
+     }
+     else if(mysqli_num_rows($result) != 1) { // User not registered or duplicated
+       echo 401;
+     }
+     else { // User registered
+       // Save this canvas
+       $canvas_id = generateRandomString();
+       if(!mysqli_query($conn, "INSERT INTO canvas (canvas_id, user_id, canvas_name, canvas_date) VALUES ('$canvas_id', '$email', '$canvas_name', '$date')")) {
+         echo 400; // Wrong query
+         echo " #Wrong query :/ ";
+       }
+       else { // Return canvas_id and save it in the current session
+         $_SESSION['canvas_id'] = $canvas_id;
+         echo $canvas_id;
+       }
+     }
+   }
+}
+
+
+/* Generate a random string of a specific length to be used as canvas_id */
+function generateRandomString($length = 10) {
+    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    $charactersLength = strlen($characters);
+    $randomString = '';
+    for ($i = 0; $i < $length; $i++) {
+        $randomString .= $characters[rand(0, $charactersLength - 1)];
+    }
+    return $randomString;
+}
+
+?>

canvas/1.7/php/share-canvas.php

@@ -0,0 +1,46 @@
+<?php
+  /* Receives a recipient email address and sends him a previously generated
+     canvas in PDF on behalf of the user that is signed in */
+
+  session_start();
+  if(!isset($_POST['share_email']) || !isset($_SESSION['userlogin'])) {
+    // Recipient or sender emails not present
+    echo 400;
+  }
+  else {
+    $params = array();
+    parse_str($_POST['share_email'], $params);
+    if(!array_key_exists('share-canvas-email', $params)) {
+      echo 400; // Missing parameters
+    } 
+    else { // All parameters received  
+      $senderEmail = $_SESSION['userlogin'];
+      $recipientEmail = $params['share-canvas-email'];
+      $path = "../saved-pdf/Ethics-Canvas.pdf";
+      require_once('../../../php/db_utils.php');
+      $conn = db_connect(); // Connect to the database
+
+      if(!($result = mysqli_query($conn, "SELECT name FROM user WHERE username = '$senderEmail'"))) {
+        echo 400; // Wrong query
+      }
+      else if(mysqli_num_rows($result) != 1) { // User not registered or duplicated
+        echo 401;
+      }
+      else { // Share canvas
+        $row = mysqli_fetch_array($result, MYSQLI_ASSOC);
+        $senderName = $row['name']; 
+    
+        // Share canvas email
+        $shareEmail = "Hello,<br><br>$senderName ($senderEmail) wanted to share with you the attached Ethics Canvas generated at <a href='https://ethicscanvas.org' target='_new'>EthicsCanvas.org</a>.<br><br>Kind regards,<br><br>Ethics Canvas Team";
+
+        // Send activation email
+        include('../../php/mailer.php');
+        smtpmailer($recipientEmail, "$senderName shared this Ethics Canvas with you", $shareEmail, $path);
+        echo 200;
+      }
+
+      mysqli_free_result($result);
+      db_close($conn); // Close the database
+    }
+  } 
+?>

canvas/1.7/php/utils.php

@@ -0,0 +1,11 @@
+<?php
+session_start();
+
+if (isset($_POST['canvas_ID'])) {
+  $canvas_id = $_POST['canvas_ID'];
+  $_SESSION['canvas_id'] = $canvas_id;
+  echo 200;
+}
+else
+  echo 401;
+?>

canvas/css/dashboard.css

@@ -1,9 +1,8 @@
 a {
-    text-decoration: none!important;
+    text-decoration: none !important;
 }
 
-/*logo*/
-
+/* Logo */
 a.logo {
     display: block;
 }
@@ -13,8 +12,7 @@ a.logo img {
     margin: auto;
 }
 
-/*The User Profile bar */
-
+/* The User Profile bar */
 .user-bar {
     margin-top: 2.8em;
     margin-bottom: 3.1em;
@@ -27,9 +25,24 @@ a.logo img {
     vertical-align: middle;
 }
 
-/*--------------------------------
-   create new canvas
-----------------------------------*/
+/* ----------------------------------------------
+    Log out button
+----------------------------------------------- */
+
+.dashbord-logout-btn {
+    outline: 0;
+    padding: 0.25em 1.2em !important;
+    background-color: rgb(126, 150, 188);
+    color: #ffffff !important;
+    font-size: 1em !important;
+    color: rgb(51, 51, 51);
+    border: none;
+    border-radius: 0.5em;
+}
+
+/* ----------------------------------------------
+    Create new canvas
+----------------------------------------------- */
 
 .create-canvas-btn {
     display: block;
@@ -43,7 +56,7 @@ a.logo img {
     transition: 0.2s all;
 }
 
-/*the icon for the add canvas*/
+/* The icon for the add canvas */
 
 .create-canvas-btn span {
     margin-right: 0.25em;
@@ -56,31 +69,28 @@ a.logo img {
     color: #fff;
 }
 
-/*-------------------------------
-    CANVAS GALARY
----------------------------------*/
-.canvas-gallery-item {
+/* ----------------------------------------------
+    Canvas gallery
+----------------------------------------------- */
 
+.canvas-gallery-item {
     margin-bottom: 1.8%;
-
+    cursor: pointer;
 }
 .canvas-gallery-item .col-md-12 {
     width: 95%;
     margin: 2.5% 2.5% 0 2.5%;
-    background-color: #546e7a;/*default*/
+    background-color: #546e7a; /* Default */
     border-radius: 5px;
-    padding: 1em;
+    padding: 2.75em 1em 1em 1em;
     height:15em;
     transition:all 0.3s;
 }
 .canvas-gallery-item .col-md-12:hover {
-
-    background-color: #546e7a!important;
-    color:white;
+    background-color: #546e7a !important;
+    color: white;
 }
-
-/*These colors will be dynamically added by jQuery*/
-
+/* These colors will be dynamically added by jQuery */
 .canvas-gallery-item .col-md-12.color0 {
     background-color: #85ade5;
 }
@@ -96,29 +106,116 @@ a.logo img {
 .canvas-gallery-item .col-md-12.color4 {
     background-color: #29bca4;
 }
+.canvas-gallery-item .old-version {
+    padding-top: 1.7em !important;
+}
 
-/*Remove Button*/
-/*<button type="button" class="remove-canvas"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Remove canvas</button>*/
+/* Remove Button */
 .remove-canvas{
-  color:#37474f;
-  margin-top:0;
-  border:none;
-  border-radius: 0 0 5px 5px;
-  padding:0.5em;
-  background-color:#cfd8dc;
-  transition:all 0.3s;
+    color: #37474f;
+    margin-top: 0;
+    border: none;
+    border-radius:  0 0 5px 5px;
+    padding: 0.5em;
+    background-color: #cfd8dc;
+    transition: all 0.3s;
 }
 .remove-canvas:hover{
-  color:#fff;
-  background-color:#546e7a;
+    color: #fff;
+    background-color: #546e7a;
 }
 .remove-canvas span{
-  margin-right:0.5em;
+    margin-right: 0.5em;
+}
+
+/* ----------------------------------------------
+Background shadow on all types of popups
+----------------------------------------------- */
+
+div#shadow {
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* ----------------------------------------------
+Window buttons and and dialog buttons
+----------------------------------------------- */
+
+button.window-button {
+    outline: 0;
+    padding: 0.25em 1.2em !important;
+    background-color: rgb(126, 150, 188);
+    color: #ffffff !important;
+    font-size: 1em !important;
+    color: rgb(51, 51, 51);
+    border: none;
+    border-radius: 0.5em;
+}
+button.window-button:hover {
+    color: #ffffff;
+    opacity: 0.75;
+    border-color: #ffffff;
+}
+.dialog-content button.window-button {
+    float: left;
+    margin: 1em 0.75em 0 0;
+}
+
+/* ----------------------------------------------
+Dialog windows
+----------------------------------------------- */
 
+div.dialog {
+    display: none;
+    width: 26%;
+    position: fixed;
+    font-family: 'Open Sans', sans-serif;
+    z-index: 5;
+    background-color: rgb(236, 239, 241);
+    border-radius: 5px;
+    min-height: 130px;
+    /* Center window horizontally and vertically */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+div.dialog h2 {
+    color: rgb(79, 93, 115);
+    font-size: 1.4em;
+    margin: 0;
+    color: #444;
+}
+div.dialog p {
+    font-size: 0.95em;
+    color: rgb(51, 51, 51);
+}
+div.dialog button {
+    position: relative;
+    top: -8px;
+    font-size: 2.5em;
+    outline: 0;
+    color: #444;
+    float: right;
+}
+div.dialog-header {
+    background-color: rgb(210, 210, 210);
+    padding: 0.65em 0.75em 0.65em 0.75em;
+    border-radius: 5px 5px 0 0;
+    width: 100%;
+}
+div.dialog-content {
+    padding: 0.75em 1.5em 0.75em 0.75em;
 }
-/* ------------------------------
-        Footer
- ------------------------------ */
+
+/* ----------------------------------------------
+    Footer
+----------------------------------------------- */
 
 footer {
     font-size: 1em;
@@ -159,9 +256,7 @@ footer .privacy a {
 footer .terms a {
     color: #aed581;
 }
-
-/*footer license icons */
-
+/* Footer license icons */
 footer .license-icons ul {
     list-style-type: none;
     margin-left: 0;
@@ -173,4 +268,4 @@ footer .license-icons li {
 }
 footer .license-icons ul img {
     width: 3.5em;
-}
+}