fork download
copy 
  1. #include <iostream>
  2. using namespace std;
  3.  
  4. int main() {
  5. 	// your code goes here
  6. 	return 0;
  7. }
Success #stdin #stdout 0.01s 5272KB
comments (?)
stdin
copy 
import React, { useState, useEffect } from 'react';
import { 
  CreditCard, 
  Send, 
  QrCode, 
  User, 
  History, 
  Eye, 
  EyeOff,
  ArrowLeft,
  Check,
  X,
  Smartphone,
  Shield,
  Zap
} from 'lucide-react';

const UPIPaymentApp = () => {
  const [currentScreen, setCurrentScreen] = useState('home');
  const [showBalance, setShowBalance] = useState(false);
  const [balance, setBalance] = useState(25430.50);
  const [pin, setPin] = useState('');
  const [paymentAmount, setPaymentAmount] = useState('');
  const [recipient, setRecipient] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);
  const [cameraActive, setCameraActive] = useState(false);
  const [scannedData, setScannedData] = useState(null);
  const [stream, setStream] = useState(null);
  const [scanError, setScanError] = useState('');

  const [transactions] = useState([
    { id: 1, type: 'sent', amount: 500, recipient: 'John Doe', time: '10:30 AM', status: 'success' },
    { id: 2, type: 'received', amount: 1200, sender: 'Sarah Wilson', time: '9:15 AM', status: 'success' },
    { id: 3, type: 'sent', amount: 300, recipient: 'Coffee Shop', time: 'Yesterday', status: 'success' },
    { id: 4, type: 'received', amount: 2500, sender: 'Freelance Payment', time: '2 days ago', status: 'success' }
  ]);

  const handlePayment = () => {
    if (paymentAmount && recipient && pin === '1234') {
      setIsProcessing(true);
      setTimeout(() => {
        setBalance(prev => prev - parseFloat(paymentAmount));
        setIsProcessing(false);
        setShowSuccess(true);
        setTimeout(() => {
          setShowSuccess(false);
          setCurrentScreen('home');
          setPaymentAmount('');
          setRecipient('');
          setPin('');
        }, 2000);
      }, 2000);
    }
  };

  const HomeScreen = () => (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-6 pb-8">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
              <Zap className="w-6 h-6" />
            </div>
            <div>
              <h1 className="text-xl font-bold">PayEasy</h1>
              <p className="text-blue-100 text-sm">Your UPI Wallet</p>
            </div>
          </div>
          <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
            <User className="w-6 h-6" />
          </div>
        </div>

        {/* Balance Card */}
        <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-blue-100 text-sm mb-1">Total Balance</p>
              <div className="flex items-center space-x-2">
                <span className="text-2xl font-bold">
                  {showBalance ? `₹${balance.toLocaleString()}` : '₹••••••'}
                </span>
                <button
                  onClick={() => setShowBalance(!showBalance)}
                  className="p-1 hover:bg-white/10 rounded"
                >
                  {showBalance ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              </div>
            </div>
            <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center">
              <CreditCard className="w-6 h-6 text-white" />
            </div>
          </div>
        </div>
      </div>

      {/* Quick Actions */}
      <div className="px-6 -mt-4 mb-6">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="text-lg font-semibold mb-4 text-gray-800">Quick Actions</h3>
          <div className="grid grid-cols-2 gap-4">
            <button
              onClick={() => setCurrentScreen('send')}
              className="flex flex-col items-center p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl hover:shadow-md transition-all duration-200 group"
            >
              <div className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                <Send className="w-6 h-6 text-white" />
              </div>
              <span className="font-medium text-gray-800">Send Money</span>
            </button>
            <button
              onClick={() => setCurrentScreen('scan')}
              className="flex flex-col items-center p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl hover:shadow-md transition-all duration-200 group"
            >
              <div className="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                <QrCode className="w-6 h-6 text-white" />
              </div>
              <span className="font-medium text-gray-800">Scan & Pay</span>
            </button>
          </div>
        </div>
      </div>

      {/* Recent Transactions */}
      <div className="px-6">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-800">Recent Transactions</h3>
            <button
              onClick={() => setCurrentScreen('history')}
              className="text-blue-600 text-sm font-medium hover:text-blue-700"
            >
              View All
            </button>
          </div>
          <div className="space-y-3">
            {transactions.slice(0, 3).map((transaction) => (
              <div key={transaction.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                    transaction.type === 'sent' ? 'bg-red-100' : 'bg-green-100'
                  }`}>
                    <Send className={`w-5 h-5 ${
                      transaction.type === 'sent' ? 'text-red-600 rotate-45' : 'text-green-600 -rotate-45'
                    }`} />
                  </div>
                  <div>
                    <p className="font-medium text-gray-800">
                      {transaction.type === 'sent' ? transaction.recipient : transaction.sender}
                    </p>
                    <p className="text-sm text-gray-500">{transaction.time}</p>
                  </div>
                </div>
                <span className={`font-semibold ${
                  transaction.type === 'sent' ? 'text-red-600' : 'text-green-600'
                }`}>
                  {transaction.type === 'sent' ? '-' : '+'}₹{transaction.amount}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  const SendMoneyScreen = () => (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm p-4 flex items-center space-x-4">
        <button
          onClick={() => setCurrentScreen('home')}
          className="p-2 hover:bg-gray-100 rounded-full"
        >
          <ArrowLeft className="w-6 h-6" />
        </button>
        <h2 className="text-lg font-semibold">Send Money</h2>
      </div>

      <div className="p-6 space-y-6">
        <div className="bg-white rounded-xl shadow-sm p-6">
          <h3 className="text-lg font-semibold mb-4">Enter Details</h3>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Recipient (UPI ID or Phone)
              </label>
              <input
                type="text"
                value={recipient}
                onChange={(e) => setRecipient(e.target.value)}
                placeholder="john@paytm or 9876543210"
                className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Amount (₹)
              </label>
              <input
                type="number"
                value={paymentAmount}
                onChange={(e) => setPaymentAmount(e.target.value)}
                placeholder="Enter amount"
                className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                UPI PIN
              </label>
              <input
                type="password"
                value={pin}
                onChange={(e) => setPin(e.target.value)}
                placeholder="Enter 4-digit PIN"
                maxLength="4"
                className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
              <p className="text-xs text-gray-500 mt-1">Demo PIN: 1234</p>
            </div>
          </div>

          <button
            onClick={handlePayment}
            disabled={!paymentAmount || !recipient || !pin || isProcessing}
            className="w-full mt-6 bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
          >
            {isProcessing ? (
              <>
                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                <span>Processing...</span>
              </>
            ) : (
              <>
                <Send className="w-5 h-5" />
                <span>Send Money</span>
              </>
            )}
          </button>
        </div>

        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
          <div className="flex items-start space-x-3">
            <Shield className="w-5 h-5 text-blue-600 mt-0.5" />
            <div>
              <h4 className="font-medium text-blue-900">Secure Transaction</h4>
              <p className="text-sm text-blue-700">Your payment is protected with bank-grade security</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const simulateQRScan = () => {
    // Simulate QR code detection
    const mockQRData = {
      merchantName: "Coffee House",
      upiId: "coffehouse@paytm",
      amount: 150
    };
    
    setCameraActive(true);
    setTimeout(() => {
      setScannedData(mockQRData);
      setCameraActive(false);
    }, 3000);
  };

  const ScanPayScreen = () => {
    if (scannedData) {
      return (
        <div className="min-h-screen bg-gray-50">
          <div className="bg-white shadow-sm p-4 flex items-center space-x-4">
            <button
              onClick={() => {
                setScannedData(null);
                setCurrentScreen('home');
              }}
              className="p-2 hover:bg-gray-100 rounded-full"
            >
              <ArrowLeft className="w-6 h-6" />
            </button>
            <h2 className="text-lg font-semibold">Payment Details</h2>
          </div>

          <div className="p-6 space-y-6">
            <div className="bg-white rounded-xl shadow-sm p-6">
              <div className="text-center mb-6">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Check className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-lg font-semibold text-gray-800">QR Code Scanned Successfully</h3>
              </div>

              <div className="bg-gray-50 rounded-lg p-4 mb-6">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-gray-600">Merchant:</span>
                  <span className="font-semibold">{scannedData.merchantName}</span>
                </div>
                <div className="flex justify-between items-center

  const TransactionHistory = () => (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm p-4 flex items-center space-x-4">
        <button
          onClick={() => setCurrentScreen('home')}
          className="p-2 hover:bg-gray-100 rounded-full"
        >
          <ArrowLeft className="w-6 h-6" />
        </button>
        <h2 className="text-lg font-semibold">Transaction History</h2>
      </div>

      <div className="p-6">
        <div className="bg-white rounded-xl shadow-sm">
          <div className="p-6 border-b border-gray-200">
            <h3 className="text-lg font-semibold">All Transactions</h3>
          </div>
          <div className="divide-y divide-gray-200">
            {transactions.map((transaction) => (
              <div key={transaction.id} className="p-6 flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
                    transaction.type === 'sent' ? 'bg-red-100' : 'bg-green-100'
                  }`}>
                    <Send className={`w-6 h-6 ${
                      transaction.type === 'sent' ? 'text-red-600 rotate-45' : 'text-green-600 -rotate-45'
                    }`} />
                  </div>
                  <div>
                    <p className="font-medium text-gray-800">
                      {transaction.type === 'sent' ? `To ${transaction.recipient}` : `From ${transaction.sender}`}
                    </p>
                    <p className="text-sm text-gray-500">{transaction.time}</p>
                    <div className="flex items-center space-x-1 mt-1">
                      <Check className="w-3 h-3 text-green-500" />
                      <span className="text-xs text-green-600">Success</span>
                    </div>
                  </div>
                </div>
                <span className={`text-lg font-semibold ${
                  transaction.type === 'sent' ? 'text-red-600' : 'text-green-600'
                }`}>
                  {transaction.type === 'sent' ? '-' : '+'}₹{transaction.amount}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  const SuccessScreen = () => (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100 flex items-center justify-center p-6">
      <div className="bg-white rounded-xl shadow-lg p-8 text-center max-w-sm w-full">
        <div className="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6">
          <Check className="w-10 h-10 text-white" />
        </div>
        
        <h3 className="text-2xl font-bold text-gray-800 mb-2">Payment Successful!</h3>
        <p className="text-gray-600 mb-4">₹{paymentAmount} sent to {recipient}</p>
        
        <div className="bg-gray-50 rounded-lg p-4 mb-6">
          <p className="text-sm text-gray-500">Transaction ID</p>
          <p className="font-mono text-sm font-medium">UPI{Date.now()}</p>
        </div>
        
        <div className="w-full h-1 bg-green-200 rounded-full overflow-hidden">
          <div className="h-full bg-green-500 rounded-full animate-pulse"></div>
        </div>
      </div>
    </div>
  );

  if (showSuccess) return <SuccessScreen />;

  switch (currentScreen) {
    case 'home':
      return <HomeScreen />;
    case 'send':
      return <SendMoneyScreen />;
    case 'scan':
      return <ScanPayScreen />;
    case 'history':
      return <TransactionHistory />;
    default:
      return <HomeScreen />;
  }
};

export default UPIPaymentApp;
stdout
copy 
Standard output is empty
https://ideone.com/H17D0c
language:
C++ (gcc 8.3)
created:
3 days 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!