harsh
/
ethics-canvas
разклонено от ADAPT/ethics-canvas


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798
							<?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">
        <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>