-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
148 lines (130 loc) · 6.04 KB
/
index.html
File metadata and controls
148 lines (130 loc) · 6.04 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="logo.svg">
<title>Fisheye Flyout Menu — Interactive Demo</title>
<link rel="stylesheet" href="fisheye-menu.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: #1a1a2e;
color: #e0e0e0;
min-height: 100vh;
transition: background 200ms ease, color 200ms ease;
}
.fisheye-theme-light body {
background: #f5f5f8;
color: #222;
}
.fisheye-theme-light .info h1 { color: #7c4dff; }
.fisheye-theme-light .info p { color: #444; }
.fisheye-theme-light .info a { color: #7c4dff; border-color: #7c4dff; }
.fisheye-theme-light #controls select { background: #fff; color: #333; border-color: #ccc; }
.fisheye-theme-light #controls label { color: #555; }
/* ── Demo page styles ─────────────────────────────── */
.info {
padding: 40px;
max-width: 720px;
}
.info h1 {
font-size: 28px;
font-weight: 600;
margin-bottom: 8px;
color: #e94560;
}
.info p {
line-height: 1.6;
color: #a0a0b0;
margin-bottom: 12px;
}
.info code {
background: #16213e;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="menubar"></div>
<div class="info">
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
<img src="logo.svg" width="64" alt="Fisheye Flyout Menu" />
<div>
<span style="font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #e94560;">Interactive Demo</span>
<h1 style="margin: 0;">Fisheye Flyout Menu</h1>
</div>
</div>
<p>
Luxuriously usable cascading menus. Items dynamically resize based on mouse
proximity, applying Fitts's Law to reduce target acquisition time. Travel to
flyout menus is enabled with a steering corridor computed with trigonometry.
Mouse targets are carefully preserved even as the menu animates.
</p>
<p>
Try the menus above. Taxonomies from biology, chemistry, typography,
Dewey Decimal, and Psychodeli+ color palettes.
</p>
<div id="controls" style="margin-top: 24px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center;">
<label style="display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a0a0b0;">
Menu bar
<select id="opt-bar-trigger" style="background: #16213e; color: #c0c0c0; border: 1px solid #0f3460; border-radius: 4px; padding: 3px 6px; font-size: 13px;">
<option value="click" selected>Click to open</option>
<option value="hover">Hover to open</option>
</select>
</label>
<label style="display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a0a0b0;">
Flyouts
<select id="opt-flyout-trigger" style="background: #16213e; color: #c0c0c0; border: 1px solid #0f3460; border-radius: 4px; padding: 3px 6px; font-size: 13px;">
<option value="hover" selected>Hover to open</option>
<option value="click">Click to open</option>
</select>
</label>
<label style="display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a0a0b0;">
<input type="checkbox" id="opt-fisheye" checked> Fisheye
</label>
<label style="display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a0a0b0;">
<input type="checkbox" id="opt-overlay" checked> Overlay
</label>
<label style="display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a0a0b0;">
<input type="checkbox" id="opt-light"> Light mode
</label>
</div>
<p style="margin-top: 20px;">
<a href="https://github.com/andyed/fisheye-menu" style="color: #e94560; text-decoration: none; border: 1px solid #e94560; padding: 8px 16px; border-radius: 6px; font-size: 14px;">View on GitHub</a>
</p>
</div>
<script type="module">
import { MENUS } from './menu-data.js';
import { create } from './fisheye-menu.js';
let menu = null;
function init() {
if (menu) menu.destroy();
menu = create(document.getElementById('menubar'), MENUS, {
debug: true,
fisheye: document.getElementById('opt-fisheye').checked,
overlay: document.getElementById('opt-overlay').checked,
theme: document.getElementById('opt-light').checked ? 'light' : 'dark',
barTrigger: document.getElementById('opt-bar-trigger').value,
flyoutTrigger: document.getElementById('opt-flyout-trigger').value,
onSelect: (item) => console.log('Selected:', item.label),
});
}
init();
// Rebuild on any control change
document.getElementById('controls').addEventListener('change', init);
</script>
<!-- PostHog + ClickSense -->
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog&&window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once on".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_UtkQeyklDA8wNmaQ3ZTDYNl9wJ9ExUs3BF1dX22hcJY',{api_host:'https://us.i.posthog.com',person_profiles:'identified_only',persistence:'memory'});
</script>
<script src="clicksense.js"></script>
<script>
if(window.ClickSenseLib&&window.posthog){new ClickSenseLib.ClickSense({onCapture:ClickSenseLib.createPostHogAdapter(),enableApproachDynamics:true});}
</script>
</body>
</html>