shape-plotter/index.html at master · vagarwal87/shape-plotter · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShapePlotter | Premium Shape Editor</title>
    <meta name="description" content="A clean, modern tool to visualize shapes and colors with rich interactive UI.">
    <!-- Google Fonts: Inter and Outfit -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar Controls -->
        <aside class="sidebar">
            <header class="sidebar-header">
                <div class="logo">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="4" y="4" width="24" height="24" rx="6" fill="url(#logo-grad)" />
                        <path d="M16 8L20 16L16 24L12 16L16 8Z" fill="white" />
                        <defs>
                            <linearGradient id="logo-grad" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#6366F1" />
                                <stop offset="1" stop-color="#A855F7" />
                            </linearGradient>
                        </defs>
                    </svg>
                    <h1>ShapePlotter</h1>
                </div>
                <p class="subtitle">Customize and visualize</p>
            </header>

            <section class="controls">
                <div class="control-group">
                    <label for="shape-select">Select Shape</label>
                    <div class="select-wrapper">
                        <select id="shape-select">
                            <option value="circle">Circle</option>
                            <option value="square">Square</option>
                            <option value="triangle">Triangle</option>
                            <option value="pentagon">Pentagon</option>
                            <option value="star">Star</option>
                        </select>
                    </div>
                </div>

                <div class="control-group">
                    <label for="color-select">Choose Palette</label>
                    <div class="color-grid" id="color-grid">
                        <!-- Custom color bubbles will go here -->
                    </div>
                    <input type="hidden" id="color-value" value="#6366F1">
                </div>

                <div class="stats">
                    <div class="stat-item">
                        <span class="label">Current Shape</span>
                        <span class="value" id="current-shape">Circle</span>
                    </div>
                    <div class="stat-item">
                        <span class="label">Primary Color</span>
                        <span class="value" id="current-color">#6366F1</span>
                    </div>
                </div>
            </section>

            <footer class="sidebar-footer">
                <button id="reset-btn" class="secondary-btn">Reset Defaults</button>
            </footer>
        </aside>

        <!-- Main Workspace -->
        <main class="workspace">
            <div class="canvas-container" id="canvas-container">
                <div class="canvas-glow"></div>
                <div id="plot-area">
                    <!-- SVG shape will be injected here -->
                </div>
            </div>

            <div class="workspace-footer">
                <div class="hint">Use the sidebar to change the visualization in real-time.</div>
            </div>
        </main>
    </div>

    <script src="app.js"></script>
</body>
</html>