String_Tune/index.html at main · rohanbyale/String_Tune · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>StringTune Mastery</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/src/style.css" />
</head>

<body>
  <div class="bg"></div>
  <div class="center-image"></div>
  <div class="bg-text">StringTune</div>

  <div class="scroll-msg-container">
    <div id="scroll-msg" class="scroll-msg">concentrate</div>
  </div>

  <div class="hero-scroll-container">
    <div class="hero-section">
      <h1>
        Master<br />
        Your<br />
        <span class="skills-line">
          Skills
          <div class="skills-sub">
            <span class="with-text">With</span>
            <span class="brand-text">StringTune®</span>
          </div>
        </span>
      </h1>
    </div>

    <!-- SKILL HUB CARD (Moved here to scroll with first page) -->
    <div class="skill-section">
      <div class="section-label">Skill Hub</div>
      <div class="skill-card">
        <img
          src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
          alt="Person" class="card-image" />
      </div>
    </div>
  </div>

  <div class="ui">
    <!-- TOP NAV -->
    <div class="top-nav">
      <div class="nav-left">
        <div class="logo-group">
          <div class="brand-monogram">
            <div class="monogram-icon">
              <span class="dot-top"></span>
              <span class="vertical-line"></span>
              <span class="horizontal-line"></span>
              <span class="circle-top"></span>
              <span class="circle-bottom"></span>
            </div>
            <span class="reg">®</span>
          </div>
          <div class="red-badge">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5">
              <path d="M14.5 17.5L3 6V3h3l11.5 11.5"></path>
              <path d="M13 19l6-6"></path>
              <path d="M16 16l4 4"></path>
              <path d="M19 21l2-2"></path>
            </svg>
            <span class="red-badge-text">べ</span>
          </div>
        </div>

      </div>
      <div class="nav-center">V. 1.1.53</div>
      <div class="nav-right">
        <button class="nav-btn icon-btn">i</button>
        <button class="nav-btn pill-btn">Skill Hub</button>
        <span class="percentage">0%</span>
      </div>
    </div>

    <!-- BOTTOM CHAT / A.I. AREA -->
    <div class="bottom-right-area">
      <!-- <div class="copyright-mark">
        <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M15 9.5a4 4 0 100 5"></path>
        </svg>
      </div> -->

      <div class="chat-wrapper">
        <div class="chat-bubble">
          <p>
            Hey there, wanderer! 👾 Welcome to the realm<br />
            of StringTune, where precision meets mastery
          </p>
          <div class="chat-actions">
            <button class="next-btn">Next</button>
          </div>
        </div>

        <div class="avatar-container">
          <div class="avatar-dot"></div>
          <div class="avatar-box">
            <img src="https://api.dicebear.com/7.x/pixel-art/svg?seed=samurai&backgroundColor=transparent" alt="Avatar"
              class="avatar-img" />
          </div>
          <div class="avatar-name">AIKA</div>
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="/src/main.js"></script>
</body>

</html>