Admin page 1

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Outputor

Admin page 1 본문

🦉 프로젝트 🔻/🐞 프로젝트

Admin page 1

output7 2022. 1. 23. 16:23

span 태그는 text-align 적용이 안되므로 display: inline-block; 지정 후 text-align: right 적용함
차트 라이브러리 https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website

New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.

www.chartjs.org

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="./adminPage.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="./adminPageChar.js" defer></script>
  </head>
  <body>
    <div class="body-container">
      <div class="inner">
        <!-- MENU -->
        <div class="menu">
          <div>
            <span class="name">home</span>
            <span class="material-icons logo">house</span>
          </div>
          <div>
            <span class="name">Services</span>
            <span class="material-icons logo">headphones</span>
          </div>
          <div>
            <span class="name">Alerts</span>
            <span class="material-icons logo">flag</span>
          </div>
          <div>
            <span class="name">Stats</span>
            <span class="material-icons logo">stacked_bar_chart</span>
          </div>
        </div>

        <!-- NAV -->
        <div class="nav clearfix">
          <div class="search float--left">
            <input type="text" placeholder="Search" />
            <button class="btn material-icons">search</button>
          </div>
          <div class="items float--right">
            <div class="bell">
              <span class="material-icons">notifications </span>
            </div>
            <div class="email">
              <span class="material-icons"> email </span>
            </div>
            <div class="nickName">Outputor777</div>
          </div>
          <div class="bar float--right">
            <span class="material-icons"> menu </span>
          </div>
        </div>

        <!-- DASHBOARD -->
        <div class="dashboard">
          <h1>Dashboard</h1>
          <div class="lists">
            <div class="list list1 clearfix">
              <div class="list-left float--left">
                <p>Earnings (Monthly)</p>
                <p>$400,000</p>
              </div>
              <div class="list-right float--right">
                <span class="material-icons"> account_balance_wallet </span>
              </div>
            </div>
            <div class="list list2 clearfix">
              <div class="list-left float--left">
                <p>Earnings (Annual)</p>
                <p>$800,000</p>
              </div>
              <div class="list-right float--right">
                <span class="material-icons"> attach_money </span>
              </div>
            </div>
            <div class="list list3 clearfix">
              <div class="list-left float--left">
                <p>Tasks</p>
                <p>13</p>
              </div>
              <div class="list-right float--right">
                <span class="material-icons"> list </span>
              </div>
            </div>
            <div class="list list4 clearfix">
              <div class="list-left float--left">
                <p>Requests</p>
                <p>26</p>
              </div>
              <div class="list-right float--right">
                <span class="material-icons"> question_answer </span>
              </div>
            </div>
          </div>

          <div class="others clearfix">
            <div class="overview float--left">
              <div class="title">
                <h3>Earnings Overview</h3>
              </div>
              <div>
                <canvas id="myChart"></canvas>
              </div>
            </div>
            <div class="tasks float--right">
              <div class="title">
                <h3>Task</h3>
              </div>
              <div class="item clearfix">
                <p class="float--left">Borrowed Items</p>
                <p class="float--right">14</p>
              </div>
              <div class="item clearfix">
                <p class="float--left">Trello requests</p>
                <p class="float--right">2</p>
              </div>
              <div class="item clearfix">
                <p class="float--left">Marked Comments</p>
                <p class="float--right">1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
}

p {
  margin: 0;
}

