forked from kentcdodds/genie
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (105 loc) · 4.97 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
<!DOCTYPE html>
<html ng-app="genieApp" ng-controller="GenieCtrl" ng-keyup="onKeyup($event)">
<head>
<title>GenieJS</title>
<meta name="author" content="Kent C. Dodds">
<meta name="keywords" content="GenieJS, Alfred App, JavaScript, User Experience, UX">
<meta name="description" content="GenieJS is a JavaScript library to improve user expereince by allowing users to perform actions with their keyboard. GenieJS also learns the user's preferences over time.">
<link rel="stylesheet" href="demo-files/vendor/bootstrap.min.css" />
<link rel="stylesheet" href="demo-files/style.css" />
</head>
<body>
<a href="https://github.com/kentcdodds/genie"><img style="position: absolute; top: 0; right: 0; border: 0;" src="./demo-files/vendor/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<header>
<h1>GenieJS</h1>
<h2 id="wish-output">Press Ctrl+Space to <a href="http://www.youtube.com/watch?v=pwsTXpDJSVE" ga>rub the lamp</a></h2>
<h3>Then type an apostrophe ( ' ) to see all the wishes</h3>
<h4>Wishes made: {{wishesMade}}</h4>
<p>
GenieJS was built to simulate the behavior in apps like <a href="http://www.alfredapp.com/" ga>Alfred</a>.<br />
Essentially, you register actions with keywords and then you can find those actions via a keyword search.<br />
For info on the <a href="https://github.com/kentcdodds/genie#vernacular" ga>vernacular</a> of wishes and magic words,
see the <a href="https://github.com/kentcdodds/genie" ga>project on GitHub</a>.<br />
Click <a href="./test" ga>here</a> to see/run the tests...
</p>
</header>
<hr />
<div>
<p>
Here are some instructions for this demo.
</p>
<ol id="instructions-list">
<li>Press Ctrl+Space to open the Genie Search Box</li>
<li>Optionally type an apostrophe (') to show all wishes (<a href="https://github.com/kentcdodds/ng-genie#view-all-wishes" ga>about this feature</a>)</li>
<li>Type anything to filter the wishes</li>
<li>Mouse over or arrow down to the wish you wish and click/press return</li>
<li>Notice how genie organizes the wishes as you make them</li>
<li>Create your own wishes below</li>
<li>Change the lamp's styles below</li>
</ol>
</div>
<hr />
<div id="wish-creator">
<p>
Create and add wishes here
</p>
<form name="wishCreator">
<input type="text" ng-model="wish.id" placeholder="ID (optional)" />
<input type="text" ng-model="wish.magicWords" placeholder="Magic Words (JSON Array/String)" />
<input type="text" ng-model="wish.text" placeholder="Display Text" />
<button type="submit" class="btn btn-success" ng-click="addWishFromInput()">Create Wish</button>
</form>
</div>
<hr />
<div id="styles-control" class="row">
<p>
Change Lamp Styles
</p>
<div class="span1">
<label class="radio">
<input type="radio" value="light" ng-model="genieStyle.color"> Light
</label>
<label class="radio">
<input type="radio" value="dark" ng-model="genieStyle.color"> Dark
</label>
</div>
<div class="span1">
<label class="radio">
<input type="radio" value="large" ng-model="genieStyle.size"> Large
</label>
<label class="radio">
<input type="radio" value="small" ng-model="genieStyle.size"> Small
</label>
</div>
<div class="span1">
<label class="radio">
<input type="radio" value="fast" ng-model="genieStyle.animationSpeed"> Fast
</label>
<label class="radio">
<input type="radio" value="slow" ng-model="genieStyle.animationSpeed"> Slow
</label>
</div>
</div>
<hr />
<div>
<button class="btn btn-info" ng-click="exportOrImportGenie()">Export/Import Genie</button><br />
<textarea id="genie-export-import" ng-model="genieExportImport" placeholder="Output/Input of Export/Import Genie"></textarea>
</div>
<div id="uxLampContainer" class="{{genieStyle.color + ' ' + genieStyle.size + ' ' + genieStyle.animationSpeed}}">
<div ux-lamp rub-class="visible" wish-callback="wishMade()" local-storage="true"></div>
</div>
<script src="genie.js"></script>
<script src="./demo-files/vendor/angular.min.js"></script>
<script src="./demo-files/app.js"></script>
<script src="./demo-files/vendor/uxGenie.js"></script>
<script src="./demo-files/vendor/ga.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42764912-1', 'doddsfamily.us');
ga('send', 'pageview');
</script>
</body>
</html>