-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
119 lines (116 loc) · 8.14 KB
/
about.html
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
<html>
<head>
<title>Skincare Compare</title>
<!-- CSS -->
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:300|Raleway+Dots&display=swap" rel="stylesheet">
<link rel="stylesheet" href = "assets/css/custom.css">
<!--JQUERY-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<!--CUSTOM SCRIPTS-->
<script src="scripts/header.js"></script>
<!--FAVICON-->
<link rel="icon" href="assets/img/favicon.png">
</head>
<body>
<div class="container">
<div id="header"></div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<h1 class="pageMainHeader">About</h1>
<h3 class="subHeader">About this website</h3>
<p class="howToText">
This <a href="https://xkcd.com/148/">wobsite</a> was written in: vanilla Javascript,
some Ajax/JQuery, HTML/CSS, and Twitter Bootstrap magic. All the logic is done completely client side.
<br><br>
Basically, that means nothing you input will get stored (except by your own local
machine/browser) -- there's no server on my end or anything that's going to see what
you typed, uploaded, or downloaded.
<br><br>
This tool also works with not just skincare products, but any product that has an
ingredient list as long as you provide a .csv with the specified columns. So while I may
call it a Skincare Compare tool since that's what I primarily use it for, it's basically
just a .csv comparison tool (with the addition of Cosdna scraping).
<br>
</p>
<h3 class="subHeader">Why I wrote this</h3>
<p class="howToText">
This website began as a simple script to make my life easier. I have extremely sensitive skin
that breaks out in extremely itchy, eczema patches when triggered by allergens or
heat, so finding products that worked for my skin has always been extremely difficult.
<br><br>
Testing out products was always a mess of trial and error, loads of research,
dozens of decant bottles, and ritual patch testing. I started a spreadsheet in late 2018/early 2019 and started comparing
what products worked and what triggered my contact/atopic dermatitis and eczema. But as my list grew,
comparing ingredients became a tedious chore.
<br><br>
I wanted a tool that could let me compare the laundry list of ingredients that each product seemed
to have, but besides this <a href="https://www.reddit.com/r/AsianBeauty/comments/3g34we/cosdna_comparison_tool/">
Cosdna tool I found on r/AsianBeauty</a>, which didn't work for me, there wasn't anything else.
<br><br>
So I wrote this. I was inspired by the tool above to add Cosdna scraping, but beyond that,
the code is my own. It's not the prettiest and the logic and design is rather simple, but it made my life
easier comparing ingredients. And, hopefully, it'll make your life easier as well.
Happy holy grail and skincare hunting!
</p>
<h3 class="subHeader">Bugs</h3>
<p class="howToText">
If you're having problems with the tool, read the <a href="/howto.html">How To</a> guide in detail
and make sure your .csv file adheres to the proper format. If you're sure what you're experiencing
is a bug, feel free to contact me below.
<br><br>
If you do decide to contact me, please give me your browser, browser version,
the steps to reproduce the bug and, if you're able to, provide me with any
console logs by going to the <a href="https://www.lifewire.com/web-browser-developer-tools-3988965">Developer Tools</a>
in your browser and clicking the 'Console' tab.
<h3 class="subHeader">Disclaimer and Code</h3>
<p class="howToText">
I am not a skincare professional or a dermatologist. Any resources I provided on this
website are resources I personally found helpful for my own skincare routine. It is not
licensed medical advice nor a replacement for it.
<br><br>
This tool is also meant to be used for skincare comparison/ingredient comparison
purposes ONLY and I am not responsible for however any of these tools get used or
purposed.
<br><br>
There may also be bugs or edge cases in the tool. I tested as much as I could, but like
I mentioned in the how to guide, this tool is not perfect. It is up to the user themselves
to verify the complete accuracy and authenticity of the output that was returned.
<br><br>
This website's functionality may not work on all browsers and browser versions. While I tried
to make this tool as cross compatible as possible, I may not be able to add functionality
for all browsers and versions. As of writing, this tool was previously tested on recent-ish versions of Chrome,
Firefox, Opera, and Edge.
<br><br>
Also, much like the Cosdna tool I mentioned above, I'm also scraping the screen for data. This
is because Cosdna does not have an API. If Cosdna goes down or if they start presenting their
data differently, the Cosdna scraping part of this tool will break.
<br><br>
And, as a final note, if you are worried at all about how this website works, all the code is open
source on the Github linked waaay above.
</p>
<h3 class="subHeader">Creative Commons</h3>
<p class="howToText">
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
<img alt="Creative Commons License" style="border-width:0"
src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /><br>
</a><br />This Skincare Compare website and its respective code is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons
Attribution-NonCommercial 4.0 International License</a>.
</p>
<h3 class="subHeader">Contact me</h3>
<p class="howToText">
If you have any suggestions, comments, questions, concerns, bug reports, or if you simply
want to drop me a line, feel free to contact me at <a href="mailto:skincarecompare.me@domainsbyproxy.com">skincarecompare.me@domainsbyproxy.com</a>.
<br><br>
HOWEVER, I can't guarantee that I'll respond to emails, add features, review PRs, or fix any bugs on a timely basis.
I can try, but I do have a day job and a life and I made this in my spare time over many, many months. Thanks
for visiting! :D
</p>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>