Show sourcecode

The following files exists in this folder. Click to view.

public_html/crumbs/

.gitignore
admin/
config.php
createtable.php
crumbs_design_system.html
dbconnection.php
icons/
includes/
index.php
js/
login.php
logout.php
order/
register.php
style/

`crumbs_design_system.html`

119 lines UTF-8 Unix (LF)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119



<style>
  :root {
    --crumbs-bg: #1A1410;
    --crumbs-surface: #221C16;
    --crumbs-card: #2B231B;
    --crumbs-border: #3D3028;
    --crumbs-accent: #D4822A;
    --crumbs-accent-hover: #E8962E;
    --crumbs-accent-soft: #3D2A10;
    --crumbs-text: #F5EDD8;
    --crumbs-muted: #A89070;
    --crumbs-success: #4A7C45;
    --crumbs-danger: #8C3030;
  }

  .wrap { background: var(--crumbs-bg); padding: 1.5rem; border-radius: 12px; font-family: var(--font-sans); color: var(--crumbs-text); }

  .section-label { font-size: 11px; font-weight: 500; color: var(--crumbs-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }

  .swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }
  .swatch { border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 500; display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
  .swatch span { font-size: 11px; opacity: 0.7; font-weight: 400; }

  .divider { border: none; border-top: 0.5px solid var(--crumbs-border); margin: 1.5rem 0; }

  .ui-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.5rem; }

  .btn-primary { background: var(--crumbs-accent); color: #1A1410; border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; }
  .btn-secondary { background: transparent; color: var(--crumbs-accent); border: 1.5px solid var(--crumbs-accent); border-radius: 8px; padding: 9px 20px; font-size: 14px; font-weight: 500; cursor: pointer; }
  .btn-ghost { background: var(--crumbs-accent-soft); color: var(--crumbs-accent); border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; }

  .badge { display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 500; }
  .badge-new { background: var(--crumbs-accent-soft); color: var(--crumbs-accent); }
  .badge-sold { background: var(--crumbs-danger); color: #F5D0D0; }
  .badge-popular { background: #1E3020; color: #7EC47A; }

  .menu-card { background: var(--crumbs-card); border: 0.5px solid var(--crumbs-border); border-radius: 12px; padding: 14px; width: 160px; }
  .menu-img { width: 100%; height: 80px; background: var(--crumbs-accent-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 28px; }
  .menu-name { font-size: 14px; font-weight: 500; margin: 0 0 4px; }
  .menu-desc { font-size: 12px; color: var(--crumbs-muted); margin: 0 0 10px; }
  .menu-footer { display: flex; align-items: center; justify-content: space-between; }
  .menu-price { font-size: 15px; font-weight: 500; color: var(--crumbs-accent); }
  .add-btn { background: var(--crumbs-accent); color: #1A1410; border: none; border-radius: 6px; width: 28px; height: 28px; font-size: 18px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }

  .cart { background: var(--crumbs-surface); border: 0.5px solid var(--crumbs-border); border-radius: 12px; padding: 14px; min-width: 200px; }
  .cart-title { font-size: 14px; font-weight: 500; margin: 0 0 12px; }
  .cart-item { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 0.5px solid var(--crumbs-border); color: var(--crumbs-muted); }
  .cart-item span:last-child { color: var(--crumbs-text); }
  .cart-total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; padding-top: 10px; }
  .checkout-btn { width: 100%; background: var(--crumbs-accent); color: #1A1410; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 500; margin-top: 12px; cursor: pointer; }

  .logo-area { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
  .logo-icon { width: 36px; height: 36px; background: var(--crumbs-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  .logo-text { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
  .logo-text em { color: var(--crumbs-accent); font-style: normal; }
</style>

<div class="wrap">

  <div class="logo-area">
    <div class="logo-icon">🍪</div>
    <div class="logo-text">Cr<em>u</em>mbs</div>
  </div>

  <p class="section-label">Color palette</p>
  <div class="swatches">
    <div class="swatch" style="background:#D4822A; color:#1A1410;">Amber<br><span>#D4822A — primary</span></div>
    <div class="swatch" style="background:#1A1410; color:#F5EDD8; border: 0.5px solid #3D3028;">Espresso<br><span>#1A1410 — base bg</span></div>
    <div class="swatch" style="background:#2B231B; color:#A89070; border: 0.5px solid #3D3028;">Cocoa<br><span>#2B231B — card bg</span></div>
    <div class="swatch" style="background:#F5EDD8; color:#1A1410;">Cream<br><span>#F5EDD8 — text</span></div>
    <div class="swatch" style="background:#A89070; color:#1A1410;">Dough<br><span>#A89070 — muted text</span></div>
  </div>

  <hr class="divider">

  <p class="section-label">Buttons</p>
  <div class="ui-row">
    <button class="btn-primary">Add to order</button>
    <button class="btn-secondary">View menu</button>
    <button class="btn-ghost">Customize</button>
  </div>

  <p class="section-label">Badges</p>
  <div class="ui-row" style="margin-bottom: 1.5rem;">
    <span class="badge badge-new">New</span>
    <span class="badge badge-popular">Popular</span>
    <span class="badge badge-sold">Sold out</span>
  </div>

  <hr class="divider">

  <p class="section-label">Component preview</p>
  <div class="ui-row" style="align-items: flex-start;">
    <div class="menu-card">
      <div class="menu-img">🍪</div>
      <div style="display:flex; align-items:center; gap:6px; margin-bottom:6px;">
        <p class="menu-name" style="margin:0;">Choco Chunk</p>
        <span class="badge badge-popular" style="font-size:10px; padding:2px 7px;">Popular</span>
      </div>
      <p class="menu-desc">Classic dark chocolate chip cookie, sea salt finish</p>
      <div class="menu-footer">
        <span class="menu-price">45 kr</span>
        <button class="add-btn">+</button>
      </div>
    </div>

    <div class="cart">
      <p class="cart-title">Your order</p>
      <div class="cart-item"><span>Choco Chunk ×2</span><span>90 kr</span></div>
      <div class="cart-item"><span>Oat Raisin ×1</span><span>40 kr</span></div>
      <div class="cart-item"><span>Latte</span><span>55 kr</span></div>
      <div class="cart-total"><span>Total</span><span>185 kr</span></div>
      <button class="checkout-btn">Checkout →</button>
    </div>
  </div>

</div>