Aura/newtab.html at main · TheFakeCreator/Aura · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Tab</title>
  <link rel="stylesheet" href="/stylesheets/base.css">
  <link rel="stylesheet" href="/stylesheets/header.css">
  <link rel="stylesheet" href="/stylesheets/search.css">
  <link rel="stylesheet" href="/stylesheets/sections.css">
  <link rel="stylesheet" href="/stylesheets/modal.css">
  <link rel="stylesheet" href="/stylesheets/settings.css">
  <link rel="stylesheet" href="/stylesheets/responsive.css">
  <link rel="stylesheet" href="/stylesheets/form.css">
  <link rel="stylesheet" href="/stylesheets/card-popup.css">
  <link rel="stylesheet" href="/stylesheets/customDropdown.css">
  <script src="customDropdown.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div id="loading-screen" style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(30,32,40,0.45);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 8px 32px 0 rgba(31,38,135,0.37);transition:transform 0.8s cubic-bezier(.77,0,.18,1), opacity 0.5s;">

  </div>
  <div id="main-container">
    <header>
      <h1 id="welcome">Welcome, Sanskar 👋</h1>
      <div id="clock"></div>
      <div id="date-weather">
        <span id="location"></span>
        <span id="date"></span>
        <span id="weather"></span>
      </div>
      <div id="daily-quote" style="margin: 18px 0; text-align: center; font-size: 1.35em; color: #eaeaea;">
      <span id="quote-text">Loading quote...</span>
      <br>
      <span id="quote-author" style="font-size: 0.95em; color: #bdbdbd;"></span>
</div>
      <button id="settings-btn" title="Settings">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#a0a0a0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09A1.65 1.65 0 0 0 9 3.09V3a2 2 0 0 1 4 0v.09c.38.16.7.46 1 1.51a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82c.16.38.46.7 1.51 1H21a2 2 0 0 1 0 4h-.09c-.16.38-.46.7-1.51 1z"/></svg>
      </button>
    </header>
    <section id="search-section">
      <form id="search-form">
        <input type="text" id="search-input" placeholder="Search..." autocomplete="off">
        <div id="search-suggestions" class="suggestions-dropdown" style="display:none;"></div>
        <div class="custom-dropdown" data-name="search-engine">
          <input type="hidden" name="search-engine" value="google">
          <div class="dropdown-selected">Google</div>
          <div class="dropdown-options">
            <div class="dropdown-option selected" data-value="google">Google</div>
            <div class="dropdown-option" data-value="bing">Bing</div>
            <div class="dropdown-option" data-value="duckduckgo">DuckDuckGo</div>
            <div class="dropdown-option" data-value="youtube">YouTube</div>
            <div class="dropdown-option" data-value="github">GitHub</div>
          </div>
        </div>
        <div class="custom-dropdown" data-name="search-filter">
          <input type="hidden" name="search-filter" value="">
          <div class="dropdown-selected">All</div>
          <div class="dropdown-options">
            <div class="dropdown-option selected" data-value="">All</div>
            <div class="dropdown-option" data-value="images">Images</div>
            <div class="dropdown-option" data-value="videos">Videos</div>
          </div>
        </div>
        <button type="submit" id="search-btn" title="Search" style="display: flex; align-items: center; justify-content: center; padding: 0 16px;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a0a0a0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
      </form>
    </section>
    <section id="ai-section" style="display: none;">
      <form id="ai-form">
        <div class="ai-inner">
          <input type="text" id="ai-input" placeholder="Ask AI..." autocomplete="off">
          <div class="custom-dropdown" data-name="ai-platform">
            <input type="hidden" name="ai-platform" value="chatgpt">
            <div class="dropdown-selected">ChatGPT</div>
            <div class="dropdown-options">
              <div class="dropdown-option selected" data-value="chatgpt">ChatGPT</div>
              <div class="dropdown-option" data-value="gemini">Gemini</div>
              <div class="dropdown-option" data-value="claude">Claude</div>
            </div>
          </div>
          <button type="submit">Ask</button>
        </div>
      </form>
    </section>
    <div id="grid-sections"></div>
    <button id="add-section-btn" title="Add New Section">+</button>
    <section id="tab-groups-section">
      <h2>Tab Groups</h2>
      <div id="tab-groups-list"></div>
      <button id="add-tab-group-btn">+ Add Tab Group</button>
    </section>
  </div>

  <div id="modal-overlay" class="hidden"></div>
  <div id="modal" class="hidden"></div>
  <script type="module" src="main.js"></script>
</body>
</html>