स्क्रैच निकलोडियन संस्करण: कोड संपादक का उदाहरण

27 NickelodeonShockwaveFlashpointNostalgiaChannel

संपादक में खोलें Video अपना कोड प्रकाशित करें

स्क्रैच निकलोडियन संस्करण: कोड संपादक का उदाहरण

अनुशंसित

25 May 2025

3D झुकाव और ऊर्जा रिंग प्रभाव के साथ मूल्य निर्धारण कार्ड

29 May 2025

<!doctype html><html><head><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';
            f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-NBMRDKQ');</script><meta charset="UTF-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="format-detection" content="telephone=no"><title>Scratch - Imagine, Program, Share</title><meta name="description" content="Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations."/><meta name="google-site-verification" content="m_3TAXDreGTFyoYnEmU9mcKB4Xtw5mw6yRkuJtXRKxM"/><meta property="og:url" content="https://scratch.mit.edu/"/><meta property="og:type" content="website"/><meta property="og:title" content="Scratch - Imagine, Program, Share"/><meta property="og:description" content="Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations."/><meta property="og:image" content="https://scratch.mit.edu/images/scratch-og.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="986"/><meta property="og:image:height" content="860"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="stylesheet" href="/css/lib/normalize.min.css"/><link rel="stylesheet" href="/common.css"/><link rel="stylesheet" href="/splash.css"/><script src="/js/polyfill.min.js"></script></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NBMRDKQ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><noscript><p>Your browser has Javascript disabled. Please go to your browser preferences and enable Javascript in order to use Scratch.</p></noscript><div id="app"></div><script src="/js/common.bundle.js"></script><script src="/js/splash.intl.js"></script><script src="/js/splash.bundle.js"></script><script>var loc = window._locale || 'en';
                if (typeof window._messages !== 'undefined' && loc !== 'en') {
                    if (typeof window._messages[loc] === 'undefined') {
                        loc = loc.split('-')[0];
                    }
                    if (typeof window._messages[loc] !== 'undefined') {
                        var localizedTitle = window._messages[loc]['general.' + 'Imagine, Program, Share'.toLowerCase()] || '';
                        if (localizedTitle.length > 0) {
                            document.title = 'Scratch - ' + localizedTitle;
                        }
                    }
                }</script></body></html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scratch 4.0: Nickelodeon Edition</title>
    <style>
        :root {
            --nick-orange: #FF6700;
            --nick-white: #FFFFFF;
            --slime-green: #91BE3F;
            --scratch-purple: #855CD6;
            --ui-bg: #f9f9f9;
            --block-motion: #4C97FF;
            --block-looks: #9966FF;
            --block-sound: #CF63CF;
        }

body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #e5e5e5;
            overflow: hidden;
        }

/* Nickelodeon Header */
        header {
            background-color: var(--nick-orange);
            height: 50px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 4px 0 rgba(0,0,0,0.1);
            z-index: 100;
            position: relative;
        }

.logo {
            font-weight: 900;
            color: white;
            font-style: italic;
            font-size: 24px;
            letter-spacing: -1px;
            margin-right: 30px;
            text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
        }

.controls {
            display: flex;
            gap: 10px;
            background: rgba(255,255,255,0.2);
            padding: 5px 15px;
            border-radius: 25px;
        }

.go-btn { color: #4CAF50; cursor: pointer; font-size: 20px; }
        .stop-btn { color: #FF0000; cursor: pointer; font-size: 20px; }

/* Main Layout */
        .editor-container {
            display: grid;
            grid-template-columns: 60px 250px 1fr 350px;
            height: calc(100vh - 50px);
        }

/* Category Sidebar */
        .sidebar {
            background: white;
            border-right: 1px solid #dddddd;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
            gap: 15px;
        }

.dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.05);
            cursor: pointer;
        }

/* Block Palette */
        .palette {
            background: #fdfdfd;
            border-right: 1px solid #dddddd;
            padding: 10px;
        }

.block {
            height: 40px;
            width: 180px;
            background: var(--block-motion);
            margin-bottom: 8px;
            border-radius: 8px 20px 20px 8px;
            color: white;
            display: flex;
            align-items: center;
            padding-left: 15px;
            font-size: 13px;
            font-weight: bold;
            box-shadow: 0 3px 0 rgba(0,0,0,0.1);
            cursor: grab;
            position: relative;
        }

.block::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 20px;
            width: 30px;
            height: 10px;
            background: inherit;
            border-radius: 5px 5px 0 0;
        }

