Creator-Launchpad/launchpad.html at main · Moses-Code-Dev/Creator-Launchpad · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Creator Launchpad</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <header>
        <div class="header-left">
            <div class="logo" id="logoContainer" title="Click to change logo, right-click to reset">
                <div id="logoContent">🚀</div>
                <span>Creator Launchpad</span>
            </div>
        </div>

        <div class="search-container">
            <input
                    type="text"
                    class="search-input"
                    id="searchInput"
                    placeholder="Search links or press '/' to focus..."
                    autocomplete="off"
            />
            <span class="search-icon">🔍</span>
        </div>

        <div class="datetime">
            <div class="time" id="clock">00:00</div>
            <div id="date">Monday, January 1</div>
        </div>
    </header>

    <div class="controls">
        <button class="btn" id="addLinkBtn">
            <span>➕</span>
            <span>Add Link</span>
        </button>
        <button class="btn" id="analyticsBtn">
            <span>📊</span>
            <span>Analytics</span>
        </button>
        <button class="btn" id="settingsBtn">
            <span>⚙️</span>
            <span>Settings</span>
        </button>
        <button class="btn" id="exportBtn">
            <span>💾</span>
            <span>Export</span>
        </button>
        <button class="btn" id="importBtn">
            <span>📥</span>
            <span>Import</span>
        </button>
    </div>

    <main id="categories"></main>
</div>

<!-- Add/Edit Link Modal -->
<div class="modal" id="addModal">
    <div class="modal-content">
        <h2 class="modal-header">Add New Link</h2>
        <form id="addLinkForm">
            <div class="form-group">
                <label class="form-label">Name</label>
                <input type="text" class="form-input" id="linkName" required />
            </div>
            <div class="form-group">
                <label class="form-label">URL</label>
                <input type="url" class="form-input" id="linkUrl" placeholder="https://..." required />
            </div>
            <div class="form-group">
                <label class="form-label">Category</label>
                <input type="text" class="form-input" id="linkCategoryInput" list="categoryOptions" placeholder="e.g., Publishing">
                <datalist id="categoryOptions"></datalist>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" id="cancelAddBtn">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Link</button>
            </div>
        </form>
    </div>
</div>

<!-- Settings Modal -->
<div class="modal" id="settingsModal">
    <div class="modal-content">
        <h2 class="modal-header">Settings</h2>
        <div class="form-group">
            <label class="form-label">Primary Background</label>
            <input type="color" class="color-picker" id="bgColorPrimary" />
        </div>
        <div class="form-group">
            <label class="form-label">Secondary Background</label>
            <input type="color" class="color-picker" id="bgColorSecondary" />
        </div>
        <div class="form-group">
            <label class="form-label">Accent Color</label>
            <input type="color" class="color-picker" id="accentColor" />
        </div>
        <div class="modal-actions">
            <button type="button" class="btn btn-secondary" id="resetThemeBtn">Reset Theme</button>
            <button type="button" class="btn btn-danger" id="resetStatsBtn">Reset Link Stats</button>
            <button type="button" class="btn btn-primary" id="closeSettingsBtn">Done</button>
        </div>
    </div>
</div>

<!-- Analytics Modal -->
<div class="modal" id="analyticsModal">
    <div class="modal-content">
        <h2 class="modal-header">Usage Analytics</h2>
        <div id="analyticsContent">
            <!-- Analytics data will be injected here by JS -->
        </div>
        <div class="modal-actions">
            <button type="button" class="btn btn-primary" id="closeAnalyticsBtn">Close</button>
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal" id="confirmModal">
    <div class="modal-content">
        <h2 class="modal-header" id="confirmTitle">Are you sure?</h2>
        <p id="confirmMessage">This action cannot be undone.</p>
        <div class="modal-actions">
            <button type="button" class="btn btn-secondary" id="confirmCancelBtn">Cancel</button>
            <button type="button" class="btn btn-danger" id="confirmOkBtn">Confirm</button>
        </div>
    </div>
</div>

<!-- Alert Modal -->
<div class="modal" id="alertModal">
    <div class="modal-content">
        <h2 class="modal-header" id="alertTitle">Notification</h2>
        <p id="alertMessage"></p>
        <div class="modal-actions">
            <button type="button" class="btn btn-primary" id="alertOkBtn">OK</button>
        </div>
    </div>
</div>


<!-- Hidden input for logo upload -->
<input type="file" id="logoUpload" accept="image/*" hidden>

<!-- CDN for SortableJS (Drag-and-Drop library) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<!-- Main Application Logic -->
<script src="script.js"></script>
</body>
</html>