Hobby_Explorer/index.html at main · NoteLegend/Hobby_Explorer · 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hobby Explorer</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <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=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  </head>

  <body>
    <div class="theme-toggle">
      <button id="themeButton">
        <i class="fas fa-moon"></i>
      </button>
    </div>

    <div class="container">
      <header>
        <div class="logo">
          <i class="fas fa-compass"></i>
          <h1>Hobby<span>Explorer</span></h1>
        </div>
        <p>Discover your perfect hobby based on your interests</p>
      </header>

      <div class="main-layout">
        <!-- Left Section -->
        <div class="content-main">
          <section class="search-section glass-effect">
            <div class="location-container">
              <div class="location-info">
                <i class="fas fa-location-dot"></i>
                <span id="currentLocation">Detecting location...</span>
              </div>
              <button id="refreshLocation" class="icon-button">
                <i class="fas fa-refresh"></i>
              </button>
            </div>

            <div class="preferences">
              <select id="duration" class="glass-input">
                <option value="">Time Available</option>
                <option value="quick">Quick (15-30 mins)</option>
                <option value="medium">Medium (1-2 hours)</option>
                <option value="long">Long (2+ hours)</option>
              </select>

              <select id="energy" class="glass-input">
                <option value="">Energy Level</option>
                <option value="low">Relaxed</option>
                <option value="medium">Moderate</option>
                <option value="high">Energetic</option>
              </select>

              <select id="social" class="glass-input">
                <option value="">Social Preference</option>
                <option value="solo">Solo</option>
                <option value="small">Small Group</option>
                <option value="large">Large Group</option>
              </select>
            </div>

            <button id="findHobbies" class="primary-button">
              <i class="fas fa-search"></i> Find Hobbies
            </button>
          </section>

          <section class="filter-section glass-effect">
            <div class="category-pills">
              <button class="pill active" data-category="all">All</button>
              <button class="pill" data-category="creative">Creative</button>
              <button class="pill" data-category="physical">Physical</button>
              <button class="pill" data-category="intellectual">
                Intellectual
              </button>
              <button class="pill" data-category="social">Social</button>
            </div>
          </section>

          <!-- Add this new section -->
          <section class="popular-hobbies-section glass-effect">
            <div class="popular-hobbies-header" id="popularHobbiesToggle">
              <h2><i class="fas fa-star"></i> Popular Hobbies</h2>
              <button class="toggle-button">
                <i class="fas fa-chevron-down"></i>
              </button>
            </div>
            <div class="popular-hobbies-content" id="popularHobbiesContent">
              <div class="popular-hobbies-grid">
                <!--  -->
              </div>
            </div>
          </section>

          <section class="results-section">
            <div id="hobbyGrid" class="hobby-grid">
              <!-- H -->
            </div>
          </section>
        </div>

        <!-- Right Section -->
        <div class="content-sidebar">
          <section class="weather-section glass-effect">
            <div class="section-header">
              <h2><i class="fas fa-cloud"></i> Weather</h2>
              <button id="refreshWeather" class="icon-button">
                <i class="fas fa-sync-alt"></i>
              </button>
            </div>
            <div id="weatherWidget" class="weather-content">
              <!--  -->
            </div>
          </section>

          <section class="suggestions-section glass-effect">
            <h2><i class="fas fa-lightbulb"></i> Weather-based Suggestions</h2>
            <div id="weatherSuggestions" class="suggestions-content">
              <!--  -->
            </div>
          </section>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div class="modal" id="hobbyModal">
      <div class="modal-content glass-effect">
        <button class="close-button">×</button>
        <div class="modal-body">
          <!--  -->
        </div>
      </div>
    </div>

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
      <div class="loader"></div>
      <p>Finding tailored hobbies for you... :)</p>
    </div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="script.js"></script>
  </body>
</html>