-
Notifications
You must be signed in to change notification settings - Fork 1
/
developer.html
184 lines (170 loc) · 12.6 KB
/
developer.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
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ecliptik - Developer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/flat-ui.css" rel="stylesheet">
<link rel="shortcut icon" href="./dist/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" type="text/css" href="./ecliptik-styles.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials-theme-flat.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="apple-touch-icon" sizes="57x57" href="./dist/img/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./dist/img/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./dist/img/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./dist/img/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./dist/img/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./dist/img/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./dist/img/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./dist/img/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./dist/img/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./dist/img/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./dist/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./dist/img/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./dist/img/favicon-16x16.png">
<link rel="manifest" href="./dist/img/manifest.json">
<script>
hljs.initHighlightingOnLoad();
</script>
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--[if lt IE 9]>
<script src="dist/js/vendor/html5shiv.js"></script>
<script src="dist/js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="demo-headline">
<div class="mycontainer">
<div class="row" style="margin:0">
<div class="col-xs-7 col-md-9 text-left">
<a class="supabutton btn btn-lg btn-primary" href="/">Home</a>
<a class="supabutton btn btn-lg btn-primary" href="/about.html">About</a>
<a class="supabutton current btn btn-lg btn-primary" href="/developer.html">Developer</a>
<a class="supabutton btn btn-lg btn-primary" href="/press.html">Press</a>
</div>
<div class="col-xs-5 col-md-3">
<form class="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
</div>
<h1 class="demo-logo">
<a href="/">
<img src="./ecliptik-logo.png" />
</a>
<small>Because there is a lot of Space between Mars and Venus</small>
</h1>
</div>
<div class="mycontainer" style="padding-top: 30px">
<!-- /navbar -->
<div class="jumbotron">
<h4>Developer</h4>
<h6>How to integrate Ecliptik into your Website</h6>
Ecliptik is a single file javascript plugin. You can download ecliptik.js from our servers
<a href="https://github.com/ecliptik-org/ecliptik-org.github.io/blob/master/ecliptik.js">ecliptik.js</a> or link a
<a href="https://cdn.jsdelivr.net/npm/ecliptik@latest">mirror on CDN</a>. Ecliptik has dependencies to
<a href="https://code.jquery.com/">jQuery</a> and
<a href="http://svgjs.com/">SVG.js</a>.
<pre>
1) Add the following scripts into your HTML-file.
<code class="html"><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ecliptik@latest"></script></code>
2) Add a parent element for the ecliptik drawing.
<code class="html"><div id="myEcliptik"></div></code>
3) Initialize the ecliptik-symbol by calling the "ecliptik()" method on it and provide the parameters for rendering.
<code class="javascript">$("#myEcliptik").ecliptik(
{
sex: 0.5, // [-1,1] [female,male]
gender: -0.5, // [-1,1] [woman,man]
orientation: 0.5, // [-1,1] [female,male]
sexChange: false, // [true,false] if oneself had a sexchange
acceptSexChange: true, // [true,false] if one accepts people with sexchange
noOrientation: false //[true,false] if one is asexual / did not share their orientation
})</code>
That's it.
You can also add the parameters as HTML attribute in JSON-format.
Don't forget to HTML escape the parameters before pasting into your HTML file.
<code class="html"><div class="myEcliptik col-xs-4 col-md-2" ecliptik-params="{&#x22;sex&#x22;:-1,&#x22;gender&#x22;:-1,&#x22;orientation&#x22;:1,&#x22;sexChange&#x22;:false,&#x22;acceptSexChange&#x22;:false,&#x22;noOrientation&#x22;:true}"></div></code>
In this case, you can initialize all Ecliptik elements on your page at once by simply calling the
"ecliptik()" method without parameters.
<code class="javascript">$(".myEcliptik").ecliptik()</code></pre>
<h6 style="padding-top: 20px">Links</h6>
<a href="https://github.com/ecliptik-org/ecliptik-org.github.io/blob/master/ecliptik.js">ecliptik.js</a> -
<b>CDN mirror:</b>
<a href="https://cdn.jsdelivr.net/npm/ecliptik@latest">https://cdn.jsdelivr.net/npm/ecliptik@latest</a>
<br/>
<a href="http://svgjs.com/">SVG.js</a> -
<b>CDN mirror:</b>
<a href="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js">https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js</a>
<br/>
<a href="https://code.jquery.com/">jQuery</a> -
<b>CDN mirror:</b>
<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>
<h6 style="padding-top: 20px">Contribute</h6>
Help us making Ecliptik even better and bring it to a variety of different platforms.
<a href="https://github.com/ecliptik-org"> Ecliptik on Github</a>.
</div>
</div>
<script>
window.module = {};
</script>
<script src="dist/js/vendor/svg.js"></script>
<script src="dist/js/vendor/jquery.min.js"></script>
<script src="dist/js/flat-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.min.js"></script>
<script src="web.js"></script>
</body>
<footer>
<div class="row mycontainer">
<div class="col-xs-12 col-sm-4 text-left">
<div class="links">
<h5>Links</h5>
<a href="https://www.facebook.com/ecliptik.org/">Ecliptik on Facebook</a>
<a href="https://twitter.com/ecliptik_org">Ecliptik on Twitter</a>
<a href="https://github.com/ecliptik-org">Ecliptik on Github</a>
<a href="/developer.html">Integrate into your Website</a>
<a href="/press.html">Press kit</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 text-left">
<div class="links">
<h5>Contact</h5>
<a href="mailto:[email protected]?subject=A Question About Ecliptik">[email protected]</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 text-left">
<div class="links">
<h5>Support</h5>
<div class="donate">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="VNND4YGJ5N7B8">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
Thank you for helping us keep our service running!
</div>
</div>
</div>
</footer>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110581668-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110581668-2');
</script>
</html>