ConstellationNetworking.github.io/missions_draft.html at main · ConstellationNetworking/ConstellationNetworking.github.io · 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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Missions</title>
    <link rel="stylesheet" href="/assets/dist/tailwind.css">
    <script src="/assets/dist/tailwind.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
    <link rel="stylesheet" href="/assets/css/missions.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <!-- Firebase -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script src="assets/js/firebase_init.js"></script>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen bg-white p-8">
        <!-- Sidebar -->
        <div class="flex">
            <div class="w-64 p-6 mr-6 bg-green-50 rounded-lg">
                <div class="flex flex-col items-center mb-6">
                    <img src="https://placehold.co/100x100" id="currentUser-profile-picture" alt="Profile picture of a man" class="rounded-full border-4 border-green-300 mb-3" width="100" height="100">
                    <h2 class="text-lg font-semibold" id="currentUser-name"></h2>
                    <p class="text-sm text-gray-600" id="currentUser-email"></p>
                </div>
                <div class="flex flex-col space-y-3">
                    <button class="flex items-center text-sm font-medium text-gray-700 space-x-2  text-green-700 px-3 py-2 rounded" onclick="window.location='/index.html'">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"><path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/></svg>
                        <span>Home</span>
                    </button>
                    <button class="flex items-center text-sm font-medium text-gray-700 space-x-2 bg-green-200 text-green-700 px-3 py-2 rounded" onclick="window.location='/missions.html'">
                        <i class="fas fa-book"></i>
                        <span>My Missions</span>
                    </button>
                    <button class="flex items-center text-sm font-medium text-gray-700 space-x-2  text-green-700 px-3 py-2 rounded" onclick="window.location='/rewards.html'">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trophy" viewBox="0 0 16 16"><path d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935M3.504 1q.01.775.056 1.469c.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.5.5 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864.413-1.12.74-2.64.87-4.667q.045-.694.056-1.469z"/></svg>
                        <span>My Rewards</span>
                    </button>
                </div>
            </div>

            <!-- Main Content -->
            <div class="flex-1">
                <div class="mb-6">
                    <h1 class="text-2xl font-bold mb-2">My Missions</h1>
                    <div class="flex space-x-4 text-sm font-medium">
                        <button class="text-green-600">All</button>
                        <button class="text-gray-600">Current</button>
                        <button class="text-gray-600">Incomplete</button>
                        <button class="text-gray-600">Completed</button>
                        <button onclick="resetMission()" class="text-gray-600">Reset</button>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-6" id="missions-container"></div>
            </div>
        </div>
    </div>
</body>
<script src="/assets/js/helpers/token_validator.js"></script>
<script src="/assets/js/missions.js"></script>
</html>