fork download
copy 
  1. /* package whatever; // don't place package name! */
  2.  
  3. import java.util.*;
  4. import java.lang.*;
  5. import java.io.*;
  6.  
  7. /* Name of the class has to be "Main" only if the class is public. */
  8. class Ideone
  9. {
  10. 	public static void main (String[] args) throws java.lang.Exception
  11. 	{
  12. 		// your code goes here
  13. 	}
  14. }
Success #stdin #stdout 0.09s 54444KB
comments (?)
stdin
copy 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>محاكي تطبيق سريع باي | Saree3 Pay Simulator</title>
    <link href="https://c...content-available-to-author-only...r.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    <link href="https://f...content-available-to-author-only...s.com/css2?family=Tajawal:wght@500;700;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Tajawal', sans-serif; background-color: #0b132b; color: #fff; padding: 20px; }
        .phone-frame {
            width: 360px; height: 720px; background: #f4f6f9; border-radius: 40px;
            border: 12px solid #1c2541; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            position: relative; overflow: hidden; display: flex; flex-direction: column; color: #333;
        }
        .phone-header { background: #0052CC; color: white; padding: 20px 15px 15px; text-align: center; }
        .credit-card {
            background: linear-gradient(135deg, #0052CC, #1765E3); color: white;
            border-radius: 16px; padding: 20px; margin: 15px; box-shadow: 0 8px 20px rgba(0,82,204,0.3);
        }
        .scan-btn {
            width: 120px; height: 120px; background: #FF6B00; color: white; border-radius: 50%;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            margin: 20px auto; cursor: pointer; border: none; box-shadow: 0 10px 25px rgba(255,107,0,0.4);
            transition: transform 0.2s;
        }
        .scan-btn:hover { transform: scale(1.05); }
        .merchant-frame {
            width: 360px; height: 720px; background: #ffffff; border-radius: 40px;
            border: 12px solid #3a506b; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            position: relative; overflow: hidden; display: flex; flex-direction: column; color: #333;
        }
        .success-overlay {
            display: none; position: absolute; top:0; left:0; width:100%; height:100%;
            background: rgba(255,255,255,0.95); z-index: 10; text-align: center; padding-top: 150px;
        }
    </style>
</head>
<body>

    <div class="container text-center mb-4">
        <h2 class="fw-bold text-warning">محاكي النظام المباشر - سريع باي (Saree3 Pay)</h2>
        <p class="text-light">جرب الدفع الآن عبر مسح الـ QR وملاحظة الخصم الفوري في شاشة الكاشير والعميل!</p>
    </div>

    <div class="d-flex justify-content-center gap-5 flex-wrap">

        <!-- 1. شاشة العميل -->
        <div>
            <h4 class="text-center mb-3">📱 تطبيق العميل</h4>
            <div class="phone-frame">
                <div class="phone-header">
                    <h5 class="m-0 fw-bold">سريع باي | Saree3 Pay</h5>
                </div>
                <div class="credit-card text-start">
                    <small style="opacity: 0.8;">الرصيد المتاح للشراء</small>
                    <h2 class="fw-bold my-1"><span id="user-balance">200.00</span> ر.س</h2>
                    <small style="opacity: 0.9;">الحد الأقصى: 200.00 ر.س | الاستحقاق: 27 من الشهر</small>
                </div>

                <button class="scan-btn" onclick="processPayment()">
                    <span style="font-size: 30px;">📷</span>
                    <span class="fw-bold">ادفع الآن</span>
                </button>

                <div class="p-3 text-start">
                    <h6>المتاجر القريبة المشاركة:</h6>
                    <div class="p-2 bg-white rounded mb-2 shadow-sm">☕ كافيه مود (خصم فوري)</div>
                    <div class="p-2 bg-white rounded mb-2 shadow-sm">🍇 مطعم تكا وعنب</div>
                </div>
            </div>
        </div>

        <!-- 2. شاشة الكاشير -->
        <div>
            <h4 class="text-center mb-3">🖥️ جهاز الكاشير (المحل)</h4>
            <div class="merchant-frame p-3 text-center">
                <div class="bg-primary text-white p-2 rounded mb-3">Saree3 Pay Merchant</div>
                <h5>كافيه مود - الفرع الرئيسي</h5>
                <hr>
                <div class="my-4">
                    <label class="form-label font-bold">قيمة فاتورة الزبون:</label>
                    <input type="number" id="bill-amount" class="form-control text-center fs-3 font-bold" value="18.00">
                </div>

                <div class="p-3 bg-light border rounded mb-3">
                    <p class="mb-1 text-muted">رمز الـ QR جاهز للمسح</p>
                    <div style="font-size: 80px;">📱🔳</div>
                </div>

                <!-- شاشة نجاح العملية -->
                <div id="success-screen" class="success-overlay">
                    <div style="font-size: 70px; color: #28a745;">✅</div>
                    <h3 class="fw-bold text-success mt-2">تمت العملية بنجاح!</h3>
                    <p class="fs-5">خصم: <strong id="paid-amount">18.00</strong> ر.س</p>
                    <p class="text-muted">العميل: عيسى الراشد</p>
                    <button class="btn btn-outline-dark mt-3" onclick="resetMerchant()">عملية جديدة</button>
                </div>
            </div>
        </div>

    </div>

    <script>
        let currentBalance = 200.00;

        function processPayment() {
            let bill = parseFloat(document.getElementById('bill-amount').value);

            if (bill > currentBalance) {
                alert('الرصيد المتاح في المحفظة غير كافٍ!');
                return;
            }

            // خصم الرصيد
            currentBalance -= bill;
            document.getElementById('user-balance').innerText = currentBalance.toFixed(2);
            document.getElementById('paid-amount').innerText = bill.toFixed(2);

            // إظهار شاشة النجاح عند التاجر
            document.getElementById('success-screen').style.display = 'block';
        }

        function resetMerchant() {
            document.getElementById('success-screen').style.display = 'none';
        }
    </script>
</body>
</html>
stdout
copy 
Standard output is empty
https://ideone.com/4EEDFu
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>محاكي تطبيق سريع باي | Saree3 Pay Simulator</title>
<link href="https://c...content-available-to-author-only...r.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
<link href="https://f...content-available-to-author-only...s.com/css2?family=Tajawal:wght@500;700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'Tajawal', sans-serif; background-color: #0b132b; color: #fff; padding: 20px; }
.phone-frame {
width: 360px; height: 720px; background: #f4f6f9; border-radius: 40px;
border: 12px solid #1c2541; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
position: relative; overflow: hidden; display: flex; flex-direction: column; color: #333;
}
.phone-header { background: #0052CC; color: white; padding: 20px 15px 15px; text-align: center; }
.credit-card {
background: linear-gradient(135deg, #0052CC, #1765E3); color: white;
border-radius: 16px; padding: 20px; margin: 15px; box-shadow: 0 8px 20px rgba(0,82,204,0.3);
}
.scan-btn {
width: 120px; height: 120px; background: #FF6B00; color: white; border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
margin: 20px auto; cursor: pointer; border: none; box-shadow: 0 10px 25px rgba(255,107,0,0.4);
transition: transform 0.2s;
}
.scan-btn:hover { transform: scale(1.05); }
.merchant-frame {
width: 360px; height: 720px; background: #ffffff; border-radius: 40px;
border: 12px solid #3a506b; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
position: relative; overflow: hidden; display: flex; flex-direction: column; color: #333;
}
.success-overlay {
display: none; position: absolute; top:0; left:0; width:100%; height:100%;
background: rgba(255,255,255,0.95); z-index: 10; text-align: center; padding-top: 150px;
}
</style>
</head>
<body>

<div class="container text-center mb-4">
<h2 class="fw-bold text-warning">محاكي النظام المباشر - سريع باي (Saree3 Pay)</h2>
<p class="text-light">جرب الدفع الآن عبر مسح الـ QR وملاحظة الخصم الفوري في شاشة الكاشير والعميل!</p>
</div>

<div class="d-flex justify-content-center gap-5 flex-wrap">

<!-- 1. شاشة العميل -->
<div>
<h4 class="text-center mb-3">📱 تطبيق العميل</h4>
<div class="phone-frame">
<div class="phone-header">
<h5 class="m-0 fw-bold">سريع باي | Saree3 Pay</h5>
</div>
<div class="credit-card text-start">
<small style="opacity: 0.8;">الرصيد المتاح للشراء</small>
<h2 class="fw-bold my-1"><span id="user-balance">200.00</span> ر.س</h2>
<small style="opacity: 0.9;">الحد الأقصى: 200.00 ر.س | الاستحقاق: 27 من الشهر</small>
</div>

<button class="scan-btn" onclick="processPayment()">
<span style="font-size: 30px;">📷</span>
<span class="fw-bold">ادفع الآن</span>
</button>

<div class="p-3 text-start">
<h6>المتاجر القريبة المشاركة:</h6>
<div class="p-2 bg-white rounded mb-2 shadow-sm">☕ كافيه مود (خصم فوري)</div>
<div class="p-2 bg-white rounded mb-2 shadow-sm">🍇 مطعم تكا وعنب</div>
</div>
</div>
</div>

<!-- 2. شاشة الكاشير -->
<div>
<h4 class="text-center mb-3">🖥️ جهاز الكاشير (المحل)</h4>
<div class="merchant-frame p-3 text-center">
<div class="bg-primary text-white p-2 rounded mb-3">Saree3 Pay Merchant</div>
<h5>كافيه مود - الفرع الرئيسي</h5>
<hr>
<div class="my-4">
<label class="form-label font-bold">قيمة فاتورة الزبون:</label>
<input type="number" id="bill-amount" class="form-control text-center fs-3 font-bold" value="18.00">
</div>

<div class="p-3 bg-light border rounded mb-3">
<p class="mb-1 text-muted">رمز الـ QR جاهز للمسح</p>
<div style="font-size: 80px;">📱🔳</div>
</div>

<!-- شاشة نجاح العملية -->
<div id="success-screen" class="success-overlay">
<div style="font-size: 70px; color: #28a745;">✅</div>
<h3 class="fw-bold text-success mt-2">تمت العملية بنجاح!</h3>
<p class="fs-5">خصم: <strong id="paid-amount">18.00</strong> ر.س</p>
<p class="text-muted">العميل: عيسى الراشد</p>
<button class="btn btn-outline-dark mt-3" onclick="resetMerchant()">عملية جديدة</button>
</div>
</div>
</div>

</div>

<script>
let currentBalance = 200.00;

function processPayment() {
let bill = parseFloat(document.getElementById('bill-amount').value);

if (bill > currentBalance) {
alert('الرصيد المتاح في المحفظة غير كافٍ!');
return;
}

// خصم الرصيد
currentBalance -= bill;
document.getElementById('user-balance').innerText = currentBalance.toFixed(2);
document.getElementById('paid-amount').innerText = bill.toFixed(2);

// إظهار شاشة النجاح عند التاجر
document.getElementById('success-screen').style.display = 'block';
}

function resetMerchant() {
document.getElementById('success-screen').style.display = 'none';
}
</script>
</body>
</html>
language:
Java (HotSpot 12)
created:
57 minutes ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!