Scratch/weebly-embed.html at main · Line-us/Scratch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--
  WEEBLY EMBED CODE
  Copy this HTML into a Weebly HTML/Embed element
  This creates a compact demo section for your website
-->

<div style="max-width: 800px; margin: 20px auto; font-family: Arial, sans-serif;">
    <!-- Header Section -->
    <div style="background: linear-gradient(135deg, #FF6680, #FF4D6D); color: white; padding: 25px; border-radius: 10px; text-align: center; margin-bottom: 25px;">
        <h2 style="margin: 0 0 10px 0; font-size: 28px;">🎨 Program Line-us with TurboWarp</h2>
        <p style="margin: 0; font-size: 16px; opacity: 0.9;">Visual programming blocks for your Line-us drawing robot</p>
    </div>

    <!-- Quick Demo Section -->
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h3 style="color: #333; margin-top: 0;">✨ What You Can Do</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 15px 0;">
            <div style="background: white; padding: 15px; border-radius: 5px; border-left: 4px solid #FF6680;">
                <strong>🔗 Easy Connection</strong><br>
                Connect to your Line-us with simple blocks
            </div>
            <div style="background: white; padding: 15px; border-radius: 5px; border-left: 4px solid #FF6680;">
                <strong>🎯 Precise Control</strong><br>
                Move to exact coordinates, control pen up/down
            </div>
            <div style="background: white; padding: 15px; border-radius: 5px; border-left: 4px solid #FF6680;">
                <strong>🎨 Creative Projects</strong><br>
                Draw shapes, patterns, and interactive art
            </div>
        </div>
    </div>

    <!-- Download Section -->
    <div style="background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; padding: 20px; margin: 20px 0;">
        <h3 style="margin-top: 0; color: #856404;">⚠️ Desktop Version Required</h3>
        <p style="margin: 10px 0; color: #856404;">Due to browser security, you need TurboWarp Desktop to connect to Line-us. The web version shows blocks but can't connect to hardware.</p>

        <div style="text-align: center; margin: 20px 0;">
            <a href="https://desktop.turbowarp.org/"
               style="display: inline-block; background: #FF6680; color: white; padding: 12px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; margin: 5px;"
               target="_blank">
                📥 Download TurboWarp Desktop
            </a>
            <a href="https://github.com/Line-us/Scratch/raw/main/line-us-extension.js"
               style="display: inline-block; background: #28a745; color: white; padding: 12px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; margin: 5px;"
               download>
                🔧 Download Extension
            </a>
        </div>
    </div>

    <!-- Example Code Section -->
    <div style="background: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0;">
        <h3 style="margin-top: 0; color: #333;">📝 Example: Draw a Square</h3>
        <div style="background: #2d3748; color: #e2e8f0; padding: 15px; border-radius: 5px; font-family: 'Courier New', monospace; font-size: 14px; overflow-x: auto;">
When green flag clicked<br>
Connect to Line-us [192.168.1.100]<br>
Pen [down]<br>
repeat (4)<br>
&nbsp;&nbsp;Move to X[50] Y[0]<br>
&nbsp;&nbsp;turn clockwise 90 degrees<br>
end<br>
Pen [up]<br>
Go to home position
        </div>
        <p style="margin: 10px 0 0 0; font-size: 14px; color: #666;">
            <em>Replace 192.168.1.100 with your Line-us IP address</em>
        </p>
    </div>

    <!-- Quick Start Steps -->
    <div style="background: #d4edda; border: 2px solid #28a745; border-radius: 8px; padding: 20px; margin: 20px 0;">
        <h3 style="margin-top: 0; color: #155724;">🚀 Quick Start (3 Steps)</h3>
        <div style="color: #155724;">
            <p style="margin: 8px 0;"><strong>1.</strong> Download and install TurboWarp Desktop</p>
            <p style="margin: 8px 0;"><strong>2.</strong> Load the Line-us extension file</p>
            <p style="margin: 8px 0;"><strong>3.</strong> Connect to your Line-us and start drawing!</p>
        </div>
    </div>

    <!-- Call to Action -->
    <div style="text-align: center; margin: 25px 0;">
        <a href="https://github.com/Line-us/Scratch"
           style="display: inline-block; background: #007bff; color: white; padding: 15px 30px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px;"
           target="_blank">
            📚 View Full Documentation & Examples
        </a>
    </div>
</div>

<style>
/* Responsive styles for mobile */
@media (max-width: 768px) {
    div[style*="grid-template-columns"] {
        display: block !important;
    }
    div[style*="grid-template-columns"] > div {
        margin: 10px 0 !important;
    }
}
</style>