@@ -5,35 +5,91 @@ import logo from './logo.png';
55
66class App extends Component {
77 render ( ) {
8+ function Clipboard_CopyTo ( value ) {
9+ var tempInput = document . createElement ( 'input' ) ;
10+ tempInput . value = value ;
11+ document . body . appendChild ( tempInput ) ;
12+ tempInput . select ( ) ;
13+ document . execCommand ( 'copy' ) ;
14+ document . body . removeChild ( tempInput ) ;
15+ }
16+
17+ const handleClick = ( ) => {
18+ Clipboard_CopyTo ( 'T9TTVSQB' ) ;
19+ var div = document . getElementById ( 'code-success' ) ;
20+ div . style . display = 'block' ;
21+ setTimeout ( function ( ) {
22+ document . getElementById ( 'code-success' ) . style . display = 'none' ;
23+ } , 900 ) ;
24+ } ;
25+
826 return (
9- < MDBContainer >
10- < MDBRow center style = { { height : '100vh' } } >
11- < MDBCol middle = { true } md = '6' className = 'text-center' >
12- < img src = { logo } alt = 'logo' style = { { width : '10rem' } } />
13- < h1 className = 'text-white' > Welcome to Your MDB React App</ h1 >
14- < p className = 'mb-2 text-white' > The application is configured and ready to import our components.</ p >
15- < MDBBtn href = 'https://mdbootstrap.com/docs/react/' target = 'blank' color = 'light-blue' >
16- < strong > Check out our docs!</ strong >
17- </ MDBBtn >
18- </ MDBCol >
19- < MDBCol middle = { true } md = '6' className = 'text-center' >
20- < div className = 'd-flex mt-5' >
21- < div className = 'text-center' >
22- < h2 className = 'h1 mb-5' > CYBER MONDAY SALE!</ h2 >
23- < MDBIcon icon = "calendar-day cyan-text" size = "10x" />
24- < p className = 'mt-2 text-white' >
25- Check what we have prepared and start using the richest UI Kit today.
26- < br />
27- Hurry up & don 't loose your chance .
28- </ p >
29- < MDBBtn color = "cyan" href = "https://mdbootstrap.com/sale/" target = "_blank" >
30- CLAIM OFFER
31- </ MDBBtn >
32- </ div >
27+ < MDBContainer fluid >
28+ < div
29+ className = 'd-flex justify-content-center align-items-center'
30+ style = { { height : '100vh' } }
31+ >
32+ < div className = 'text-center' >
33+ < h2 > Release surprise!</ h2 >
34+ < p className = 'h4 fw-bold' > 50% OFF MDB PRO</ p >
35+ < div className = 'row justify-content-center' >
36+ < div className = 'col-md-6' >
37+ < img
38+ src = 'https://mdbootstrap.com/img/Marketing/campaigns/50off-SJARV.png'
39+ className = 'img-fluid'
40+ alt = ''
41+ />
3342 </ div >
34- </ MDBCol >
35- </ MDBRow >
36- </ MDBContainer >
43+ </ div >
44+
45+ < h5 className = 'mb-3' >
46+ Use this coupon code before it expires and claim the reward
47+ </ h5 >
48+ < p className = 'mb-3' >
49+ The coupon code will be valid until the end of the week
50+ </ p >
51+
52+ < div className = 'mt-2' >
53+ < code className = 'h2 border rounded py-1 px-5 flex-item me-2' >
54+ T9TTVSQB
55+ </ code >
56+ < br />
57+
58+ < MDBBtn
59+ className = 'mr-2 mt-3'
60+ id = 'disc-50'
61+ href = '#'
62+ size = 'lg'
63+ color = 'info'
64+ style = { { backgroundColor : '#009fe7' } }
65+ onClick = { handleClick }
66+ >
67+ COPY TO CLIPBOARD < MDBIcon far icon = 'copy' />
68+ </ MDBBtn >
69+ < MDBBtn
70+ outline
71+ className = 'mt-3'
72+ href = 'https://mdbootstrap.com/docs/standard/getting-started/'
73+ size = 'lg'
74+ target = '_blank'
75+ style = { { borderColor : '#009fe7' , color : '#009fe7' } }
76+ >
77+ MDB tutorial
78+ </ MDBBtn >
79+ </ div >
80+ < p >
81+ See < a href = 'https://mdbootstrap.com/pro/' > prices</ a >
82+ </ p >
83+ < div
84+ className = 'my-2 me-2 alert alert-success'
85+ id = 'code-success'
86+ style = { { display : 'none' , position : 'fixed' , width : '300px' , top : '0' , right : '0' } }
87+ >
88+ Copied
89+ </ div >
90+ </ div >
91+ </ div >
92+ </ MDBContainer >
3793 ) ;
3894 }
3995}
0 commit comments