Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2021-1-capstone-design2
/
2017110273
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
sdy
2021-06-03 13:08:39 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
54ab2a9481b68258182dd99fff4894259db07d26
54ab2a94
1 parent
bc78bbac
create FE main
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
247 additions
and
0 deletions
client/src/App.css
client/src/App.js
client/src/index.js
client/src/App.css
0 → 100644
View file @
54ab2a9
/* import fonts */
@import
url('https://fonts.googleapis.com/css?family=Red+Hat+Display:400,500,900&display=swap')
;
/* variables */
:root
{
--text-1
:
#333
;
--text-2
:
#666
;
--text-3
:
#999
;
--line
:
#CCC
;
--time-bg
:
#EEE
;
--background
:
#F7F7F7
;
--link
:
#3c90ff
;
}
body
,
html
{
font-family
:
"Red hat Display"
,
sans-serif
;
font-weight
:
400
;
line-height
:
1.25em
;
letter-spacing
:
0.025em
;
color
:
var
(
--text-1
);
background
:
var
(
--background
);
}
/* contents background */
.container
{
position
:
absolute
;
top
:
50%
;
left
:
calc
(
40%
+
12rem
);
transform
:
translate
(
-50%
,
-50%
);
}
/* picture */
.pic
{
width
:
3rem
;
height
:
3rem
;
background-size
:
cover
;
background-position
:
center
;
border-radius
:
50%
;
margin-right
:
1rem
;
}
.pic.menu-icon
{
background-image
:
url("./img/menu-icon.svg")
;
}
.pic.bot
{
width
:
4rem
;
height
:
4rem
;
background-image
:
url("./img/chatbot.svg")
;
}
.pic.call
{
background-image
:
url("./img/phone-call.svg")
;
}
.pic.mask
{
background-image
:
url("./img/mask.svg")
;
}
.pic.bar
{
background-image
:
url("./img/bars.svg")
;
}
.pic.vaccine
{
background-image
:
url("./img/injection.svg")
;
}
/* quick menu box */
.menu-box
{
position
:
absolute
;
top
:
50%
;
left
:
0
;
transform
:
translate
(
-6rem
,
-50%
);
width
:
24rem
;
height
:
32rem
;
padding
:
1rem
2rem
1rem
1rem
;
box-sizing
:
border-box
;
border-radius
:
1rem
0
0
1rem
;
cursor
:
pointer
;
background-color
:
white
;
box-shadow
:
0
0
8rem
0
rgba
(
0
,
0
,
0
,
0.1
),
2rem
2rem
4rem
-3rem
rgba
(
0
,
0
,
0
,
0.5
);
transition
:
transform
500ms
;
}
.menu-box
:hover
{
transform
:
translate
(
-23rem
,
-50%
);
}
/* quick menu header */
.menu-header
{
display
:
flex
;
flex-direction
:
row
;
align-items
:
center
;
}
/* quick menu item */
.menu-item
{
position
:
relative
;
margin-bottom
:
1rem
;
padding-left
:
5rem
;
height
:
4.5rem
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
}
.menu-item
.pic
{
position
:
absolute
;
left
:
0
;
}
.menu-item
a
{
font-weight
:
500
;
margin-bottom
:
0.125rem
;
color
:
var
(
--link
);
}
/* chats */
.chat
{
position
:
relative
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
space-between
;
width
:
24rem
;
height
:
38rem
;
z-index
:
2
;
box-sizing
:
border-box
;
border-radius
:
1rem
;
background-color
:
white
;
box-shadow
:
0
0
8rem
0
rgba
(
0
,
0
,
0
,
0.1
),
0
2rem
4rem
-3rem
rgba
(
0
,
0
,
0
,
0.5
);
}
.chat-header
{
flex-basis
:
3.5rem
;
flex-shrink
:
0
;
margin
:
1rem
;
box-sizing
:
border-box
;
display
:
flex
;
flex-direction
:
row
;
align-items
:
center
;
}
.historyContainer
{
height
:
100%
;
padding
:
1rem
;
background
:
var
(
--background
);
flex-shrink
:
2
;
overflow-y
:
auto
;
box-shadow
:
inset
0
2rem
2rem
-2rem
rgba
(
0
,
0
,
0
,
0.05
),
inset
0
-2rem
2rem
-2rem
rgba
(
0
,
0
,
0
,
0.05
);
}
.historyContainer
.msg
{
box-sizing
:
border-box
;
padding
:
0.5rem
1rem
;
margin
:
1rem
;
background
:
#FFF
;
border-radius
:
1.125rem
1.125rem
1.125rem
0
;
min-height
:
2.25rem
;
width
:
fit-content
;
max-width
:
66%
;
box-shadow
:
0
0
2rem
rgba
(
0
,
0
,
0
,
0.075
),
0
1rem
1rem
-1rem
rgba
(
0
,
0
,
0
,
0.1
);
}
.historyContainer
.msg.user
{
margin
:
1rem
1rem
1rem
auto
;
border-radius
:
1.125rem
1.125rem
0
1.125rem
;
background
:
var
(
--text-1
);
color
:
white
;
}
.historyContainer
.msg.label
{
color
:
var
(
--link
);
}
.historyContainer
.bot-image-box
.bot-image
{
}
/* input tag */
.chat
.input
{
box-sizing
:
border-box
;
flex-basis
:
4rem
;
flex-shrink
:
0
;
display
:
flex
;
align-items
:
center
;
padding
:
0
0.5rem
0
1.5rem
;
}
.chat
.input
input
{
border
:
none
;
background-image
:
none
;
background-color
:
white
;
padding
:
0.5rem
1rem
;
margin-right
:
1rem
;
border-radius
:
1.125rem
;
flex-grow
:
2
;
box-shadow
:
0
0
1rem
rgba
(
0
,
0
,
0
,
0.1
),
0
1rem
1rem
-1rem
rgba
(
0
,
0
,
0
,
0.2
);
font-family
:
"Red hat Display"
,
sans-serif
;
font-weight
:
400
;
letter-spacing
:
0.025em
;
}
.chat
.input
input
::placeholder
{
color
:
var
(
--text-3
);
}
client/src/App.js
0 → 100644
View file @
54ab2a9
import
React
from
"react"
;
import
"./App.css"
;
import
{
Provider
}
from
"react-redux"
;
import
store
from
"./store"
;
import
Chat
from
"./components/chat/Chat"
;
import
Menu
from
"./components/menu/Menu"
;
const
App
=
()
=>
{
return
(
<
Provider
store
=
{
store
}
>
<
div
className
=
"container"
>
<
Chat
/>
<
Menu
/>
<
/div
>
<
/Provider
>
);
};
export
default
App
;
client/src/index.js
0 → 100644
View file @
54ab2a9
import
React
from
"react"
;
import
ReactDOM
from
"react-dom"
;
import
App
from
"./App"
;
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
App
/>
<
/React.StrictMode>
,
document
.
getElementById
(
"root"
)
);
Please
register
or
login
to post a comment