zoo_planner/index.html at main · AWRootbeard/zoo_planner · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoo Planner - Design Your Zoo!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="attribution">Wake the Turtle Games</div>
            <h1>🦁 Zoo Planner 🦒</h1>
            <div class="version">v0.2</div>
            <div class="zoo-name-container">
                <input type="text" id="zooName" class="zoo-name-input" placeholder="My Amazing Zoo" maxlength="50" />
                <span class="edit-hint">Click to name your zoo!</span>
            </div>
            <button id="shareBtn" class="share-btn" title="Copy link to share your zoo">
                🔗 Share Zoo
            </button>
            <div class="math-practice-toggle-container">
                <label class="math-practice-toggle">
                    <input type="checkbox" id="mathPracticeToggle" checked>
                    <span class="toggle-slider"></span>
                    <span class="toggle-label">📐 Math Practice</span>
                </label>
            </div>
        </header>

        <div class="main-content">
            <!-- Left sidebar with buildings palette -->
            <aside class="buildings-palette">
                <h2>Buildings</h2>
                <p class="instructions">Drag buildings onto the grid</p>
                <div class="building-list" id="buildingList">
                    <!-- Buildings will be generated here -->
                </div>

                <h2 class="collapsible-header" id="decorationsHeader">
                    <span class="collapse-icon">▶</span> Decorations
                </h2>
                <div class="collapsible-content collapsed" id="decorationsContent">
                    <p class="instructions">Add decorations to make it pretty!</p>
                    <div class="building-list" id="decorationList">
                        <!-- Decorations will be generated here -->
                    </div>
                </div>

                <div class="tools">
                    <button id="startOver" class="clear-btn">
                        🔄 Start Over
                    </button>
                </div>
            </aside>

            <!-- Main grid area -->
            <main class="grid-container">
                <svg id="zooGrid" class="zoo-grid">
                    <!-- Grid and items will be rendered here -->
                </svg>

                <div class="summary-section">
                    <h2>📊 Enclosure Summary</h2>
                    <table id="summaryTable" class="summary-table">
                        <thead>
                            <tr>
                                <th>Animal</th>
                                <th>Perimeter</th>
                                <th>Area</th>
                            </tr>
                        </thead>
                        <tbody id="summaryBody">
                            <tr class="empty-state">
                                <td colspan="3">No enclosures yet - draw some animals!</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </main>

            <!-- Right sidebar with animal selection -->
            <aside class="animals-info">
                <h2>Pick an Animal</h2>
                <p class="instructions">Click an animal, then draw its enclosure!</p>
                <div class="animal-examples" id="animalList">
                    <!-- Animals will be generated here -->
                </div>
            </aside>
        </div>
    </div>

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