skoleni-hardware-v2

by Petr Haluza

HTML

<p>Blaaa</p>
<p>Blaaa</p>
<p>Blaaa</p>
<div id="required-hw">
  <div class="titleWrap">
    <div class="title">Na tomto školení budete pracovat se zařízením.</div>
    <div class="subTitle"><b>Potřebné zařízení:</b> Router Mikrotik řady XYZ123 s těmito a těmito vlastnostmi.</div>
    <div class="header">Prosím zvolte:</div>
  </div><!-- /.titleWrap -->
  <div class="choiceWrap">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choices" id="choice1">
      <label class="form-check-label" for="choice1">Mám vlastní zařízení</label>
      <p>Zařízení prosím vezměte sebou na toto školení.</p>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choices" id="choice2">
      <label class="form-check-label" for="choice2">Chci si zařízení zapůjčit</label>
      <p>Zařázení vám zapůjčíme <b>za poplatek 300Kč</b> (vč.DPH).</p>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choices" id="choice3">
      <label class="form-check-label" for="choice3">Koupit zařízení za zvýhodněnou cenu</label>
    </div>
  </div><!-- /.choiceWrap-->
  
		<div id="hardwareContainer">
			<div id="hardwareWrap">

				<label>
					<input class="form-check-input" type="radio" name="devicess" id="device1">
					<div class="device">
						<div class="device-callout">Doporučujeme</div>
						<div class="image"><img src="https://www.img4.cz/www/img/imgthumb?code=NABMKR1073"></div>
						<div class="device-info">MikroTik Cloud Router Switch CRS510-8XS-2XQ-IN</div>
						<div class="device-price">V hodnotě <b>2 500 Kč</b></div>
						<div class="device-price-sale">Vaše cena <b>1 777 Kč</b></div>
						<div class="form-check-label" for="device1">Zvolit</div>
					</div><!-- /.device -->
				</label>

				<label>
					<input class="form-check-input" type="radio" name="devicess" id="device2">
					<div class="device">
						<div class="image"><img...

CSS

@import url("https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&family=Lexend+Deca:wght@400;500;600;700;800&display=swap");
* {font-family: "Hind", sans-serif}
body {padding: 0 15px}
:root { --tg-theme-primary: #1363DF;}

/**/
.modaluj:before { content:""; background:white}
.modaluj { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
border:10px solid}


/* povinny hardware */
#required-hw {max-width:800px;   /**/border:1px solid lightblue/**/; }
#required-hw .titleWrap {padding: 15px 30px 0}
#required-hw .title {}
#required-hw .subTitle {}
#required-hw .header {}

@media all and (min-width:600px) {
	#required-hw .choiceWrap {display:flex}
}
#required-hw .choiceWrap {padding:15px 30px}
#required-hw .choiceWrap .form-check {flex:1 1 33.3%}
#required-hw .choiceWrap p {display:none}
#required-hw .choiceWrap input:checked ~ p {display:block}

#hardwareContainer {position:relative; display:none}
#hardwareWrap { display:flex; gap: 15px; overflow-x: auto; position:relative; background: #f4f6fa; padding:2em}
#hardwareWrap label {position:relative;}
#hardwareWrap .device {width:250px; height: calc(100% - 30px); flex-shrink:0; display: flex; flex-direction: column; text-align: center; background:white; border: 2px solid #ECECEC; padding:15px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); border-radius: 8px; position:relative; }

#hardwareWrap input {opacity:0}
#hardwareWrap input:checked + .device  { border-color: var(--tg-theme-primary); }
#hardwareWrap label input, 
#hardwareWrap .device::before { content: ""; position: absolute; top: 40px; left: -11px; width: 15px; height: 15px; border: 3px solid #dae0e7; border-radius: 50%; background: #f6f7fa;
}
#hardwareWrap input:checked + .device:before { background: var(--tg-theme-primary); box-shadow: 0 0 6px var(--tg-theme-primary)}

#hardwareWrap	.device-callout { position:absolute; left:0; top:0; color: #E7EFFC; background: var(--tg-theme-primary);font-size:12px; padding: 1px...

JavaScript

$("#klik").click(function(){
	$("#required-hw").addClass("modaluj");
});

$("#choice3").click(function(){
	$("#hardwareContainer").show();
});