// "Being clever is not clever"

// -- Bjarne Stroustrup

D = document

ang = {

  '|': 180,

  '-': 90,

  '\\': 135,

  '/': 225

}

box = def => {

  def = def.split(/\s+/)

  form = def.length

  I = i => parseInt(def[i], 16)

  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},

    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},

    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}

  ][form]()

  c = c.split``

  ca = c[0]

  ca = ca+ca+ca

  cD = ang[c[1]]

  cb = c[2]

  cb = cb+cb+cb 

  D.body.appendChild(

    D.createElement`div`

  ).style = `

    position: absolute; left: ${x}px; top: ${y}px;

    width: ${w}px; height: ${h}px;

    background: linear-gradient(${cD}deg, #${ca}, #${cb})

  `

}

const parse = prog => prog.trim()

  .split(/\n+/m)

  .map(line => box(line.trim()))

parse(`

  0 64 0/f

  64 64 0\\f

  a0 f0 30 54 f\\0

  0 6f 20 60 0-c

  f 7f 20 60 0|c

  1f 8f 30 30 c/0

`)

'0 64 0/f'

// x=0 y=0 width=0x64 height=0x64

// 0/f = gradient black to white top right to bottom left

'64 64 0\\f'

// x=0 y=0 width=0x64 height=0x64

// 0\\f = black to to white gradient top left to bottom right

'0 6f 20 60 0-c'

// x=0 y=0x6f width=0x20 height=0x60

// 0-c = gradient black to grey (#ccc) left to right

// etc... ( | ) is top to bottom grad