From 8c9b6ed1692f8762284038fb7077a3496c351d70 Mon Sep 17 00:00:00 2001
From: zk_exe <mr.zk.exe@gmail.com>
Date: Fri, 8 Aug 2025 17:16:53 -0300
Subject: [PATCH] aba de escrever

---
 componentes/escrever.php               | 39 ++++++++++++
 componentes/inicio.php                 |  8 +--
 css/LoginStyle.css                     | 82 --------------------------
 css/escrever.css                       | 64 ++++++++++++++++++++
 css/{style.css => home.css}            | 59 ------------------
 css/inicio.css                         | 58 ++++++++++++++++++
 css/{Login-e-Registro.css => sing.css} |  0
 index.php                              | 14 ++---
 sing.php                               |  2 +-
 9 files changed, 171 insertions(+), 155 deletions(-)
 create mode 100644 componentes/escrever.php
 delete mode 100644 css/LoginStyle.css
 create mode 100644 css/escrever.css
 rename css/{style.css => home.css} (56%)
 create mode 100644 css/inicio.css
 rename css/{Login-e-Registro.css => sing.css} (100%)

diff --git a/componentes/escrever.php b/componentes/escrever.php
new file mode 100644
index 0000000..490176e
--- /dev/null
+++ b/componentes/escrever.php
@@ -0,0 +1,39 @@
+<link rel="stylesheet" href="css/escrever.css" />
+<div id="write">
+    <div id="embed-write">
+        <img src="assets/invalid-file.png"/>
+        <ul>
+            <li>
+                <input type="text" min="150" max="300" placeholder="titulo da sua historia">
+            </li>
+            <li>
+                <textarea min="190" max="380" placeholder="escreva a sinopse da sua historia"></textarea>
+            </li>
+            <li id="tags">
+
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+
+                <!-- so para saber como vai ficar, tenho que remover depois -->
+            </li>
+        </ul>
+    </div>
+    <div id="text-write">
+        <ul>
+        </ul>
+        <li>
+            <textarea placeholder="escreva sua historia aqui"></textarea>
+        </li>
+        <a id="btn">enviar</a>
+    </div>
+</div>
diff --git a/componentes/inicio.php b/componentes/inicio.php
index aa1c161..249d058 100644
--- a/componentes/inicio.php
+++ b/componentes/inicio.php
@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="css/inicio.css" />
 <nav id="search">
     <hgroup>
         <h1>Bem-vindos a biblioteca secreta</h1>
@@ -25,12 +26,7 @@
                     <label>Titulo da Historia</label>
                     <h3>27/07/2025</h3>
                     <p>
-                        bla bla bla bla bla bla bla bla bla bla bla bla
-                        blabla bla bla bla bla bla bla bla bla bla bla
-                        bla blabla bla bla bla bla bla bla bla bla bla
-                        bla bla blabla bla bla bla bla bla bla bla bla
-                        bla bla bla blabla bla bla bla bla bla bla bla
-                        bla bla bla bla bla
+bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla
                     </p>
                 </hgroup>
             </li>
diff --git a/css/LoginStyle.css b/css/LoginStyle.css
deleted file mode 100644
index 64f2900..0000000
--- a/css/LoginStyle.css
+++ /dev/null
@@ -1,82 +0,0 @@
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Inter', sans-serif;
-}
-
-body {
-  background-color: #1d1d1d;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.login-container {
-  background-color: #9cc1d921;
-  padding: 40px;
-  border-radius: 20px;
-  box-shadow: 0 0 20px rgba(0,0,0,0.5);
-  width: 300px;
-  text-align: center;
-}
-
-.login-container h2 {
-  color: white;
-  margin-bottom: 30px;
-  font-weight: 500;
-}
-
-.input-box {
-  position: relative;
-  margin-bottom: 20px;
-}
-
-.input-box i {
-  position: absolute;
-  top: 12px;
-  left: 10px;
-  color: white;
-}
-
-.input-box input {
-  width: 100%;
-  padding: 10px 10px 10px 35px;
-  border: none;
-  border-radius: 10px;
-  background: #1f1f1f;
-  color: white;
-  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
-}
-
-.input-box input::placeholder {
-  color: #aaa;
-}
-
-.buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 10px;
-}
-
-.btn {
-  width: 48%;
-  padding: 10px;
-  background-color: #385c737e;
-  border: none;
-  border-radius: 8px;
-  color: white;
-  cursor: pointer;
-  transition: 0.3s;
-}
-
-.btn:hover {
-  background-color: #444;
-}
-
-.forgot {
-  width: 100%;
-  margin-top: 10px;
-}
diff --git a/css/escrever.css b/css/escrever.css
new file mode 100644
index 0000000..2e329d0
--- /dev/null
+++ b/css/escrever.css
@@ -0,0 +1,64 @@
+#write {
+    width: 100%;
+    min-height: 90dvh;
+    display: flex;
+    #embed-write {
+        max-width: 50dvh;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        img {
+            object-fit: cover;
+            width: 50dvh;
+            height: 50dvh;
+            margin: 0 0 1dvw 0;
+        }
+        ul {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            li {
+                margin: 0 0 1dvh 0;
+                width: 95%;
+                input[type="text"] {
+                    width: 100%;
+                    outline: none;
+                    font-size: 1.3em;
+                }
+                textarea {
+                    font-size: 1.3em;
+                    outline: none;
+                    resize: none;
+                    width: 100%;
+                    height: 25dvh;
+                }
+            }
+        }
+    }
+    #text-write {
+        position: relative;
+        width: calc(100% - 50dvh - 2px);
+        border-left: solid 2px var(--btn);
+        ul {
+            width: 100%;
+            min-height: 3dvw;
+            background: purple;
+        }
+        li {
+            width: 100%;
+            textarea {
+                width: 100%;
+                height: 39dvw;
+                resize: none;
+                padding: 1dvh;
+            }
+        }
+        #btn {
+            position: absolute;
+            text-align: center;
+            border-radius: 0;
+            width: 100%;
+            bottom: 0;
+        }
+    }
+}
diff --git a/css/style.css b/css/home.css
similarity index 56%
rename from css/style.css
rename to css/home.css
index d5fbc9f..f449f8e 100644
--- a/css/style.css
+++ b/css/home.css
@@ -87,62 +87,3 @@
         }
     }
 }
