Skip to content

Commit

Permalink
adding form-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ethan0905
ethan0905 committed Nov 24, 2022
1 parent 82690a0 commit 601119f
Show file tree
Hide file tree
Showing 2 changed files with 244 additions and 12 deletions.
125 changes: 119 additions & 6 deletions src/assets/css/form.css
View file
Expand Up @@ -111,21 +111,22 @@ body {
outline: none !important;
border-color: black;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
}
.select-box:hover {

}

.select-box:hover {
outline: none !important;
border-color: black;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
cursor: text;

transition: border-color 2s ease-out;
}
}

/* .form-div1::before {
content: "";
position: absolute;
background: #F4F1EE;
bottom: -50px;
height: 50px;
Expand All @@ -147,4 +148,116 @@ body {
justify-content: space-around;
border-radius: 0 0 20px 0;
padding: 20px;
}

.select-box-div-price {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
gap: 20px;
}

.select-box-price {
display: flex;
width: 167px;
height: 33px;
border-radius: 5px;
padding-right: 5px;
border: 1px solid #e6e6e6;
font-family: 'Inter';
font-size: 13px;
padding: 5px;
}

.select-box-price:focus {
outline: none !important;
border-color: black;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
}

.select-box-price:hover {
outline: none !important;
border-color: black;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
cursor: text;
transition: border-color 2s ease-out;
}

.bnb-tag {
font-family: 'Inter';
font-size: 13px;
font-weight: 600;
}

.upload-file {
display: flex;
padding: 20px;
/* width: 100%; */
}

/* .label-section-edit-profile {
align-items: center;
display: flex;
font-weight: 600;
justify-content: center;
object-fit: cover;
} */

/* input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
} */

.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 20px rgb(0 0 0 / 5%);
border-radius: 5px;
}

.btn {
background-color: white;
border: 1px solid #e6e6e6;
padding: 8px 20px;
border-radius: 8px;
font-size: 16px;
/* font-weight: bold; */
/* cursor: pointer; */
/* box-shadow: 0 10px 20px rgb(0 0 0 / 5%); */
}

.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
/* width: 10px; */
/* box-shadow: 0 10px 20px rgb(0 0 0 / 5%); */
}

.status-div-upload {
display: flex;
justify-content: center;
justify-content: space-between;
gap: 10px;
background: #fff;
/* box-shadow: 0 10px 20px rgb(0 0 0 / 5%); */
border-radius: 12px;
/* pointer */
}

.form-div3 {
display: flex;
justify-content: space-between;
}
131 changes: 125 additions & 6 deletions src/pages/form-page.jsx
View file
@@ -1,13 +1,132 @@
import React from "react";
import { Component } from "react";
import "../assets/css/form.css";

class FormPage extends Component {
render() {
return (
<div className="bg-gray-900">
</div>
);
}
render() {
return (
<>
<div>
<h1 class="logo-over-white">
PAYCONSENT<span class="dot-color">.</span>
</h1>
</div>
<div className="total-form">
<div className="green-line">
</div>
<form className="form-div-total">
<div className="form-div1">
<div className="title-form">
<h1>Create a contract</h1>
</div>
<div className="status-div">
<div className="label-status">
<label class="status-title" for="contractStatus">
Status
</label>
<p className="text-[13px]">Seller or Buyer</p>
</div>
<div className="select-box-div">
<select className="select-box">
<option value="0" selected disabled>
Status
</option>
<option value="1">Buyer</option>
<option value="2">Seller</option>
</select>
</div>
</div>
</div>
<div className="form-div2">
<div className="status-div">
<div className="label-status">
<label class="status-title" for="contractName">
My Wallet ID
</label>
<p className="text-[13px]">The creator of this contract</p>
</div>
<div className="select-box-div">
<input
className="select-box"
type="name"
id="exampleInput8"
placeholder="Enter your wallet ID"
/>
</div>
</div>
<div className="status-div">
<div className="label-status">
<label class="status-title" for="contractSubject">
Subject
</label>
<p className="text-[13px]">About the contract</p>
</div>
<div className="select-box-div">
<textarea
className="select-box"
id="exampleFormControlTextarea13"
rows="3"
placeholder="Enter the subject of this contract"
></textarea>
</div>
</div>
<div className="status-div">
<div className="label-status">
<label class="status-title" for="contractWalletAddress">
Sending To
</label>
<p className="text-[13px]">The receiver</p>
</div>
<div className="select-box-div">
<input
className="select-box"
id="exampleInput8"
placeholder="Enter the receiver's wallet ID"
/>
</div>
</div>
<div className="status-div-upload">
<div className="label-status">
<label class="status-title">File To Upload</label>
<p className="text-[13px]">(Quotation, Specifications ...)</p>
</div>
<div>
<div class="upload-btn-wrapper">
<button class="btn">Upload a file</button>
<input type="file" name="myfile" />
</div>
</div>
</div>
<div className="status-div">
<div className="label-status">
<label class="status-title" for="contractPrice">
Price
</label>
</div>
<div className="select-box-div-price">
<input
className="select-box-price"
type="price"
id="exampleInput8"
placeholder="Price"
/>
<p className="bnb-tag">BNB</p>
</div>
</div>
</div>
<div className="form-div3">
<div>
<button type="dismiss">Dismiss</button>
</div>
<div>
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</>
);
}
}

export default FormPage;

0 comments on commit 601119f

Please sign in to comment.