Skip to content

Commit

Permalink
Kokoa talk
Browse files Browse the repository at this point in the history
  • Loading branch information
@shtjrgus010
shtjrgus010 committed Feb 11, 2024
1 parent d4c8715 commit 10f20ca
Show file tree
Hide file tree
Showing 23 changed files with 1,237 additions and 49 deletions.
80 changes: 80 additions & 0 deletions chat.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="css/styles.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body id="chat-screen">
<div class="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<i class="fa-solid fa-wifi"></i>
</div>
<div class="status-bar__column">
<span>18:43</span>
</div>
<div class="status-bar__column">
<span>71%</span>
<i class="fa-solid fa-battery-three-quarters"></i>
<i class="fa-solid fa-bolt"></i>
</div>
</div>

<header class="alt-header">
<div class="alt-header__column">
<a href="chats.html">
<i class="fas fa-angle-left fa-3x"></i></a>
</div>
<div class="alt-header__column">
<h1 class="alt-header__title">니꼬</h1>
</div>
<div class="alt-header__column">
<span><i class="fas fa-search fa-lg"></i></span>
</div>
</header>

<main class="main-screen main-chat">
<div class="chat__timestamp">Tuesday, June 30, 2020</div>
<div class="message-row">
<img src="https://avatars3.githubusercontent.com/u/3612017" />
<div class="message-row__content">
<span class="message__author">Nicolas</span>
<div class="message__info">
<span class="message__bubble">Hi!</span>
<span class="message__time">21:27</span>
</div>
</div>
</div>

<div class="message-row message-row--own">
<div class="message-row__content">
<div class="message__info">
<span class="message__bubble">Hi nice to meet you!</span>
<span class="message__time">21:27</span>
</div>
</div>
</div>
</main>

<form class="reply">
<div class="reply__column">
<i class="far fa-plus-square fa-lg"></i>
</div>
<div class="reply__column">
<input type="text" placeholder="Write a message..." />
<i class="far fa-smile-wink fa-lg"></i>
<button>
<i class="fas fa-arrow-up"></i>
</button>
</div>
</form>
<script src="https://kit.fontawesome.com/59ff05d9f3.js" crossorigin="anonymous"></script>
</body>
<div id="no-mobile">
<span>Your screen is too big ㅠㅠ</span>
</div>
</html>
95 changes: 95 additions & 0 deletions chats.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="css/styles.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chats - Kokoa Clone</title>
</head>

<body>
<!-- status-bar -->
<div class="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<i class="fa-solid fa-wifi"></i>
</div>
<div class="status-bar__column">
<span>18:43</span>
</div>
<div class="status-bar__column">
<span>71%</span>
<i class="fa-solid fa-battery-three-quarters"></i>
<i class="fa-solid fa-bolt"></i>
</div>
</div>

<!-- screen-header -->
<header class="screen-header">
<h1 class="screen-header__title">Chats</h1>
<div class="screen-header__icons">
<span><i class="fas fa-search fa-lg"></i></span>
<span><i class="far fa-comment-dots fa-lg"></i></span>
<span><i class="fas fa-music fa-lg"></i></span>
<span><i class="fas fa-cog fa-lg"></i></span>
</div>
</header>

<!-- main -->
<main class="main-screen">
<a href="chat.html">
<div class="user-component">
<div class="user-component__column">
<img
src="https://avatars3.githubusercontent.com/u/3612017"
class="user-component__avatar user-component__avatar"
/>
<div class="user-component__text">
<h4 class="user-component__title">Nicolas</h4>
<h6 class="user-component__subtitle">
Please check My Kokoa Account Info
</h6>
</div>
</div>
<div class="user-component__column">
<span class="user-component__time">21:22</span>
<div class="badge">1</div>
</div>
</div>
</a>
</main>