/* Workspace */
        .workspace {
            background-color: white;
            background-image: radial-gradient(#d7d7d7 1px, transparent 1px);
            background-size: 25px 25px;
            position: relative;
            overflow: auto;
        }

.slime-splat {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 150px;
            opacity: 0.2;
            pointer-events: none;
        }

/* Stage Area */
        .stage-area {
            background: #f0f0f0;
            border-left: 1px solid #dddddd;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }

.stage {
            width: 330px;
            height: 250px;
            background: white;
            border: 4px solid var(--nick-orange);
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
        }

.sprite {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
        }

.sprite-pane {
            margin-top: 10px;
            background: white;
            flex-grow: 1;
            border-radius: 15px;
            padding: 10px;
            border: 1px solid #ddd;
        }

.nick-tab {
            background: var(--slime-green);
            color: white;
            padding: 5px 15px;
            border-radius: 10px 10px 0 0;
            display: inline-block;
            font-size: 12px;
            font-weight: bold;
        }

</style>
</head>
<body>

<header>
        <div class="logo">NICKELODEON</div>
        <div class="controls">
            <span class="go-btn">▶</span>
            <span class="stop-btn">●</span>
        </div>
        <div style="margin-left: auto; color: white; font-weight: bold; font-size: 14px;">
            Scratch 4.0 Nick Edition
        </div>
    </header>

<div class="palette">
            <h3 style="color: #555; font-size: 14px;">Motion</h3>
            <div class="block">move 10 steps</div>
            <div class="block">turn ↻ 15 degrees</div>
            <div class="block">turn ↺ 15 degrees</div>
            <div class="block" style="background: var(--block-looks); margin-top: 20px;">say "SpongeBob!"</div>
            <div class="block" style="background: var(--block-looks);">switch costume to slime</div>
        </div>

<div class="workspace">
            <div class="block" style="position: absolute; top: 100px; left: 100px; background: #FFAB19; border-radius: 20px 20px 8px 8px;">
                when green flag clicked
            </div>
            <div class="block" style="position: absolute; top: 143px; left: 100px;">
                move 50 steps
            </div>
            <div class="block" style="position: absolute; top: 186px; left: 100px; background: var(--block-sound);">
                play sound "Slime Splat"
            </div>
            
            
            <svg class="slime-splat" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path fill="#91BE3F" d="M30,-34.5C41.7,-28.2,55.8,-22.1,60.1,-12.3C64.4,-2.5,58.9,11,51.8,22.9C44.7,34.8,36,45.2,25.1,49.2C14.1,53.2,0.9,50.8,-11.2,46.1C-23.2,41.4,-34.1,34.4,-42.6,24.4C-51.1,14.4,-57.2,1.3,-55.4,-10.8C-53.6,-22.9,-43.8,-34.1,-32.7,-40.5C-21.6,-46.9,-9.2,-48.5,0.7,-49.3C10.5,-50.1,21,-50.1,30,-34.5Z" transform="translate(50 50)" />
            </svg>
        </div>

<div class="stage-area">
            <div class="stage">
                <img src="https://cdn2.scratch.mit.edu/get_image/user/default_90x90.png" class="sprite" alt="Sprite">
            </div>
            
            <div class="sprite-pane">
                <div class="nick-tab">SPRITES</div>
                <div style="display: flex; gap: 10px; margin-top: 10px;">
                    <div style="width: 60px; height: 60px; border: 2px solid var(--nick-orange); border-radius: 10px; background: #eee; display: flex; align-items: center; justify-content: center;">
                         <img src="https://cdn2.scratch.mit.edu/get_image/user/default_90x90.png" width="40" alt="Sprite thumb">
                    </div>
                    <div style="width: 60px; height: 60px; border: 1px solid #ccc; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #ccc;">
                        +
                    </div>
                </div>
                <div style="margin-top: 15px; font-size: 12px; color: #666;">
                    <strong>Sprite1</strong><br>
                    x: 0   y: 0   Size: 100
                </div>
            </div>
        </div>
    </div>

</body>
</html>

स्क्रैच निकलोडियन संस्करण: कोड संपादक का उदाहरण

अनुशंसित

qatar2023 द्वारा एक कोड

3D झुकाव और ऊर्जा रिंग प्रभाव के साथ मूल्य निर्धारण कार्ड

मैथ्यु.राट्रो द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

qatar2023 द्वारा एक कोड

3D झुकाव और ऊर्जा रिंग प्रभाव के साथ मूल्य निर्धारण कार्ड

मैथ्यु.राट्रो द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS