WDD-330/index.html at main · udodavid/WDD-330 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Custom Fashion Design & Style Advisor App" />
  <title>Style Advisor</title>
  <link rel="stylesheet" href="style/main.css" />
  <script type="module" src="scripts/main.js" defer></script>
  <script type="api" src="scripts/api/weather.js" defer></script>
  <script type="api" src="scripts/api/unsplash.js" defer></script>
  <script type="module" src="scripts/modules/favorites.js" defer></script>
  <script type="module" src="scripts/modules/ui.js"></script>
  <script type="module" src="scripts/modules/builders.js" defer></script>
  <script type="module" src="scripts/modules/outfitCreator.js" defer></script>
</head>
<body>
    <header class="header">
      <a href="" class="logo">
        <span class="icon">👗</span>
        <h1>Sapphy Fashion Design & Style Advisor</h1>
      </a>
      <input class="menu-btn" type="checkbox" id="menu-btn" />
      <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
      <ul class="menu">
        <li><a href="#work">Our Work</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#careers">Careers</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>
  <main>
    <!-- Weather and Mood Section -->
    <section id="weather" class="widget">
        <section class="weather-advice">
            <div id="weather-container">
            <h2>Today's Weather</h2>
            <p id="weather-description">Loading weather...</p>
            <p id="temperature"></p>
            <img id="weather-icon" alt="" />
            </div>
            <div id="advice-container">
            <h2>Style Mood</h2>
            <p id="fashion-advice">Loading advice...</p>
            </div>
        </section>
    </section>

    <section id="outfit-suggestions" class="panel">
      <h2>Outfit Suggestions</h2>
      <div id="suggestionsContainer" class="gallery-row"></div>
    </section>

    <section id="outfit-creator" class="panel">
        <section class="outfit-creator">
            <h2>Create Your Outfit</h2>
            <form id="outfit-form">
            <label for="top">Top:</label>
            <select id="top">
                <option value="">Select top</option>
                <option value="T-shirt">T-shirt</option>
                <option value="Blouse">Blouse</option>
                <option value="Sweater">Sweater</option>
            </select>

            <label for="bottom">Bottom:</label>
            <select id="bottom">
                <option value="">Select bottom</option>
                <option value="Jeans">Jeans</option>
                <option value="Skirt">Skirt</option>
                <option value="Shorts">Shorts</option>
            </select>

            <label for="shoes">Shoes:</label>
            <select id="shoes">
                <option value="">Select shoes</option>
                <option value="Sneakers">Sneakers</option>
                <option value="Boots">Boots</option>
                <option value="Sandals">Sandals</option>
            </select>

            <button type="submit">Preview Outfit</button>
            </form>
            <div id="outfit-preview">
            <h3>Your Outfit</h3>
            <p id="preview-text">Select options to preview.</p>
            </div>
        </section>
    </section>

    <section id="fashion-inspiration" class="panel">
        <section class="inspiration">
            <h2>Style Inspiration</h2>
            <div class="inspo-controls">
            <input type="text" id="search-term" placeholder="Search outfits (e.g., 'spring fashion')" />
            <button id="search-button">Search</button>
            </div>
            <div id="image-gallery" class="gallery"></div>
        </section>
    </section>
  </main>

  <footer class="bottom-nav">
    <a href="#home">🏠 Home</a>
    <a href="builder.html">🛠️ Builder</a>
    <a href="favorites.html">❤️ Favorites</a>
    <a href="profile.html">👤 Profile</a>
  </footer>
</body>
</html>