UNPKG

@timohausmann/quadtree-ts/docs/index.html

Version:

1<!doctype html>
2<html>
<head>
<title>quadtree-ts Homepage</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./examples/assets/examples.css" />
      <style>
10
          * {
              margin: 0;
              padding: 0;
          }
15
          body {
              font-family: 'Fira Code', monospace;
              background: black;
              color: white;
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 100vh;
          }
25
          h1, h2, p {
              color: white;
          }
29
          h1 {
              font-size: 2.5rem;
              font-weight: normal;
          }
          h2 {
              font-size: 0.875rem;
              font-weight: normal;
              color: rgba(255,255,255,0.5);
          }
39
          code,
          button {
              font-family: inherit;
              font-size: 0.75rem;
          }
45
          code {
              padding: 1rem;
          }
49
          button {
              cursor: pointer;
          }
53
          .m1 { margin-bottom: 1rem; }
          .m2 { margin-bottom: 2rem; }
          .m4 { margin-bottom: 4rem; }
57
          .content {
              width: 100%;
              max-width: 480px;
              margin: auto;
              background: rgba(0,0,0,0.4);
              text-align: center;
              padding: 1rem;
              position: relative;
              z-index: 1;
              color: white;
          }
69
          .links {
              list-style: none;
              display: flex;
              width: 100%;
              justify-content: space-around;
          }
76
          .link {
              color: black;
              padding: 0.375rem 1rem;
              background: aquamarine;
              text-decoration: none;
              border-radius: 0.125rem;
          }
          .link:hover {
              background: white;
          }
87
          .canvas {
              position: fixed;
              inset: 0;
              z-index: 0;
          }
93
          .icon img {
              height: 1.25rem;
          }
97
          .controls {
              font-size: 0.75rem;
          }
          .controls strong {
              text-transform: uppercase;
              font-size: 0.625rem;
              letter-spacing: 1px;
          }
          .controls input {
              display: none;
          }
          .controls label {
              display: inline-block;
              border-radius: 0.125rem;
              background: rgba(32,32,32,0.8);
              padding: 0.25rem 0.5rem;
              transition: background-color 0.4s;
              cursor: pointer;
          }
          .controls label:hover {
              background-color: rgba(64,64,64,0.9);
          }
          .controls input:checked + label {
              color: black;
              background-color: aquamarine;
          }
124
      </style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
129
      <div class="content">
131
          <h1>quadtree-ts</h1>
          <h2 class="m1">2.2.2</h2>
          <p class="m4" style="font-weight: 0.875rem">
              A library for 2D spatial partitioning. 
          </p>
137
          <nav class="m4">
              <ul class="links">
                  <li><a class="link" href="https://github.com/timohausmann/quadtree-ts#readme">Readme</a></li>
                  <li><a class="link" href="./examples/simple">Examples</a></li>
                  <li><a class="link" href="./documentation">API Docs</a></li>
              </ul>
          </nav>
145
          <section class="m4">
              <div class="tabs">
                  <button class="tab active">npm i --save</button>
                  <button class="tab">npm i --save-dev</button>
                  <button class="tab">yarn add</button>
              </div>
              <section class="tab-content active">
                  <code>npm install -S @timohausmann/quadtree-ts</code>
                  <button class="copy"></button>
              </section>
              <section class="tab-content">
                  <code>npm install -D @timohausmann/quadtree-ts</code>
                  <button class="copy"></button>
              </section>
              <section class="tab-content">
                  <code>yarn add @timohausmann/quadtree-ts</code>
                  <button class="copy"></button>
              </section>
          </section>
165
          <footer class="m4">
              <nav>
                  <ul class="links">
                      <li><a href="https://github.com/timohausmann/quadtree-ts" 
                          title="quadtree-ts at GitHub"
                          class="icon"
                          target="_blank" rel="noopener noreferrer">
                          <img src="./examples//assets/logo-github.svg" alt="GitHub Logo" />
                      </a></li>
                      <li><a href="https://www.npmjs.com/package/@timohausmann/quadtree-ts" 
                          title="quadtree-ts at npm"
                          class="icon"
                          target="_blank" rel="noopener noreferrer">
                          <img src="./examples//assets/logo-npm.svg" alt="npm Logo" />
                      </a></li>
                      <!--li><a href="https://twitter.com/timohausmann" 
                          title="quadtree-ts author at Twitter"
                          class="icon"
                          target="_blank" rel="noopener noreferrer">
                          <img src="./examples//assets/logo-twitter.svg" alt="Twitter Logo" />
                      </a></li-->
                  </ul>
              </nav>
          </footer>
