Home Explore Help
Sign In
janedev
/
project
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

<project>

Евгения Акиншина 3 years ago
parent
df093ea29d
commit
3c6b103411
9 changed files with 159 additions and 21 deletions
Split View Show Diff Stats
  1. BIN
      public/img/favicon.png
  2. 3 2
      public/index.html
  3. 30 0
      src/components/FormDate.css
  4. 3 2
      src/components/FormDate.js
  5. 9 7
      src/pages/FormReg.js
  6. 8 6
      src/pages/LoginForm.js
  7. 59 0
      src/pages/LoginReg.css
  8. 41 0
      src/pages/Main.css
  9. 6 4
      src/pages/Main.js

BIN
public/img/favicon.png
View File


+ 3 - 2
public/index.html
View File 

@@ -2,7 +2,8 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
 
+    <link rel="shorttut icon" href="img/favicon.png" type="image/png">
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
     <meta
 
@@ -24,7 +25,7 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
-    <title>React App</title>
 
+    <title>Codepen</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 30 - 0
src/components/FormDate.css
View File 

@@ -0,0 +1,30 @@
 
+.buttons {
 
+    width: 180px;
 
+    height: 40px;
 
+    text-decoration: none;
 
+    padding-top: 9px;
 
+    color: #a675b3;
 
+    text-align: center;
 
+    line-height: 20px;
 
+    display: block;
 
+    margin: 50px auto;
 
+    font: normal 17px arial;
 
+    cursor: pointer;
 
+}
 
