blogvlog/admin.html at main · vaibhavgit9210/blogvlog · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - blogvlog</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='14' font-size='14'>📝</text></svg>">
</head>
<body>
    <div class="container">
        <header>
            <h1>blogvlog</h1>
            <p>my personal blog</p>
            <p class="byline">by Vaibhav Kumar</p>
            <nav>
                <a href="index.html">Home</a>
                <a href="admin.html">Admin</a>
            </nav>
        </header>

        <!-- Admin Status Bar -->
        <div class="admin-status">
            <div class="status-indicator">
                <span class="status-dot"></span>
                <span class="status-text">Not connected</span>
            </div>
            <button id="logout-btn" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.5rem;">Logout</button>
        </div>

        <!-- Editor Section (hidden until authenticated) -->
        <section id="editor-section" class="hidden">
            <form id="post-form">
                <div class="form-group">
                    <label for="post-title">Title (optional)</label>
                    <input type="text" id="post-title" placeholder="Enter post title...">
                </div>

                <div class="form-group">
                    <label for="post-content">Content *</label>
                    <textarea id="post-content" placeholder="Write your post..." required></textarea>
                </div>

                <div class="form-group">
                    <label>Media (drag & drop or click)</label>
                    <div id="drop-zone" class="drop-zone">
                        <div class="drop-icon">📁</div>
                        <p>Drop images, videos, or audio here</p>
                        <p style="font-size: 0.4rem; margin-top: 0.5rem;">Max 37 MB per file</p>
                    </div>
                    <input type="file" id="file-input" multiple accept="image/*,video/*,audio/*" style="display: none;">
                    <div id="media-preview" class="media-preview"></div>
                </div>

                <!-- Progress Bar (hidden by default) -->
                <div id="progress-container" class="hidden">
                    <div class="progress-bar">
                        <div id="progress-bar" class="progress-bar-fill" style="width: 0%"></div>
                    </div>
                    <p id="progress-text" style="font-family: var(--font-pixel); font-size: 0.5rem; text-align: center; margin-top: 0.5rem;">
                        Preparing...
                    </p>
                </div>

                <button type="submit" id="submit-btn" class="btn" style="width: 100%; margin-top: 1rem;">
                    Publish Post
                </button>
            </form>
        </section>

        <footer class="site-footer">
            <div class="footer-links">
                <a href="mailto:vaibhavpro9210@gmail.com">
                    <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
                    vaibhavpro9210@gmail.com
                </a>
                <a href="https://www.linkedin.com/in/vaibhav-k-b35389130/" target="_blank" rel="noopener">
                    <svg viewBox="0 0 24 24"><path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14m-.5 15.5v-5.3a3.26 3.26 0 00-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 011.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 001.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 00-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/></svg>
                    LinkedIn
                </a>
            </div>
        </footer>
    </div>

    <!-- Token Modal -->
    <div id="token-modal" class="modal">
        <div class="modal-content">
            <h2>GitHub Authentication</h2>
            <form id="token-form">
                <div class="form-group">
                    <label for="token-input">Personal Access Token</label>
                    <input type="password" id="token-input" placeholder="ghp_xxxxxxxxxxxx" required>
                    <p style="font-size: 0.7rem; color: var(--text-secondary); margin-top: 0.5rem;">
                        Create a token at GitHub → Settings → Developer settings → Personal access tokens.
                        Required scope: <strong>repo</strong>
                    </p>
                </div>
                <p id="token-error" style="color: var(--accent-red); font-family: var(--font-pixel); font-size: 0.5rem; margin-bottom: 1rem;"></p>
                <button type="submit" id="token-submit" class="btn" style="width: 100%;">Connect</button>
                <a href="index.html" class="btn btn-secondary" style="width: 100%; margin-top: 0.75rem; text-align: center;">Home</a>
            </form>
        </div>
    </div>

    <script src="js/config.js"></script>
    <script src="js/github-api.js"></script>
    <script src="js/admin.js"></script>
    <script src="js/sidepanel.js"></script>
</body>
</html>