Skip to content

Instantly share code, notes, and snippets.

@isdaviddong

isdaviddong/index.html

Last active January 30, 2026 20:09
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>
@attitudepower96-dot
Copy link

attitudepower96-dot commented Jan 13, 2026

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@sytarmwra-arch
Copy link

sytarmwra-arch commented Jan 23, 2026

لقد عملت بجد وكانت نتيجه رائعه ولكن انا هذا التطبيق انا لا اريد تطبيق انا انا اريد سيت ويب يكون على المتصفح جوجل يكون اسمه 7m7 ويكون فيه الالعاب ويكون خاص بي اضع فيه الالعاب التي اريد لكي افعل لها ترويج من القنوات تبعي والناس يدخلون له ويحمل الالعاب

@sytarmwra-arch
Copy link

sytarmwra-arch commented Jan 23, 2026

### مورأ سيتار

@quan23102310-wq
Copy link

quan23102310-wq commented Jan 23, 2026 via email

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

``ebook-landing-page/
├── index.html # Main landing page
├── css/
│ ├── styles.css # Main stylesheet (includes responsive design)
│ └── animations.css # Subtle animations (e.g., fade-ins, hovers)
├── js/
│ ├── script.js # Interactive elements (e.g., countdown timer, form validation)
│ └── checkout.js # Placeholder for payment integration
├── images/ # Place your images here (e.g., ebook-cover.jpg, author-photo.jpg)
│ ├── ebook-cover.jpg
│ ├── author-photo.jpg
│ ├── testimonial1.jpg
│ └── ...
├── pages/ # Additional pages (linked from footer)
│ ├── privacy-policy.html
│ ├── terms.html
│ └── contact.html
└── README.md # Instructions for setup and customization

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

``

<title>[E-book Title] - Unlock Your Potential Today</title>
[E-book Title] Cover

From Overwhelmed to Unstoppable: Master [Topic] in 30 Days

Discover proven strategies, real-world examples, and actionable steps to [solve problem]. Join [number] readers who've transformed their lives.

Get the E-book Now - $29

Limited-time offer: Ends in 24:00:00

<!-- About the E-book -->
<section id="about" class="section">
    <div class="container">
        <h2>What You'll Learn</h2>
        <p>This e-book solves [problem] by teaching [key skills]. It's for [target audience], delivering [benefits].</p>
        <ul class="benefits-list">
            <li>Step-by-step guides to [outcome 1]</li>
            <li>Real case studies from [industry]</li>
            <li>Tools and templates for immediate application</li>
        </ul>
    </div>
</section>

<!-- What's Inside -->
<section id="contents" class="section">
    <div class="container">
        <h2>What's Inside</h2>
        <div class="toc">
            <h3>Table of Contents</h3>
            <ul>
                <li>Chapter 1: [Highlight 1] - [Brief description]</li>
                <li>Chapter 2: [Highlight 2] - [Brief description]</li>
                <!-- Add more chapters -->
            </ul>
        </div>
    </div>
</section>

<!-- Benefits & Results -->
<section id="benefits" class="section">
    <div class="container">
        <h2>Benefits & Results</h2>
        <div class="transformation">
            <div class="before-after">
                <div class="before">Before: [Problem state]</div>
                <div class="after">After: [Transformed state]</div>
            </div>
            <ul class="outcomes">
                <li>Increase [metric] by 50%</li>
                <li>Save [time/money] weekly</li>
                <li>Gain confidence in [skill]</li>
            </ul>
        </div>
    </div>
</section>

<!-- Author Section -->
<section id="author" class="section">
    <div class="container">
        <h2>About the Author</h2>
        <img src="images/author-photo.jpg" alt="Author Name" class="author-photo">
        <p>[Author Name] is a [expertise] with [years] of experience. [Credibility: e.g., Featured in Forbes, helped 10k+ clients].</p>
    </div>
</section>

<!-- Testimonials -->
<section id="testimonials" class="section">
    <div class="container">
        <h2>What Readers Say</h2>
        <div class="testimonial-grid">
            <div class="testimonial">
                <img src="images/testimonial1.jpg" alt="Reader 1">
                <p>"This book changed my life! [Quote]."</p>
                <cite>- [Name], [Title]</cite>
            </div>
            <!-- Add more testimonials -->
        </div>
    </div>
</section>

