harsh
/
ethics-canvas
forked from ADAPT/ethics-canvas


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014
							<?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>
        
        <!-- Favicon -->
        <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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/canvas.css" />
        
        <!-- PHP variables have to be retieved here as js variable -->
        <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">
                <!-- Username -->
                <input type="hidden" name="canvas_id" value="<?php echo($canvas_id) ?>" />
                <input type="hidden" name="username" value="<?php echo($email) ?>" />
                
                <!-- 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>
                    <!-- Log in -->
                    <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>
                    <!-- Collaborators -->
                    <div class="col-md-3">
                        <?php if(!empty($name)) { ?>
                        <!-- Bootstrap dropdown component -->
                        <div class="dropdown collaborators">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1">
                            <!-- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> -->
                                <img src="../icon/collaborators.svg" alt="collaborators" /><span>Collaborators (0 active)</span>
                                <!-- <span class="caret"></span> -->
                            </button>
                        </div>
                        <?php } ?>
                    </div>
                </div>
                
                <!-- Jump to -->
                <div class="jump-to-click-area">&nbsp;</div>
                <div class="jump-to row">
                    <div class="col-s-12">
                        <label><img class="jump-to-img jump-to-arrow-0" src="icons/glyphicon-chevron-right.gif" />Jump to...</label>
                        <!-- <a href="#"><label class="jump_to"><span class="jump-to-arrow glyphicon glyphicon-chevron-right"></span> Jump to...</label></a> -->
                        <div class="jump-to-list">
                            <hr />
                            <ul>
                                <li>
                                    <a href="#row_saved_tags">Saved Tags for This Canvas</a>
                                </li>
                                <li>
                                    <a href="#panel_01">1.&nbsp;&nbsp;Individuals Affected</a>
                                </li>
                                <li>
                                    <a href="#panel_02">2.&nbsp;&nbsp;Groups Affected</a>
                                </li>
                                <li>
                                    <a href="#panel_03">3.&nbsp;&nbsp;Behaviour</a>
                                </li>
                                <li>
                                    <a href="#panel_04">4.&nbsp;&nbsp;Relations</a>
                                </li>
                                <li>
                                    <a href="#panel_05">5.&nbsp;&nbsp;Worldviews</a>
                                </li>
                                <li>
                                    <a href="#panel_06">6.&nbsp;&nbsp;Group Conflicts</a>
                                </li>
                                <li>
                                    <a href="#panel_07">7.&nbsp;&nbsp;Product or Service Failure</a>
                                </li>
                                <li>
                                    <a href="#panel_08">8.&nbsp;&nbsp;Problematic Use of Resources</a>
                                </li>
                                <li>
                                    <a href="#panel_09">9.&nbsp;&nbsp;What can we do?</a>
                                </li>
                                <li>
                                    <a href="#panel_10">10.&nbsp;&nbsp;Uncategorised ideas</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- Saved Tags for This Canvas -->
                <div class="saved-tags row" id="row_saved_tags">
                    <div class="col-s-12">
                        <label>Saved Tags for This Canvas</label>
                        <p>You haven't added any tags yet.</p>
                    </div>
                </div>
                
                <!-- LAYOUT -->
                <!-- ================ 7/5 col ================ -->
                <div class="canvas-box">
                    <div class="masonry-layout7-5" id="7-5-col-layout">
                        <div class="masonry-layout__panel" id="panel_01">
                            <div class="card field_01 masonry-layout__panel-content bg--purple">
                                <h2 class="field-title">
                                    <!-- FIELD -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="Who use your product or service? Who are affected by it’s use? Are they men/women, of different ages, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Individuals Affected&nbsp;&nbsp;
                                </h2>
                                <!--
                                <p class="intro">
                                    Who use your product or service? Who are affected by it’s use? Are they men/women, of different ages, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field1.svg" alt="field1" />
                                    <img src="./icons/number1.svg" alt="number1" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_03">
                            <div class="card field_03 masonry-layout__panel-content bg--blue">
                                <h2 class="field-title">
                                    <!-- FIELD -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might people’s behaviour change because of your product or service? Their habits, time schedules, choice of activities, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Behaviour
                                </h2>
                                <!--
                                <p class="intro">
                                    How might people’s behaviour change because of your product or service? Their habits, time schedules, choice of activities, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field3.svg" alt="field3" />
                                    <img src="./icons/number3.svg" alt="number3" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_04">
                            <div class="card field_04 masonry-layout__panel-content bg--green">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might relations between people and groups change because of your product or service? Between friends, family members, co-workers, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Relations
                                </h2>
                                <!--
                                <p class="intro">
                                    How might relations between people and groups change because of your product or service? Between friends, family members, co-workers, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field4.svg" alt="field4" />
                                    <img src="./icons/number4.svg" alt="number4" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_09">
                            <div class="card field_09 masonry-layout__panel-content bg--darkblue">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="What are the most important ethical impacts you found? How can you address these by changing your design, organisation, or by proposing broader changes?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>What can we do?
                                </h2>
                                <!--
                                <p class="intro">
                                    What are the most important ethical impacts you found? How can you address these by changing your design, organisation, or by proposing broader changes?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field9.svg" alt="field9" />
                                    <img src="./icons/number9.svg" alt="number9" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_05">
                            <div class="card field_05 masonry-layout__panel-content bg--seagreen">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might people’s worldviews be affected by your product or service? Their ideas about consumption, religion, work, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Worldviews
                                </h2>
                                <!--
                                <p class="intro">
                                    How might people’s worldviews be affected by your product or service? Their ideas about consumption, religion, work, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field5.svg" alt="field5" />
                                    <img src="./icons/number5.svg" alt="number5" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_06">
                            <div class="card field_06 masonry-layout__panel-content bg--green1">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="How might group conflict arise or be affected by your product or service? Could it disciminate between people, put them out of work, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Group Conflicts
                                </h2>
                                <!--
                                <p class="intro">
                                    How might group conflict arise or be affected by your product or service? Could it disciminate between people, put them out of work, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field6.svg" alt="field6" />
                                    <img src="./icons/number6.svg" alt="number6" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_02">
                            <div class="card field_02 masonry-layout__panel-content bg--purple">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="Which groups are involved in the design, production, distribution and use of your product or service? Which groups might be affected by it? Are these work-related organisation, interest groups, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Groups Affected
                                </h2>
                                <!--
                                <p class="intro">
                                    Which groups are involved in the design, production, distribution and use of your product or service? Which groups might be affected by it? Are these work-related organisation, interest groups, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field2.svg" alt="field2" />
                                    <img src="./icons/number2.svg" alt="number2" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        
                    </div>
                    
                    <!-- ================ 2 col ================ -->
                    <div class="masonry-layout2" id="2-col-layout">
                        <div class="masonry-layout__panel" id="panel_07">
                            <div class="card field_07 masonry-layout__panel-content bg--blue">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="What are potential negative impact of your product or service failing to operate or to be used as intended? What happens with technical errors, security failures, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Product or Service Failure
                                </h2>
                                <!--
                                <p class="intro">
                                    What are potential negative impact of your product or service failing to operate or to be used as intended?
                                    What happens with technical errors, security failures, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field7.svg" alt="field7" />
                                    <img src="./icons/number7.svg" alt="number7" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                        <div class="masonry-layout__panel" id="panel_08">
                            <div class="card field_08 masonry-layout__panel-content bg--green">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="What are potential negative impacts of the consumption of resources relating to your project? What happens with its use of energy, personal data, etc?"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Problematic Use of Resources
                                </h2>
                                <!--
                                <p class="intro">
                                    What are potential negative impacts of the consumption of resources relating to your project? What happens with its use of energy, personal data, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field8.svg" alt="field8" />
                                    <img src="./icons/number8.svg" alt="number8" />
                                </div>
                            </div>
                            <!-- End of .card -->
                        </div>
                    </div>
                    
                    <!-- ================ 1 col ================ -->
                    <div class="masonry-layout" id="1-col-layout">
                        <div class="masonry-layout__panel" id="panel_10">
                            <div class="card field_10 masonry-layout__panel-content bg--purple">
                                <h2 class="field-title">
                                    <!-- Field -->
                                    <a href="#" data-toggle="tooltip" data-placement="left" title="Here you can place your ideas that still haven't been categorised"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>Uncategorised ideas
                                </h2>
                                <!--
                                <p class="intro">
                                    What are potential negative impact of your product or service failing to operate or to be used as intended?
                                    What happens with technical errors, security failures, etc?
                                </p>
                                -->
                                <!-- Into text toggle -->
                                <!-- <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">
                                </ul>
                                <!-- The Box With All User input Thing -->
                                <!-- # Tag selected term link -->
                                <p class="tag-selected-term">
                                    <a href="#">
                                        Tag selected term
                                    </a>
                                </p>
                                <div class="add_box">
                                    <!-- # Add idea link -->
                                    <p>
                                        <a class="add-idea" href="#">
                                            Add an idea
                                        </a>
                                    </p>
                                    <!-- # 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 class="field-bottom">
                                    <img src="./icons/field10.svg" alt="field10" />
                                </div>
                            </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 button -->
                        
                        <?php if(!empty($name)) { ?>
                        
                        <p class="text-center" id="save-canvas">
                            <!-- 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>
                        
                        <p class="text-center" id="saved-automatically">
                            Canvases with collaborators are saved automatically
                        </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="Please enter an email address..."/>
                            </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&nbsp;up&nbsp;or&nbsp;login to&nbsp;save&nbsp;your&nbsp;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>
                
                <!-- Start of move-window -->
                <div class="window" id="move-window">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2>Move idea to...</h2>
                    <ul>
                        <li>
                            <a href="#">1.&nbsp;&nbsp;Individuals Affected</a>
                        </li>
                        <li>
                            <a href="#">2.&nbsp;&nbsp;Groups Affected</a>
                        </li>
                        <li>
                            <a href="#">3.&nbsp;&nbsp;Behaviour</a>
                        </li>
                        <li>
                            <a href="#">4.&nbsp;&nbsp;Relations</a>
                        </li>
                        <li>
                            <a href="#">5.&nbsp;&nbsp;Worldviews</a>
                        </li>
                        <li>
                            <a href="#">6.&nbsp;&nbsp;Group Conflicts</a>
                        </li>
                        <li>
                            <a href="#">7.&nbsp;&nbsp;Product or Service Failure</a>
                        </li>
                        <li>
                            <a href="#">8.&nbsp;&nbsp;Problematic Use of Resources</a>
                        </li>
                        <li>
                            <a href="#">9.&nbsp;&nbsp;What can we do?</a>
                        </li>
                        <li>
                            <a href="#">10.&nbsp;&nbsp;Uncategorised ideas</a>
                        </li>
                    </ul>
                    <!--
                    <h2 id="tag-description">
                        Tag description
                    </h2>
                    <textarea rows="4" cols="50" maxlength="200" id="tag-description">Please enter a description...</textarea><br />
                    <p class="chars-count">
                        <span class="chars">200</span>
                        characters remaining
                    </p>
                    <button type="button" class="window-button" id="save-tag">Save tag</button>&nbsp;
                    <button type="button" class="window-button" id="delete-tag">Delete tag</button>
                    <h2 class="similar-tags">Similar tags by other users</h2>
                    <p class='similar-tags-description-none'>No similar tags could be found!</p>
                    -->
                </div>                
                <!-- End of move-window -->
                
                <!-- Start of tag-window -->
                <div class="window" id="tag-window">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <!-- <div id="tag-window-container"> -->
                    <h1></h1>
                    <h2 id="tag-description">
                        Tag Description
                    </h2>
                    <textarea rows="4" cols="50" maxlength="200" id="tag-description">Please enter a description...</textarea><br />
                    <p class="chars-count">
                        <span class="chars">200</span>
                        characters remaining
                    </p>
                    <button type="button" class="window-button" id="save-tag">Save Tag</button>&nbsp;
                    <button type="button" class="window-button" id="delete-tag">Delete Tag</button>
                    <h2 class="similar-tags">Similar tags by other users</h2>
                    <p class='similar-tags-description-none'>No similar tags could be found!</p>
                    <!-- </div> -->
                </div>
                <!-- End of tag-window -->
                
                <!-- Start of Collaborators -->
                <div class="window" id="collaborators-window">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h1>
                        Collaborators
                    </h1>
                    <h2>
                        List of Collaborators
                    </h2>
                    <table>
                    </table>
                    <label><input type="checkbox" name="show-only-active" /> Show only active collaborators</label><br />
                    <h2>
                        Add Collaborator
                    </h2>
                    <input type="email" name="add-collaborator" value="Please enter an email address..." />
                    <button type="button" class="window-button" id="add-collaborator">Add</button>
                    <div class="error-message" id="username-already-exists">The username already exists!</div>
                    <div class="error-message" id="enter-valid-email">Please enter a valid email address!</div>
                </div>
                <!-- End of Collaborators -->
                
            </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.8&nbsp;|&nbsp;&copy; ADAPT Centre &amp; Trinity College Dublin &amp; Dublin City University, 2017</p>
                    
                </footer>
            </div>
        </div>
        <!-- End of container-fluid -->
        
        <!-- Start of dialogs -->
        <div id="shadow">&nbsp;</div>
        <div class="dialog" id="dialog-log-in">
            <div class="dialog-header">
                <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h2>
                    Please log in
                </h2>
            </div>
            <div class="dialog-content"><p>Please log in to use this function.</p></div>
        </div>
        <div class="dialog" id="dialog-select-term">
            <div class="dialog-header">
                <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                </button>
                <h2>
                    Please select term
                </h2>
            </div>
            <div class="dialog-content"><p>Please select a term to be tagged.</p></div>
        </div>
        <!--
        <div class="dialog" id="dialog-tag-already-exists" title="Tag already exists">
            <p>The tag already exists!</p>
        </div>
        -->
        <!-- End of ialogs -->
        
        <!-- 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>
        <!-- Bootstrap -->
        <script src="js/jquery-fieldselection.min.js"></script>
        <!-- The app javascript -->
        <script src="js/canvas.js" charset="utf-8"></script>
        <script language="javascript" type="text/javascript"></script>
        
    </body>
</html>