Smart-App/set_targets.html at main · JstBlood/Smart-App · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/base_style.css">
    <link rel="stylesheet" href="/css/set_targets_style.css">
    <link rel="shortcut icon" href="/images/logo.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <title>Targets</title>
</head>

<body>
    <div id="header">
        <a href="home_screen.html" class="header-item material-icons f36 header_btn">home</a>
        <div class="header-item f36">Targets</div>
        <a href="index.html" class="header-item material-icons f36 header_btn">logout</a>
    </div>
    <div id="content">
        <div class="flexbox_title">
            <div class="flexbox_title_name f30">Goal Name: Lose 10kg</div>
            <a href="/goal_details.html" id="go_back_btn_box">
                <button id="go_back_btn" class="f18"><i>Go Back</i></button>
            </a>
        </div>

        <div id="goal_desc" class="f18">
            <p>Goal Description : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex amet quae hic, soluta
                consectetur, fugiat dolorum minus minima atque officiis veniam omnis accusantium nisi adipisci dolores
                voluptatem! Accusantium, eum obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
                temporibus perferendis vel suscipit rem harum obcaecati illo sequi pariatur aspernatur? Ratione expedita
                debitis illum tempore pariatur esse error sequi impedit.</p>
        </div>

        <div id="target_list">
            <div class="target_box">
                <a style="width:97%;"><button class="target" onclick="showCreateTarget()">
                        <div class="target_flexbox">
                            <div class="target_flexbox_item f30 bold">Target Name</div>
                            <div class="target_flexbox_item f24">Goal Type</div>
                            <div class="target_flexbox_item f24">Value + Unit</div>
                            <div class="target_flexbox_item f24">Short Description about the current target</div>
                            <div class="tickbox-div"><input type="checkbox" class="tickbox"></input></div>
                        </div>
                    </button>
                </a>
                <div class="delete_btn_div"><button class="material-icons f24 delete_btn">delete</button></div>
            </div>
            <div class="target_box">
                <a style="width:97%;"><button class="target" onclick="showCreateTarget()">
                        <div class="target_flexbox">
                            <div class="target_flexbox_item f30 bold">Gym</div>
                            <div class="target_flexbox_item f24">Sport/Health</div>
                            <div class="target_flexbox_item f24">3x/week</div>
                            <div class="target_flexbox_item f24">Go to the gym three times a week for a month!</div>
                            <div class="tickbox-div"><input type="checkbox" class="tickbox"></input></div>
                        </div>
                    </button>
                </a>
                <div class="delete_btn_div"><button class="material-icons f24 delete_btn">delete</button></div>
            </div>
        </div>
        <div class="flex_btn_add"><button id="btn_add" class="material-icons f64"
                onclick="showCreateTarget()">add</button>
        </div>
        <form id="create_target" action="set_targets.html">
            <div class="create_target_top">
                <div class="create_target_input"><input type="text" id="create_target_text" placeholder="Target Name"
                        class="f18" required></div>
                <div class="create_target_input"><input type="text" id="create_target_text" placeholder="Target Type"
                        class="f18" required></div>
                <div class="create_target_input"><input type="text" id="create_target_text"
                        placeholder="Target Value + Unit" class="f18" required></div>
                <div class="create_target_input"><textarea type="text" id="create_target_text"
                        placeholder="Short Target Description" class="f18" required></textarea></div>
            </div>
            <div class="create_target_bottom">
                <div class="button_box">
                    <button type="submit" class="cancel_btn f20" onclick="hideCreateTarget()">Cancel</button>
                    <input type="submit" class="save_btn f20" value="Save"></input>
                </div>

            </div>

        </form>
    </div>
    <div id="footer">
        <div class="footer-item footer-text">All rights reserved to Matiss Berzins & Dorian Herbiet
            <div class="material-icons f18">copyright</div>
        </div>
        <a href="https://en.wikipedia.org/wiki/SMART_criteria" class="footer-item footer-text-smart">What is the
            SMART
            Framework?</a>
        <div class="footer-item footer-text">Made in Delft, The Netherlands
            <div class="material-icons f18">flag</div>
        </div>
    </div>

    <script>

        function showCreateTarget() {
            var x = document.getElementById("create_target");
            x.style.visibility = "visible";
        }
        function hideCreateTarget() {
            var x = document.getElementById("create_target");
            x.style.visibility = "hidden";
        }

    </script>

</body>

</html>