<!-- Pricing & Offer -->
<section id="pricing" class="section">
    <div class="container">
        <h2>Get Instant Access</h2>
        <div class="pricing-card">
            <h3>$29</h3>
            <p>One-time payment, instant PDF download.</p>
            <ul class="bonuses">
                <li>Bonus: [Bonus 1]</li>
                <li>Bonus: [Bonus 2]</li>
            </ul>
            <p class="guarantee">30-day money-back guarantee.</p>
            <a href="#checkout" class="btn-primary">Buy Now</a>
        </div>
    </div>
</section>

<!-- Checkout Section -->
<section id="checkout" class="section">
    <div class="container">
        <h2>Secure Checkout</h2>
        <form id="checkout-form" class="checkout-form">
            <input type="email" placeholder="Email" required>
            <input type="text" placeholder="Name" required>
            <button type="submit" class="btn-primary">Complete Purchase</button>
        </form>
        <p>Instant delivery via email. Secure payment powered by [Stripe/PayPal].</p>
    </div>
</section>

<!-- FAQ -->
<section id="faq" class="section">
    <div class="container">
        <h2>Frequently Asked Questions</h2>
        <details>
            <summary>Format?</summary>
            <p>PDF, accessible on any device.</p>
        </details>
        <details>
            <summary>Refund Policy?</summary>
            <p>30-day guarantee if unsatisfied.</p>
        </details>
        <!-- Add more -->
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <p>&copy; 2023 [Your Name]. All rights reserved.</p>
        <ul>
            <li><a href="pages/privacy-policy.html">Privacy Policy</a></li>
            <li><a href="pages/terms.html">Terms</a></li>
            <li><a href="pages/contact.html">Contact</a></li>
        </ul>
    </div>
</footer>

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

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

/* Modern, clean styles with high contrast CTAs */
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background: #f9f9f9;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 100px 0;
text-align: center;
}

.hero-content h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.btn-primary {
background: #ff6b35;
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: 700;
display: inline-block;
transition: background 0.3s;
}

.btn-primary:hover {
background: #e55a2b;
}

.section {
padding: 80px 0;
text-align: center;
}

.benefits-list, .outcomes {
list-style: none;
padding: 0;
}

.benefits-list li, .outcomes li {
margin: 10px 0;
}

.pricing-card {
border: 1px solid #ddd;
padding: 40px;
border-radius: 10px;
background: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.footer {
background: #333;
color: white;
padding: 20px 0;
text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2rem;
}
.btn-primary {
padding: 12px 25px;
}
}

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

/* Subtle animations */
.fade-in {
animation: fadeIn 1s ease-in;
}

@Keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.btn-primary:hover {
transform: scale(1.05);
}

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

// Countdown timer for urgency
function startCountdown() {
const countdownElement = document.getElementById('countdown');
let time = 24 * 60 * 60; // 24 hours in seconds
setInterval(() => {
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
countdownElement.textContent = ${hours}:${minutes}:${seconds};
time--;
if (time < 0) time = 24 * 60 * 60; // Reset
}, 1000);
}

document.addEventListener('DOMContentLoaded', startCountdown);

// Add fade-in to sections on scroll
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
});
sections.forEach(section => observer.observe(section));

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

``// Placeholder for payment integration (e.g., Stripe)
document.getElementById('checkout-form').addEventListener('submit', (e) => {
e.preventDefault();
// Integrate with Stripe/PayPal here
alert('Payment processed! E-book sent to your email.');
// Redirect or show success message
});

@suptrend85-source
Copy link

suptrend85-source commented Jan 23, 2026

<title>Privacy Policy</title>

Privacy Policy

[Your privacy policy text here.]

Back to Home

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Meri Pehli Website</title>

Assalamu Alaikum

Yeh meri pehli website hai.

Click Me

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Meri Pehli Website</title>

Assalamu Alaikum

Yeh meri pehli website hai.

Click Me

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Meri Pehli Website</title>

Assalamu Alaikum

Yeh meri pehli website hai.

Click Me

@mohammadhaiderzaya-art
Copy link

mohammadhaiderzaya-art commented Jan 24, 2026

