From 0f6d321d6c6e57589dfb5ee57c10f08c60a14898 Mon Sep 17 00:00:00 2001
From: Nik Nyby <nnyby@columbia.edu>
Date: Tue, 4 Apr 2017 16:24:18 -0400
Subject: [PATCH] Safety Plan Summary updates

based on Marc's mockup
---
 worthapp/css/worth.css |   7 +++
 worthapp/index.html    | 110 ++++++++++++++++++++++++++++++++++-------
 2 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/worthapp/css/worth.css b/worthapp/css/worth.css
index 0304abc..dc37c4b 100644
--- a/worthapp/css/worth.css
+++ b/worthapp/css/worth.css
@@ -2,6 +2,13 @@
     display: none;
 }
 
+.safety .row  {
+    margin-bottom: 1em;
+}
+.safety .row .col.definition {
+    text-align: right;
+}
+
 /*
  * Not sure why this is necessary, but bootstrap's .btn-block is
  * displaying buttons wider than the .container. This is a workaround.
diff --git a/worthapp/index.html b/worthapp/index.html
index 3057e61..7c2d999 100644
--- a/worthapp/index.html
+++ b/worthapp/index.html
@@ -68,8 +68,8 @@ <h2>Table of Contents</h2>
                                 <ol><a href="#session-4-6">Self-talk</a></ol>
                                 <ol><a href="#session-4-7">Intro to asserting relationships and safety</a></ol>
                                 <ol><a href="#session-4-8">IPV screener plus score</a></ol>
-                                <ol><a href="#session-4-9">Intro to safety planning</a></ol>
-                                <ol><a href="#session-4-10">Safety planning</a></ol>
+                                <ol><a href="#session-4-9">Intro to Safety Planning</a></ol>
+                                <ol><a href="#session-4-10">Safety Planning</a></ol>
                                 <ol><a href="#session-4-11">Negotiation</a></ol>
                                 <ol><a href="#session-4-12">Barriers to condom use</a></ol>
                                 <ol><a href="#session-4-13">Practicing negotiation</a></ol>
@@ -224,7 +224,12 @@ <h1>Review of goals</h1>
 
                 <div class="swiper-slide" id="session-4-9">
                     <div class="container">
-                        Intro to safety planning
+                        <h1>Intro to Safety Planning</h1>
+                        <div class="embed-responsive embed-responsive-16by9">
+                            <iframe class="embed-responsive-item" width="560" height="315"
+                                    src="https://www.youtube.com/embed/dmLCD6nXaqg"
+                                    allowfullscreen></iframe>
+                        </div>
                     </div>
                 </div>
 
@@ -235,8 +240,6 @@ <h1>Review of goals</h1>
                                  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
 
-                        <h1>Safety planning</h1>
-
                         <div class="panel s1">
                             <div class="embed-responsive embed-responsive-16by9">
                                 <iframe class="embed-responsive-item" width="560" height="315"
@@ -523,21 +526,90 @@ <h1>Safety planning</h1>
                         </div>
 
                         <div class="panel hidden s21">
-                            <ul>
-                                <li>Exits: <div class="summary1"><strong></strong></div></li>
-                                <li>Trusted people: <div class="summary2"><strong></strong></div></li>
-                                <li>Code word: <div class="summary3"><strong></strong></div></li>
-                                <li>Safe places outside home: <div class="summary4"><strong></strong></div></li>
-                                <li>Safe places in your home: <div class="summary5"><strong></strong></div></li>
-                                <li>Who to leave things with: <div class="summary6"><strong></strong></div></li>
-                                <li>Where to keep important documents: <div class="summary7"><strong></strong></div></li>
-                                <li>When to open savings account: <div class="summary8"><strong></strong></div></li>
-                                <li>Ideas for independence: <div class="summary9"><strong></strong></div></li>
-                            </ul>
+                            <h1>My Safety Plan</h1>
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Escape Route</strong>
+                                    <div><em>This is how I will get out.</em></div>
+                                </div>
+                                <div class="col summary1"><strong></strong></div>
+                            </div>
 
-                            <button type="button" class="btn btn-primary btn-block s1">
-                                Start over
-                            </button>
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>People</strong>
+                                    <div><em>These are people I trust and can talk to.</em></div>
+                                </div>
+                                <div class="col summary2"><strong></strong></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Code Word</strong>
+                                    <div><em>This is my code word.</em></div>
+                                </div>
+                                <div class="col summary3"><strong></strong></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Destination</strong>
+                                    <div><em>These are two places I can go if I need to leave home.</em></div>
+                                </div>
+                                <div class="col summary4"><strong></strong></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Safe Space</strong>
+                                    <div><em>These are spaces in my home where I feel safe.</em></div>
+                                </div>
+                                <div class="col summary5"><strong></strong></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Leaving Quickly</strong>
+                                    <div><em>This is who I trust with my emergency belongings.</em></div>
+                                </div>
+                                <div class="col summary6"><strong></strong></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Important Documents</strong>
+                                    <div><em>This is where I keep copies of my important documents.</em></div>
+                                </div>
+                                <div class="col summary7"><strong></strong></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Finances</strong>
+                                    <div><em>This is where and when I plan to open a savings account.</em></div>
+                                </div>
+                                <div class="col summary8"><strong></strong></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col definition">
+                                    <strong>Other Tip</strong>
+                                    <div><em>Here's another helpful idea.</em></div>
+                                </div>
+                                <div class="col summary9"><strong></strong></div>
+                            </div>
+
+                            <div class="alert alert-warning" role="alert">
+                                <strong>Don't forget the paper version!</strong>
+                                <p>Please copy this information to your worksheet.</p>
+                            </div>
+
+                            <div class="alert alert-info" role="alert">
+                                <strong>You're done!</strong> Swipe left to move on.
+                                <button type="button" class="btn btn-primary btn-block s1">
+                                    I want to try again.
+                                </button>
+                            </div>
                         </div>
 
                     </div>