API para desarrolladores: creación e integración | DevFlow

Abrir en el editor Publica tu código

Recomendado

2 June 2025

Transformación de formas de partículas con controles en Three.js

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Platform - Build & Integrate with Our API</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        /* Basic Reset & Variables */
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --accent-color: #28a745;
            --dark-color: #343a40;
            --light-color: #f8f9fa;
            --bg-color: #ffffff;
            --border-radius: 5px;
            --spacing-sm: 1rem;
            --spacing-md: 2rem;
            --spacing-lg: 4rem;
        }

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            background-color: var(--bg-color);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-sm);
        }

h1, h2, h3 {
            margin-bottom: var(--spacing-sm);
            line-height: 1.2;
            color: var(--dark-color);
        }

p {
            margin-bottom: var(--spacing-sm);
        }

a {
            text-decoration: none;
            color: var(--primary-color);
        }

a:hover {
            text-decoration: underline;
        }

/* Buttons */
        .button {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius);
            transition: background-color 0.3s ease, transform 0.2s ease;
            font-weight: 600;
            border: none;
            cursor: pointer;
            text-align: center;
        }

.button:hover {
            background-color: #0056b3;
            text-decoration: none;
            transform: translateY(-2px);
        }

.button.secondary {
            background-color: var(--secondary-color);
        }

.button.secondary:hover {
            background-color: #5a6268;
        }

/* Header */
        header {
            background-color: var(--bg-color);
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid #eee;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
        }

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark-color);
        }

.logo a {
            color: inherit;
            text-decoration: none;
        }

nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

nav ul li {
            margin-left: var(--spacing-md);
        }

nav ul li a {
            color: var(--dark-color);
            font-weight: 600;
            transition: color 0.3s ease;
        }

nav ul li a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

.cta-buttons {
            display: flex;
            gap: 0.5rem;
        }

/* Hero Section */
        .hero {
            background-color: #e9f5ff; /* Light blueish background */
            padding: var(--spacing-lg) 0;
            text-align: center;
        }

.hero h1 {
            font-size: clamp(2rem, 5vw, 3.5rem); /* Responsive font size */
            margin-bottom: var(--spacing-sm);
            color: var(--dark-color);
        }

.hero p {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: var(--secondary-color);
            max-width: 700px;
            margin: 0 auto var(--spacing-md) auto;
        }

.hero-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

/* Features Section */
        .features {
            padding: var(--spacing-lg) 0;
            background-color: var(--bg-color);
            text-align: center;
        }

.features h2 {
            margin-bottom: var(--spacing-lg);
            font-size: clamp(1.8rem, 4vw, 2.5rem);
        }

.feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-md);
        }

.feature-item {
            background-color: var(--light-color);
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            text-align: left;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 3px solid var(--primary-color); /* Subtle accent */
        }

.feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }

.feature-item h3 {
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

/* Code Example Section */
        .code-example {
            background-color: var(--dark-color);
            color: white;
            padding: var(--spacing-lg) 0;
            text-align: center;
        }

.code-example h2 {
            color: white;
            margin-bottom: var(--spacing-md);
            font-size: clamp(1.8rem, 4vw, 2.5rem);
        }

.code-example pre {
            background-color: #282c34; /* Darker code background */
            color: #abb2bf; /* Light grey for code text */
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
            overflow-x: auto;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            font-size: 0.9rem;
            line-height: 1.5;
        }

/* Call to Action Bottom */
        .cta-bottom {
            padding: var(--spacing-lg) 0;
            text-align: center;
            background-color: #e9ecef; /* Light grey background */
        }

.cta-bottom h2 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: var(--spacing-sm);
        }

.cta-bottom p {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: var(--secondary-color);
            margin-bottom: var(--spacing-md);
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: var(--spacing-md) 0;
            text-align: center;
            font-size: 0.9rem;
        }

footer .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

footer .footer-links a {
            color: white;
            margin: 0 0.5rem;
            transition: color 0.3s ease;
        }

