Scratch Nickelodeon Edition: Code Editor Example

642 NickelodeonShockwaveFlashpointNostalgiaChannel

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

CSS

Scratch Nickelodeon Edition: Code Editor Example

Recommended