夜雨聆风
【源码】俄罗斯支付状态展示卡 – HTML & CSS 界面设计
我能为你提供什么服务？
网站建设 | 小程序开发 | 软件定制
我是鹏魔王，一个做网站、小程序的程序员，记录生活日常、及技术分享。
本欲起身离红尘，奈何影子落人间，欢迎关注，祝大家早日实现财务自由！
俄文“支付展示卡”是一款采用HTML与CSS构建的简约现代界面组件，用于清晰展示交易结果状态，如支付成功、处理中或失败。
放一个俄文版本，其它版本自行翻译一下即可
<!DOCTYPE html><htmllang="ru"><head><metacharset="UTF-8"><title>鹏魔王</title><linkrel="stylesheet"href="./style.css"></head><body><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="crossorigin="anonymous"referrerpolicy="no-referrer" /><sectionclass="container"><sectionclass="invoice-container"><divclass="invoice-slot"><divclass="slot-hole"></div></div><divclass="invoice"><h2class="title">Счет за поездку </h2><pclass="amount">Итого <spanclass="value">$30,000</span></p><pclass="amount">На человека <spanclass="value">$6,000</span></p><hr /><ulclass="payers-list"><li><divclass="payer-image-container"><imgsrc="https://res.cloudinary.com/dmuyehme1/image/upload/v1761081494/user1_okmfkd.png" /></div><p>Вы<spanclass="pay-tag"><iclass="fa-solid fa-circle-check"></i> Оплачено</span></p></li><li><divclass="payer-image-container"><imgsrc="https://res.cloudinary.com/dmuyehme1/image/upload/v1761082627/user4_dujvoe.svg" /></div><p>Olabode<spanclass="pay-tag"><iclass="fa-solid fa-circle-check"></i> Оплачено</span></p></li><li><divclass="payer-image-container"><imgsrc="https://res.cloudinary.com/dmuyehme1/image/upload/v1761082286/user3_ue0zzq.avif" /></div><p>Lukmon<spanclass="pay-tag"><iclass="fa-solid fa-circle-check"></i> Оплачено</span></p></li><li><divclass="payer-image-container"><imgsrc="https://res.cloudinary.com/dmuyehme1/image/upload/v1761081494/user1_okmfkd.png" /></div><p>Hope<spanclass="pay-tag"><iclass="fa-solid fa-clock"></i> Не оплачено</span></p></li><li><divclass="payer-image-container"><imgsrc="https://res.cloudinary.com/dmuyehme1/image/upload/v1761082184/user2_b821x7.avif" /></div><p>Dara<spanclass="pay-tag"><iclass="fa-solid fa-clock"></i> Не оплачено</span></p></li></ul><divclass="payment-status"><pclass="heading">Статус оплаты<span>Не оплачено</span></p><divclass="status-progress"><divclass="checkpoint"><iclass="fa-solid fa-circle-check"></i></div><divclass="checkpoint"><iclass="fa-solid fa-circle-check"></i></div><divclass="checkpoint"><iclass="fa-solid fa-circle-check"></i></div><divclass="checkpoint"><spanclass="circle"></span></div><divclass="checkpoint"><iclass="fa-solid fa-stamp"></i></div></div></div><divclass="btn-group"><buttonclass="btn reminder-btn">Отправить напоминание</button><buttonclass="btn download-btn">Скачать счет</button></div></div></section><hr /><divclass="payment-info"><p>Способ оплаты</p><divclass="card-info"><p>Visa, заканчивающаяся на 2986</p><spanclass="card-icon"></span></div></div><buttonclass="pay-now-btn">Оплатить сейчас</button></section></body></html>
*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: sans-serif;}.container {width: min(95%, 425px);margin: 1em auto;}/* ---- invoice ---- */.invoice-container {position: relative;margin-bottom: 2em;height: 630px;}.invoice-slot {width: 100%;height: 120px;background-color: #2b2b2b;border: 2px solid #2c2c2c;border-radius: 1em;box-shadow: 0 0 1px 0 #000, 0 5px 15px 0 rgba(0, 0, 0, 0.45);}.slot-hole {background-color: #000;border-radius: 100vmax;width: 90%;height: 25px;margin: 1em auto;border: 1px solid #1b1b1b;box-shadow: 0 0 1px 0 #000, 0 5px 15px 0 rgba(0, 0, 0, 0.45);}.invoice {position: absolute;width: 85%;top: 1.5em;left: 50%;transform: translateX(-50%);background-color: #fff;color: #6b7280;padding: 1em;border-radius: 0.5em;box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.15);}.invoice::before {content: "";position: absolute;width: 100%;height: 80px;left: 0;top: 0;background: linear-gradient(180deg,rgba(0, 0, 0, 0.95) 0%,rgba(0, 0, 0, 0.75) 10%,rgba(0, 0, 0, 0.65) 25%,rgba(0, 0, 0, 0.45) 40%,rgba(0, 0, 0, 0.25) 60%,transparent 100%);}.invoice .title {position: relative;font-size: 1.15rem;padding: 0.55em 0;letter-spacing: 0.5px;text-align: center;margin-bottom: 1.25em;font-weight: 500;color: #1b1b1b;}.invoice .title::before {content: "";position: absolute;height: 1.5px;width: 100%;top: 0;left: 0;background-image: repeating-linear-gradient(90deg,#1b1b1b,#1b1b1b 8px,transparent 8px,transparent 16px);}.invoice .title::after {content: "";position: absolute;height: 1.5px;width: 100%;bottom: 0;left: 0;background-image: repeating-linear-gradient(90deg,#1b1b1b,#1b1b1b 8px,transparent 8px,transparent 16px);}.invoice .amount,.invoice .payment-status .heading {display: flex;align-items: center;justify-content: space-between;font-size: 1rem;margin-bottom: 0.5em;}.invoice .amount .value {font-weight: 700;color: #000;}.invoice .payment-status {border: 1px solid #ddd;padding: 1em;border-radius: 15px;margin-top: 1em;}.invoice .payment-status .heading span {text-transform: uppercase;font-weight: 500;color: #000;}.payers-list {list-style-type: none;margin: 0.5em 0;}.payers-list li {border-bottom: 1px solid #eee;display: flex;align-items: center;}.payers-list li p {flex-grow: 1;display: flex;justify-content: space-between;align-items: center;font-size: 0.9rem;padding: 0.5em;}.payers-list .payer-image-container {padding: 0.5em;border-right: 1px solid #eee;}.payers-list .payer-image-container img {width: 35px;border-radius: 50%;}.payers-list .pay-tag {border: 1px solid #ddd;border-radius: 8px;padding: 0.3em 0.5em;}.fa-circle-check {color: #22c55e;}.fa-clock {color: #d97706;}.btn-group {display: flex;align-items: content;gap: 0.75em;margin-top: 1.25em;}.status-progress {position: relative;margin: 1.5em 0 0.5em 0;height: 6px;background-image: linear-gradient(90deg, #000 75%, #eee 75%);}.checkpoint {position: absolute;background: rgba(255, 255, 255, 0.95);border: 2px solid red;width: 26px;height: 26px;border-radius: 50%;border: 0.5px solid #eee;display: flex;justify-content: center;align-items: center;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);}.checkpoint .circle {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #000;}.checkpoint:nth-child(1) {left: 0;top: 0;transform: translate(-5%, -40%);}.checkpoint:nth-child(2) {left: 25%;top: 0;transform: translate(-25%, -40%);}.checkpoint:nth-child(3) {left: 50%;top: 0;transform: translate(-50%, -40%);}.checkpoint:nth-child(4) {left: 75%;top: 0;transform: translate(-75%, -40%);}.checkpoint:nth-child(5) {right: 0;top: 0;transform: translate(5%, -40%);}.fa-stamp {color: #000;}.btn {flex-grow: 1;border-radius: 100vmax;padding: 0.5em 0;font-size: 0.85rem;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);cursor: pointer;}.reminder-btn {color: #fff;background-color: #111827;border: 1px solid #1b1b1b;}.download-btn {border: 1px solid #eee;background-color: #fff;}/* ----------- */hr {border: none;height: 1px;background-color: #ddd;margin: 0.75em 0;}/* payment info */.payment-info {display: flex;justify-content: space-between;align-items: center;margin: 0.75em 1em;font-size: 1rem;color: #6b7280;}.card-info {display: flex;align-items: center;gap: 0.75em;}.card-icon {display: inline-block;width: 35px;height: 26px;background-color: #1a43bf;border-radius: 5px;}.pay-now-btn {font-size: 1.15rem;background-color: #111827;color: #fff;width: 100%;background-color: #111827;color: #fff;width: 100%;padding: 0.75em 0;border: 2px solid #1b1b1b;border-radius: 0.75em;box-shadow: 0 0 1px 0 #000, 0 5px 15px 0 rgba(0, 0, 0, 0.45);cursor: pointer;}@media (max-width: 424px) {h1 {font-size: 1.2rem;}.invoice {padding: 0.75em;}.invoice .title {position: relative;font-size: 1rem;padding: 0.5em 0;}.slot-hole {width: 95%;}.invoice {width: 90%;}.invoice .amount {font-size: 0.85rem;}.payers-list li p {font-size: 0.85rem;}.payers-list .pay-tag {font-size: 0.8rem;}.btn {padding: 0.5em 0;font-size: 0.8rem;}.payment-info {font-size: 0.95rem;}.pay-now-btn {font-size: 1.05rem;}}