div {
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

.float--left {
  float: left;
}

.float--right {
  float: right;
}

.inner {
  max-width: 1200px;
  height: auto;
  margin-left: 60px;
  background-color: #f1f3f5;
  overflow: hidden;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #7950f2;
  transform: translateX(-140px);
  transition: all 0.5s;
}
.menu div {
  color: #fff;
  margin: 50px 20px 0 20px;
  cursor: pointer;
}
.menu div span {
  vertical-align: middle;
  display: inline-block;
}

.menu div .name {
  width: 60px;
  transition: all 0.5s;
  transition-delay: 0.2s;
  transform: translateX(-140px);
}
.menu div .logo {
  transform: translateX(70px);
  transition: all 0.4s;
}

.menu:hover {
  transform: translateX(0px);
}
.menu:hover div .name {
  transform: translateX(50px);
}
.menu:hover div .logo {
  transform: translateX(-50px);
}

.nav {
  border-bottom: 2px solid #dee2e680;
  box-shadow: 0 5px 5px #ced4da75;
  padding: 20px 0;
  background-color: #fff;
}
.nav .search {
  display: flex;
  align-items: center;
  font-size: 0;
  height: 38px;
  padding-left: 20px;
}

.search input {
  outline: none;
  width: 170px;
  height: 34px;
  font-size: 14px;
  padding-left: 10px;
  border: 1px solid #adb5bd;
  border-right: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  transition: all 1s;
}

.search input:focus {
  width: 300px;
}

.search .btn {
  outline: none;
  border: none;
  padding: 7px;
  margin: 0;
  background-color: #343a40;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.items div {
  color: #495057;
  display: inline-block;
  padding-right: 30px;
}

.bell,
.email {
  top: 7px;
  position: relative;
  cursor: pointer;
}

.bell::after,
.email::after {
  content: "7";
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #e03131;
  position: absolute;
  border-radius: 3px;
  top: -13px;
  left: 13px;
}

.nickName {
  line-height: 20px;
}

.bar {
  display: none;
}

.dashboard {
  padding: 0 20px 50px 20px;
}
.dashboard h1 {
  margin: 0;
  padding: 30px 0;
}
.dashboard .list {
  display: inline-block;
  width: 23%;
  min-width: 212px;
  height: 100px;
  border-radius: 5px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 2px 2px 7px #868e963a;
}

.list1 {
  border-left: 4px solid #e03131;
  margin-right: 2%;
}

.list2 {
  border-left: 4px solid #087f5b;
  margin-right: 2%;
}

.list3 {
  border-left: 4px solid #1864ab;
  margin-right: 2%;
}

.list4 {
  border-left: 4px solid #f59f00;
}

.list-left {
  margin-top: 10px;
}

.list-left p {
  font-size: 16px;
  color: #868e96;
  padding-bottom: 5px;
}

.list-left p:last-child {
  color: #333;
  padding-bottom: 0;
}

.list-right span {
  margin-top: 10px;
  font-size: 40px;
  color: #495057;
}

.others {
  margin-top: 50px;
}

.overview {
  width: 60%;
  border: 1px solid #e9ecef;
  box-shadow: 2px 2px 7px #868e963a;
}
.overview .title {
  padding-left: 20px;
  border-bottom: 1px solid #e9ecef;
}
.overview canvas {
  background-color: #fff;
  padding: 10px 20px;
}

.tasks {
  width: 35%;
  border: 1px solid #e9ecef;
  box-shadow: 2px 2px 7px #868e963a;
}
.tasks .title {
  padding-left: 20px;
  border-bottom: 1px solid #e9ecef;
}
.tasks .item {
  padding-left: 20px;
  border-top: 1px solid #e9ecef;
  height: 50px;
  background-color: #fff;
}
.tasks .item p {
  margin-top: 10px;
}
.tasks .item p:last-child {
  margin-right: 20px;
  padding: 2px 8px;
  box-sizing: border-box;
  border-radius: 50%;
  color: #fff;
  background-color: #228be6;
}

@media screen and (max-width: 768px) {
  .nav {
    min-width: 212px;
    height: 70px;
  }
  .nav .search input {
    width: 100px;
  }
  .nav .search input:focus {
    width: 150px;
  }
  .nav .items {
    display: none;
  }
  .nav .bar {
    display: block;
    width: 40px;
    display: inline-block;
  }
  .nav .bar span {
    font-size: 30px;
    color: #495057;
    cursor: pointer;
  }

  .dashboard .list {
    display: block;
    width: 100%;
    min-width: 212px;
    margin-bottom: 20px;
  }

  .overview {
    float: none;
    width: 100%;
    min-width: 212px;
  }

  .tasks {
    float: none;
    margin-top: 50px;
    width: 100%;
    min-width: 212px;
  }
}

JavaScript

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

const data = {
  labels: labels,
  datasets: [
    {
      label: 'Monthly',
      backgroundColor: '#4263eb',
      borderColor: '#4c6ef5',
      borderWidth: 1,
      data: [0, 10, 15, 2, 20, 30, 40, 45],
    },
  ],
};

const config = {
  type: 'line',
  data: data,
  options: {},
};

const myChart = new Chart(document.getElementById('myChart'), config);

'🦉 프로젝트 🔻 > 🐞 프로젝트' 카테고리의 다른 글

carousel slider 업그레이드 버전 (0)	2022.01.27
carousel slider 쉬운 버전 (0)	2022.01.27
SASS layout 1 (0)	2022.01.14
layout 3 (0)	2022.01.13
Shadow DOM (0)	2022.01.06

'🦉 프로젝트 🔻/🐞 프로젝트' Related Articles

Outputor

Admin page 1 본문

Admin page 1

'🦉 프로젝트 🔻 > 🐞 프로젝트' 카테고리의 다른 글

티스토리툴바