190
          <section>
              <div class="controls m2">
                  <strong>Quadtree enabled:</strong>
                  <input type="radio" id="toggle-quadtree-on" name="toggle-quadtree" value="1" checked />
                  <label for="toggle-quadtree-on">On</label>
                  <input type="radio" id="toggle-quadtree-off" name="toggle-quadtree" value="0" />
                  <label for="toggle-quadtree-off">Off</label>
              </div>
              <div class="controls m2">
                  <strong>Cursor:</strong>
                  <input type="radio" id="cursor-rectangle" name="cursor" value="rectangle" checked />
                  <label for="cursor-rectangle">Rectangle</label>
                  <input type="radio" id="cursor-circle" name="cursor" value="circle" />
                  <label for="cursor-circle">Circle</label>
                  <input type="radio" id="cursor-line" name="cursor" value="line" />
                  <label for="cursor-line">Line</label>
              </div>
              <div class="controls m2">
                  <strong>Particle Amount:</strong>
                  <input type="radio" id="particles-128" name="particles" value="128" checked />
                  <label for="particles-128">128</label>
                  <input type="radio" id="particles-256" name="particles" value="256" />
                  <label for="particles-256">256</label>
                  <input type="radio" id="particles-512" name="particles" value="512" />
                  <label for="particles-512">512</label>
                  <input type="radio" id="particles-1024" name="particles" value="1024" />
                  <label for="particles-1024">1024</label>
                  <input type="radio" id="particles-2048" name="particles" value="2048" />
                  <label for="particles-2048">2048</label>
              </div>
          </section>
      </div>
223
      <div class="canvas">
          <canvas id="canvas"></canvas>
      </div>
227
      <script src="./examples/assets/quadtree.umd.full.js"></script>
      <script src="./examples/assets/tabs.js"></script>
      <script src="./examples/home/script.js"></script>
</body>
232</html>

