الرئيسية
عليك بالتعديل والتعريب
وسلامتكم<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
box-sizing: border-box;
}
.maincontainer {
padding-bottom: 3em;
}
* {
font-family: 'Open Sans', sans-serif;
}
*::-webkit-input-placeholder {
font-size: 0.9em;
}
.signup, .signin {
font-size: 1.4em;
}
a, a:visited, a:active, a:hover {
color: #000;
}
.text-center {
padding: 0;
}
#signup:focus, #signin:focus {
border: 3px solid #19ABBC;
}
#signup, #signin {
padding: 0.5em;
height: auto;
border-radius: 0;
}
#signin:hover, #signup:hover, .signup-button:hover, .signin-button:hover {
transform: translateY(1px);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.active {
background-color: #85CDD5;
}
.btn, .form-input {
border-radius: 0;
overflow: hidden;
height: 3em;
}
.card-header, .card-body {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.signup-button, .signin-button {
background-color: #19ABBC;
}
.google, .github {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="root"> </div><div id="bcl"> </div>
<script>
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
signUp: true,
login: false };
this.signUpHandler = this.signUpHandler.bind(this);
this.logInHandler = this.logInHandler.bind(this);
}
signUpHandler(event) {
event.preventDefault();
this.setState({
signUp: true,
login: false });
}
logInHandler(event) {
event.preventDefault();
this.setState({
signUp: false,
login: true });
}
render() {
return /*#__PURE__*/(
React.createElement("div", { className: "App" }, /*#__PURE__*/
React.createElement(Form, {
signUp: this.signUpHandler,
logIn: this.logInHandler,
selectForm: this.state.signUp })));
}}
const Form = props => {
return /*#__PURE__*/(
React.createElement("div", { className: "maincontainer" }, /*#__PURE__*/
React.createElement("div", { className: "container" }, /*#__PURE__*/
React.createElement("div", { className: "row justify-content-center" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-12 col-sm-12 col-md-9 col-lg-6 col-md-offset-4" }, /*#__PURE__*/
React.createElement("div", { className: "card" }, /*#__PURE__*/
React.createElement("div", { className: "card-header" }, /*#__PURE__*/
React.createElement("div", { className: "container" }, /*#__PURE__*/
React.createElement("div", { className: "row" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-6 col-sm-6 col-md-6 col-lg-6 signup text-center", id: "signup-link" }, /*#__PURE__*/
React.createElement("a", { onClick: props.signUp,
href: "#signup"
, className: `btn btn-lg btn-block font-weight-bold ${props.selectForm ? "active" : ""}`,
role: "button", "aria-pressed": "true", id: "signup" }, "Sign Up")), /*#__PURE__*/
React.createElement("div", {
className: "col-xs-6 col-sm-6 col-md-6 col-lg-6 signin text-center", id: "signin-link" }, /*#__PURE__*/
React.createElement("a", { onClick: props.logIn,
href: "#signin",
className: `btn btn-lg btn-block font-weight-bold ${!props.selectForm ? "active" : ""}`,
role: "button",
"aria-pressed": "true", id: "signin" }, "Sign In"))))),
props.selectForm ? /*#__PURE__*/React.createElement(Signup, null) : /*#__PURE__*/React.createElement(Signin, null)))))));
};
class Signin extends React.Component {
render() {
return /*#__PURE__*/ (
React.createElement("main", null, /*#__PURE__*/
React.createElement("div", { className: "card-body" }, /*#__PURE__*/
React.createElement("div", { className: "container" }, /*#__PURE__*/
React.createElement("div", { className: "row justify-content-center" }, /*#__PURE__*/
React.createElement("div", { className: "form-container col-xs-12 col-sm-12 col-md-10 col-lg-10" }, /*#__PURE__*/
React.createElement("form", null, /*#__PURE__*/
React.createElement("div", { className: "form-group" }, /*#__PURE__*/
React.createElement("input", { type: "email", name: "email", placeholder: "Your Email ID", className: "form-input form-control border border-dark", required: true })), /*#__PURE__*/
React.createElement("div", { className: "form-group" }, /*#__PURE__*/
React.createElement("input", { type: "password", name: "password", placeholder: "Password", className: "form-input form-control border border-dark", required: true })), /*#__PURE__*/
React.createElement("div", { className: "form-group" }, /*#__PURE__*/
React.createElement("input", {
type: "submit",
className: "form-btn btn btn-block font-weight-bold signin-button",
value: "Sign In",
name: "btn-login" })), /*#__PURE__*/
React.createElement("div", { className: "form-group" }, /*#__PURE__*/
React.createElement("button", {
type: "button",
className: "btn btn-light btn-block border border-dark" }, /*#__PURE__*/
React.createElement("svg", { className: "google",
id: "google",
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 128 128" }, /*#__PURE__*/
React.createElement("defs", null, /*#__PURE__*/
React.createElement("style", null, `.cls-1{fill: #fff;}.cls-2{fill: #e33629;}.cls-3{fill: #f8bd00;}.cls-4{fill: #587dbd;}.cls-5{fill: #319f43;}`)), /*#__PURE__*/
React.createElement("title", null, "google"), /*#__PURE__*/
React.createElement("g", { id: "original" }, /*#__PURE__*/
React.createElement("path", {
className: "cls-1",
d: "M44.59,4.21a63.28,63.28,0,0,0,4.33,120.9,67.6,67.6,0,0,0,32.36.35A57.13,57.13,0,0,0,107.18,112a57.44,57.44,0,0,0,16-26.26,74.33,74.33,0,0,0,1.61-33.58H65.27c0,8.23,0,16.46,0,24.69H99.74A29.72,29.72,0,0,1,87.08,96.37a36.16,36.16,0,0,1-13.93,5.5,41.29,41.29,0,0,1-15.1,0A37.16,37.16,0,0,1,44,95.74a39.3,39.3,0,0,1-14.5-19.42,38.31,38.31,0,0,1,0-24.63,39.25,39.25,0,0,1,9.18-14.91A37.17,37.17,0,0,1,76.13,27a34.28,34.28,0,0,1,13.64,8q5.83-5.8,11.64-11.63c2-2.09,4.18-4.08,6.15-6.22A61.22,61.22,0,0,0,87.2,4.59,64,64,0,0,0,44.59,4.21Z" }), /*#__PURE__*/
React.createElement("path", {
className: "cls-2",
d: "M44.59,4.21a64,64,0,0,1,42.61.37A61.22,61.22,0,0,1,107.55,17.2c-2,2.14-4.11,4.14-6.15,6.22Q95.58,29.23,89.77,35a34.28,34.28,0,0,0-13.64-8,37.17,37.17,0,0,0-37.46,9.74,39.25,39.25,0,0,0-9.18,14.91L8.76,35.6A63.53,63.53,0,0,1,44.59,4.21Z" }), /*#__PURE__*/
React.createElement("path", {
className: "cls-3",
d: "M3.26,51.5a62.93,62.93,0,0,1,5.5-15.9L29.49,51.69a38.31,38.31,0,0,0,0,24.63q-10.36,8-20.73,16.08A63.33,63.33,0,0,1,3.26,51.5Z" }), /*#__PURE__*/
React.createElement("path", {
className: "cls-4",
d: "M65.27,52.15h59.52a74.33,74.33,0,0,1-1.61,33.58,57.44,57.44,0,0,1-16,26.26c-6.69-5.22-13.41-10.4-20.1-15.62A29.72,29.72,0,0,0,99.74,76.83H65.27C65.26,68.61,65.27,60.38,65.27,52.15Z" }), /*#__PURE__*/
React.createElement("path", {
className: "cls-5",
d: "M8.75,92.4q10.37-8,20.73-16.08A39.3,39.3,0,0,0,44,95.74a37.16,37.16,0,0,0,14.08,6.08,41.29,41.29,0,0,0,15.1,0,36.16,36.16,0,0,0,13.93-5.5c6.69,5.22,13.41,10.4,20.1,15.62a57.13,57.13,0,0,1-25.9,13.47,67.6,67.6,0,0,1-32.36-.35,63,63,0,0,1-23-11.59A63.73,63.73,0,0,1,8.75,92.4Z" }))), "\xA0 Sign In with Google")), /*#__PURE__*/
React.createElement("div", { className: "form-group" }, /*#__PURE__*/
React.createElement("button", {
type: "button",
className: "btn btn-light btn-block border border-dark" }, /*#__PURE__*/
React.createElement("svg", { className: "github",
viewBox: "0 0 128 128",
width: "20",
height: "20" }, /*#__PURE__*/
React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z" }), /*#__PURE__*/
React.createElement("path", { d: "M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm-.743-.55M28.93 94.535c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zm-.575-.618M31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm0 0M34.573 101.373c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm0 0M39.073 103.324c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm0 0M44.016 103.685c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm0 0M48.614 102.903c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0" })), /*#__PURE__*/
React.createElement("span", { className: "btn-text" }, "\xA0 Sign In with Github "))))))))));
}}
class Signup extends React.Component {
render() {
return /*#__PURE__*/ (
// Signup goes here
React.createElement("main", null, /*#__PURE__*/
React.createElement("div", { className: "signup-signin-form-container container card-body" }, /*#__PURE__*/
React.createElement("div", { className: "form-container row justify-content-center" }, /*#__PURE__*/
React.createElement("div", { className: "form-container col-xs-12 col-sm-12 col-md-12 col-lg-12" }, /*#__PURE__*/
React.createElement("form", { action: "#", method: "POST" }, /*#__PURE__*/
React.createElement("div", { className: "name-container form-group" }, /*#__PURE__*/
React.createElement("div", { className: "form-row" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-6 col-sm-6 col-md-6 col-lg-6" }, /*#__PURE__*/
React.createElement("input", { className: "first-name form-input form-control border border-dark", type: "text", name: "firstName", placeholder: "First Name", required: true })), /*#__PURE__*/
React.createElement("div", { className: "col-xs-6 col-sm-6 col-md-6 col-lg-6" }, /*#__PURE__*/
React.createElement("input", { className: "last-name form-input form-control border border-dark", type: "text", name: "lastName", placeholder: "Last Name", required: true })))), /*#__PURE__*/
React.createElement("div", { className: "form-row" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-12 col-sm-12 col-md-12 col-lg-12" }, /*#__PURE__*/
React.createElement("div", { className: "form-group" }, /*#__PURE__*/
React.createElement("input", { className: "email form-input form-control border border-dark", type: "email", name: "email", placeholder: "Email ID", required: true })))), /*#__PURE__*/
React.createElement("div", { className: "password-container form-group" }, /*#__PURE__*/
React.createElement("div", { className: "form-row" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-6 col-sm-6 col-md-6 col-lg-6" }, /*#__PURE__*/
React.createElement("input", { className: "password form-input form-control border border-dark", type: "password", name: "password", placeholder: "Password", required: true })), /*#__PURE__*/
React.createElement("div", { className: "col-xs-6 col-sm-6 col-md-6 col-lg-6" }, /*#__PURE__*/
React.createElement("input", { className: "confirm-password form-input form-control border border-dark", type: "password", name: "confirmPassword", placeholder: "Confirm Password", required: true })))), /*#__PURE__*/
React.createElement("div", { className: "submit-btn-container form-group" }, /*#__PURE__*/
React.createElement("div", { className: "form-row" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-12 col-sm-12 col-md-12 col-lg-12" }, /*#__PURE__*/
React.createElement("input", {
type: "submit",
className: "form-btn btn btn-block font-weight-bold signup-button",
value: "Sign Up",
name: "btn-login" })))), /*#__PURE__*/
React.createElement("div", { className: "google-github-btn-container" }, /*#__PURE__*/
React.createElement("div", { className: "google-btn-container form-group" }, /*#__PURE__*/
React.createElement("div", { className: "form-row" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-12 col-sm-12 col-md-12 col-lg-12" }, /*#__PURE__*/
React.createElement("button", { className: "google-btn btn btn-light btn-block border border-dark" }, /*#__PURE__*/
React.createElement("svg", { className: "google", id: "google", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 128 128", height: "20px", width: "20px" }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, `.cls-1{fill: #fff;}.cls-2{fill: #e33629;}.cls-3{fill: #f8bd00;}.cls-4{fill: #587dbd;}.cls-5{fill: #319f43;}`)), /*#__PURE__*/React.createElement("title", null, "google"), /*#__PURE__*/React.createElement("g", { id: "original" }, /*#__PURE__*/React.createElement("path", { className: "cls-1", d: "M44.59,4.21a63.28,63.28,0,0,0,4.33,120.9,67.6,67.6,0,0,0,32.36.35A57.13,57.13,0,0,0,107.18,112a57.44,57.44,0,0,0,16-26.26,74.33,74.33,0,0,0,1.61-33.58H65.27c0,8.23,0,16.46,0,24.69H99.74A29.72,29.72,0,0,1,87.08,96.37a36.16,36.16,0,0,1-13.93,5.5,41.29,41.29,0,0,1-15.1,0A37.16,37.16,0,0,1,44,95.74a39.3,39.3,0,0,1-14.5-19.42,38.31,38.31,0,0,1,0-24.63,39.25,39.25,0,0,1,9.18-14.91A37.17,37.17,0,0,1,76.13,27a34.28,34.28,0,0,1,13.64,8q5.83-5.8,11.64-11.63c2-2.09,4.18-4.08,6.15-6.22A61.22,61.22,0,0,0,87.2,4.59,64,64,0,0,0,44.59,4.21Z" }), /*#__PURE__*/React.createElement("path", { className: "cls-2", d: "M44.59,4.21a64,64,0,0,1,42.61.37A61.22,61.22,0,0,1,107.55,17.2c-2,2.14-4.11,4.14-6.15,6.22Q95.58,29.23,89.77,35a34.28,34.28,0,0,0-13.64-8,37.17,37.17,0,0,0-37.46,9.74,39.25,39.25,0,0,0-9.18,14.91L8.76,35.6A63.53,63.53,0,0,1,44.59,4.21Z" }), /*#__PURE__*/React.createElement("path", { className: "cls-3", d: "M3.26,51.5a62.93,62.93,0,0,1,5.5-15.9L29.49,51.69a38.31,38.31,0,0,0,0,24.63q-10.36,8-20.73,16.08A63.33,63.33,0,0,1,3.26,51.5Z" }), /*#__PURE__*/React.createElement("path", { className: "cls-4", d: "M65.27,52.15h59.52a74.33,74.33,0,0,1-1.61,33.58,57.44,57.44,0,0,1-16,26.26c-6.69-5.22-13.41-10.4-20.1-15.62A29.72,29.72,0,0,0,99.74,76.83H65.27C65.26,68.61,65.27,60.38,65.27,52.15Z" }), /*#__PURE__*/React.createElement("path", { className: "cls-5", d: "M8.75,92.4q10.37-8,20.73-16.08A39.3,39.3,0,0,0,44,95.74a37.16,37.16,0,0,0,14.08,6.08,41.29,41.29,0,0,0,15.1,0,36.16,36.16,0,0,0,13.93-5.5c6.69,5.22,13.41,10.4,20.1,15.62a57.13,57.13,0,0,1-25.9,13.47,67.6,67.6,0,0,1-32.36-.35,63,63,0,0,1-23-11.59A63.73,63.73,0,0,1,8.75,92.4Z" }))), " ", /*#__PURE__*/React.createElement("span", { className: "btn-text" }, "\xA0 Sign Up with Google "))))), /*#__PURE__*/
React.createElement("div", { className: "github-btn-container form-group" }, /*#__PURE__*/
React.createElement("div", { className: "form-row" }, /*#__PURE__*/
React.createElement("div", { className: "col-xs-12 col-sm-12 col-md-12 col-lg-12" }, /*#__PURE__*/
React.createElement("button", { className: "github-btn btn btn-light btn-block border border-dark" }, /*#__PURE__*/
React.createElement("svg", { className: "github", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 128 128", height: "20px", width: "20px" }, /*#__PURE__*/React.createElement("g", { fill: "#181616" }, /*#__PURE__*/React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z" }), /*#__PURE__*/React.createElement("path", { d: "M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm-.743-.55M28.93 94.535c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zm-.575-.618M31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm0 0M34.573 101.373c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm0 0M39.073 103.324c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm0 0M44.016 103.685c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm0 0M48.614 102.903c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0" }))), " ", /*#__PURE__*/React.createElement("span", { className: "btn-text" }, "\xA0 Sign Up with Github "))))))))))));
}}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
</script>
</body>
</html>
- المرفقات
koed-hs4.png - لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.
- (21 Ko) عدد مرات التنزيل 0
