-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (105 loc) · 5.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1 user-scalable=no">
<link href="assets/css/reset.css" rel="stylesheet">
<link href="assets/css/demo.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet">
<script src="dist/index.js"></script>
</head>
<body>
<div class="page-wrapper">
<main>
<section class="importance">
<div class="card">
<h2>Importance</h2>
<div class="donut">
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<!-- r = C/(2π) where C = 100, this allows us to scale by % -->
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="7"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#c2e16d" stroke-width="7" stroke-dasharray="70 30" stroke-dashoffset="25"></circle>
<filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="9" dy="9" in="SourceAlpha"/>
<feGaussianBlur stdDeviation="5"/>
</filter>
</svg>
</div>
<div class="score">
<p class="rating">7/10</p>
<p class="details">Very Important</p>
</div>
</div>
</section>
<section class="carousel">
<div class="carousel-item">
<h2>Readiness</h2>
<p>How ready are you to complete this goal? If you don’t feel ready, talk with your nurse to make an action plan.</p>
<a href="#">Learn more about readiness ></a>
<div class="pill-button">+ Add Readiness</div>
</div>
</section>
<section class="carousel" initial-index="1" config='{"cardFilterClass": "carousel-item"}'>
<div class="carousel-item">
<h2>Upcoming Milestones</h2>
<p>What are some milestones you will complete with this goal?</p>
<p>Milestones will help you stay on track, and you can check them out as you go!</p>
<a href="#">Learn more about milestones ></a>
<div class="pill-button">+ Add Milestones</div>
</div>
<div class="spacer"></div>
<div class="carousel-item">
<h2>Completed Milestones</h2>
<p>Once you have completed a milestone, it will be saved here.</p>
<a href="#">Learn more about milestones ></a>
</div>
<div class="spacer"></div>
<div class="carousel-item">
<h2>THIS CARD LEFT INTENTIONALLY BLANK</h2>
<a href="#">Learn more about blanks ></a>
</div>
</section>
<section class="carousel" config='{"minCardScale": 1}'>
<div class="carousel-item">
<h2>In Progress Tasks</h2>
<p>Your tasks live on your home page. These are small things you can accomplish quickly. Once you complete tasks they will appear here!</p>
<a href="#">Learn more about tasks ></a>
</div>
<div class="carousel-item">
<h2>Completed Tasks</h2>
<p>Your tasks live on your home page. These are small things you can accomplish quickly. Once you complete tasks they will appear here!</p>
</div>
</section>
<section class="carousel" config='{"edgeShifting": false}'>
<div class="carousel-item">
<h2>Edge shifting disabled (1)</h2>
<p>This carousel demos the effect of disabling the edgeShifting config parameter. Instead of aligning the first and last carousel items with the left and right edge of the parent container, every item is centered in the middle of the parent when active.</p>
<a href="#">Learn more about edge shifting ></a>
<div class="pill-button">+ Add Something</div>
</div>
<div class="carousel-item">
<h2>Edge shifting disabled (2)</h2>
<p>This carousel demos the effect of disabling the edgeShifting config parameter. Instead of aligning the first and last carousel items with the left and right edge of the parent container, every item is centered in the middle of the parent when active.</p>
<a href="#">Learn more about edge shifting ></a>
<div class="pill-button">+ Add Something</div>
</div>
<div class="carousel-item">
<h2>Edge shifting disabled (3)</h2>
<p>This carousel demos the effect of disabling the edgeShifting config parameter. Instead of aligning the first and last carousel items with the left and right edge of the parent container, every item is centered in the middle of the parent when active.</p>
<a href="#">Learn more about edge shifting ></a>
<div class="pill-button">+ Add Something</div>
</div>
</section>
</main>
</div>
<script>
var carousels = document.querySelectorAll('.carousel');
carousels.forEach(function(carousel) {
var config = carousel.attributes.config ? JSON.parse(carousel.attributes.config.value) : undefined;
var initialIndex = carousel.attributes['initial-index'] ? parseInt(carousel.attributes['initial-index'].value) : undefined;
new Carousel(carousel, config, initialIndex);
});
</script>
</body>
</html>