footer .footer-links a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

/* Responsive Adjustments */
        @media (max-width: 768px) {
            header .container {
                flex-direction: column;
                gap: 1rem;
            }

nav ul {
                justify-content: center;
                margin-top: 0.5rem;
                gap: 1rem;
            }

nav ul li {
                margin-left: 0; /* Remove horizontal margin */
            }

.cta-buttons {
                width: 100%;
                justify-content: center;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero p {
                font-size: 1.1rem;
            }

.feature-grid {
                grid-template-columns: 1fr; /* Stack features on small screens */
            }

.feature-item {
                text-align: center;
            }

.code-example pre {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo"><a href="#">DevFlow API</a></div>
            <nav>
                <ul>
                    <li><a href="#">Docs</a></li>
                    <li><a href="#">API Reference</a></li>
                    <li><a href="#">SDKs</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Community</a></li>
                </ul>
            </nav>
            <div class="cta-buttons">
                <a href="#" class="button secondary">Login</a>
                <a href="#" class="button">Sign Up</a>
            </div>
        </div>
    </header>

<main>
        <section class="hero">
            <div class="container">
                <h1>Build the Future with Our Powerful API</h1>
                <p>Unlock endless possibilities. Our robust and easy-to-use API empowers developers to integrate seamlessly and innovate rapidly.</p>
                <div class="hero-buttons">
                    <a href="#" class="button">Get Started Now</a>
                    <a href="#" class="button secondary">Read Documentation</a>
                </div>
            </div>
        </section>

<section class="features">
            <div class="container">
                <h2>Why Developers Choose Us</h2>
                <div class="feature-grid">
                    <div class="feature-item">
                        <h3>Comprehensive Docs</h3>
                        <p>Detailed guides, tutorials, and examples to get you up and running quickly with our API.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Robust SDKs</h3>
                        <p>Official SDKs for multiple languages (Python, Node.js, Ruby, Go) to streamline your development process.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Scalable Infrastructure</h3>
                        <p>Built on a reliable, high-performance infrastructure designed to scale effortlessly with your application's growth.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Dedicated Support</h3>
                        <p>Access to our expert support team and a vibrant developer community forum for quick assistance and collaboration.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Real-time Data</h3>
                        <p>Integrate real-time data streams and custom webhooks for dynamic, event-driven applications.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Secure & Compliant</h3>
                        <p>Enterprise-grade security and compliance standards ensure your data and applications are always protected.</p>
                    </div>
                </div>
            </div>
        </section>

<section class="code-example">
            <div class="container">
                <h2>Simple Integration, Powerful Results</h2>
                <pre><code>
// Example: Fetching user data with our JavaScript SDK
import { DevFlowClient } from '@devflow/sdk';

const client = new DevFlowClient('YOUR_API_KEY');

async function getUserProfile(userId) {
  try {
    const response = await client.users.get(userId);
    console.log('User Profile:', response.data);
    // Expected output: { id: 'user123', name: 'Jane Doe', email: 'jane@example.com' }
  } catch (error) {
    console.error('Error fetching user profile:', error.message);
  }
}

getUserProfile('user123');
                </code></pre>
            </div>
        </section>

<section class="cta-bottom">
            <div class="container">
                <h2>Ready to Start Building?</h2>
                <p>Join thousands of developers building amazing products and services with DevFlow API. Sign up today!</p>
                <a href="#" class="button">Create Your Free Account</a>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <p>© 2023 DevFlow Inc. All rights reserved.</p>
            <div class="footer-links">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Service</a>
                <a href="#">API Status</a>
                <a href="#">Contact Us</a>
            </div>
        </div>
    </footer>
</body>
</html>

API para desarrolladores: creación e integración | DevFlow

Recomendado

Un código de alejandrokundrah

Un código de Mete

Transformación de formas de partículas con controles en Three.js

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Un código de Mete

Transformación de formas de partículas con controles en Three.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS