beta da beta da beta 0.0.01 '-'
This commit is contained in:
62
rpg/css/base.css
Normal file
62
rpg/css/base.css
Normal file
@@ -0,0 +1,62 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
|
||||
|
||||
/* ==================== fonts ==================== */
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Share+Tech+Mono&display=swap");
|
||||
/* font-family: "Share Tech Mono", monospace; */
|
||||
|
||||
/* =============================================== */
|
||||
:root {
|
||||
--bgcolor: #453831;
|
||||
--subbgcolor: #2b2420;
|
||||
--fontcolor: #dddec6;
|
||||
--lines: #666666;
|
||||
--btncolor: #000000;
|
||||
--backredcolor: #bb0000;
|
||||
--backdarkredcolor: #540000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
scroll-behavior: smooth;
|
||||
color: var(--fontcolor);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--fontcolor);
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
background: var(--bgcolor);
|
||||
}
|
||||
|
||||
#loginInput {
|
||||
background-color: var(--btncolor);
|
||||
width: 100%;
|
||||
padding: 1dvh;
|
||||
border: none;
|
||||
border-bottom: solid 5px var(--backredcolor);
|
||||
}
|
||||
#loginBtn {
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
background-color: var(--btncolor);
|
||||
width: 50%;
|
||||
padding: 1dvh;
|
||||
margin: 0dvh 0 1dvh 0;
|
||||
}
|
||||
#loginBtn:hover {
|
||||
background-color: var(--lines);
|
||||
}
|
||||
33
rpg/css/login.css
Normal file
33
rpg/css/login.css
Normal file
@@ -0,0 +1,33 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#login_form {
|
||||
overflow: hidden;
|
||||
width: 24%;
|
||||
height: 60dvh;
|
||||
|
||||
h1 {
|
||||
background: var(--btncolor);
|
||||
padding: 1dvh 0 1dvh 2dvh;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
background-color: var(--subbgcolor);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 8dvw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
rpg/css/register.css
Normal file
42
rpg/css/register.css
Normal file
@@ -0,0 +1,42 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#register_form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 30%;
|
||||
|
||||
h1 {
|
||||
background: var(--btncolor);
|
||||
padding: 1dvh 0 1dvh 2dvh;
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--subbgcolor);
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1dvw;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 25dvh;
|
||||
height: 25dvh;
|
||||
border-radius: 100%;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 15dvw;
|
||||
background-color: var(--btncolor);
|
||||
|
||||
padding: 1dvh;
|
||||
border: none;
|
||||
border: solid 5px var(--backredcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
376
rpg/css/style.css
Normal file
376
rpg/css/style.css
Normal file
@@ -0,0 +1,376 @@
|
||||
#playerDATA {
|
||||
background-color: var(--subbgcolor);
|
||||
padding: 1dvw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
#hero {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border: solid 3px var(--backredcolor);
|
||||
border-radius: 100dvh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 1vw;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1dvh;
|
||||
font-size: 1.5em;
|
||||
border-bottom: dotted 2px var(--lines);
|
||||
|
||||
p {
|
||||
margin: 0 0 0 1dvh;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.5dvh;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--btncolor);
|
||||
border-radius: 1dvh;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: var(--lines);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#box_1 {
|
||||
display: flex;
|
||||
border-bottom: solid 0.5dvh var(--backredcolor);
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
background: var(--btncolor);
|
||||
font-family: "Share Tech Mono", monospace;
|
||||
padding: 0 0 0 1dvh;
|
||||
}
|
||||
}
|
||||
|
||||
#status {
|
||||
width: 25%;
|
||||
min-height: 40dvh;
|
||||
max-height: 40dvh;
|
||||
border-right: solid 1px var(--lines);
|
||||
overflow: hidden;
|
||||
background-color: var(--subbgcolor);
|
||||
|
||||
ul {
|
||||
padding: 3vw 0 3vw 0;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
margin: 2dvh;
|
||||
background-color: var(--bgcolor);
|
||||
border-radius: 1dvw;
|
||||
|
||||
label {
|
||||
padding: 0 0 0 1dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
margin: 0 0.2dvh 0 0.2dvh;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 1dvh;
|
||||
background: var(--btncolor);
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
background-color: var(--lines);
|
||||
}
|
||||
|
||||
.btn-left {
|
||||
border-top-left-radius: 2dvh;
|
||||
border-bottom-left-radius: 2dvh;
|
||||
border-right: solid var(--lines) 1px;
|
||||
}
|
||||
|
||||
.btn-right {
|
||||
border-top-right-radius: 2dvh;
|
||||
border-bottom-right-radius: 2dvh;
|
||||
border-left: solid var(--lines) 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dados {
|
||||
width: 30%;
|
||||
min-height: 40dvh;
|
||||
max-height: 40dvh;
|
||||
border-right: solid 1px var(--lines);
|
||||
overflow: hidden;
|
||||
|
||||
#list {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--subbgcolor);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: dotted 2px var(--lines);
|
||||
|
||||
li {
|
||||
transition: 0.3s;
|
||||
border-radius: 1dvh;
|
||||
margin: 0 0 0 1dvh;
|
||||
background: var(--btncolor);
|
||||
width: 45%;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
padding: 1dvh;
|
||||
display: flex;
|
||||
font-size: 1.5em;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin: 0 1dvw 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--lines);
|
||||
}
|
||||
}
|
||||
|
||||
#log {
|
||||
width: 100%;
|
||||
height: calc(40dvh - 12dvw);
|
||||
overflow-y: scroll;
|
||||
|
||||
li {
|
||||
font-size: 1.5em;
|
||||
padding: 0.5dvh 0 0.5dvh 2dvh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#inv {
|
||||
position: relative;
|
||||
width: 30%;
|
||||
overflow: hidden;
|
||||
min-height: 40dvh;
|
||||
max-height: 40dvh;
|
||||
border-right: solid 1px var(--lines);
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
max-height: 80%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
width: calc(100% / 4 - 2px);
|
||||
height: calc(100dvh / 9 - 2px);
|
||||
border: solid 1px var(--lines);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
right: 1dvh;
|
||||
top: 1dvh;
|
||||
background-color: var(--backredcolor);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
span {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--backdarkredcolor);
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--subbgcolor);
|
||||
}
|
||||
}
|
||||
|
||||
hgroup {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5dvh;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
background-color: var(--subbgcolor);
|
||||
|
||||
select {
|
||||
background-color: var(--btncolor);
|
||||
padding: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#btn {
|
||||
transition: 0.3s;
|
||||
background-color: var(--btncolor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 1dvh 0 1dvh;
|
||||
padding: 5px;
|
||||
border-radius: 1dvh;
|
||||
}
|
||||
|
||||
#btn:hover {
|
||||
background-color: var(--lines);
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 0.5dvh 0 0.5dvh;
|
||||
background-color: var(--lines);
|
||||
color: var(--fontcolor);
|
||||
border: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 3dvw;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
border-radius: 1dvh 0 1dvh 0;
|
||||
span {
|
||||
overflow: hidden;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#powers {
|
||||
width: calc(100% - (30% + 25% + 30% - 3px));
|
||||
overflow: hidden;
|
||||
min-height: 40dvh;
|
||||
max-height: 40dvh;
|
||||
background-color: var(--subbgcolor);
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
padding: 1dvh;
|
||||
border-top: dotted 2px var(--lines);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
||||
a {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--btncolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#FloatInput {
|
||||
position: absolute;
|
||||
width: 10%;
|
||||
display: flex;
|
||||
z-index: 100px;
|
||||
|
||||
input[type="text"] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: solid 1px var(--backredcolor);
|
||||
border-radius: 10dvh;
|
||||
background-color: var(--btncolor);
|
||||
padding: 0.5dvh;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#playerDATA {
|
||||
height: 40dvh;
|
||||
#hero {
|
||||
width: 40vh;
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
#box_1 {
|
||||
flex-direction: column;
|
||||
#dados,
|
||||
#status,
|
||||
#inv,
|
||||
#powers {
|
||||
width: 100%;
|
||||
min-height: 100dvw;
|
||||
#list {
|
||||
height: 30dvh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#inv {
|
||||
ul {
|
||||
max-height: 43vh;
|
||||
li {
|
||||
height: calc(100dvh / 6 - 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
#FloatInput {
|
||||
width: 30%;
|
||||
transform: translateY(50px) translateX(-50px);
|
||||
}
|
||||
}
|
||||
BIN
rpg/images/none.png
Normal file
BIN
rpg/images/none.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
326
rpg/index.html
Normal file
326
rpg/index.html
Normal file
@@ -0,0 +1,326 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ficha</title>
|
||||
<link rel="stylesheet" href="css/base.css" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script type="text/javascript" src="javascript/libs/jquery.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="playerDATA">
|
||||
<img id="hero" src="images/none.png" />
|
||||
<ul>
|
||||
<li>
|
||||
<label>nome:</label>
|
||||
<p>you user name</p>
|
||||
<a id="btn" class="editbtn player_name">
|
||||
<span class="material-symbols-outlined"> edit </span>
|
||||
edit
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<label>level:</label>
|
||||
<p>0</p>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<label>idade:</label>
|
||||
<p>0</p>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<label>altura:</label>
|
||||
<p>0,0</p>
|
||||
<a id="btn" class="editbtn">
|
||||
<span class="material-symbols-outlined"> edit </span>
|
||||
edit
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="box_1">
|
||||
<div id="dados">
|
||||
<h1>Dados</h1>
|
||||
<ul id="list">
|
||||
<li>
|
||||
<a>
|
||||
<span class="material-symbols-outlined">
|
||||
casino
|
||||
</span>
|
||||
1d6
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="material-symbols-outlined">
|
||||
casino
|
||||
</span>
|
||||
1d10
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="material-symbols-outlined">
|
||||
casino
|
||||
</span>
|
||||
1d20
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="material-symbols-outlined">
|
||||
casino
|
||||
</span>
|
||||
1d30
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="material-symbols-outlined">
|
||||
casino
|
||||
</span>
|
||||
1d40
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="material-symbols-outlined">
|
||||
casino
|
||||
</span>
|
||||
1d100
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="log">
|
||||
<li>
|
||||
<label
|
||||
>{user} rolou {dado} e o resultado é {valor}</label
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="status">
|
||||
<h1>Player Status</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<label>
|
||||
vida:
|
||||
<p id="life" class="status_player">0</p>
|
||||
/
|
||||
<p id="max_life" class="status_player">0</p>
|
||||
<a id="btn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-left"
|
||||
>
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn" class="editbtn vida">
|
||||
<span
|
||||
class="material-symbols-outlined btn-right"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
</a>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
for:
|
||||
<p id="power" class="status_player">0</p>
|
||||
<a id="btn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-left"
|
||||
>
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn" class="editbtn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-right"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
</a>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
des:
|
||||
<p id="dexterity" class="status_player">0</p>
|
||||
<a id="btn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-left"
|
||||
>
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn" class="editbtn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-right"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
</a>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
con:
|
||||
<p id="constitution" class="status_player">0</p>
|
||||
<a id="btn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-left"
|
||||
>
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn" class="editbtn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-right"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
</a>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
int:
|
||||
<p id="intellect" class="status_player">0</p>
|
||||
<a id="btn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-left"
|
||||
>
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn" class="editbtn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-right"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
</a>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
car:
|
||||
<p id="charisma" class="status_player">0</p>
|
||||
<a id="btn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-left"
|
||||
>
|
||||
arrow_upward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined">
|
||||
arrow_downward
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn" class="editbtn">
|
||||
<span
|
||||
class="material-symbols-outlined btn-right"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
</a>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="inv">
|
||||
<h1>Inventario</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<label>item_name</label>
|
||||
<label>quantidade</label>
|
||||
<a id="DelBTN">
|
||||
<span class="material-symbols-outlined">
|
||||
close
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hgroup>
|
||||
<input type="text" placeholder="item name" />
|
||||
<select name="durabilite">
|
||||
<option>duravel?</option>
|
||||
<option value="True">true</option>
|
||||
<option value="False">false</option>
|
||||
</select>
|
||||
<input type="number" placeholder="peso" max="100" />
|
||||
<input type="number" placeholder="quantidade" max="100" />
|
||||
<a id="btn">add</a>
|
||||
<label>
|
||||
<p>0</p>
|
||||
/
|
||||
<p>0</p>
|
||||
<a id="btn">
|
||||
<span class="material-symbols-outlined btn-right">
|
||||
edit
|
||||
</span>
|
||||
</a>
|
||||
</label>
|
||||
</hgroup>
|
||||
</div>
|
||||
<div id="powers">
|
||||
<h1>Poderes</h1>
|
||||
<ul>
|
||||
<li><a>bla bla bla bla</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="box_2"></div>
|
||||
|
||||
<!-- scripts -->
|
||||
<script type="text/javascript" src="javascript/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2
rpg/javascript/libs/jquery.js
vendored
Normal file
2
rpg/javascript/libs/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10
rpg/javascript/register.js
Normal file
10
rpg/javascript/register.js
Normal file
@@ -0,0 +1,10 @@
|
||||
$("#imgClick").on("click", () => $("#inputImagem").click());
|
||||
|
||||
$("#inputImagem").on("change", function () {
|
||||
const file = this.files[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => $("#imgClick").attr("src", e.target.result);
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
51
rpg/javascript/script.js
Normal file
51
rpg/javascript/script.js
Normal file
@@ -0,0 +1,51 @@
|
||||
var $inp;
|
||||
|
||||
let cordX = 0;
|
||||
let cordY = 0;
|
||||
|
||||
function editInput(name, x, y) {
|
||||
var input = `
|
||||
<nav id="FloatInput" style="top: ${y - 50}px; left: ${x - 100}px">
|
||||
<input type="text" placeholder="${name}" name="${name}" />
|
||||
</nav>
|
||||
`;
|
||||
$inp = $(input).appendTo("body").focus();
|
||||
|
||||
$inp.on("keypress keydown", function (e) {
|
||||
if (e.which === 13) {
|
||||
switch ($(this).find("input").val().length > 0) {
|
||||
case true:
|
||||
console.log($(this).find("input").val());
|
||||
// aqui vai enviar a request, não esqueça zk
|
||||
break;
|
||||
case false:
|
||||
$(this).remove();
|
||||
break;
|
||||
}
|
||||
}
|
||||
switch (e.key) {
|
||||
case "Delete":
|
||||
$(this).remove();
|
||||
break;
|
||||
case "Backspace":
|
||||
if ($(this).find("input").val() === "") {
|
||||
$(this).remove();
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$(document).on("mousemove", function (e) {
|
||||
cordX = e.clientX;
|
||||
cordY = e.clientY;
|
||||
});
|
||||
$(".editbtn").on("click", function (e) {
|
||||
let reqbtn = e.currentTarget.className.split(" ");
|
||||
let nameclass =
|
||||
reqbtn.length > 1
|
||||
? editInput(reqbtn[1], cordX, cordY)
|
||||
: console.error("erro,coloque uma seunda cleass");
|
||||
});
|
||||
});
|
||||
36
rpg/login.html
Normal file
36
rpg/login.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>login</title>
|
||||
<link rel="stylesheet" href="css/base.css" />
|
||||
<link rel="stylesheet" href="css/login.css" />
|
||||
<script type="text/javascript" src="javascript/libs/jquery.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="login_form">
|
||||
<h1>Login</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<input
|
||||
type="text"
|
||||
name="player"
|
||||
placeholder="player"
|
||||
id="loginInput"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="password"
|
||||
name="passowrd"
|
||||
placeholder="senha"
|
||||
id="loginInput"
|
||||
/>
|
||||
</li>
|
||||
<li><input type="submit" id="loginBtn" value="Login" /></li>
|
||||
<li><a href="registro.html">Criar conta</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
63
rpg/registro.html
Normal file
63
rpg/registro.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>registrar</title>
|
||||
<link rel="stylesheet" href="css/base.css" />
|
||||
<link rel="stylesheet" href="css/register.css" />
|
||||
<script type="text/javascript" src="javascript/libs/jquery.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="register_form">
|
||||
<h1>registrar</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="images/none.png" id="imgClick" />
|
||||
<input
|
||||
type="file"
|
||||
id="inputImagem"
|
||||
accept="image/*"
|
||||
name="PlayerImage"
|
||||
style="display: none"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="text"
|
||||
name="player"
|
||||
placeholder="player"
|
||||
id="loginInput"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="password"
|
||||
name="passowrd"
|
||||
placeholder="senha"
|
||||
id="loginInput"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmpassowrd"
|
||||
placeholder="confirme senha"
|
||||
id="loginInput"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<textarea
|
||||
name="playerlore"
|
||||
placeholder="escreva a historia do seu personagem"
|
||||
></textarea>
|
||||
</li>
|
||||
<li>
|
||||
<input type="submit" id="loginBtn" value="Registrar" />
|
||||
</li>
|
||||
<li><a href="login.html">Fazer login</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<script type="text/javascript" src="javascript/register.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user