Skip to content

Commit 346d00a

Browse files
Jaime NevesJaime Neves
Jaime Neves
authored and
Jaime Neves
committed
Atualização do diretorio de exemplos
1 parent 91230fb commit 346d00a

File tree

3 files changed

+96
-197
lines changed

3 files changed

+96
-197
lines changed

‎examples/basic/basic-1.html‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎examples/basic/index.html‎

Lines changed: 34 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -4,159 +4,56 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>Example with Bootstrap</title>
7+
<title>Checkforce.js</title>
88

99
<!-- Bootstrap CSS -->
1010
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
1111
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
1212

13-
<style>
14-
:root {
15-
--bg-color: #f5f5f5;
16-
--color-success: #5cb85c;
17-
--color-warning: #f0ad4e;
18-
--color-danger: #df2930;
19-
}
20-
21-
/* Tooltip */
22-
23-
#checkforce-tooltip {
24-
background: #ffffff;
25-
border-radius: 6px;
26-
padding: 1.2rem;
27-
/* display: none; */
28-
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
29-
}
30-
#checkforce-tooltip[data-show] {
31-
display: block;
32-
}
33-
34-
#arrow,
35-
#arrow::before {
36-
position: absolute;
37-
width: 8px;
38-
height: 8px;
39-
background: inherit;
40-
}
41-
#arrow {
42-
visibility: hidden;
43-
}
44-
45-
#arrow::before {
46-
visibility: visible;
47-
content: '';
48-
transform: rotate(45deg);
49-
}
50-
#checkforce-tooltip[data-popper-placement^='top'] > #arrow {
51-
bottom: -4px;
52-
}
53-
54-
#checkforce-tooltip[data-popper-placement^='bottom'] > #arrow {
55-
top: -4px;
56-
}
57-
58-
#checkforce-tooltip[data-popper-placement^='left'] > #arrow {
59-
right: -4px;
60-
}
61-
62-
#checkforce-tooltip[data-popper-placement^='right'] > #arrow {
63-
left: -4px;
64-
}
65-
66-
/* Progress */
67-
68-
.checkforce-progress {
69-
display: flex;
70-
}
71-
.checkforce-progress .checkforce-progress-title {
72-
width: 70px;
73-
}
74-
.checkforce-progress .checkforce-progress-level {
75-
width: 158px;
76-
height: 9px;
77-
margin: .6rem;
78-
display: flex;
79-
}
80-
81-
.checkforce-progress.danger .progress-bar--danger {
82-
background-color: var(--color-danger) !important;
83-
}
84-
85-
.checkforce-progress.warning .progress-bar--danger {
86-
background-color: var(--color-warning) !important;
87-
}
88-
.checkforce-progress.warning .progress-bar--warning {
89-
background-color: var(--color-warning) !important;
90-
}
91-
92-
.checkforce-progress.success .progress-bar--danger {
93-
background-color: var(--color-success) !important;
94-
}
95-
.checkforce-progress.success .progress-bar--warning {
96-
background-color: var(--color-success) !important;
97-
}
98-
.checkforce-progress.success .progress-bar--success {
99-
background-color: var(--color-success) !important;
100-
}
101-
102-
.checkforce-progress-bar {
103-
margin: 0.1rem;
104-
background-color: #e1e3e5;
105-
-webkit-border-radius: 4px;
106-
-moz-border-radius: 4px;
107-
border-radius: 4px;
108-
-webkit-transition: width 0.6s ease;
109-
-o-transition: width 0.6s ease;
110-
transition: width 0.6s ease;
111-
}
112-
</style>
13+
<!-- Custom styles for this template -->
14+
<link href="_root.css" rel="stylesheet">
15+
<link href="_popover.css" rel="stylesheet">
16+
<link href="_style.css" rel="stylesheet">
11317

11418
</head>
11519
<body>
11620
<div class="container">
117-
<h1 class="mt-5">CheckForce.js</h1>
118-
<h3 class="mb-5">Checando a força da senha</h3>
21+
<main class="form-signin">
22+
<form>
23+
<img class="mb-4 m-auto" style="width: 300px" src="../logo.svg" alt="" width="72" height="57">
24+
<h1 class="h3 mb-3 fw-normal text-center">Registrar conta</h1>
25+
26+
<div class="form-floating">
27+
<input type="text" class="form-control" id="floatingInputName" placeholder="name@example.com">
28+
<label for="floatingInput">Nome</label>
29+
</div>
11930

