malakyousof.portfolio/admin.html at main · malakyousof/malakyousof.portfolio · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin — Portfolio</title>
    <style>
        * { box-sizing: border-box; }
        body { font-family: monospace; max-width: 700px; margin: 40px auto; padding: 0 20px; background: #fafafa; }
        h2, h3 { color: #4a1040; }
        input, textarea, select { width: 100%; margin: 6px 0 14px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; }
        button { padding: 8px 18px; cursor: pointer; border-radius: 4px; border: none; background: #4a1040; color: white; font-family: monospace; }
        button:hover { background: #E91E8C; }
        button.danger { background: #c0392b; }
        button.secondary { background: #888; }
        #login-form, #admin-panel { display: none; }
        .project-row { border: 1px solid #ddd; padding: 14px; margin: 8px 0; border-radius: 8px; background: white; }
        .project-row-actions { display: flex; gap: 8px; margin-top: 8px; }
        .section-box { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
        label { font-size: 0.85rem; color: #555; display: block; margin-bottom: 4px; }
        .field-group { margin-bottom: 14px; }
        .powerbi-options { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #f9f0f8; border-radius: 6px; border: 1px solid #e0c0d8; margin-bottom: 14px; }
        .powerbi-options label { font-weight: bold; color: #4a1040; margin-bottom: 8px; }
        #status { margin-top: 10px; font-weight: bold; color: #4a1040; }
    </style>
</head>
<body>

<div id="login-form">
    <h2>Admin Login</h2>
    <div class="field-group">
        <label>Email</label>
        <input id="email" type="email" placeholder="your@email.com" />
    </div>
    <div class="field-group">
        <label>Password</label>
        <input id="password" type="password" placeholder="••••••••" />
    </div>
    <button onclick="login()">Login</button>
    <p id="login-error" style="color:red"></p>
</div>

<div id="admin-panel">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
        <h2>Portfolio Admin</h2>
        <button class="secondary" onclick="logout()">Logout</button>
    </div>

    <!-- ADD / EDIT FORM -->
    <div class="section-box">
        <h3 id="form-title">Add Project</h3>
        <input type="hidden" id="edit-id" />

        <div class="field-group">
            <label>Title *</label>
            <input id="title" placeholder="Project title" />
        </div>
        <div class="field-group">
            <label>Description</label>
            <textarea id="desc" rows="3" placeholder="What did you do?"></textarea>
        </div>
        <div class="field-group">
            <label>GitHub link</label>
            <input id="github" placeholder="https://github.com/..." />
        </div>
        <div class="field-group">
            <label>Colab notebook link</label>
            <input id="colab" placeholder="https://colab.research.google.com/..." />
        </div>

        <!-- POWER BI OPTIONS -->
        <div class="powerbi-options">
            <label>Power BI — choose one or none</label>
            <div class="field-group">
                <label>Option 1: External link</label>
                <input id="powerbi" placeholder="https://app.powerbi.com/..." />
            </div>
            <div class="field-group">
                <label>Option 2: Upload PDF</label>
                <input id="powerbi-pdf-file" type="file" accept=".pdf" />
                <small id="powerbi-pdf-current"></small>
            </div>
            <div class="field-group">
                <label>Option 3: Upload image (screenshot)</label>
                <input id="powerbi-img-file" type="file" accept="image/*" />
                <small id="powerbi-img-current"></small>
            </div>
        </div>

        <div class="field-group">
            <label>Tags (comma separated)</label>
            <input id="tags" placeholder="Python, SQL, Power BI" />
        </div>
        <div class="field-group">
            <label>Cover image (optional — blank = random color)</label>
            <input id="cover-file" type="file" accept="image/*" />
            <small id="cover-current"></small>
        </div>
        <div class="field-group">
            <label>PDF report</label>
            <input id="pdf-file" type="file" accept=".pdf" />
            <small id="pdf-current"></small>
        </div>

        <button onclick="saveProject()">💾 Save Project</button>
        <button class="secondary" onclick="cancelEdit()" id="cancel-btn" style="display:none;margin-left:8px">Cancel</button>
        <p id="status"></p>
    </div>

    <!-- EXISTING PROJECTS -->
    <div class="section-box">
        <h3>Existing Projects</h3>
        <div id="existing-projects"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="js/supabase.js"></script>
<script src="js/admin.js"></script>
</body>
</html>