Modèle de tableau de bord admin responsive – HTML CSS JS

71 0 Sites web CodeExpert Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Modèle de tableau de bord admin responsive – HTML CSS JS

Recommandé

15 November 2025

Formulaire de transfert de pièces avec sélection de paiement

15 October 2026

Portage web du jeu FNAF avec HTML5 Canvas et JavaScript

2 July 2025

Clinique de cardiologie : soins cardiaques, services et rendez-vous

HTML

<div class="app">
  <aside class="side">
    <div class="brand">◆ Nova<span>Admin</span></div>
    <nav>
      <a class="on" href="#">📊 <span>Dashboard</span></a>
      <a href="#">🛒 <span>Orders</span></a>
      <a href="#">📦 <span>Products</span></a>
      <a href="#">👥 <span>Customers</span></a>
      <a href="#">📈 <span>Analytics</span></a>
      <a href="#">⚙️ <span>Settings</span></a>
    </nav>
  </aside>

<section class="kpis">
      <div class="kpi"><small>Revenue</small><b data-count="48920" data-prefix="$">0</b><em class="up">▲ 12.4%</em></div>
      <div class="kpi"><small>Orders</small><b data-count="1284">0</b><em class="up">▲ 8.1%</em></div>
      <div class="kpi"><small>Visitors</small><b data-count="23760">0</b><em class="down">▼ 2.3%</em></div>
      <div class="kpi"><small>Conversion</small><b data-count="5.4" data-suffix="%">0</b><em class="up">▲ 0.6%</em></div>
    </section>

<section class="grid">
      <div class="panel wide">
        <div class="ph"><h3>Revenue — last 12 months</h3>
          <div class="seg"><button class="on" data-set="rev">Revenue</button><button data-set="ord">Orders</button></div></div>
        <svg id="line" viewBox="0 0 600 220" preserveAspectRatio="none"></svg>
      </div>
      <div class="panel">
        <div class="ph"><h3>Traffic sources</h3></div>
        <svg id="donut" viewBox="0 0 200 200"></svg>
        <ul id="legend"></ul>
      </div>
      <div class="panel wide">
        <div class="ph"><h3>Recent orders</h3></div>
        <table>
          <thead><tr><th>Order</th><th>Customer</th><th>Date</th><th>Amount</th><th>Status</th></tr></thead>
          <tbody id="rows"></tbody>
        </table>
      </div>
      <div class="panel">
        <div class="ph"><h3>Goals</h3></div>
        <div class="goal"><span>Monthly sales</span><div class="bar"><i style="--w:78%"></i></div></div>
        <div class="goal"><span>New customers</span><div class="bar"><i style="--w:54%"></i></div></div>
        <div class="goal"><span>Support tickets closed</span><div class="bar"><i style="--w:91%"></i></div></div>
      </div>
    </section>
  </main>
</div>

CSS

:root { --bg:#f3f5fb; --card:#fff; --text:#1d2433; --muted:#7a8399; --line:#e6e9f2; --acc:#5b5bf7; --side:#141a2e; }
body.dark { --bg:#0f1322; --card:#181e33; --text:#e8ebf5; --muted:#8c94ad; --line:#262d47; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Inter", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); transition: background .3s; }
.app { display: flex; min-height: 100vh; }

.side { width: 230px; background: var(--side); color: #cdd3e8; padding: 22px 14px; transition: width .3s; flex-shrink: 0; }
.brand { font-weight: 800; font-size: 1.25rem; color: #fff; padding: 0 10px 24px; white-space: nowrap; }
.brand span { color: var(--acc); margin-left: 4px; }
.side nav a { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; padding: 11px 12px; border-radius: 10px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; }
.side nav a:hover { background: rgba(255,255,255,.06); }
.side nav a.on { background: var(--acc); color: #fff; }
.app.mini .side { width: 70px; }
.app.mini .side span { display: none; }

main { flex: 1; padding: 20px 26px; min-width: 0; }
.top { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.burger, .theme { border: 0; background: var(--card); color: var(--text); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.search { flex: 1; max-width: 420px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); outline: none; }
.avatar { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #5b5bf7, #e45bf7); color: #fff; display: grid; place-items: center; font-weight: 700; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi, .panel { background: var(--card); border-radius: 16px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); border: 1px solid var(--line); }
.kpi small { color: var(--muted); }
.kpi b { display: block; font-size: 1.7rem; margin: 6px 0; }
.kpi em { font-style: normal; font-size: .82rem; font-weight: 600; }
.up { color: #17b26a; } .down { color: #f04438; }

.grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
h3 { font-size: 1rem; }
.seg { background: var(--bg); border-radius: 8px; padding: 3px; }
.seg button { border: 0; background: none; color: var(--muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
#line { width: 100%; height: 220px; }
#line path.l { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linejoin: round; }
#line path.a { fill: url(#g); }
#line text { fill: var(--muted); font-size: 11px; }
#line line { stroke: var(--line); }
#donut { width: 170px; display: block; margin: 0 auto; }
#legend { list-style: none; margin-top: 12px; }
#legend li { display: flex; align-items: center; gap: 8px; font-size: .9rem; padding: 3px 0; }
#legend i { width: 10px; height: 10px; border-radius: 3px; }
#legend b { margin-left: auto; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px; border-bottom: 1px solid var(--line); }
td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.st { padding: 3px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.st.Paid { background: #dcfae6; color: #067647; } .st.Pending { background: #fef0c7; color: #93370d; } .st.Refunded { background: #fee4e2; color: #b42318; }
.goal { margin: 14px 0; font-size: .9rem; }
.bar { height: 8px; background: var(--bg); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), #e45bf7); border-radius: 99px; animation: grow 1.4s .3s forwards ease; }
@keyframes grow { to { width: var(--w); } }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 5; height: 100vh; transform: translateX(-100%); transition: transform .3s; }
  .app.mini .side { transform: none; width: 230px; }
  .app.mini .side span { display: inline; }
  table th:nth-child(3), table td:nth-child(3) { display: none; }
}

// NovaAdmin — responsive admin dashboard with pure SVG charts
var NS = 'http://www.w3.org/2000/svg';
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var data = {
  rev: [21, 25, 23, 30, 34, 31, 38, 42, 40, 45, 47, 49],
  ord: [610, 700, 680, 820, 900, 860, 980, 1050, 1010, 1150, 1220, 1284]
};

function el(tag, attrs) { var e = document.createElementNS(NS, tag); for (var k in attrs) e.setAttribute(k, attrs[k]); return e; }

function fillTable() {
  var names = ['Lina Haddad', 'Omar Khalil', 'Sara Mansour', 'Jad Farah', 'Maya Nassar', 'Karim Aoun'];
  var st = ['Paid', 'Pending', 'Paid', 'Refunded', 'Paid', 'Pending'];
  var html = names.map(function (n, i) {
    return '<tr><td>#' + (4821 - i) + '</td><td>' + n + '</td><td>Oct ' + (30 - i) + '</td><td>$' + (89 + i * 37) + '.00</td><td><span class="st ' + st[i] + '">' + st[i] + '</span></td></tr>';
  }).join('');
  document.getElementById('rows').innerHTML = html;
}

drawLine('rev'); drawDonut(); fillTable(); countUp();

Comments 0

…