<title>Islamic Books</title> <style> body { font-family: Arial; background-color: #f2f2f2; text-align: center; } .book { background: white; margin: 15px; padding: 15px; border-radius: 8px; } h1 { color: green; } </style>

📖 Islamic Books Library

Quran, Hadith aur Islamic Kitaben

Quran Sharif

Allah ka paigham

Hadith

Rasool ﷺ ki baatein

Nahjul Balagha

Imam Ali (A.S) ke khutbe

@quan23102310-wq
Copy link

quan23102310-wq commented Jan 24, 2026 via email

@claurecallisayamariajulisa-sys
Copy link

claurecallisayamariajulisa-sys commented Jan 26, 2026

<title>Quiz Médico: Trabajo de Parto y Aborto</title> <style> body { font-family: Arial, sans-serif; background: #f2f6f8; padding: 20px; } .quiz-container { background: white; max-width: 600px; margin: auto; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { text-align: center; } .question { margin-bottom: 15px; } button { margin-top: 10px; padding: 10px; width: 100%; background: #2a7fff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background: #1f5fcc; } </style>

Quiz Médico

Siguiente

<script> const quiz = [ { q: "¿Qué es el trabajo de parto?", a: ["Proceso de dilatación y expulsión del feto", "Control prenatal", "Cirugía obstétrica"], c: 0 }, { q: "¿Cuál es un signo de inicio del trabajo de parto?", a: ["Contracciones regulares", "Náuseas", "Fiebre"], c: 0 }, { q: "¿Cuántas fases tiene el trabajo de parto?", a: ["Dos", "Tres", "Cuatro"], c: 1 }, { q: "¿Qué ocurre en la fase de dilatación?", a: ["Expulsión del feto", "Apertura del cuello uterino", "Alumbramiento"], c: 1 }, { q: "¿Qué es el alumbramiento?", a: ["Salida del feto", "Salida de la placenta", "Inicio de contracciones"], c: 1 }, { q: "¿Qué es el aborto?", a: ["Interrupción del embarazo antes de la viabilidad fetal", "Parto prematuro", "Cesárea"], c: 0 }, { q: "¿Cuál es una causa frecuente de aborto espontáneo?", a: ["Alteraciones cromosómicas", "Ejercicio moderado", "Vacunación"], c: 0 }, { q: "¿Qué tipo de aborto ocurre por causas naturales?", a: ["Inducido", "Espontáneo", "Séptico"], c: 1 }, { q: "¿Qué profesional debe atender un aborto complicado?", a: ["Médico", "Enfermero sin supervisión", "Personal administrativo"], c: 0 }, { q: "¿Qué es fundamental en la atención médica del aborto?", a: ["Juicio moral", "Confidencialidad y atención segura", "Negación del servicio"], c: 1 } ]; let current = 0; let score = 0; function loadQuestion() { document.getElementById("question").innerText = quiz[current].q; const answersDiv = document.getElementById("answers"); answersDiv.innerHTML = ""; quiz[current].a.forEach((answer, index) => { answersDiv.innerHTML += `
${answer}
`; }); } function nextQuestion() { const selected = document.querySelector('input[name="answer"]:checked'); if (!selected) return alert("Selecciona una respuesta"); if (parseInt(selected.value) === quiz[current].c) score++; current++; if (current < quiz.length) { loadQuestion(); } else { document.querySelector(".quiz-container").innerHTML = `

Resultado final

Tu puntaje: ${score} / ${quiz.length}

¡Gracias por participar!

`; } } loadQuestion(); </script>

@mavia9227-pixel
Copy link

mavia9227-pixel commented Jan 27, 2026

<title>StrideElite - Premium Shoes for Style and Comfort</title> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "name": "StrideElite Runner", "image": "https://example.com/shoe-image.jpg", "description": "Comfortable running shoes with premium materials.", "brand": "StrideElite", "offers": { "@type": "Offer", "price": "99.99", "priceCurrency": "USD" } } </script> <style> /* Global Styles */ body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; color: #000; background: #fff; } h1, h2, h3 { font-family: 'Montserrat', sans-serif; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .accent { color: #C8102E; } .btn { background: #C8102E; color: #fff; padding: 10px 20px; border: none; cursor: pointer; transition: background 0.3s; } .btn:hover { background: #A00; } /* Navigation */ nav { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #000; z-index: 100; } nav ul { list-style: none; display: flex; justify-content: space-between; padding: 10px; margin: 0; } nav a { text-decoration: none; color: #000; font-weight: bold; } /* Hero */ .hero { background: url('https://via.placeholder.com/1200x600?text=Latest+Shoes+Collection') no-repeat center/cover; height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .hero h1 { font-size: 3em; margin: 0; } .hero p { font-size: 1.2em; } /* Sections */ section { padding: 50px 0; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .product { border: 1px solid #ddd; padding: 20px; text-align: center; transition: transform 0.3s; } .product:hover { transform: scale(1.05); } .product img { max-width: 100%; height: auto; } /* Reviews */ .reviews { background: #f9f9f9; } .review { margin: 20px 0; } .stars { color: #FFD700; } /* Footer */ footer { background: #000; color: #fff; text-align: center; padding: 20px; } .trust-badges { display: flex; justify-content: center; gap: 20px; margin: 20px 0; } .trust-badges div { display: flex; align-items: center; } /* Mobile Responsiveness */ @media (max-width: 768px) { .hero h1 { font-size: 2em; } nav ul { flex-direction: column; } .grid { grid-template-columns: 1fr; } } /* Animations */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; } .fade-in.visible { opacity: 1; transform: translateY(0); } </style> 
<!-- Home Page -->
<section id="home" class="hero">
    <div>
        <h1>StrideElite: Style Meets Comfort</h1>
        <p>Discover our latest collection of premium shoes – stylish, comfortable, and affordable for every step.</p>
        <button class="btn" onclick="scrollToSection('shop')">Shop Now</button>
    </div>
</section>

<!-- Shop Page -->
<section id="shop" class="container">
    <h2>Shop by Category</h2>
    <div class="grid">
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Men+Shoes" alt="Men's Shoes Collection" loading="lazy">
            <h3>Men Shoes</h3>
            <p>Stylish and durable for everyday wear.</p>
            <button class="btn">Explore</button>
        </div>
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Women+Shoes" alt="Women's Shoes Collection" loading="lazy">
            <h3>Women Shoes</h3>
            <p>Elegant designs for comfort and fashion.</p>
            <button class="btn">Explore</button>
        </div>
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Sports+Shoes" alt="Sports Shoes Collection" loading="lazy">
            <h3>Sports Shoes</h3>
            <p>Performance footwear for athletes.</p>
            <button class="btn">Explore</button>
        </div>
        <div class="product fade-in">
            <img src="https://via.placeholder.com/300x200?text=Casual+Shoes" alt="Casual Shoes Collection" loading="lazy">
            <h3>Casual Shoes</h3>
            <p>Relaxed styles for leisure and comfort.</p>
            <button class="btn">Explore</button>
        </div>
    </div>
    <!-- Customer Reviews -->
    <div class="reviews">
        <h3>What Our Customers Say</h3>
        <div class="review">
            <div class="stars">★★★★★</div>
            <p>"These shoes are incredibly comfortable and stylish. Worth every penny!" - Alex R.</p>
        </div>
        <div class="review">
            <div class="stars">★★★★★</div>
            <p>"Fast delivery and easy returns. Highly recommend!" - Jamie L.</p>
        </div>
    </div>
</section>

<!-- Product Detail Page (Example for One Product) -->
<section id="product-detail" class="container" style="display: none;"> <!-- Toggle visibility with JS -->
    <div class="grid">
        <div>
            <img src="https://via.placeholder.com/500x500?text=Product+Image" alt="StrideElite Runner Shoe" loading="lazy">
        </div>
        <div>
            <h2>StrideElite Runner</h2>
            <p class="accent">$99.99</p>
            <p>High-quality running shoes with breathable materials for ultimate comfort.</p>
            <label for="size">Size:</label>
            <select id="size">
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
            </select>
            <button class="btn">Add to Cart</button>
            <div class="reviews">
                <h3>Reviews</h3>
                <div class="review">
                    <div class="stars">★★★★★</div>
                    <p>"Perfect fit and great for long runs!" - Sam T.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Us Page -->
<section id="about" class="container">
    <h2>About StrideElite</h2>
    <p>Founded in 2020, StrideElite is dedicated to crafting premium shoes that blend style, comfort, and affordability. Our brand story is rooted in innovation – using sustainable materials and expert craftsmanship to ensure every pair delivers on our quality promise: shoes that last, feel great, and look even better.</p>
</section>

<!-- Contact Us Page -->
<section id="contact" class="container">
    <h2>Contact Us</h2>
    <form>
        <input type="text" placeholder="Name" required><br>
        <input type="email" placeholder="Email" required><br>
        <textarea placeholder="Message" required></textarea><br>
        <button class="btn" type="submit">Send</button>
    </form>
    <a href="https://wa.me/1234567890" class="btn" style="margin-top: 20px;">Chat on WhatsApp</a>
</section>

<!-- Footer with Trust Badges -->
<footer>
    <div class="trust-badges">
        <div><span>🔒</span> Secure Payment</div>
        <div><span>🚚</span> Fast Delivery</div>
        <div><span>↩️</span> Easy Returns</div>
    </div>
    <p>&copy; 2023 StrideElite. All rights reserved.</p>
</footer>

<script>
    // Smooth scrolling and animations
    function scrollToSection(id) {
        document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
    }
    // Fade-in on scroll
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    });
    document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
    // Toggle product detail (for demo)
    document.querySelectorAll('.product .btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('product-detail').style.display = 'block';
            scrollToSection('product-detail');
        });
    });
</script>

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