120-
<div class="row">
121-
<div class="col">
122-
<div class="card text-dark bg-light mb-3">
123-
<div class="card-body p-4">
124-
<h3 class="mb-4">Criar uma nova conta</h3>
125-
<form>
126-
<div class="mb-3">
127-
<label for="input-name" class="form-label">Nome</label>
128-
<input type="text" class="form-control" id="input-name" aria-describedby="Nome">
129-
</div>
130-
<div class="mb-3">
131-
<label for="input-email" class="form-label">E-mail</label>
132-
<input type="text" class="form-control" id="input-email" aria-describedby="E-mail">
133-
</div>
134-
<div class="mb-3">
135-
<label for="input-password" class="form-label">Senha</label>
136-
<input type="password" class="form-control" id="input-password" aria-describedby="Criar senha">
137-
</div>
138-
<button type="submit" class="btn btn-primary">Criar conta</button>
139-
</form>
140-
</div>
31+
<div class="form-floating">
32+
<input type="text" class="form-control" id="floatingInputEmail" placeholder="name@example.com">
33+
<label for="floatingInput">E-mail</label>
14134
</div>
142-
</div>
143-
</div>
35+
36+
37+
<div class="form-floating">
38+
<input type="password" class="form-control" id="floatingPassword" placeholder="Senha">
39+
<label for="floatingPassword">Senha</label>
40+
</div>
41+
42+
<div class="checkbox mb-3 text-center">
43+
<label>
44+
<input type="checkbox" value="remember-me"> Lembre-me
45+
</label>
46+
</div>
47+
<button class="w-100 btn btn-lg btn-primary" type="submit">Criar</button>
48+
<p class="mt-5 mb-3 text-center text-muted">&copy; checkforce.js</p>
49+
</form>
50+
</main>
14451
</div>
14552

14653
<!-- Include library -->
147-
<!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
148-
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
149-
150-
<script src="../../node_modules/zxcvbn/dist/zxcvbn.js"></script> -->
151-
15254
<script src="../../dist/checkforce.bundle.js"></script>
153-
<!-- <script src="../../dist/checkforce.js"></script> -->
154-
<!-- <script src="../../dist/checkforce.bundle.min.js"></script> -->
15555
<script>
156-
const checkForce = new CheckForce('#input-password', {
157-
// placement: 'bottom'
158-
// template: 'Novo template'
159-
});
56+
const checkForce = new CheckForce('#floatingPassword', { placement: 'right' });
16057
</script>
16158

16259
</body>

‎examples/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Example with Bootstrap</title>
8+
9+
<!-- Bootstrap CSS -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
12+
13+
<link href="basic/_root.css" rel="stylesheet">
14+
<link href="basic/_popover.css" rel="stylesheet">
15+
16+
</head>
17+
<body>
18+
<div class="container">
19+
<h1 class="mt-5">CheckForce.js</h1>
20+
<h3 class="mb-5">Checando a força da senha</h3>
21+
22+
<div class="row">
23+
<div class="col">
24+
<div class="card text-dark bg-light mb-3">
25+
<div class="card-body p-4">
26+
<h3 class="mb-4">Criar uma nova conta</h3>
27+
<form>
28+
<div class="mb-3">
29+
<label for="input-name" class="form-label">Nome</label>
30+
<input type="text" class="form-control" id="input-name" aria-describedby="Nome">
31+
</div>
32+
<div class="mb-3">
33+
<label for="input-email" class="form-label">E-mail</label>
34+
<input type="text" class="form-control" id="input-email" aria-describedby="E-mail">
35+
</div>
36+
<div class="mb-3">
37+
<label for="input-password" class="form-label">Senha</label>
38+
<input type="password" class="form-control" id="input-password" aria-describedby="Criar senha">
39+
</div>
40+
<button type="submit" class="btn btn-primary">Criar conta</button>
41+
</form>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<!-- Include library -->
49+
<!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
50+
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
51+
52+
<script src="../../node_modules/zxcvbn/dist/zxcvbn.js"></script> -->
53+
54+
<script src="../../dist/checkforce.bundle.js"></script>
55+
<!-- <script src="../../dist/checkforce.js"></script> -->
56+
<!-- <script src="../../dist/checkforce.bundle.min.js"></script> -->
57+
<script>
58+
const checkForce = new CheckForce('#input-password');
59+
</script>
60+
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)