-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
173 lines (145 loc) · 6.5 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>X.commerce Wheel</title>
<script type="text/javascript" src="d3/d3.v2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="tree.css"/>
</head>
<body style="background:url('images/dark.png') ;">
<div class="container">
<div class="top" style="background:#333333;">
<h1>X.commerce APIs</h1>
<!-- <img src="xcom.png" height="50px"></img> -->
<br/>
<p class="">X.commerce is everything developer from <span style="color:#f90000">e</span><span style="color:#1122cc">B</span><span style="color:#facb1a">a</span><span style="color:#95ce03">y</span> inc. If you dare to dream of building a kick-ass commerce application, now is the time. Click on the wheel to find links to developer documentation pages. As you can see, there are APIs for almost every major commerce use case. Time to hack? </p>
<p><div id="backlink" style="display:none;"><a class="btn btn-primary btn-large" href="/radial">Go back</a></div></p>
<p class="pull-right"> <img src="xcom.png"/>
<button class="btn btn-default" data-toggle="button" id="btn1">Discovery</button>
<button class="btn btn-default" data-toggle="button" id="btn2">Payments</button>
<button class="btn btn-default" data-toggle="button" id="btn3">Predict</button>
</p>
<br/>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="commerce wheel for developers" data-via="saranyan" data-size="large" data-related="X_commerce" data-hashtags="dataviz">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://github.com/saranyan/commerce_wheel"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
</div>
<div class="navbar navbar-inner" style="display:none; height: 100px; width: 900px; position:absolute;" id="carousel">
<h4 style="display:inline; color:#fff" >Random Hack Idea</h4>
<a href="#" id="refresh" style="font-size:12px; color:orange;display:inline" class="pull-right">refresh</a>
<br/><br/>
<p id="idea">This visualization is intended to provide an overview of all the products with an ability to drill down by clicking on a parent.</p>
</div>
<!-- <div class="carousel-caption offset3" style="width:50%;margin-bottom:-450px;">
<h4>Radial Wheel</h4>
<p>This visualization is intended to provide an overview of all the products with an ability to drill down by clicking on a parent.</p>
</div> -->
<div id="chart" style="margin-top:-50px;"></div>
<!-- <p> I know this is useless, but what is harm in having some fun </p>
<a href="#" id="faster">faster</a> <a href="#" id="slower">slower </a> -->
</div>
<script type="text/javascript" src="d3/tree-radial.js"></script>
<script type="text/javascript">
/* var ang = 0.1;
$(function() {
var $e = $("#chart"), degree = 0, timer;
rotate();
function rotate() {
$e.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$e.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
timer = setTimeout(function() {
degree=degree+ang; rotate();
},10);
}
$("input").toggle(function() {
clearTimeout(timer);
}, function() {
rotate();
});
});
*/
$(document).ready(function(){
$(document).delegate("#maincircle","mouseover",function(){
ang = 0;
});
$(document).delegate("#maincircle","mouseout",function(){
ang = 0.1;
});
// $('#faster').click(function(){
// if (ang <= 0.9){
// ang += 0.1;
// }
// });
// $('#slower').click(function(){
// if (ang >= 0.1){
// ang -= 0.1;
// }
// })
})
</script>
<script type="text/javascript">
$(document).ready(function(){
var ids;
var ideas;
$.getJSON('ideas.json', function(data){
ids = data;
});
$('#btn1').click(function(){
$('#btn1').toggleClass('btn-success');
changeContent(getClassCode());
});
$('#btn2').click(function(){
$('#btn2').toggleClass('btn-success');
changeContent(getClassCode());
});
$('#btn3').click(function(){
$('#btn3').toggleClass('btn-success');
changeContent(getClassCode());
});
$('a#refresh').click(function(){
classcode = getClassCode();
changeContent(classcode);
ideas = ids[classcode];
randomNum = Math.ceil(Math.random()*ideas.length);
$('p#idea').html(ideas[randomNum]);
});
function changeContent(classcode) {
console.log(classcode)
if (classcode == ""){
$('#carousel').hide();
}
else {
$('#carousel').show();
ideas = ids[classcode];
randomNum = Math.ceil(Math.random()*ideas.length);
$('p#idea').html(ideas[randomNum]);
}
}
function getClassCode(){
str = '';
if($('#btn1').hasClass('btn-success')){
str = str+'1';
}
if($('#btn2').hasClass('btn-success')){
str = str+'2';
}
if($('#btn3').hasClass('btn-success')){
str = str+'3';
}
return str;
}
});
</script>
<div class="container">
<div class="top" style="background:#333333;">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built for <a href="http://twitter.com/x_commerce" target="_blank">@x_commerce</a> by <a href="http://twitter.com/saranyan" target="_blank">@saranyan</a>. </p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Powered by D3, Bootstrap and Github! Thanks guys, for the awesome tools.</p>
</div>
</div>
</body>
</html>