Legacy Shop

by roomyrooms

HTML

<div id='shop_container'>

  <div class='shop_panel'>
    <img class='shop_panel_image' src='https://i.gyazo.com/0dd016edc2e47d33ea53edcf963d7910.png'>
    <div class='shop_panel_title'>25 Tokens</div>
    <div class='shop_panel_price low'>$4.99</div>
    <button class='shop_panel_button' onclick='selectPanel(this)'>Select</button>
  </div>

  <div class='shop_panel'>
    <img class='shop_panel_image' src='https://i.gyazo.com/59e5d8d66a2b95d4f8e1b1f86a834778.png'>
    <div class='shop_panel_title'>100 Tokens</div>
    <div class='shop_panel_price medium'>$9.99</div>
    <button class='shop_panel_button' onclick='selectPanel(this)'>Select</button>
  </div>

  <div class='shop_panel'>
    <img class='shop_panel_image' src='https://i.gyazo.com/6c686294a221c27c4148937dd52e3157.png'>
    <div class='shop_panel_title'>250 Tokens</div>
    <div class='shop_panel_price high'>$19.99</div>
    <button class='shop_panel_button' onclick='selectPanel(this)'>Select</button>
  </div>
  
  <div id='paypal_container'>
  <div id='paypal_buttons'></div>
  </div>

</div>

<script src='https://www.paypal.com/sdk/js?client-id=AXBkpcioqSZ4oAJ1AtUf7cwYvO9Ka54iS-biMM8zLK69SEtH1bWaGVJTzUlR56vgzkhxUEOwjlE6BVNy&disable-funding=paylater'></script>

<script>
  paypal.Buttons({
  	style: {
    	layout: 'vertical',
     	tagline: 'false',
      size: 'responsive',
      color: 'blue'
    }
  }).render("#paypal_buttons")
</script>

CSS

#shop_container {
  border: 10px solid;
  border-image: url(https://i.gyazo.com/2f2dea5dc8756d2cbb75cf31607423ad.png) 10 repeat;
  background: #ccc;
  border-radius: 5px;
  font-family: Verdana;
  width: 368px;
  text-align: center;
}

.shop_panel {
  background: #474747;
  width: 28%;
  height: 50%;
  border-radius: 7px;
  border: 2px solid #151515;
  display: inline-block;
  margin: 1px;
  transition: border 200ms ease-out;
  user-select: none;
  padding-bottom: 6px;
}
.shop_panel.selected {
  border: 2px solid #fda555;
  box-shadow: 2px 2px 10px #999;
}

.shop_panel_image {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  background: #222222;
  border-radius: 40px;
  border: 2px solid #151515;
  display: block;
  margin: auto;
  margin-top: 5px;
}

.shop_panel_title {
  color: #27c9ff;
  font-size: 14px;
  text-shadow: 1px 1px black;
  font-weight: 600;
}

.shop_panel_price {
  font-size: 14px;
  text-shadow: 1px 1px black;
  font-weight: 600;
}
.shop_panel_price.low {
  color: #ffd369;
}
.shop_panel_price.medium {
  color: #ffc73f;
}
.shop_panel_price.high {
  color: #ffb708;
}
.shop_panel_price.strike {
  text-decoration: line-through;
}

.shop_panel_button {
  margin-top: 8px;
  padding: 4px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #ffb708;
  border: none;
  border-radius: 5px;
  color: #000;
  text-shadow: 1px 1px #cc9000;
}
.shop_panel_button:hover {
  background-color: #ffc538;
}
.shop_panel_button:active {
  background-color: #ffd369;
}

#paypal_buttons {
  width: 70%;
  border-radius: 5px;
  margin: auto;
}
#paypal_container {
  margin-top: 16px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 2px;
  width: 100%;
  position: relative;
}

JavaScript

var curSel = null
function selectPanel(panelButton) {
	if (curSel == panelButton) {
    panelButton.classList.remove("selected")
    panelButton.parentElement.classList.remove("selected")
    curSel = null
  } else {
  	var allButtons = document.getElementsByClassName("shop_panel_button")
    for (var x = 0; x < allButtons.length; x++) {
    	allButtons[x].classList.remove("selected")
			allButtons[x].parentElement.classList.remove("selected")
    }
    panelButton.classList.add("selected")
    panelButton.parentElement.classList.add("selected")
    curSel = panelButton
  }
}