1	`<!doctype html>`
2	`<html>`
3	`<head>`
4	`<title>quadtree-ts Homepage</title>`
5	`<link rel="preconnect" href="https://fonts.googleapis.com">`
6	`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
7	`<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">`
8	`<link rel="stylesheet" type="text/css" href="./examples/assets/examples.css" />`
9	`<style>`
10
11	`* {`
12	`margin: 0;`
13	`padding: 0;`
14	`}`
15
16	`body {`
17	`font-family: 'Fira Code', monospace;`
18	`background: black;`
19	`color: white;`
20	`display: flex;`
21	`justify-content: center;`
22	`align-items: center;`
23	`min-height: 100vh;`
24	`}`
25
26	`h1, h2, p {`
27	`color: white;`
28	`}`
29
30	`h1 {`
31	`font-size: 2.5rem;`
32	`font-weight: normal;`
33	`}`
34	`h2 {`
35	`font-size: 0.875rem;`
36	`font-weight: normal;`
37	`color: rgba(255,255,255,0.5);`
38	`}`
39
40	`code,`
41	`button {`
42	`font-family: inherit;`
43	`font-size: 0.75rem;`
44	`}`
45
46	`code {`
47	`padding: 1rem;`
48	`}`
49
50	`button {`
51	`cursor: pointer;`
52	`}`
53
54	`.m1 { margin-bottom: 1rem; }`
55	`.m2 { margin-bottom: 2rem; }`
56	`.m4 { margin-bottom: 4rem; }`
57
58	`.content {`
59	`width: 100%;`
60	`max-width: 480px;`
61	`margin: auto;`
62	`background: rgba(0,0,0,0.4);`
63	`text-align: center;`
64	`padding: 1rem;`
65	`position: relative;`
66	`z-index: 1;`
67	`color: white;`
68	`}`
69
70	`.links {`
71	`list-style: none;`
72	`display: flex;`
73	`width: 100%;`
74	`justify-content: space-around;`
75	`}`
76
77	`.link {`
78	`color: black;`
79	`padding: 0.375rem 1rem;`
80	`background: aquamarine;`
81	`text-decoration: none;`
82	`border-radius: 0.125rem;`
83	`}`
84	`.link:hover {`
85	`background: white;`
86	`}`
87
88	`.canvas {`
89	`position: fixed;`
90	`inset: 0;`
91	`z-index: 0;`
92	`}`
93
94	`.icon img {`
95	`height: 1.25rem;`
96	`}`
97
98	`.controls {`
99	`font-size: 0.75rem;`
100	`}`
101	`.controls strong {`
102	`text-transform: uppercase;`
103	`font-size: 0.625rem;`
104	`letter-spacing: 1px;`
105	`}`
106	`.controls input {`
107	`display: none;`
108	`}`
109	`.controls label {`
110	`display: inline-block;`
111	`border-radius: 0.125rem;`
112	`background: rgba(32,32,32,0.8);`
113	`padding: 0.25rem 0.5rem;`
114	`transition: background-color 0.4s;`
115	`cursor: pointer;`
116	`}`
117	`.controls label:hover {`
118	`background-color: rgba(64,64,64,0.9);`
119	`}`
120	`.controls input:checked + label {`
121	`color: black;`
122	`background-color: aquamarine;`
123	`}`
124
125	`</style>`
126	`<meta name="viewport" content="width=device-width, initial-scale=1" />`
127	`</head>`
128	`<body>`
129
130	`<div class="content">`
131
132	`<h1>quadtree-ts</h1>`
133	`<h2 class="m1">2.2.2</h2>`
134	`<p class="m4" style="font-weight: 0.875rem">`
135	`A library for 2D spatial partitioning.`
136	`</p>`
137
138	`<nav class="m4">`
139	`<ul class="links">`
140	`<li><a class="link" href="https://github.com/timohausmann/quadtree-ts#readme">Readme</a></li>`
141	`<li><a class="link" href="./examples/simple">Examples</a></li>`
142	`<li><a class="link" href="./documentation">API Docs</a></li>`
143	`</ul>`
144	`</nav>`
145
146	`<section class="m4">`
147	`<div class="tabs">`
148	`<button class="tab active">npm i --save</button>`
149	`<button class="tab">npm i --save-dev</button>`
150	`<button class="tab">yarn add</button>`
151	`</div>`
152	`<section class="tab-content active">`
153	`<code>npm install -S @timohausmann/quadtree-ts</code>`
154	`<button class="copy"></button>`
155	`</section>`
156	`<section class="tab-content">`
157	`<code>npm install -D @timohausmann/quadtree-ts</code>`
158	`<button class="copy"></button>`
159	`</section>`
160	`<section class="tab-content">`
161	`<code>yarn add @timohausmann/quadtree-ts</code>`
162	`<button class="copy"></button>`
163	`</section>`
164	`</section>`
165
166	`<footer class="m4">`
167	`<nav>`
168	`<ul class="links">`
169	`<li><a href="https://github.com/timohausmann/quadtree-ts"`
170	`title="quadtree-ts at GitHub"`
171	`class="icon"`
172	`target="_blank" rel="noopener noreferrer">`
173	`<img src="./examples//assets/logo-github.svg" alt="GitHub Logo" />`
174	`</a></li>`
175	`<li><a href="https://www.npmjs.com/package/@timohausmann/quadtree-ts"`
176	`title="quadtree-ts at npm"`
177	`class="icon"`
178	`target="_blank" rel="noopener noreferrer">`
179	`<img src="./examples//assets/logo-npm.svg" alt="npm Logo" />`
180	`</a></li>`
181	`<!--li><a href="https://twitter.com/timohausmann"`
182	`title="quadtree-ts author at Twitter"`
183	`class="icon"`
184	`target="_blank" rel="noopener noreferrer">`
185	`<img src="./examples//assets/logo-twitter.svg" alt="Twitter Logo" />`
186	`</a></li-->`
187	`</ul>`
188	`</nav>`
189	`</footer>`
190
191	`<section>`
192	`<div class="controls m2">`
193	`<strong>Quadtree enabled:</strong>`
194	`<input type="radio" id="toggle-quadtree-on" name="toggle-quadtree" value="1" checked />`
195	`<label for="toggle-quadtree-on">On</label>`
196	`<input type="radio" id="toggle-quadtree-off" name="toggle-quadtree" value="0" />`
197	`<label for="toggle-quadtree-off">Off</label>`
198	`</div>`
199	`<div class="controls m2">`
200	`<strong>Cursor:</strong>`
201	`<input type="radio" id="cursor-rectangle" name="cursor" value="rectangle" checked />`
202	`<label for="cursor-rectangle">Rectangle</label>`
203	`<input type="radio" id="cursor-circle" name="cursor" value="circle" />`
204	`<label for="cursor-circle">Circle</label>`
205	`<input type="radio" id="cursor-line" name="cursor" value="line" />`
206	`<label for="cursor-line">Line</label>`
207	`</div>`
208	`<div class="controls m2">`
209	`<strong>Particle Amount:</strong>`
210	`<input type="radio" id="particles-128" name="particles" value="128" checked />`
211	`<label for="particles-128">128</label>`
212	`<input type="radio" id="particles-256" name="particles" value="256" />`
213	`<label for="particles-256">256</label>`
214	`<input type="radio" id="particles-512" name="particles" value="512" />`
215	`<label for="particles-512">512</label>`
216	`<input type="radio" id="particles-1024" name="particles" value="1024" />`
217	`<label for="particles-1024">1024</label>`
218	`<input type="radio" id="particles-2048" name="particles" value="2048" />`
219	`<label for="particles-2048">2048</label>`
220	`</div>`
221	`</section>`
222	`</div>`
223
224	`<div class="canvas">`
225	`<canvas id="canvas"></canvas>`
226	`</div>`
227
228	`<script src="./examples/assets/quadtree.umd.full.js"></script>`
229	`<script src="./examples/assets/tabs.js"></script>`
230	`<script src="./examples/home/script.js"></script>`
231	`</body>`
232	`</html>`