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>
@arshadmalik952877-svg
Copy link

arshadmalik952877-svg commented Feb 27, 2026

<title>Malik Salon | Hair & Grooming Studio</title> <style> body{ margin:0; font-family:Arial; background:#111; color:white; }

header{
background:black;
text-align:center;
padding:20px;
}

header h1{
color:gold;
margin:0;
}

nav{
background:#222;
text-align:center;
padding:10px;
}

nav a{
color:white;
text-decoration:none;
margin:15px;
font-weight:bold;
}

.hero{
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438');
background-size:cover;
padding:120px 20px;
text-align:center;
}

.hero h2{
color:gold;
font-size:36px;
}

.section{
padding:50px 20px;
text-align:center;
}

.services{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.box{
background:#222;
margin:15px;
padding:25px;
width:250px;
border-radius:10px;
}

.price{
color:gold;
font-weight:bold;
}

button{
background:gold;
border:none;
padding:12px 20px;
font-weight:bold;
border-radius:5px;
cursor:pointer;
}

footer{
background:black;
text-align:center;
padding:15px;
margin-top:30px;
}

@media(max-width:768px){
.services{
flex-direction:column;
align-items:center;
}
}
</style>

Malik Salon

Professional Hair & Grooming Studio

Home Services Price Contact

Style That Defines You

Modern Haircut & Beard Styling

Book on WhatsApp

Our Services

Hair Cut

Trendy & Stylish Cutting

Beard Trim

Sharp & Clean Look

Facial

Glow & Skin Care

Price List

Hair Cut - ₹150

Beard Trim - ₹80

Facial - ₹300

Contact Us

📍 Shiamgir, India

📞 +91 9389782286

© 2026 Malik Salon | All Rights Reserved

@Dghcgcb
Copy link

Dghcgcb commented Mar 7, 2026

<title>سياد - بوابت طنجة | Birkenstock Handmade</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f8f5f2;
        color: #333;
        line-height: 1.6;
    }
    
    /* Header */
    header {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
        color: white;
        padding: 30px 0;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    header h1 {
        font-size: 3em;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    header p {
        font-size: 1.4em;
        opacity: 0.95;
    }
    
    /* Navigation */
    nav {
        background-color: #1a252f;
        padding: 15px;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    nav a {
        color: white;
        text-decoration: none;
        margin: 0 20px;
        font-size: 1.1em;
        padding: 10px 20px;
        border-radius: 5px;
        transition: all 0.3s;
    }
    
    nav a:hover {
        background-color: #3498db;
        transform: translateY(-2px);
    }
    
    /* Hero Section */
    .hero {
        background: linear-gradient(rgba(44, 62, 80, 0.7), rgba(52, 152, 219, 0.7)), url('https://images.unsplash.com/photo-1549298916-b41d501d3772?w=1200');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 150px 20px;
        text-align: center;
    }
    
    .hero h2 {
        font-size: 3.5em;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    
    .hero p {
        font-size: 1.6em;
        margin-bottom: 30px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .cta-button {
        background-color: #25D366;
        color: white;
        padding: 20px 60px;
        text-decoration: none;
        border-radius: 50px;
        font-size: 1.4em;
        font-weight: bold;
        transition: all 0.3s;
        display: inline-block;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    }
    
    .cta-button:hover {
        transform: scale(1.1);
        background-color: #128C7E;
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    }
    
    /* Products Section */
    .container {
        max-width: 1200px;
        margin: 60px auto;
        padding: 0 20px;
    }
    
    .section-title {
        text-align: center;
        font-size: 3em;
        margin-bottom: 50px;
        color: #2c3e50;
        position: relative;
    }
    
    .section-title::after {
        content: '';
        display: block;
        width: 120px;
        height: 5px;
        background: #3498db;
        margin: 15px auto 0;
        border-radius: 2px;
    }
    
    .products {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 40px;
    }
    
    .product-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        transition: all 0.4s;
        border: 3px solid transparent;
    }
    
    .product-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
        border-color: #3498db;
    }
    
    .product-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        transition: transform 0.4s;
    }
    
    .product-card:hover img {
        transform: scale(1.1);
    }
    
    .product-info {
        padding: 30px;
        text-align: center;
    }
    
    .product-info h3 {
        font-size: 1.8em;
        margin-bottom: 12px;
        color: #2c3e50;
    }
    
    .product-info p {
        color: #666;
        margin-bottom: 15px;
        font-size: 1.1em;
    }
    
    .price {
        font-size: 2.5em;
        color: #3498db;
        font-weight: bold;
        margin: 20px 0;
        display: block;
    }
    
    .price span {
        font-size: 1em;
        color: #666;
    }
    
    .features {
        list-style: none;
        margin: 20px 0;
        color: #555;
    }
    
    .features li {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    
    .features i {
        color: #25D366;
        margin-left: 10px;
    }
    
    /* WhatsApp Button */
    .whatsapp-btn {
        background-color: #25D366;
        color: white;
        padding: 20px 40px;
        text-decoration: none;
        border-radius: 50px;
        font-size: 1.3em;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    }
    
    .whatsapp-btn:hover {
        background-color: #128C7E;
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    }
    
    /* About Section */
    .about-section {
        background: linear-gradient(135deg, #fff8f0 0%, #fff 100%);
        padding: 80px 20px;
        margin-top: 60px;
    }
    
    .about-content {
        max-width: 1000px;
        margin: 0 auto;
        text-align: center;
    }
    
    .about-content h2 {
        font-size: 2.8em;
        color: #2c3e50;
        margin-bottom: 25px;
    }
    
    .about-content p {
        font-size: 1.3em;
        line-height: 1.8;
        color: #555;
        margin-bottom: 30px;
    }
    
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }
    
    .feature-item {
        background: white;
        padding: 35px;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        transition: transform 0.3s;
    }
    
    .feature-item:hover {
        transform: translateY(-5px);
    }
    
    .feature-item i {
        font-size: 3.5em;
        color: #3498db;
        margin-bottom: 15px;
    }
    
    .feature-item h3 {
        color: #2c3e50;
        margin-bottom: 10px;
    }
    
    /* Tourist Section */
    .tourist-section {
        background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
        color: white;
        padding: 80px 20px;
        text-align: center;
    }
    
    .tourist-section h2 {
        font-size: 2.8em;
        margin-bottom: 20px;
    }
    
    .tourist-section p {
        font-size: 1.3em;
        max-width: 800px;
        margin: 0 auto 40px;
    }
    
    .tourist-features {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .tourist-feature {
        background: rgba(255,255,255,0.15);
        padding: 30px;
        border-radius: 15px;
        min-width: 250px;
        backdrop-filter: blur(10px);
    }
    
    .tourist-feature i {
        font-size: 3em;
        margin-bottom: 15px;
    }
    
    /* Contact Section */
    .contact-section {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
        color: white;
        padding: 70px 20px;
        text-align: center;
    }
    
    .contact-section h2 {
        font-size: 2.8em;
        margin-bottom: 40px;
    }
    
    .contact-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        margin-top: 40px;
    }
    
    .contact-item {
        background: rgba(255,255,255,0.15);
        padding: 35px;
        border-radius: 15px;
        min-width: 280px;
        backdrop-filter: blur(10px);
        transition: all 0.3s;
    }
    
    .contact-item:hover {
        background: rgba(255,255,255,0.25);
        transform: translateY(-5px);
    }
    
    .contact-item i {
        font-size: 3em;
        margin-bottom: 20px;
    }
    
    .contact-item h3 {
        margin-bottom: 15px;
        font-size: 1.4em;
    }
    
    .contact-item p {
        font-size: 1.2em;
    }
    
    /* Footer */
    footer {
        background-color: #1a252f;
        color: white;
        text-align: center;
        padding: 40px;
    }
    
    footer p {
        margin: 10px 0;
    }
    
    /* Floating WhatsApp Button */
    .floating-whatsapp {
        position: fixed;
        bottom: 30px;
        left: 30px;
        background-color: #25D366;
        color: white;
        padding: 20px 35px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.2em;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    .floating-whatsapp:hover {
        transform: scale(1.1);
        background-color: #128C7E;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        header h1 { font-size: 2em; }
        .hero h2 { font-size: 2em; }
        nav a { display: block; margin: 10px 0; }
        .contact-info { flex-direction: column; }
        .section-title { font-size: 2em; }
        .floating-whatsapp { padding: 15px 20px; font-size: 0.9em; }
        .products { grid-template-columns: 1fr; }
    }
</style>

<!-- Header -->
<header>
    <h1>👟 سياد - بوابت طنجة</h1>
    <p>Birkenstock Handmade - Tangier Gate</p>
</header>

<!-- Navigation -->
<nav>
    <a href="#home">الرئيسية</a>
    <a href="#products">المنتجات</a>
    <a href="#about">من نحن</a>
    <a href="#tourists">للسياح</a>
    <a href="#contact">تواصل معنا</a>
</nav>

<!-- Hero Section -->
<div class="hero" id="home">
    <h2>أهلاً بكم في سياد - بوابت طنجة</h2>
    <p>أحذية Birkenstock يدوية الصنع بجودة عالية - مثالية للسياح والزوار</p>
    <a href="https://wa.me/2127656

@khalidabid818-png
Copy link

khalidabid818-png commented Mar 8, 2026

<title>VIP Pro Max Shop</title>

Nos Promotions :

SALE

Vip Pro Max 2026

✔ In stock

599,00 د.م

320,00 د.م

SALE

Vip Pro Max 2026

✔ In stock

799,00 د.م

399,00 د.م

SALE

Vip Pro Max 2026

✔ In stock

699,00 د.م

350,00 د.م

@JujuliaMori
Copy link

JujuliaMori commented Mar 9, 2026

<title>Gerador de CPF</title>

Gerador de CPF

Gerar CPF

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

@abouelfadlrayane-hub
Copy link

abouelfadlrayane-hub commented Mar 12, 2026

<title>Rapport : Loi d'Unicité du Courant</title> <style> /* --- STYLE GÉNÉRAL --- */ :root { --primary-color: #2c3e50; --accent-color: #3498db; --bg-color: #f4f7f6; --paper-color: #ffffff; --text-color: #333; } 
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    /* --- EN-TÊTE --- */
    header {
        background-color: var(--primary-color);
        color: white;
        padding: 2rem 0;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    header h1 {
        margin: 0;
        font-size: 2.5rem;
    }

    header p {
        font-size: 1.2rem;
        opacity: 0.9;
    }

    /* --- NAVIGATION --- */
    nav {
        background-color: #34495e;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    nav ul li {
        margin: 0;
    }

    nav ul li a {
        display: block;
        padding: 15px 25px;
        color: white;
        text-decoration: none;
        font-weight: bold;
        transition: background 0.3s;
    }

    nav ul li a:hover {
        background-color: var(--accent-color);
    }

    /* --- CONTENU PRINCIPAL --- */
    main {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 20px;
    }

    /* --- STYLE DES "PAGES" --- */
    .page-section {
        background-color: var(--paper-color);
        padding: 40px;
        margin-bottom: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border-left: 5px solid var(--accent-color);
        scroll-margin-top: 80px; /* Pour que le titre ne soit pas caché par le menu */
    }

    .page-number {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--accent-color);
        font-weight: bold;
        margin-bottom: 10px;
        display: block;
    }

    h2 {
        color: var(--primary-color);
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
        margin-top: 0;
    }

    h3 {
        color: #444;
        margin-top: 25px;
    }

    /* --- TABLEAUX --- */
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 0.95rem;
    }

    table th, table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }

    table th {
        background-color: var(--primary-color);
        color: white;
    }

    table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    /* --- LISTES --- */
    ul.content-list {
        list-style-type: disc;
        padding-left: 20px;
    }

    /* --- FOOTER --- */
    footer {
        text-align: center;
        padding: 20px;
        background-color: var(--primary-color);
        color: white;
        margin-top: 50px;
        font-size: 0.9rem;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 600px) {
        nav ul {
            flex-direction: column;
        }
        .page-section {
            padding: 20px;
        }
    }
</style>

<header>
    <h1>Loi d'Unicité du Courant</h1>
    <p>Étude expérimentale et théorique des circuits en série</p>
</header>

<nav>
    <ul>
        <li><a href="#page1">1. Le Sujet</a></li>
        <li><a href="#page2">2. Le Plan</a></li>
        <li><a href="#page3">3. La Recherche</a></li>
        <li><a href="#page4">4. Les Conclusions</a>

@empereursupreme2006-prog
Copy link

empereursupreme2006-prog commented Mar 12, 2026

Print("link")
Print ("subconscient")

@empereursupreme2006-prog
Copy link

empereursupreme2006-prog commented Mar 12, 2026

Print("dollor")

@Wycliff144
Copy link

Wycliff144 commented Mar 15, 2026

HI

@aliabeye55-lab
Copy link

aliabeye55-lab commented Mar 16, 2026

Hi

@ayan7851223-cmd
Copy link

ayan7851223-cmd commented Mar 16, 2026

32714
32714

@is3046517-eng
Copy link

is3046517-eng commented Mar 17, 2026

<title>Sticker Store</title>

My Sticker Store

Download stickers here

Download

@CODI1100
Copy link

CODI1100 commented Mar 17, 2026

<title>Horror Game</title> <style> body { background-color: black; color: white; font-family: Arial, sans-serif; } canvas { display: block; margin: 0 auto; border: 1px solid white; } #menu { display: none; text-align: center; } </style>

Horror Game

Start Game
<script> let canvas = document.getElementById('gameCanvas'); let ctx = canvas.getContext('2d'); let level = 0; let lives = 3; let enemies = []; 
    function startGame() {
        document.getElementById('menu').style.display = 'none';
        requestAnimationFrame(gameLoop);
    }

    function gameLoop() {
        updateGame();
        drawGame();
        requestAnimationFrame(gameLoop);
    }

    function updateGame() {
        // Update game logic such as player movement, enemy AI, collision detection, etc.
    }

    function drawGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // Draw game elements such as player, enemies, background, effects, etc.
    }

    function collisionDetection() {
        // Implement collision detection logic
    }

    function playSoundEffect() {
        // Implement sound effect logic
    }

    // More functions for handling gameplay
</script>

@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>

@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>

@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