Skip to content

Instantly share code, notes, and snippets.

@isdaviddong

isdaviddong/index.html

Last active March 20, 2026 14:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/isRockFx.js"></script>
<script>
$(function () {
$('#ButtonCal').click(
function () {
//取得用戶輸入的參數
var para = { 'height': $('#txbHeight').val(), 'weight': $('#txbWeight').val() };
//呼叫API
ExecuteAPI('Example', 'BMI', para,
//呼叫WebAPI成功時運行的Call Back Function
function (result) {
alert(result.Data);
}
);
}
);
});
</script>
</head>
<body>
<div class="row" style="margin:10px">
<div class="col-md-12">
<div class="form-group">
身高:
<input id="txbHeight" class="form-control" placeholder="請輸入身高" />
體重:
<input id="txbWeight" class="form-control" placeholder="請輸入體重" />
<br />
<button class="btn btn-primary" id="ButtonCal">計算</button>
</div>
</div>
</div>
</body>
</html>
@mounisrafik2-code
Copy link

mounisrafik2-code commented Mar 20, 2026

``

<title>تسجيل قرآني - مع صدى المساجد</title>

🎙️ تسجيل قرآني

سجل قراءتك بجودة المساجد

    <div class="controls">
        <div class="record-section">
            <button id="recordBtn" class="record-btn">
                <span class="btn-text">ابدأ التسجيل</span>
                <div class="recording-indicator"></div>
            </button>
            <div class="status" id="status">جاهز للتسجيل</div>
        </div>

        <div class="effects-section">
            <h3>تأثيرات الصوت</h3>
            <div class="effect-control">
                <label>شدة الصدى:</label>
                <input type="range" id="reverbAmount" min="0" max="100" value="70">
                <span id="reverbValue">70%</span>
            </div>
            <div class="effect-control">
                <label>الارتداد:</label>
                <input type="range" id="delayAmount" min="0" max="100" value="50">
                <span id="delayValue">50%</span>
            </div>
        </div>

        <div class="playback-section">
            <button id="playBtn" class="play-btn" disabled>تشغيل التسجيل</button>
            <button id="downloadBtn" class="download-btn" disabled>تحميل MP3</button>
            <button id="clearBtn" class="clear-btn">مسح التسجيل</button>
        </div>
    </div>

    <div class="visualizer">
        <canvas id="visualizer"></canvas>
    </div>

    <div class="info">
        <p>💡 نصيحة: استخدم ميكروفون جيد للحصول على أفضل جودة</p>
    </div>
</div>

<script src="script.js"></script>

@larbaouimohamed374-rgb
Copy link

larbaouimohamed374-rgb commented Mar 20, 2026

I want to build

@larbaouimohamed374-rgb
Copy link

larbaouimohamed374-rgb commented Mar 20, 2026

I want to build police robote

@larbaouimohamed374-rgb
Copy link

larbaouimohamed374-rgb commented Mar 20, 2026

html

