Skip to content

Commit 03f1216

Browse files
jabbettjabbett
committed
New: Point animation for 1-Device
1 parent 63af8a4 commit 03f1216

File tree

5 files changed

+186
-1
lines changed

5 files changed

+186
-1
lines changed

‎src/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ <h1 class="sharpen-heading-2xl">Sharpen User Experience Prototypes Library</h1>
3333
</tr>
3434
</thead>
3535
<tbody>
36+
<tr>
37+
<td><a href="point-example/">1-Device: "Point" example</a></td>
38+
<td>September 2024</td>
39+
</tr>
3640
<tr>
3741
<td><a href="enterprise-management/">Enterprise Management</a></td>
3842
<td>September 2024</td>

‎src/prototypes/point-example/adding_s.png‎

71.7 KB
Loading

‎src/prototypes/point-example/index.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr" lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
6+
<title>Sharpen Prototype: Point effect</title>
7+
<link rel="stylesheet" href="../build/kezuri.css" />
8+
<script type="module" src="../build/kezuri.esm.js"></script>
9+
<script nomodule src="../build/kezuri.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
11+
<link href="https://fonts.googleapis.com/css2?family=Lexend:[email protected]&display=swap" rel="stylesheet">
12+
13+
<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>
14+
15+
<style>
16+
html, body, table {
17+
width: 100%;
18+
max-width: 60rem;
19+
height: 100%;
20+
max-height: 40rem;
21+
}
22+
23+
body {
24+
padding: 4em;
25+
}
26+
27+
table {
28+
margin-bottom: 4em;
29+
border-collapse: collapse;
30+
font-family: Lexend;
31+
}
32+
33+
td {
34+
text-align: center;
35+
font-size:48pt;
36+
border: 1px dashed #999;
37+
width: 50%
38+
}
39+
40+
div {
41+
margin-bottom: 2em;
42+
}
43+
</style>
44+
</head>
45+
<body>
46+
47+
48+
<table>
49+
<tr>
50+
<td>
51+
<span id="chicken">chicken</span>
52+
</td>
53+
<td>
54+
<span id="cabbage">cabbage</span>
55+
</td>
56+
</tr>
57+
<tr>
58+
<td>
59+
<span id="pasta">pasta</span>
60+
</td>
61+
<td>
62+
<span id="rice">rice-a-roni</span>
63+
</td>
64+
</tr>
65+
</table>
66+
67+
68+
<div>
69+
chicken:
70+
<button id="chicken_show">circle</button>
71+
<button id="chicken_hide">clear circle</button>
72+
</div>
73+
74+
<div>
75+
cabbage:
76+
<button id="cabbage_show">box</button>
77+
<button id="cabbage_hide">clear box</button>
78+
</div>
79+
80+
<div>
81+
pasta:
82+
<button id="pasta_show">highlight</button>
83+
<button id="pasta_hide">clear highlight</button>
84+
</div>
85+
86+
<div>
87+
rice-a-roni
88+
<button id="rice_show">underline</button>
89+
<button id="rice_hide">clear underline</button>
90+
</div>
91+
92+
93+
<script>
94+
95+
window.addEventListener("DOMContentLoaded", () => {
96+
97+
const a1 = RoughNotation.annotate(document.querySelector('#chicken'), { type: 'circle', padding: 25, strokeWidth: 8, color: '#59C3E144' });
98+
const a2 = RoughNotation.annotate(document.querySelector('#cabbage'), { type: 'box', padding: 10, strokeWidth: 4, color: 'rgba(49, 119, 108, 0.4)' });
99+
const a3 = RoughNotation.annotate(document.querySelector('#pasta'), { type: 'highlight', color: '#FFD54F77' });
100+
const a4 = RoughNotation.annotate(document.querySelector('#rice'), { type: 'underline', strokeWidth: 6, color: '#D0505099', iterations: 3, animationDuration: '400' });
101+
102+
// const ag = RoughNotation.annotationGroup([a1, a2, a3, a4]);
103+
104+
$("#chicken_show").click(function() { a1.show(); });
105+
$("#chicken_hide").click(function() { a1.hide(); });
106+
107+
$("#cabbage_show").click(function() { a2.show(); });
108+
$("#cabbage_hide").click(function() { a2.hide(); });
109+
110+
$("#pasta_show").click(function() { a3.show(); });
111+
$("#pasta_hide").click(function() { a3.hide(); });
112+
113+
$("#rice_show").click(function() { a4.show(); });
114+
$("#rice_hide").click(function() { a4.hide(); });
115+
116+
117+
118+
119+
// a1.show();
120+
// a2.show();
121+
// a3.show();
122+
// a4.show();
123+
124+
});
125+
126+
</script>
127+
128+
</body>
129+
</html>

‎src/prototypes/point-example/spotlight.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr" lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
6+
<title>Sharpen Prototype: Point effect</title>
7+
<link rel="stylesheet" href="../build/kezuri.css" />
8+
<script type="module" src="../build/kezuri.esm.js"></script>
9+
<script nomodule src="../build/kezuri.js"></script>
10+
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
12+
13+
<style>
14+
body { background: url('adding_s.png') no-repeat; }
15+
.spotlight {
16+
position: absolute;
17+
height: 100%;
18+
width: 100%;
19+
background-image: radial-gradient(
20+
circle at 200px 500px,
21+
transparent 160px,
22+
rgba(0, 0, 0, 0.5) 180px
23+
);
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
29+
30+
<div class="spotlight"></div>
31+
32+
33+
<script>
34+
35+
window.addEventListener("DOMContentLoaded", () => {
36+
37+
const spotlight = document.querySelector('.spotlight');
38+
let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.5) 180px)';
39+
40+
function updateSpotlight(x, y) {
41+
spotlight.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px, ${spotlightSize}`;
42+
}
43+
44+
window.addEventListener('click', e => updateSpotlight(e.clientX, e.clientY));
45+
46+
});
47+
48+
</script>
49+
50+
</body>
51+
</html>

‎src/prototypes/reading-dashboard/additional.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ <h1 class="sharpen-heading-xl sharpen-heading--bordered sharpen-mb-md">
7171
</dl>
7272

7373
<div class="level-description sharpen-text-xs sharpen-text--muted sharpen-text--body">
74-
<p>The placement assessment evaluates the learner's current reading skills in order to determine the appropriate starting level in Sharpen Reading. It's important to note that the placement assessment helps identify the learner's current reading level and skills. This assessment is not a measure of the learner's current or future reading potential, but rather a tool to help create a learning plan that meets the learner's specific immediate needs.</p>
74+
<p>The placement assessment evaluates the learner's current reading skills in order to determine the appropriate starting level in Sharpen Reading.</p>
75+
<p>Note: Because Sharpen is used by parents, other relatives, teachers, and tutors, the app will refer to you as the learner's "reading coach."</p>
7576
</div>
7677
</sharpen-card>
7778

0 commit comments

Comments
 (0)