├── .editorconfig
├── LICENCE.md
├── README.md
├── docker-compose.yml
├── docker
└── nginx
│ └── conf.d
│ └── default.conf
└── public
├── index.html
├── logo.png
└── style.css
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
--------------------------------------------------------------------------------
/LICENCE.md:
--------------------------------------------------------------------------------
1 | # The BSD License (BSD)
2 |
3 | Copyright © 2020 by Deworker.PRO All rights reserved.
4 |
5 | > Redistribution and use in source and binary forms, with or without modification,
6 | > are permitted provided that the following conditions are met:
7 | >
8 | > Redistributions of source code must retain the above copyright notice, this
9 | > list of conditions and the following disclaimer.
10 | >
11 | > Redistributions in binary form must reproduce the above copyright notice, this
12 | > list of conditions and the following disclaimer in the documentation and/or
13 | > other materials provided with the distribution.
14 | >
15 | > Neither the name of Deworker.PRO nor the names of its
16 | > contributors may be used to endorse or promote products derived from
17 | > this software without specific prior written permission.
18 | >
19 | >THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
20 | >ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
21 | >WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22 | >DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
23 | >ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
24 | >(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
25 | >LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
26 | >ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 | >(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
28 | >SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # What is ReactJS Demo
2 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "3.7"
2 | services:
3 | nginx:
4 | image: nginx:alpine
5 | volumes:
6 | - ./docker/nginx/conf.d:/etc/nginx/conf.d
7 | - ./public:/app/public
8 | ports:
9 | - "8080:80"
10 |
--------------------------------------------------------------------------------
/docker/nginx/conf.d/default.conf:
--------------------------------------------------------------------------------
1 | server {
2 | listen 80;
3 | charset utf-8;
4 |
5 | location / {
6 | root /app/public;
7 | try_files $uri $uri/ /index.html;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
565 |
566 |
567 |
568 |
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deworkerpro/demo-what-is-react/bc6400b92aa97c291a7996b4d35042ae1fded4d9/public/logo.png
--------------------------------------------------------------------------------
/public/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | margin: 0;
3 | }
4 |
5 | body {
6 | font-family: Arial, sans-serif;
7 | margin: 8px;
8 | line-height: 1.2;
9 | }
10 |
11 | .app {
12 | max-width: 500px;
13 | }
14 |
15 | .header {
16 | margin-bottom: 10px;
17 | display: flex;
18 | flex-direction: row;
19 | }
20 |
21 | .header .logo {
22 | display: block;
23 | width: 96px;
24 | height: 96px;
25 | }
26 |
27 | .header nav {
28 | margin-left: auto;
29 | }
30 |
31 | .header nav ul {
32 | margin: 0;
33 | padding: 0;
34 | list-style: none;
35 | }
36 |
37 | .header nav ul li {
38 | margin: 0 15px 0 0;
39 | padding: 0;
40 | display: inline-block;
41 | }
42 |
43 | .header nav ul li:last-child {
44 | margin: 0;
45 | }
46 |
47 | a {
48 | color: #000;
49 | }
50 |
51 | .header nav ul li a.active {
52 | font-weight: bold;
53 | }
54 |
55 | .page {
56 | padding: 15px;
57 | border: 1px solid #ddd;
58 | border-radius: 6px;
59 | margin-bottom: 10px;
60 | }
61 |
62 | .page h1 {
63 | margin: 0 0 20px 0;
64 | padding: 0;
65 | line-height: 1;
66 | }
67 |
68 | .page p:last-child {
69 | margin: 0;
70 | }
71 |
72 | .clock {
73 | padding: 15px;
74 | border: 1px solid #ddd;
75 | border-radius: 6px;
76 | margin-bottom: 10px;
77 | }
78 |
79 | .clock .value {
80 | display: inline-block;
81 | vertical-align: middle;
82 | margin-right: 15px;
83 | }
84 |
85 | .clock .icon {
86 | display: inline-block;
87 | vertical-align: middle;
88 | width: 15px;
89 | height: 15px;
90 | border-radius: 15px;
91 | }
92 |
93 | .clock .icon.day {
94 | background-color: #ef7b00;
95 | }
96 |
97 | .clock .icon.night {
98 | background-color: #2459a7;
99 | }
100 |
101 | .lot {
102 | padding: 15px;
103 | border: 1px solid #ddd;
104 | border-radius: 6px;
105 | margin-bottom: 10px;
106 | }
107 |
108 | .lot.favorite {
109 | border-color: #ffd7cb;
110 | background: #ffd7cb;
111 | }
112 |
113 | button {
114 | cursor: pointer;
115 | border-radius: 4px;
116 | padding: 4px 6px;
117 | font-size: 0.8rem;
118 | outline: none;
119 | }
120 |
121 | button:disabled {
122 | cursor: wait;
123 | }
124 |
125 | button * {
126 | vertical-align: middle;
127 | }
128 |
129 | button.favorite {
130 | background: #fff;
131 | border: 1px solid #999;
132 | color: #000;
133 | }
134 |
135 | button.favorite:disabled {
136 | background: #fff;
137 | border: 1px solid #ccc;
138 | color: #ccc;
139 | }
140 |
141 | button.unfavorite {
142 | background: #fff;
143 | border: 1px solid #ff8c68;
144 | color: #dc0000;
145 | }
146 |
147 | button.unfavorite:disabled {
148 | border: 1px solid #ffc0ad;
149 | color: #ff8c68;
150 | }
151 |
152 | .lot .price {
153 | float: right;
154 | text-align: right;
155 | font-size: 1.2rem;
156 | }
157 |
158 | .lot h1 {
159 | margin: 0 0 15px 0;
160 | line-height: 1;
161 | }
162 |
163 | .lot p {
164 | margin: 0 0 15px 0;
165 | }
166 |
167 | .loading {
168 | padding: 15px;
169 | border-radius: 6px;
170 | background: #eee;
171 | text-align: center;
172 | }
173 |
174 | .error {
175 | padding: 15px;
176 | border-radius: 6px;
177 | background: #ff5252;
178 | color: #fff;
179 | display: flex;
180 | flex-direction: row;
181 | }
182 |
183 | .error span,
184 | .error ion-icon {
185 | display: flex;
186 | vertical-align: middle;
187 | }
188 |
189 | .error ion-icon {
190 | margin-left: auto;
191 | cursor: pointer;
192 | }
193 |
--------------------------------------------------------------------------------