@extends('backend.master')

@section('title')
    {{ ___('common.Colors') }}
@endsection

@section('content')

<div class="page-content">
  <div class="ot-card">
    <div class="row">
      <div class="col-md-12">
        <div class="heading-title">
          <h3 class="title">{{ ___('common.color_guides') }}</h3>
        </div>
      </div>
      <div class="col-md-6 mt-10">
        <div class="heading-content">
          <p class="content">
            We used dynamic colors to clearly convey the actions,
            situation and direction within the interface. They serve to
            make things simple to understand.
          </p>
        </div>
      </div>
    </div>
    <div class="color-guide-card">

      <!-- Primary Blue -->

      <div class="row">
        <h4 class="pv-20">{{ ___('common.primary_blue') }}</h4>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-blue-primary"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Blue Primary</h6>
              <span class="">#4d5ee5</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-blue-dark"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Blue Dark</h6>
              <span class="">#5669ff</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-blue-tint"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Blue Tint</h6>
              <span class="">#8896ff</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-blue-tint-light"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Blue Tint Light</h6>
              <span class="">#eef0ff</span>
            </div>
          </div>
        </div>
      </div>


      <!-- Secondary Cyan -->

      <div class="row">
        <h4 class="pv-20">{{ ___('common.secondary_cyan') }}</h4>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-cyan-primary"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Cyan Primary</h6>
              <span class="">#00f8ff</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-cyan-dark"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Cyan Dark</h6>
              <span class="">#00dfe5</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-cyan-tint"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Cyan Tint</h6>
              <span class="">#4cfaff</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-cyan-tint-light"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Cyan Tint Light</h6>
              <span class="">#e5feff</span>
            </div>
          </div>
        </div>
      </div>


      <!-- Success -->

      <div class="row">
        <h4 class="pv-20">{{ ___('common.success') }}</h4>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-success-primary"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Success Primary</h6>
              <span class="">#29d697</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-success-dark"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Success Dark</h6>
              <span class="">#24c087</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-success-tint"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Success Tint</h6>
              <span class="">#69e2b6</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-success-tint-light"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Success Tint Light</h6>
              <span class="">#e9faf4</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Danger -->

      <div class="row">
        <h4 class="pv-20">{{ ___('common.danger') }}</h4>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-danger-primary"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Danger Primary</h6>
              <span class="">#ff6a54</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-danger-dark"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Danger Dark</h6>
              <span class="">#e55f4b</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-danger-tint"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Danger Tint</h6>
              <span class="">#ff9687</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-danger-tint-light"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Danger Tint Light</h6>
              <span class="">#fff0ed</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Danger -->

      <div class="row">
        <h4 class="pv-20">{{ ___('common.warning') }}</h4>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-warning-primary"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Warning Primary</h6>
              <span class="">#fdc400</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-warning-dark"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Warning Dark</h6>
              <span class="">#e3b000</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-warning-tint"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Warning Tint</h6>
              <span class="">#fdd54c</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-warning-tint-light"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Warning Tint Light</h6>
              <span class="">#fef9e5</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Danger -->

      <div class="row">
        <h4 class="pv-20">{{ ___('common.accent') }}</h4>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-accent-green"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Accent Green</h6>
              <span class="">#93c782</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-accent-blue"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Accent Blue</h6>
              <span class="">#4797ff</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-accent-purple"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Accent Purple</h6>
              <span class="">#9d6fff</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-accent-light-green"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Accent Light Green</h6>
              <span class="">#b5e4ca</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-accent-light-blue"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Accent Light Blue</h6>
              <span class="">#b1e5fc</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-accent-light-purple"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Accent Light Purple</h6>
              <span class="">#cabdff</span>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="color-title">
            <div class="color-background bg-accent-light-orange"></div>
            <div class="color-name-bg color-primary-main d-flex justify-content-between pv-10 ph-10">
              <h6>Accent Light Orange</h6>
              <span class="">#ffbc99</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

@endsection