Skip to content

Commit 7c8f89d

Browse files
FlorianKoernerFlorianKoerner
committed
Add: Documentation introduction
1 parent 499bfda commit 7c8f89d

File tree

2 files changed

+77
-72
lines changed

2 files changed

+77
-72
lines changed

‎docs/index.html

Lines changed: 76 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Pixel-Art Avatar Generator in JavaScript with HTTP-API</title>
5-
<meta name="description" content="Pixel-Art Avatar Generator by Identifier in JavaScript for Browsers and NodeJS">
4+
<title>Pixel-Art Avatar Placeholder with JS- and HTTP-API</title>
5+
<meta name="description" content="Pixel-Art Avatar Placeholder by Identifier in JavaScript for Browsers and NodeJS">
66

77
<meta charset="utf-8">
88
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -39,6 +39,80 @@
3939
<script src="./script.js"></script>
4040
</head>
4141
<body>
42+
<a href="https://github.com/DiceBear/avatars">
43+
<img class="fork-me" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
44+
</a>
45+
46+
<div class="container">
47+
<h1 class="text-center mt-5 mb-4">
48+
<small class="text-muted">DiceBear</small><br />
49+
<strong class="display-1">avatars</strong>
50+
</h1>
51+
52+
<p class="text-center mb-5">
53+
DiceBear Avatars is an free to use avatar placeholder service and library.<br>
54+
The service renders a unique pixel-art avatar based on a seed.
55+
</p>
56+
57+
<div class="mb-4">
58+
<div class="row">
59+
<div class="col-6 col-lg-3 offset-lg-3">
60+
<div class="card text-center">
61+
<div class="card-block text-center p-1">
62+
<img id="avatar-male" class="img-fluid mb-2" src="https://dummyimage.com/200x200/bdbdbd/ffffff.png&text=please+wait..." alt="Male Avatar">
63+
<p class="card-text"><strong>Male</strong></p>
64+
</div>
65+
</div>
66+
</div>
67+
<div class="col-6 col-lg-3">
68+
<div class="card text-center">
69+
<div class="card-block text-center p-1">
70+
<img id="avatar-female" class="img-fluid mb-2" src="https://dummyimage.com/200x200/bdbdbd/ffffff.png&text=please+wait..." alt="Female Avatar">
71+
<p class="card-text"><strong>Female</strong></p>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
78+
<div class="row mb-6">
79+
<div class="col-12 col-lg-6 offset-lg-3">
80+
<div class="form-group input-group-lg">
81+
<input type="text" class="form-control text-center" id="seed" placeholder="Seed (e.g. name, e-mail-address,...)" autofocus />
82+
</div>
83+
<div class="row">
84+
<div class="col-md-6">
85+
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#installModal">Installation</button>
86+
</div>
87+
<div class="col-md-6">
88+
<button type="button" class="btn btn-block btn-success" data-toggle="modal" data-target="#restModal">HTTP-API (recommended)</button>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
94+
<h2 class="text-center mt-4">
95+
More Examples<br />
96+
<span class="h5">
97+
<small class="text-muted">
98+
provided via HTTP-API
99+
</small>
100+
</span>
101+
</h2>
102+
<div id="infinite" class="row">
103+
<div class="col-6 col-sm-4 col-lg-3 mt-3">
104+
<div class="card text-center">
105+
<div class="card-block text-center p-1">
106+
<a href="#" target="_blank">
107+
<img class="img-fluid mb-2" src="https://dummyimage.com/200x200/bdbdbd/ffffff.png&text=please+wait..." alt="Avatar">
108+
</a>
109+
<p class="card-text"><strong class="name">Please wait...</strong></p>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
42116
<div class="modal fade" id="installModal" tabindex="-1" role="dialog">
43117
<div class="modal-dialog modal-lg" role="document">
44118
<div class="modal-content">
@@ -128,74 +202,5 @@ <h5 class="modal-title" id="exampleModalLabel">HTTP-API (recommended)</h5>
128202
</div>
129203
</div>
130204
</div>
131-
132-
<a href="https://github.com/DiceBear/avatars">
133-
<img class="fork-me" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
134-
</a>
135-
136-
<div class="container">
137-
<h1 class="text-center mt-5 mb-5">
138-
<small class="text-muted">DiceBear</small><br />
139-
<strong class="display-1">avatars</strong>
140-
</h1>
141-
142-
<div class="mb-4">
143-
<div class="row">
144-
<div class="col-6 col-lg-3 offset-lg-3">
145-
<div class="card text-center">
146-
<div class="card-block text-center p-1">
147-
<img id="avatar-male" class="img-fluid mb-2" src="https://dummyimage.com/200x200/bdbdbd/ffffff.png&text=please+wait..." alt="Male Avatar">
148-
<p class="card-text"><strong>Male</strong></p>
149-
</div>
150-
</div>
151-
</div>
152-
<div class="col-6 col-lg-3">
153-
<div class="card text-center">
154-
<div class="card-block text-center p-1">
155-
<img id="avatar-female" class="img-fluid mb-2" src="https://dummyimage.com/200x200/bdbdbd/ffffff.png&text=please+wait..." alt="Female Avatar">
156-
<p class="card-text"><strong>Female</strong></p>
157-
</div>
158-
</div>
159-
</div>
160-
</div>
161-
</div>
162-
163-
<div class="row mb-6">
164-
<div class="col-12 col-lg-6 offset-lg-3">
165-
<div class="form-group input-group-lg">
166-
<input type="text" class="form-control text-center" id="seed" placeholder="Seed (e.g. name, e-mail-address,...)" autofocus />
167-
</div>
168-
<div class="row">
169-
<div class="col-md-6">
170-
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#installModal">Installation</button>
171-
</div>
172-
<div class="col-md-6">
173-
<button type="button" class="btn btn-block btn-success" data-toggle="modal" data-target="#restModal">HTTP-API (recommended)</button>
174-
</div>
175-
</div>
176-
</div>
177-
</div>
178-
179-
<h2 class="text-center mt-4">
180-
More Examples<br />
181-
<span class="h5">
182-
<small class="text-muted">
183-
provided via HTTP-API
184-
</small>
185-
</span>
186-
</h2>
187-
<div id="infinite" class="row">
188-
<div class="col-6 col-sm-4 col-lg-3 mt-3">
189-
<div class="card text-center">
190-
<div class="card-block text-center p-1">
191-
<a href="#" target="_blank">
192-
<img class="img-fluid mb-2" src="https://dummyimage.com/200x200/bdbdbd/ffffff.png&text=please+wait..." alt="Avatar">
193-
</a>
194-
<p class="card-text"><strong class="name">Please wait...</strong></p>
195-
</div>
196-
</div>
197-
</div>
198-
</div>
199-
</div>
200205
</body>
201206
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dicebear/avatars",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "Pixel-Art Avatar Generator by Identifier",
55
"main": "lib/index.js",
66
"types": "src/index.ts",

0 commit comments

Comments
 (0)