-
-#posts {
-    background-color: #0000007a;
-    padding: 4dvw 0 4dvw 0;
-    margin: 4dvw 0 0 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-
-    ul {
-        width: calc(100% - 5dvw);
-        display: flex;
-        flex-wrap: wrap;
-        gap: 1.5vw;
-        a {
-            width: calc(33.33% - 1dvw - 2px);
-            height: 30dvh;
-            overflow: hidden;
-            border-radius: 1dvw;
-            li {
-                overflow: hidden;
-                width: 100%;
-                background: rgb(15, 15, 15);
-                display: flex;
-                img {
-                    width: 25dvh;
-                    height: 30dvh;
-                    object-fit: cover;
-                }
-                hgroup {
-                    width: calc(100% - 25dvh);
-                    label {
-                        display: block;
-                        width: 100%;
-                        text-align: center;
-                        font-size: 1.5em;
-                        font-family: "Special Gothic Expanded One", sans-serif;
-                        color: var(--btn);
-                    }
-                    h3 {
-                        font-family: Arial;
-                        display: block;
-                        width: 100%;
-                        text-align: right;
-                    }
-                    p {
-                        font-family: Arial;
-                        white-space: pre-wrap;
-                    }
-                }
-            }
-            box-shadow: 0 0 0 #000000;
-        }
-        a:hover {
-            box-shadow: 0 0 5vw #84e9ffa7;
-            z-index: 100;
-        }
-    }
-}
diff --git a/css/inicio.css b/css/inicio.css
new file mode 100644
index 0000000..f5c6a67
--- /dev/null
+++ b/css/inicio.css
@@ -0,0 +1,58 @@
+#posts {
+    background-color: #0000007a;
+    padding: 4dvw 0 4dvw 0;
+    margin: 4dvw 0 0 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    ul {
+        width: calc(100% - 5dvw);
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1.5vw;
+        a {
+            width: calc(33.33% - 1dvw - 2px);
+            height: 30dvh;
+            overflow: hidden;
+            border-radius: 1dvw;
+            li {
+                overflow: hidden;
+                width: 100%;
+                background: rgb(15, 15, 15);
+                display: flex;
+                img {
+                    width: 25dvh;
+                    height: 30dvh;
+                    object-fit: cover;
+                }
+                hgroup {
+                    width: calc(100% - 25dvh);
+                    label {
+                        display: block;
+                        width: 100%;
+                        text-align: center;
+                        font-size: 1.5em;
+                        font-family: "Special Gothic Expanded One", sans-serif;
+                        color: var(--btn);
+                    }
+                    h3 {
+                        font-family: Arial;
+                        display: block;
+                        width: 100%;
+                        text-align: right;
+                    }
+                    p {
+                        font-family: Arial;
+                        white-space: pre-wrap;
+                    }
+                }
+            }
+            box-shadow: 0 0 0 #000000;
+        }
+        a:hover {
+            box-shadow: 0 0 5vw #84e9ffa7;
+            z-index: 100;
+        }
+    }
+}
diff --git a/css/Login-e-Registro.css b/css/sing.css
similarity index 100%
rename from css/Login-e-Registro.css
rename to css/sing.css
diff --git a/index.php b/index.php
index 5d83d54..e374693 100644
--- a/index.php
+++ b/index.php
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="stylesheet" href="css/base.css" />
-        <link rel="stylesheet" href="css/style.css" />
+        <link rel="stylesheet" href="css/home.css" />
         <script type="text/javascript" src="javascript/libs/vanila.js"></script>
         <title>;-;</title>
     </head>
@@ -13,12 +13,12 @@
             <label>Logo</label>
             <header>
                 <ul>
-                    <li id="btn">
-                        <a href="index.php"> Inicio </a>
-                    </li>
-                    <li id="btn">
-                        <a href="index.php?pg=2"> Escrever Historia </a>
-                    </li>
+                    <a href="index.php"><li id="btn">
+                        Inicio
+                    </li></a>
+                    <a href="index.php?pg=2"><li id="btn">
+                        Escrever Historia
+                    </li></a>
                 </ul>
             </header>
         </div>
diff --git a/sing.php b/sing.php
index 9bd33ec..818ca58 100644
--- a/sing.php
+++ b/sing.php
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Login e Registro</title>
 
-    <link rel="stylesheet" href="css/Login-e-Registro.css"/>
+    <link rel="stylesheet" href="css/sing.css"/>
     <link rel="stylesheet" href="css/base.css"/>
 </head>
 <body>