+  
+.buttons:not(.active) {
 
+    box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
 
+    background-image: linear-gradient(#3b2751, #271739);
 
+    text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47;
 
+}
 
+  
+.buttons:not(.active):hover,
 
+.buttons:not(.active):focus {
 
+    transition: color 200ms linear, text-shadow 500ms linear;
 
+    color: #fff;
 
+    text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
 
+}
 
+
 
+.buttons:not(:hover) {
 
+      transition: 0.6s;
 
+}

+ 3 - 2
src/components/FormDate.js
View File 

@@ -1,5 +1,6 @@
 
 import { useCallback } from 'react';
 
 import { useDropzone } from 'react-dropzone';
 
+import './FormDate.css'
 
 
 export const FormDate = ({onUpload}) => {
 
     const onDrop = useCallback(acceptedFiles => {
 
@@ -12,8 +13,8 @@ export const FormDate = ({onUpload}) => {
 
         <input {...getInputProps()} />
 
         {
 
           isDragActive ?
 
-            <p>Drop the files here ...</p> :
 
-            <p>Drag 'n' drop some files here, or click to select files</p>
 
+            <p> Drop the files here ...</p> :
 
+            <p className='buttons'> Download files</p>
 
         }
 
       </div>
 
     )

+ 9 - 7
src/pages/FormReg.js
View File 

@@ -1,15 +1,17 @@
 
 import React, {useState} from 'react';
 
+import './LoginReg.css'
 
 
 export const FormReg = ({FormReg}) => {
 
     const [login, setLogin] = useState('')
 
     const [password, setPassword] = useState('')
 
     const [passwordValid, setPasswordValid] = useState('')
 
     return (
 
-        <>
 
-        <input value = {login} onChange = {e => setLogin(e.target.value)} />
 
-        <input type = "password" value = {password} onChange = {e => setPassword(e.target.value)} />
 
-        <input type = "password" value = {passwordValid} onChange = {e => setPasswordValid(e.target.value)} />
 
-        <button disabled = {!login || !password || (password !== passwordValid)} onClick = {() => FormReg(login, password)}>Registration </button>
 
-        </>
 
+        <div className='login'>
 
+        <h3>Registration</h3>
 
+        <input className='u'type ='login' placeholder='Username' value = {login} onChange = {e => setLogin(e.target.value)} />
 
+        <input className='p' type ='password' placeholder='Password' value = {password} onChange = {e => setPassword(e.target.value)} />
 
+        <input className='p' type ='password' placeholder='RepeatYourPassword' value = {passwordValid} onChange = {e => setPasswordValid(e.target.value)} />
 
+        <button type="submit" className='btn btn-primary btn-block btn-large' disabled = {!login || !password || (password !== passwordValid)} onClick = {() => FormReg(login, password)}>Remember me. </button>
 
+        </div>
 
     )
 
-}
 
+}

+ 8 - 6
src/pages/LoginForm.js
View File 

@@ -1,13 +1,15 @@
 
 import { useState } from 'react';
 
+import './LoginReg.css'
 
 
 export const LoginForm = ({onLogin}) => {
 
     const [login, setLogin] = useState('')
 
     const [password, setPassword] = useState('')
 
     return (
 
-        <>
 
-        <input value = {login} onChange = {e => setLogin(e.target.value)} />
 
-        <input type = "password" value = {password} onChange = {e => setPassword(e.target.value)} />
 
-        <button disabled = {!login || !password} onClick = {() => onLogin(login, password)}>Login </button>
 
-        </>
 
+        <div className='login'>
 
+        <h3>Login</h3>
 
+        <input className='u'type ='login' placeholder='Username' value = {login} onChange = {e => setLogin(e.target.value)} />
 
+        <input className='p' type ='password' placeholder='Password' value = {password} onChange = {e => setPassword(e.target.value)} />
 
+        <button type="submit" className='btn btn-primary btn-block btn-large' disabled = {!login || !password} onClick = {() => onLogin(login, password)}>Let me in. </button>
 
+        </div>
 
     )
 
-}
 
+}

File diff suppressed because it is too large
+ 59 - 0
src/pages/LoginReg.css


+ 41 - 0
src/pages/Main.css
View File 

@@ -0,0 +1,41 @@
 
+body {
 
+    margin-top: 20px;
 
+}
 
+
 
+.button_plus {
 
+    position: relative;
 
+    z-index: 1;
 
+    display: inline-block;
 
+    width: 1em;
 
+    height: 1em;
 
+    line-height: 1em;
 
+    vertical-align: middle;
 
+    text-align: center;
 
+    text-decoration: none;
 
+    text-shadow: 1px 1px rgba(255,255,255,.3);
 
+    font-size: 300%;
 
+    font-weight: 400;
 
+    color: #000;
 
+    border-radius: 100%;
 
+    background: rgb(183, 146, 190) linear-gradient(rgb(168, 151, 185), rgb(131, 116, 185));
 
+    box-shadow:
 
+     inset 0 -2px 1px rgba(0,0,0,.5),
 
+     inset 0 2px 1px rgba(255,255,255,.9),
 
+     0 4px 4px rgba(0,0,0,.9);
 
+    cursor: pointer;
 
+}
 
+
 
+.button_plus:after {
 
+    content: "";
 
+    position: absolute;
 
+    z-index: -1;
 
+    top: 10%;
 
+    left: 10%;
 
+    right: 10%;
 
+    bottom: 10%;
 
+    border-radius: 100%;
 
+    background: rgb(233, 230, 243) linear-gradient(rgb(216, 202, 238), rgb(236, 222, 245));
 
+    box-shadow:
 
+     inset 0 2px 1px rgba(0,0,0,.5),
 
+     inset 0 -2px 1px rgba(255,255,255,.3);
 
+}

+ 6 - 4
src/pages/Main.js
View File 

@@ -1,5 +1,6 @@
 
 import { useState } from 'react';
 
 import { Editor } from '../components/Editor';
 
+import './Main.css'
 
 
 const datas = [{type: "", name:"", text:""}, {type: "", name:"", text:""}];
 
 
@@ -15,7 +16,7 @@ export const Main = () => {
 
                             } 
 
                             } />
 
-                            <button onClick={newArray => { let editors2 = [...editors]
 
+                            <button className='button_plus' onClick={newArray => { let editors2 = [...editors]
 
                             editors2.push(newArray);
 
                             setEditors(editors2);
 
                             }
 
@@ -24,6 +25,7 @@ export const Main = () => {
 
         })    
     )}
 
 
-// приконэктить  его к снипету чтобы на бэк начали отправляться данные?
 
-// сделать верстку для страниц
 
-// сделать хэдэр
 
+// приконэктить его к снипету чтобы на бэк начали отправляться данные?
 
+// сделать главную стр
 
+// запросы
 
+// сделать theme и font size