SATVA/satva.html at main · learnercloudtech/SATVA · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Satva</title>
  <link rel="stylesheet" href="satva.css">

</head>
<body>

  <header class="navbar">
    <div class="logo">Satva</div>
    <nav>
      <ul>
        <li><a id="stressLink" href="#">Stress & Anxiety</a></li>
        <li><a id="screeningLink" href="#">Screening</a></li>
        <li><a id="calmHealthLink" href="#">Calm Health</a></li>
        <li><a id="loginBtn">Log In</a></li>
        <li><a class="btn" id="freeBtn" href="#">Try Satva for Free</a></li>
      </ul>
    </nav>
  </header>


  <section class="hero" id="hero">
    <div class="overlay">
      <h1>Calm your mind. Change your life.</h1>
      <p>समत्वं योगस्य सारः</p>
      <p>Balance is the essence of yoga</p>
      <div class="cta">
        <a href="#" class="btn primary" id="freeBtnHero">Try CalmMind for Free</a>

      </div>
    </div>
  </section>

  <section id="screening" class="screening">
    <div class="question-box">
      <h2 id="question-text"></h2>
      <div id="options" class="options"></div>
      <button id="nextBtn" class="btn primary">Next</button>
    </div>
  </section>


  <section id="resultScreen" class="result">
    <div style="font-size:60px; color:green;">✅</div>
    <h2>Screening Completed Successfully!</h2>
    <p>Your Emotional Health Report:</p>
    <div id="results"></div>
  </section>

  <section id="stress" class="stress">
    <h1>Anxiety and stress relief whenever you need it</h1>
    <p>
      Learn how to calm anxiety and find the tools for in-the-moment stress relief.
      Our clinical experts and meditation teachers are here with a wide range of stress relief programs,
      meditations for anxiety, and guided content to help you soothe anxiety and feel better.
    </p>
    <h2>Try a quick breathing exercise to ease your stress</h2>
    <div class="circle" id="breathingCircle">Breathe In</div>
    <div class="instruction" id="instructionText">Get Ready...</div>
  </section>


  <section id="calmhealth" class="calmhealth">
    <div class="calmhealth-nav">
      <a id="contactLink" href="#">Contact Us</a>
      <a id="solutionLink" href="#">Solution</a>
    </div>
    <h1>A clear path to mental health support</h1>
    <p>
      Calm Health empowers individuals to navigate life’s twists and turns with
      evidence-based programs and mindfulness content designed for maximizing engagement.
    </p>
    <a href="#" class="btn primary" id="journeyBtn">Start Your Journey</a>
  </section>


  <div id="contactModal" class="modal">
    <div class="modal-content">
      <span class="close-btn" id="closeContact">&times;</span>
      <h2>Contact Us</h2>
      <input type="text" id="name" placeholder="Your Name" style="width:100%;padding:10px;margin:10px 0;border-radius:8px;border:1px solid #ccc;"/>
      <input type="email" id="email" placeholder="Your Email" style="width:100%;padding:10px;margin:10px 0;border-radius:8px;border:1px solid #ccc;"/>
      <textarea id="problem" placeholder="Describe your problem..." style="width:100%;padding:10px;margin:10px 0;border-radius:8px;border:1px solid #ccc;"></textarea>
      <button class="btn primary" id="sendBtn">Send</button>
      <div id="successMsg" class="success-msg" style="display:none;">✅ Your query has been sent!</div>
    </div>
  </div>

  <div id="loginModal" class="modal">
    <div class="modal-content">
      <span class="close-btn" id="closeModal">&times;</span>
      <h2>Log into your account</h2>
      <button class="email-btn">📧 Sign in with Email</button>
      <button class="fb-btn">f Sign in with Facebook</button>
      <button class="apple-btn"> Sign in with Apple</button>
      <button class="google-btn">G Sign in with Google</button>
      <p>
        By tapping Continue or logging into an existing CalmMind account,
        you agree to our <a href="#">Terms</a> and acknowledge that you have read our
        <a href="#">Privacy Policy</a>.
      </p>
      <p>Don’t have an account? <a href="#">Sign up</a></p>
    </div>
  </div>


  <div id="reasonModal" class="modal">
    <div class="modal-content">
      <span class="close-btn" id="closeReason">&times;</span>
      <h2>Why do you want to join Satva?</h2>
      <button class="reasonBtn">Calm Mind</button>
      <button class="reasonBtn">Better Sleep</button>
      <button class="reasonBtn">Anxiety Relief</button>
      <button class="reasonBtn">Emotional Balance</button>
    </div>
  </div>

  <script src="satva.js"></script>

</body>
</html>