KAI/test.html at main · arthmohan/KAI · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KAI Skincare Test</title>
    <link rel="stylesheet" href="testStyle.css">
    <script src="https://kit.fontawesome.com/276e5d92cb.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="navbar">
        <div class="logo"><a class="logo1" href="index.html">KAI</a></div>
        <div class="sjl"></div>
        <div class="menus">
            <div class="menuHome" id="menu"><a href="index.html">Home</a></div>
            <div class="menuTest" id="menu"><a href="test.html">Test</a></div>
            <div class="menuAbout" id="menu"><a href="about.html">About</a></div>
            <div class="menuContact" id="menu"><a href="contact.html">Contact Us</a></div>
            <div class="dropdown" id="menu">
                <i class="fa-solid fa-chevron-down"></i>
                <div class="dropdown-content">
                    <a href="index.html" id="dropHome">Home</a>
                    <a href="test.html" id="dropTest">Test</a>
                    <a href="about.html" id="dropAbout">About</a>
                    <a href="contact.html" id="dropContact">Contact Us</a>
                </div>
            </div>
        </div>
    </div>

    <br>
    <div class="formsty">

        <form class="formsty" action="" onsubmit="handleSubmit(event)" method="post">
        <h3>Select Skin Type (Select one)</h3>
        <div class="ST_selector" id="radios1">
            <label><div class="dryCheck radio"><input class="chk" type="radio" name="ST_type" value="dry">Dry</div></label>
            <label><div class="combinationCheck radio"><input class="chk" type="radio" name="ST_type" value="combination">Combination</div></label>
            <label><div class="normalCheck radio"><input class="chk" type="radio" name="ST_type" value="normal">Normal</div></label>
            <label><div class="oilyCheck radio"><input class="chk" type="radio" name="ST_type" value="oily">Oily</div></label>
            <label><div class="acneCheck radio"><input class="chk" type="radio" name="ST_type" value="acneprone">Acne Prone</div></label>
            <label><div class="sensitiveCheck radio"><input class="chk" type="radio" name="ST_type" value="sensitive">Sensitive</div></label>
        </div>

        <br><br>

        <h3>Select Skin Concerns</h3>
        <div class="selector" id="checkboxes2">
            <label for="aging"><div class="agingCheck checkbox"><input class="chk" type="checkbox" value="aging" name="SC_aging" id="aging">Aging</div></label>

            <label for="dullness"><div class="dullnessCheck checkbox"><input class="chk" value="dullness" type="checkbox" name="SC_dullness" id="dullness">Dullness</div></label>

            <label for="darkCircles"><div class="darkCirclesCheck checkbox"><input class="chk" value="darkcircles" type="checkbox" name="SC_darkCircles" id="darkCircles">Dark Circles</div></label>


            <label for="darkSpots"><div class="darkSpotsCheck checkbox"><input class="chk" value="darkspots" type="checkbox" name="SC_darkSpots" id="darkSpots">Dark Spots</div></label>

            <label for="dryness"><div class="drynessCheck checkbox"><input value="dryness" class="chk" type="checkbox" name="SC_dryness" id="dryness">Dryness</div></label>

            <label for="uneven"><div class="unevenCheck checkbox"><input class="chk" value="unevenskintone" type="checkbox" name="SC_uneven" id="uneven">Uneven Skin Tone</div></label>

            <label for="sunDamage"><div class="sunDamageCheck checkbox"><input value="sundamage" class="chk" type="checkbox" name="SC_sunDamage" id="sunDamage">Sun Damage</div></label>

            <label for="roughTexture"><div class="roughTexture checkbox"><input value="roughtexture" class="chk" type="checkbox" name="SC_roughTexture" id="roughTexture">Rough Texture</div></label>

            <label for="milia"><div class="miliaCheck checkbox"><input class="chk" value="milia" type="checkbox" name="SC_milia" id="milia">Milia</div></label>

            <label for="ingrownHair"><div class="ingrownHairCheck checkbox"><input value="ingrownhair" class="chk" type="checkbox" name="SC_ingrownHair" id="ingrownHair">Ingrown Hair</div></label>

            <label for="hormonalAcne"><div class="hormonalAcneCheck checkbox"><input value="hormonalacne" class="chk" type="checkbox" name="SC_hormonalAcne" id="hormonalAcne">Hormonal Acne</div></label>

            <label for="whiteheads"><div class="whiteheadsCheck checkbox"><input value="whiteheads" class="chk" type="checkbox" name="SC_whiteheads" id="whiteheads">Whiteheads</div></label>

            <label for="blackheads"><div class="blackheadsCheck checkbox"><input class="chk" value="blackheads" type="checkbox" name="SC_blackheads" id="blackheads">Blackheads</div></label>

            <label for="redness"><div class="rednessCheck checkbox"><input class="chk" value="redness" type="checkbox" name="SC_redness" id="redness">Redness</div></label>

            <label for="pimples"><div class="pimplesCheck checkbox"><input class="chk" value="pimples" type="checkbox" name="SC_pimples" id="pimples">Pimples</div></label>

            <label for="barrierRepair"><div class="barrierRepairCheck checkbox"><input value="barrierrepair" class="chk" type="checkbox" name="SC_barrierRepair" id="barrierRepair">Barrier Repair</div></label>
        </div>

        <br><br>

        <br><br>

        <h3>Select Price Range</h3>
        <div class="PR_selector" id="checkboxes4">
            <label for="low"><div class="lowCheck checkbox"><input value="cheap" class="chk" type="checkbox" name="PR_low" id="low">Cheap</div></label>

            <label for="medium"><div class="mediumCheck checkbox"><input value="midrange" class="chk" type="checkbox" name="PR_medium" id="medium">Mid-Range</div></label>

            <label for="high"><div class="highCheck checkbox"><input value="expensive" class="chk" type="checkbox" name="PR_high" id="high">Expensive</div></label>
        </div>

        <br><br>

        <div class="sumbitBut">
            <button type="submit" id="submitButton" onclick="window.location.href = 'http://localhost:3001';">Get Results</button>
        </div>

        </form>
    </div>

    <script>

        function toggleRadioBackground() {
            const isChecked = event.target.checked;

            const parentDiv1 = event.target.closest(".radio");
            if (parentDiv1) {
                if (isChecked) {
                    parentDiv1.style.backgroundColor = "#e2ddd3";
                } else {
                    parentDiv1.style.backgroundColor = "";
                }
            }
        }

        function toggleCheckboxBackground() {
          const isChecked = event.target.checked;

          const parentDiv = event.target.closest(".checkbox");
          if (parentDiv) {
            if (isChecked) {
              parentDiv.style.backgroundColor = "#e2ddd3"; // Change to desired background color when checked
            } else {
              parentDiv.style.backgroundColor = ""; // Reset to default background color when unchecked
            }
          }
        }
    </script>

    <script src="testScript.js"></script>
    <script src="resultScript.js"></script>


</body>
</html>