zk_exe/biblioteca-de-contos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

passei as cores com as var e tambem fiz as alterações que a Caroline indicou.

Browse Source
This commit is contained in:
zk_exe
2025-08-11 02:20:24 -03:00
parent e633b806b8
commit 8dd53c5f9e
8 changed files with 69 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

18
css/base.css
View File

@@ -11,11 +11,13 @@
/* font-family: "Special Gothic Expanded One", sans-serif; */ /* font-family: "Special Gothic Expanded One", sans-serif; */
:root { :root {
--font: #c4e5f2; --blackglass: #0000007a;
--bg-dark: #010d26; --font: #a4a5a6;
--bg-light: #9cc1d9; --bg-dark: #0a0b0d;
--btn: #0000cc; --bg-light: #2d3540;
--btn-dark: #000080; --btn: #84e9ff;
--btn-dark: #1c2026;
--against-color: #84e9ffa7;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -44,7 +46,8 @@ body {
min-height: 100vh; min-height: 100vh;
} }
#btn { #btn,
.btn {
cursor: pointer; cursor: pointer;
background-color: var(--btn); background-color: var(--btn);
padding: 1.5dvh; padding: 1.5dvh;
@@ -53,6 +56,7 @@ body {
transition: 0.3s; transition: 0.3s;
} }
#btn:hover { #btn:hover,
.btn:hover {
background-color: var(--btn-dark); background-color: var(--btn-dark);
} }

28
css/home.css
View File

@@ -4,10 +4,20 @@
align-items: center; align-items: center;
border-bottom: solid 2px var(--btn); border-bottom: solid 2px var(--btn);
min-height: 5dvw; min-height: 5dvw;
background-color: #0000007a; background-color: var(--blackglass);
label { label {
padding: 1dvw; margin: 0 0 0 1dvw;
width: 5dvh;
height: 5dvh;
background-color: var(--font);
background-image: url("../assets/favicon.png");
background-position: center;
background-size: 4dvh;
background-repeat: no-repeat;
border-radius: 100%;
} }
ul { ul {
position: absolute; position: absolute;
display: flex; display: flex;
@@ -18,6 +28,10 @@
height: 100%; height: 100%;
li { li {
margin: 0 1dvw 0 1dvw; margin: 0 1dvw 0 1dvw;
color: var(--bg-dark);
}
li:hover {
color: var(--font);
} }
} }
} }
@@ -39,6 +53,9 @@
font-weight: 900; font-weight: 900;
} }
label { label {
margin: 2dvw 0 0 0;
display: flex;
text-align: center;
word-break: break-all; word-break: break-all;
font-weight: 400; font-weight: 400;
font-size: 1.5em; font-size: 1.5em;
@@ -49,7 +66,6 @@
width: 50%; width: 50%;
li { li {
position: relative; position: relative;
background-color: #0000007a;
border-radius: 100vw; border-radius: 100vw;
border: solid 2px var(--btn); border: solid 2px var(--btn);
display: flex; display: flex;
@@ -80,9 +96,15 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: 0.3s; transition: 0.3s;
span {
color: var(--bg-dark);
}
} }
a:hover { a:hover {
background-color: var(--btn-dark); background-color: var(--btn-dark);
span {
color: var(--font);
}
} }
} }
} }

4
css/inicio.css
View File

@@ -1,5 +1,5 @@
#posts { #posts {
background-color: #0000007a; background-color: var(--blackglass);
padding: 4dvw 0 4dvw 0; padding: 4dvw 0 4dvw 0;
margin: 4dvw 0 0 0; margin: 4dvw 0 0 0;
width: 100%; width: 100%;
@@ -51,7 +51,7 @@
box-shadow: 0 0 0 #000000; box-shadow: 0 0 0 #000000;
} }
a:hover { a:hover {
box-shadow: 0 0 5vw #84e9ffa7; box-shadow: 0 0 5vw var(--against-color);
z-index: 100; z-index: 100;
} }
} }

147
css/sing.css
View File

