forked from uwcirg/ISACC-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
307 lines (259 loc) · 14.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE HTML>
<html>
<head>
<title>ISACC CARING CONTACTS</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="shortcut icon" type="./image/x-icon" href="./images/Icon.png"/>
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=MuseoModerno">
<script src="https://kit.fontawesome.com/0fbfe3d2f7.js" crossorigin="anonymous"></script>
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<style>
.resource {
color: #b292c8;
}
.faq {
color: #efc542;
}
.story {
color: #96cfcf;
}
.clip-spacer {
clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.59999999999999%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.40000000000001%, 79% 64.7%, 80% 64.84999999999999%, 81% 65%, 82% 65%, 83% 64.90000000000001%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
background: #f3eefa;
min-height: 48px;
margin-top: -48px;
transform: rotate(180deg);
position: relative;
top: 120px;
}
h1 {
font-weight: 900;
font-family: 'MuseoModerno', serif;
letter-spacing: 0.4rem;
font-size: 5em; }
h2 {
font-family: 'MuseoModerno', serif;
}
h3 {
font-weight: 100;
}
#mybutton {
position: fixed;
top: 4px;
right: 10px;
z-index: 1;
}
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
</head>
<body class="is-preload">
<!--Menu-->
<!--Menu-->
<section id="sidebar">
<div class="inner">
<nav>
<ul>
<li><a href="index.html" class="smooth-scroll-middle" style="text-decoration: none;">Home</a></li>
<li><a href="GDM1.html" class="smooth-scroll-middle" style="text-decoration: none;">Caring Contacts</a></li>
<li><a href="GDM2.html" class="smooth-scroll-middle" style="text-decoration: none;">Exploring Options</a></li>
<li><a href="CCguide.html" class="smooth-scroll-middle" style="text-decoration: none;">Getting Started</a></li>
<li><a href="other.html" class="smooth-scroll-middle" style="text-decoration: none;">More</a></li>
</ul>
</nav>
</div>
</section>
<section id="hambagaMenu" role="navigation">
<div id="menuToggle">
<!-- A fake / hidden checkbox is used as click reciever, so you can use the :checked selector on it. -->
<input type="checkbox" />
<!-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. -->
<span></span>
<span></span>
<span></span>
<!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic. -->
<ul id="menu">
<li><a href="index.html" class="smooth-scroll-middle" style="text-decoration: none;">Home</a></li>
<li><a href="GDM1.html" class="smooth-scroll-middle" style="text-decoration: none;">Caring Contacts</a></li>
<li><a href="GDM2.html" class="smooth-scroll-middle" style="text-decoration: none;">Exploring Options</a></li>
<li><a href="CCguide.html" class="smooth-scroll-middle" style="text-decoration: none;">Getting Started</a></li>
<li><a href="other.html" class="smooth-scroll-middle" style="text-decoration: none;">More</a></li>
</ul>
</div>
</section>
<!-- Wrapper -->
<div id="wrapper" class="divided">
<!-- One -->
<section class="banner style3 fullscreen orient-right content-align-left image-position-right">
<div class="content">
<h1>Caring Contacts
</h1>
<p>Welcome to the Caring Contacts Toolkit. The goal of this toolkit is to help you think through how you want to send Caring Contacts in your agency/clinic/program. We will provide you with background information to help you understand Caring Contacts, why and how it works, and suggestions for how best to implement the intervention with your organization's clients. In addition, we address topics that you and your agency will want to consider while implementing Caring Contacts. These are your choices and there is no right answer, but we’ve included some key points to consider as well as pros and cons of different decisions to think through and discuss as you plan your Caring Contacts program. </p>
<!--<h2>Guided Decision Making</h2>
<ul class="actions stacked">
<li><a href="GDM1.html" class="button big wide primary smooth-scroll-middle"> Get Started <i class="fa fa-caret-right"></i> </a></li>
</ul>-->
</div>
<div class="image">
<img src="images/Frame 64.png" alt="" />
</div>
</section>
<!--<section class="wrapper style1 align-center">
<div class="inner">
<h2>Guided Decision Making</h2>
<ul class="actions stacked">
<li><a href="GDM1.html" class="button big wide smooth-scroll-middle"> Get Started <i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
</section>-->
<section class="spotlight style1 orient-left content-align-left image-position-left">
<div class="content">
<h2 id="first">What Are Caring Contacts?</h2>
<p>Caring Contacts are brief, periodic messages sent over 1-2 years that express unconditional care and concern. They have reduced suicide, suicide attempts, and suicide ideation, are cost-effective, are recommended by multiple clinical practice guidelines, and have the potential to scale up to a single individual intervening with hundreds of suicidal individuals. However, despite this strong support, few health systems are using Caring Contacts and many who have made maladaptive adaptations that weaken core Caring Contacts principles. These maladaptive modifications occur largely because Caring Contacts activities fall outside of established workflows.
</p>
<ul class="actions stacked">
<li><a href="GDM1.html" class="button big wide primary smooth-scroll-middle"> More About Caring Contacts <i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
<div class="image">
<img src="images/no-revisions-Vn_j28AxFL0-unsplash.jpg" alt="" />
</div>
</section>
<section class="spotlight style1 orient-right content-align-left image-position-center">
<div class="content">
<h2 id="first">Options for Implementation</h2>
<p>Caring Contacts can be implemented via a variety of methods, from small-scale, no-cost options to dedicated web-apps that are designed specifically for this intervention and with the needs of organizations like yours in mind.
</p>
<ul class="actions stacked">
<li><a href="GDM2.html" class="button big wide primary smooth-scroll-middle"> What are the Options? <i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
<div class="image">
<img src="images/no-revisions-83-J2B_6ENQ-unsplash.jpg" alt="" />
</div>
</section>
<section class="spotlight style1 orient-left content-align-left image-position-left">
<div class="content">
<h2 id="first">A Practical Guide to Sending Caring Contacts</h2>
<p>The Caring Contacts intervention can be easily implemented by organizations of all sizes and skill levels. This guide offers advice and recommendations for all phases of design, planning, and implementation, along with guidance on how to manage day-to-day implementation challenges.
</p>
<ul class="actions stacked">
<li><a href="GDM1.html" class="button big wide primary smooth-scroll-middle"> Getting Started <i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
<div class="image">
<img src="images/no-revisions-E4Q1g5Uf_7A-unsplash.jpg" alt="" />
</div>
</section>
<!--<section class="spotlight style3 orient-left content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2 id="demo">What is ISACC?</h2>
<div class="items style3 big onscroll-fade-in">
<section class="feature">
<i class="fas fa-book" style="color: #FE8F3E;"></i>
<p>Privacy and convenience for both the authors and the recipients</p>
</section>
<section class="feature">
<i class="fas fa-book" style="color: #FE8F3E;"></i>
<p>Caring Contacts Automated messages are prescheduled, personalized for each recipient and editable on demand</p>
</section>
<section class="feature">
<i class="fas fa-book" style="color: #FE8F3E;"></i>
<p>Customizable notifications to the author via email or text keep them in the loop on recipient replies</p>
</section>
<section class="feature">
<i class="fas fa-book" style="color: #FE8F3E;"></i>
<p>The <span style="font-family: 'MuseoModerno';">ISACC</span> system provides context to authors via notes and message history</p>
</section>
</div>
<ul class="actions">
<li><a href="ISACC.html" target="_blank" class="button small wide smooth-scroll-middle">Learn about the ISACC System <i class="fa fa-caret-right"></i> </a></li>
<li><a href="ISACC.html" target="_blank" class="button small wide smooth-scroll-middle">Is ISACC Right for your Org? <i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
<div class="image">
<img src="images/Lockscreen.png" alt="" />
</div>
</section>-->
<!--<section class="wrapper style1 align-center">
<div class="inner">
<h2 id="first">Caring Contacts Toolkit</h2>
<ul class="actions">
<li><a href="about.html" class="button big wide smooth-scroll-middle" target="_blank">Web Version<i class="fa fa-caret-right"></i> </a></li>
<li><a href="about.html" class="button big wide smooth-scroll-middle" target="_blank">PDF Version<i class="fa fa-caret-right"></i> </a></li>
<li><a href="about.html" class="button big wide smooth-scroll-middle" target="_blank">Quick Guide<i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
</section>-->
<!--<section class="wrapper style1 align-center">
<div class="inner">
<h2 id="first">ISACC Toolkit</h2>
<ul class="actions">
<li><a href="about.html" class="button big wide smooth-scroll-middle" target="_blank">Web Version<i class="fa fa-caret-right"></i> </a></li>
<li><a href="about.html" class="button big wide smooth-scroll-middle" target="_blank">PDF Version<i class="fa fa-caret-right"></i> </a></li>
<li><a href="about.html" class="button big wide smooth-scroll-middle" target="_blank">Quick Guide<i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
</section>-->
<section class="spotlight style1 orient-right content-align-left image-position-left">
<div class="content">
<h2 id="first">About Us</h2>
<p>The Center for Suicide Prevention and Recovery (CSPAR) teamed up with the Clinical Informatics Research Group (CIRG) and experts in Human Centered Design and clinical decision support tools to develop this Caring Contact toolkit and the ISACC web-app. </p>
<ul class="actions stacked">
<li><a href="about.html" class="button big wide smooth-scroll-middle">About Us<i class="fa fa-caret-right"></i> </a></li>
</ul>
</div>
<div class="image">
<img src="images/xin-BFO8xXD__gM-unsplash.jpg" alt="" />
</div>
</section>
<span class="clip-spacer"></span>
<!-- Seven -->
<section class="wrapper style1 align-center" style="background: #E3F1F1;">
<div class="inner medium">
<div class="items style3 medium">
<section>
<a href="https://www.washington.edu/" target="_blank"><img src="images/uwLogo-transparentbg.png" class="image fit" alt="UW logo" /></a>
</section>
<section>
<a href="https://www.cirg.washington.edu/" target="_blank"><img src="images/CIRG_logo.png" class="image fit" style="padding: 3em;" alt="CIRG logo" /></a>
</section>
<section>
<a href="https://www.uwcspar.org/" target="_blank"><img src="images/CSPAR-logo-4-10-20-for-light-background.png" class="image fit" alt="CSPAR foundation logo" /></a>
</section>
</div>
</div>
</section>
<!-- Footer -->
<footer class="wrapper style1 align-center" style="background-color: #34A9C7 !important; color: #ffffff !important;">
<div class="inner">
<h2 style="color: #ffffff;">Contact Us!</h2>
<hr/>
<ul class="icons">
<li>email: isaccsupport@uw.edu</li>
<!--<li>phone: ---</li>-->
</ul>
<p>© 2024 University of Washington All rights reserved</p>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>