<!-- navigator -->
<nav class="nav">
<ul class="nav__list">
<li class="nav__btn">
<a class="nav__link" href="friends.html">
<i class="fa-solid fa-user fa-2x"></i>
</a>
</li>
<li class="nav__btn">
<a class="nav__link" href="chats.html">
<span class="nav__notification badge">1</span>
<i class="fa-regular fa-comment fa-2x"></i>
</a>
</li>
<li class="nav__btn">
<a class="nav__link" href="find.html">
<i class="fa-solid fa-magnifying-glass fa-2x"></i>
</a>
</li>
<li class="nav__btn">
<a class="nav__link" href="more.html">
<i class="fa-solid fa-ellipsis fa-2x"></i>
</a>
</li>
</ul>
</nav>
<div id="no-mobile">
<span>Your screen is too big ㅠㅠ</span>
</div>
<script src="https://kit.fontawesome.com/59ff05d9f3.js" crossorigin="anonymous"></script>
</body>

</html>
35 changes: 35 additions & 0 deletions css/components/alt-screen-header.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* 가운데 정렬 방법 */
.alt-header {
padding: var(--horizontal-space);
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
}

.alt-header__column {
width: 33%;
}

.alt-header__title {
font-size: 28px;
font-weight: 600;
}

.alt-header__column:first-child {
margin-right: auto;
}

.alt-header__column:nth-child(2) {
text-align: center;
}

.alt-header__column:last-child {
margin-left: auto;
display: flex;
justify-content: flex-end;
}

.alt-header__column span:last-child {
margin-left: 20px;
}
11 changes: 11 additions & 0 deletions css/components/badge.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.badge{
background-color: tomato;
display: flex;
width: 30px;
height: 30px;
border-radius: 10px;
justify-content: center;
align-items: center;
color: white;
font-weight: 600;
}
47 changes: 47 additions & 0 deletions css/components/icon-row.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.icon-row {
display: flex;
justify-content: space-between;


}

.icon-row__icon {
display: flex;
flex-direction: column;
align-items: center;
}

.icon-row__icon i {
font-size: 35px;
}

.icon-row__icon span {
margin-top: 18px;
}

.more-suggestions__icons {
display: flex;
}

.more-suggestions__icon {
margin-right: 30px;
display: flex;
flex-direction: column;
align-items: center;
}

.more-suggestions__icon-image {
width: 60px;
height: 60px;
background-color: var(--yellow);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}

.more-suggestions__icon-image i {
font-size: 32px;
color: white;
}
45 changes: 37 additions & 8 deletions css/components/nav-bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,45 @@
position: relative;
color: #2e363e;
}
@keyframes notificationAnimation {
0% {
transform: none;
}
50% {
transform: translateY(-5px) rotateY(360deg);
}
100% {
transform: none;
}
}
.nav__notification{
background-color: tomato;
display: flex;
width: 30px;
height: 30px;
border-radius: 10px;
justify-content: center;
align-items: center;
color: white;
position: absolute;
left: 15px;
bottom: 15px;
animation: notificationAnimation 2s ease-in-out infinite;
}
@keyframes appearBtnAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
transform: none;
}
}

.nav__btn {
transform: translateY(50px);
opacity: 0;
animation: appearBtnAnimation 0.3s ease-in-out forwards;
}

.nav__btn:nth-child(2) {
animation-delay: 0.2s;
}
.nav__btn:nth-child(3) {
animation-delay: 0.5s;
}
.nav__btn:last-child {
animation-delay: 0.8s;
}
18 changes: 18 additions & 0 deletions css/components/no-mobile.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
#no-mobile {
position: absolute;
z-index: 99;
height: 100vh;
background-color: var(--yellow);
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
top: 0;
}

@media screen and (max-width: 645px) {
#no-mobile {
display: none;
}
}
27 changes: 27 additions & 0 deletions css/components/screen-header.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.screen-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--horizontal-space);
margin-bottom: 15px;
}

.screen-header__title{
font-size: 32px;
font-weight: 600;
}
.screen-header__icons span{
margin-left: 25px;
}
@keyframes rotateCog {
from {
transform: none;
}
to {
transform: rotateZ(360deg);
}
}

.screen-header__icons .fa-cog:hover {
animation: rotateCog 1s linear infinite;
}
Loading

0 comments on commit 10f20ca

Please sign in to comment.