<title>روبوت بوليسي</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
    body {
        font-family: 'Segoe UI', Arial, sans-serif;
        background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    
    .robot-card {
        background: rgba(10, 20, 40, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 30px;
        padding: 30px;
        max-width: 550px;
        width: 100%;
        box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        border: 1px solid rgba(0, 168, 255, 0.5);
        transition: transform 0.3s;
    }
    
    .robot-card:hover {
        transform: scale(1.02);
    }
    
    h1 {
        text-align: center;
        color: #00a8ff;
        font-size: 28px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .badge {
        font-size: 40px;
    }
    
    .robot-face {
        text-align: center;
        font-size: 80px;
        margin: 20px 0;
        background: #1e2a3a;
        border-radius: 60px;
        padding: 20px;
        animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    
    .status-box {
        background: #000;
        padding: 15px;
        border-radius: 15px;
        margin: 20px 0;
        border-left: 4px solid #00a8ff;
    }
    
    .status-label {
        color: #888;
        font-size: 14px;
    }
    
    .status-value {
        color: #0f0;
        font-size: 20px;
        font-weight: bold;
        font-family: monospace;
    }
    
    .button-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 25px 0;
    }
    
    .btn {
        padding: 14px;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
        color: white;
    }
    
    .btn-patrol { background: #00a8ff; }
    .btn-arrest { background: #ff4757; }
    .btn-scan { background: #2ed573; }
    .btn-stop { background: #ffa502; }
    
    .btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    }
    
    .btn:active {
        transform: translateY(1px);
    }
    
    .log-box {
        background: #0a0e1a;
        border-radius: 15px;
        padding: 15px;
        height: 180px;
        overflow-y: auto;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #0f0;
        border: 1px solid #2a3a4a;
    }
    
    .log-box p {
        margin: 5px 0;
        border-bottom: 1px solid #1e2a2a;
        padding: 3px 0;
    }
    
    .siren {
        animation: blink 0.5s infinite;
    }
    
    @keyframes blink {
        0%, 100% { text-shadow: 0 0 5px red; }
        50% { text-shadow: 0 0 20px red; }
    }
    
    footer {
        text-align: center;
        margin-top: 20px;
        font-size: 12px;
        color: #666;
    }
</style>

🚔 روبوت بوليسي 🤖 

    <div class="robot-face">
        👮‍♂️🤖🚔
    </div>
    
    <div class="status-box">
        <div class="status-label">📡 الحالة الحالية</div>
        <div class="status-value" id="statusValue">🟢 جاهز للخدمة</div>
    </div>
    
    <div class="button-grid">
        <button class="btn btn-patrol" onclick="executeCommand('patrol')">🚶 دورية</button>
        <button class="btn btn-arrest" onclick="executeCommand('arrest')">🔗 توقيف</button>
        <button class="btn btn-scan" onclick="executeCommand('scan')">🔍 تفتيش</button>
        <button class="btn btn-stop" onclick="executeCommand('stop')">⏹️ إيقاف</button>
    </div>
    
    <div class="log-box" id="logBox">
        <p>🔹 [النظام] تم تفعيل روبوت الشرطة</p>
        <p>🔹 [النظام] جاهز لتنفيذ الأوامر 🚔</p>
    </div>
    
    <footer>
        🚨 روبوت بوليسي - الإصدار 1.0 🚨
    </footer>
</div>

<script>
    function executeCommand(command) {
        const statusValue = document.getElementById('statusValue');
        const logBox = document.getElementById('logBox');
        const now = new Date().toLocaleTimeString();
        
        let statusText = '';
        let logMessage = '';
        let sirenEffect = false;
        
        switch(command) {
            case 'patrol':
                statusText = '🔵 في دورية';
                logMessage = `🚶 [${now}] يقوم بالدورية... المنطقة آمنة ✓`;
                break;
            case 'arrest':
                statusText = '🔴 توقيف مشتبه به';
                logMessage = `🔗 [${now}] تم توقيف المشتبه به! جاري استدعاء الدعم 🚔🚔`;
                sirenEffect = true;
                break;
            case 'scan':
                statusText = '🟢 جاري التفتيش';
                logMessage = `🔍 [${now}] فحص المنطقة... لا توجد تهديدات. كل شيء آمن ✓`;
                break;
            case 'stop':
                statusText = '⚪ متوقف';
                logMessage = `⏹️ [${now}] تم إيقاف الروبوت. انتظار الأوامر الجديدة`;
                break;
            default:
                return;
        }
        
        // تحديث الحالة
        statusValue.innerHTML = statusText;
        
        // إضافة الرسالة للسجل
        const newLog = document.createElement('p');
        newLog.innerHTML = `🤖 ${logMessage}`;
        logBox.appendChild(newLog);
        
        // تمرير السجل للأسفل
        logBox.scrollTop = logBox.scrollHeight;
        
        // تأثير خاص للتوقيف
        if (sirenEffect) {
            const robotFace = document.querySelector('.robot-face');
            robotFace.style.animation = 'blink 0.3s infinite';
            setTimeout(() => {
                robotFace.style.animation = 'float 3s ease-in-out infinite';
            }, 2000);
        }
        
        // تحديث لون الحالة
        if (command === 'arrest') {
            statusValue.style.color = '#ff4757';
            setTimeout(() => {
                statusValue.style.color = '#0f0';
            }, 2000);
        } else {
            statusValue.style.color = '#0f0';
        }
    }
    
    // إضافة تأثير عند تحميل الصفحة
    window.onload = function() {
        console.log('روبوت بوليسي جاهز للخدمة! 🚔');
    };
</script>
```

@larbaouimohamed374-rgb
Copy link

larbaouimohamed374-rgb commented Mar 20, 2026

روبوت بوليسي

@larbaouimohamed374-rgb
Copy link

larbaouimohamed374-rgb commented Mar 20, 2026

div style="background: #0a0f2a; padding: 20px; border-radius: 15px; color: white; font-family: Arial; max-width: 500px; margin: auto;">

🚔 روبوت بوليسي 🚔



🤖👮


📡 الحالة: جاهز للخدمة




🚶 دورية
🔗 توقيف
🔍 تفتيش
⏹️ وقف


> النظام: روبوت بوليسي جاهز 🚔

<script> function robotCommand(cmd) { let log = document.getElementById('log'); let statusText = document.getElementById('statusText'); let message = ""; let status = ""; if (cmd === 'patrol') { message = "🚶 يقوم بالدورية... المنطقة آمنة"; status = "في دورية"; } else if (cmd === 'arrest') { message = "🔗 تم توقيف المشتبه به! يتم استدعاء الدعم 🚔"; status = "توقيف 🔗"; } else if (cmd === 'scan') { message = "🔍 جاري التفتيش... لا يوجد تهديدات ✓"; status = "تفتيش 🔍"; } else if (cmd === 'stop') { message = "⏹️ تم إيقاف الروبوت"; status = "متوقف ⏹️"; } log.innerHTML += `
> 🤖 ${message}`; statusText.innerHTML = status; log.scrollTop = log.scrollHeight; } </script>

@larbaouimohamed374-rgb
Copy link

larbaouimohamed374-rgb commented Mar 20, 2026

روبوت قوي يساعد في كل شيء

@quizhook2-droid
Copy link

quizhook2-droid commented Mar 20, 2026

<title>Index.html</title>

This ia my first page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment