File size: 7,829 Bytes
367fee8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Derma AI</title>
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <meta content="Webflow" name="generator" />
  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/css/amoss-wondrous-site.webflow.8f0db2681.css"
    rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com" rel="preconnect" />
  <link crossorigin="anonymous" href="https://fonts.gstatic.com" rel="preconnect" />
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
  <script type="text/javascript">
    WebFont.load({
      google: {
        families: [
          "Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
        ],
      },
    });
  </script>

  <script type="text/javascript">
    !(function (o, c) {
      var n = c.documentElement,
        t = " w-mod-";
      (n.className += t + "js"),
        ("ontouchstart" in o ||
          (o.DocumentTouch && c instanceof DocumentTouch)) &&
        (n.className += t + "touch");
    })(window, document);
  </script>
  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
    rel="shortcut icon" type="image/x-icon" />
  <link href="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
    rel="apple-touch-icon" />
</head>

<body class="body">
  <div class="navbar-logo-left wf-section" id="section1">
    <div class="navbar-logo-left-container shadow-three w-nav" data-animation="default" data-collapse="medium"
      data-duration="400" data-easing="ease" data-easing2="ease" role="banner">
      <div class="how-to-use-derma-ai">
        <div class="navbar-wrapper">
          <a class="navbar-brand w-nav-brand" href="#"><img alt="LOGO DERMA AI" height="50" loading="lazy"
              src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/643827ab458011b9b674fc3e_1.png"
              width="50" />
            <div>
              <h1 class="heading-2">Derma AI</h1>
            </div>
          </a>
          <nav class="nav-menu-wrapper w-nav-menu" role="navigation">
            <ul class="nav-menu-two w-list-unstyled" role="list">
              <li><a class="nav-link" href="/">Home</a></li>
              <li>
                <div class="nav-divider"></div>
              </li>
              <li class="mobile-margin-top-10">
                <a class="button-primary w-button" href="#contacts">Contact us</a>
              </li>
            </ul>
          </nav>
          <div class="menu-button w-nav-button">
            <div class="w-icon-nav-menu"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="div_steps">
    <section class="hero-without-image wf-section">
      <div class="how-to-use-derma-ai">
        <div class="hero-wrapper-two">
          <h1 class="heading">SKINCARE ONLINE</h1>
          <p class="margin-bottom-24px">DON'T WAIT TO BE SKINCHECK</p>
          <form action="{{ url_for('predict') }}" method="post" enctype="multipart/form-data">
            <label class="button-primary w-button">
              CHECK YOUR SKIN
              <input type="file" name="file" style="display: none;" onchange="form.submit()">
            </label>
          </form>
        </div>
      </div>

    </section>
    <div class="container-2 w-container"></div>
  </div>
  <section class="team-slider wf-section">
    <div class="how-to-use-derma-ai">
      <h2 class="centered-heading">How to use Derma AI</h2>
      <div class="all_steps_wrapper w-slider" data-animation="slide" data-autoplay="false" data-autoplay-limit="0"
        data-delay="4000" data-disable-swipe="false" data-duration="500" data-easing="ease" data-hide-arrows="false"
        data-infinite="true" data-nav-spacing="12">
        <div class="w-slider-mask">
          <div class="steps_wrapper w-slide">
            <div class="team-block">
              <img alt="" class="team-member-image-two" loading="lazy"
                src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/64382674cacaa11db3a65e79_Screenshot%202023-04-13%20185653.png"
                width="249" />
              <div class="team-block-info">
                <p class="team-member-text">
                  <strong>Take a photo*<br /></strong>Keep zoomed at the
                  closest distance (less than 10 cm), keep in focus and center
                  only the skin mark (without hair, wrinkles and other
                  objects)
                </p>
              </div>
            </div>
          </div>
          <div class="steps_wrapper w-slide">
            <div class="team-block">
              <img alt="" loading="lazy"
                src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/64382674d482ac373df4c96d_Screenshot%202023-04-13%20185604.png" />
              <div class="team-block-info">
                <p class="team-member-text">
                  <strong>Identify and send<br /></strong>Send your photo to
                  the Artificial Intelligence. The system will analyze it and
                  send you a risk assessment.
                </p>
              </div>
            </div>
          </div>
          <div class="steps_wrapper w-slide">
            <div class="team-block">
              <img alt="" class="team-member-image-two" loading="lazy"
                src="https://uploads-ssl.webflow.com/6436bd9de183596b1cff71c7/6438267498748042229f1445_Screenshot%202023-04-13%20185626.png"
                width="242" />
              <div class="team-block-info">
                <p class="team-member-text">
                  <strong>Receive your risk assessment <br /></strong>Get the
                  result within 60 seconds and related advice on the next
                  steps to take.
                </p>
              </div>
            </div>
          </div>

  </section>
  <section class="footer-subscribe wf-section">
    <div class="how-to-use-derma-ai">
      <div class="footer-wrapper-three">
        <div class="footer-block-three">
          <a class="footer-link-three" href="#">About us</a><a class="footer-link-three" href="#">Home</a><a
            class="footer-link-three" href="#">Get checked</a>
        </div>
        <div class="footer-social-block-three" , id="contacts">
          <a class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124a705912aaeb_facebook%20big%20filled.svg" /></a><a
            class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124ab37a12aaf0_twitter%20big.svg" /></a><a
            class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124a61f512aaed_instagram%20big.svg" /></a><a
            class="footer-social-link-three w-inline-block" href="#"><img alt="" loading="lazy"
              src="https://uploads-ssl.webflow.com/62434fa732124a0fb112aab4/62434fa732124a717f12aaea_youtube%20small.svg" /></a>
        </div>
      </div>
      <div class="footer-divider-two"></div>
      <div class="footer-bottom">
        <div class="footer-copyright">
          © 2023 Derma AI. All rights reserved
        </div>
        <div class="footer-legal-block">
          <a class="footer-legal-link" href="#">Terms Of Use</a><a class="footer-legal-link" href="#">Privacy Policy</a>
        </div>
      </div>
    </div>
  </section>

</body>

</html>