@@ -1,135 +1,102 @@
* { * {
margin: 0;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
} }
body { body {
background-color: #1d1d1d;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh;
overflow: hidden;
} }
.form-wrapper { .form-wrapper {
position: relative; position: relative;
width: 350px; width: 350px;
height: 450px; height: 450px;
overflow: hidden; overflow: hidden;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.5); box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
background-color: #0000001e; / background-color: var(--blackglass);
} }
.login-container, .login-container,
.register-container { .register-container {
padding: 40px; padding: 40px;
width: 100%; width: 100%;
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out;
} }
.login-container.active { .login-container.active {
transform: translateX(0%); transform: translateX(0%);
} }
.register-container { .register-container {
transform: translateX(100%); transform: translateX(100%);
} }
.register-container.active { .register-container.active {
transform: translateX(0%); transform: translateX(0%);
} }
.login-container:not(.active) { .login-container:not(.active) {
transform: translateX(-100%); transform: translateX(-100%);
} }
.login-container h2, .login-container h2,
.register-container h2 { .register-container h2 {
color: white; color: var(--btn);
margin-bottom: 30px; margin-bottom: 30px;
font-weight: 500; font-weight: 500;
} }
.input-box { .input-box {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
} }
.input-box i { .input-box i {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
left: 10px; left: 10px;
color: white; color: var(--btn);
z-index: 2; z-index: 2;
} }
.input-box input { .input-box input {
width: 100%; width: 100%;
padding: 10px 10px 10px 35px; padding: 10px 10px 10px 35px;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
background: #1f1f1f; background: var(--bg-light);
color: white; color: var(--btn);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.input-box input::placeholder {
color: transparent;
transition: opacity 0.2s ease;
}
.input-box input:focus::placeholder {
opacity: 1;
color: #555;
}
.input-box label { .input-box label {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 35px; left: 35px;
transform: translateY(-50%); transform: translateY(-50%);
color: #aaa; color: var(--btn);
pointer-events: none; pointer-events: none;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
z-index: 2; z-index: 2;
} }
.input-box input:focus + label, .input-box input:focus + label,
.input-box input:not(:placeholder-shown) + label { .input-box input:not(:placeholder-shown) + label {
top: -15px; top: -15px;
transform: translateY(-50%) translatex(-60%)scale(0.85); transform: translateY(-50%) translatex(-60%) scale(0.85);
font-size: 0.9em; font-size: 0.9em;
color: #ffffff;
background-color: #1d1d1d;
padding: 0 5px; padding: 0 5px;
} }
.buttons { .buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -137,18 +104,14 @@ body {
} }
.btn { .btn {
width: 48%; width: 48%;
padding: 10px; padding: 10px;
background-color: #0000cc;
border: none; border: none;
border-radius: 8px; color: var(--bg-dark);
color: white;
cursor: pointer;
transition: background-color 0.3s;
} }
.btn:hover { .btn:hover {
background-color: #444; color: var(--btn);
} }
.forgot { .forgot {
@@ -156,7 +119,6 @@ body {
margin-top: 10px; margin-top: 10px;
} }
.register-container form { .register-container form {
margin-top: 20px; margin-top: 20px;
} }
@@ -166,15 +128,13 @@ body {
text-align: left; text-align: left;
} }
.form-group input { .form-group input {
padding: 12px 10px; padding: 12px 10px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
background: #1f1f1f;
color: white; color: var(--btn);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
z-index: 1; z-index: 1;
} }
@@ -184,73 +144,20 @@ body {
padding: 15px; padding: 15px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
background-color: #0000cc;
color: white;
margin-top: 20px; margin-top: 20px;
} }
.register-button:hover { .register-button:hover {
background-color: #444; color: var(--btn);
} }
#showLoginBtn { #showLoginBtn {
width: 100%; width: 100%;
color: var(--btn);
margin-top: 15px; margin-top: 15px;
background-color: #555; background-color: #00000000;
} }
#showLoginBtn:hover { #showLoginBtn:hover {
background-color: #777; color: var(--bg-light);
} }
.custom-alert-hidden {
display: none;
}
.custom-alert-visible {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.custom-alert-content {
background-color: #333;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
text-align: center;
color: white;
max-width: 300px;
}
.custom-alert-content p {
margin-bottom: 20px;
font-size: 1.1em;
}
.custom-alert-content button {
background-color: #0000cc;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}
.custom-alert-content button:hover {
background-color: #444;
}

3
index.php
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="assets/favicon.png">
<link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/home.css" /> <link rel="stylesheet" href="css/home.css" />
<script type="text/javascript" src="javascript/libs/vanila.js"></script> <script type="text/javascript" src="javascript/libs/vanila.js"></script>
@@ -10,7 +11,7 @@
</head> </head>
<body> <body>
<div id="menu"> <div id="menu">
<label>Logo</label> <label></label>
<header> <header>
<ul> <ul>
<a href="index.php"><li id="btn"> <a href="index.php"><li id="btn">

0
javascript/singForm.js → javascript/sing.js
View File

11
sing.php
View File

@@ -48,19 +48,12 @@
<input type="password" id="registerPassword" name="password" placeholder=" "> <input type="password" id="registerPassword" name="password" placeholder=" ">
<label for="registerPassword">Senha</label> <label for="registerPassword">Senha</label>
</div> </div>
<button type="submit" class="register-button" id="registerBtn">Registrar</button> <button type="submit" class="register-button btn" id="registerBtn">Registrar</button>
</form> </form>
<button class="btn" id="showLoginBtn">Voltar para Login</button> <button class="btn" id="showLoginBtn">Voltar para Login</button>
</div> </div>
</div> </div>
<div id="custom-alert" class="custom-alert-hidden"> <script src="javascript/sing.js"></script>
<div class="custom-alert-content">
<p id="custom-alert-message"></p>
<button id="custom-alert-ok-btn">OK</button>
</div>
</div>
<script src="javascript/singForm.js"></script>
</body> </body>
</html> </html>