root
69 lines
1.6 KiB
PHP
69 lines
1.6 KiB
PHP
<style>
|
|
.atm-card {
|
|
position: relative;
|
|
margin: auto;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.text-block {
|
|
position: absolute;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
/* Dinamis berdasarkan orientasi */
|
|
<?php if ($orientation == 'landscape'): ?>
|
|
.atm-card {
|
|
width: <?= $width ?>px;
|
|
height: <?= $height ?>px;
|
|
}
|
|
.text-block {
|
|
bottom: 40px;
|
|
left: 50px;
|
|
}
|
|
.text-block h2 { font-size: 48px; margin: 0; }
|
|
.text-block p { font-size: 30px; margin: 2px 0; }
|
|
|
|
<?php else: // portrait ?>
|
|
.atm-card {
|
|
width: <?= $width ?>px;
|
|
height: <?= $height ?>px;
|
|
}
|
|
.text-block {
|
|
bottom: 30px;
|
|
left: 40px;
|
|
}
|
|
.text-block h2 { font-size: 40px; margin: 0; }
|
|
.text-block p { font-size: 26px; margin: 2px 0; }
|
|
<?php endif; ?>
|
|
|
|
.btn-area {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
.btn-print {
|
|
padding: 10px 25px;
|
|
background: #28a745;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<div class="atm-card" style="background-image: url('<?= $background ?>')">
|
|
<div class="text-block">
|
|
<h2><?= $nama ?></h2>
|
|
<p>NIS: <?= $nis ?></p>
|
|
<p>Kelas: <?= $kelas ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-area">
|
|
<button class="btn-print" onclick="window.print()">Print</button>
|
|
</div>
|