Yvisuals/index.html at main · starbase1/Yvisuals · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<html>
 <head>
  <title>
   YVisuals - Pro Level Data Visualization
  </title>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"/>
  <style>
   @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .fade-in {
            animation: fadeIn 2s ease-in-out;
        }
  </style>
 </head>
 <body class="bg-gray-100 font-roboto">
  <header class="bg-blue-600 text-white p-4">
   <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-2xl font-bold">
     YVisuals
    </h1>
    <nav>
     <ul class="flex space-x-4">
      <li>
       <a class="hover:underline" href="#">
        Home
       </a>
      </li>
      <li>
       <a class="hover:underline" href="#">
        Features
       </a>
      </li>
      <li>
       <a class="hover:underline" href="#">
        Pricing
       </a>
      </li>
      <li>
       <a class="hover:underline" href="#">
        Contact
       </a>
      </li>
     </ul>
    </nav>
   </div>
  </header>
  <main class="container mx-auto p-4">
   <section class="text-center my-8 fade-in">
    <h2 class="text-3xl font-bold mb-4">
    Pro Level Stunning Data Visualizations
    </h2>
    <p class="text-gray-700 mb-8">
     Create beautiful and effective data visualizations with ease. Customize your charts and graphs to suit your needs.
    </p>
    <img alt="A stunning and colorful data visualization chart with various graphs and pie charts" class="mx-auto rounded-lg shadow-lg" height="400" src="https://storage.googleapis.com/a1aa/image/9f8lRDwHX3cDXsshLu9YU1VRJoH8lQH4reqzCUsFOE0.jpg" width="800"/>
   </section>
   <section class="my-8 fade-in">
    <h3 class="text-2xl font-bold mb-4">
     Features
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Icon representing customizable options" class="mx-auto mb-4" height="100" src="https://storage.googleapis.com/a1aa/image/tWhJQgW2PpqF6QmSdHx_L0XCgCmNTHE0VvDEWSKXiGs.jpg" width="100"/>
      <h4 class="text-xl font-bold mb-2">
       Fully Customizable
      </h4>
      <p class="text-gray-700">
       Tailor your visualizations to your specific needs with our extensive customization options.
      </p>
     </div>
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Icon representing real-time data updates" class="mx-auto mb-4" height="100" src="https://storage.googleapis.com/a1aa/image/W-da1l2hm-pBSsN0oq3thWpwXqUQxFPf4XClWGgRnSU.jpg" width="100"/>
      <h4 class="text-xl font-bold mb-2">
       Real-Time Data
      </h4>
      <p class="text-gray-700">
       Keep your visualizations up-to-date with real-time data integration.
      </p>
     </div>
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Icon representing easy data import" class="mx-auto mb-4" height="100" src="https://storage.googleapis.com/a1aa/image/W7UpykPx3vWSSbREKRJe_PnV7C1iBuWB9i2uUyiZ66s.jpg" width="100"/>
      <h4 class="text-xl font-bold mb-2">
       Easy Data Import
      </h4>
      <p class="text-gray-700">
       Import your data from various sources including Excel, CSV, and more.
      </p>
     </div>
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Icon representing interactive charts" class="mx-auto mb-4" height="100" src="https://storage.googleapis.com/a1aa/image/3E3ZNyDe_MMS4AH2yQag2yIgkMDSfcSTqzL1aSQfnzc.jpg" width="100"/>
      <h4 class="text-xl font-bold mb-2">
       Interactive Charts
      </h4>
      <p class="text-gray-700">
       Engage your audience with interactive and dynamic charts.
      </p>
     </div>
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Icon representing secure data handling" class="mx-auto mb-4" height="100" src="https://storage.googleapis.com/a1aa/image/t6VskUvUnzR9T-0My7sMA4Uo-yCEWnz8HafWq8zf7K4.jpg" width="100"/>
      <h4 class="text-xl font-bold mb-2">
       Secure Data
      </h4>
      <p class="text-gray-700">
       Your data is safe with our top-notch security measures.
      </p>
     </div>
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Icon representing collaboration tools" class="mx-auto mb-4" height="100" src="https://storage.googleapis.com/a1aa/image/xyjPPyXHJflPf1kLthNX6kSripE_BSBsSNQ6JNCZfBo.jpg" width="100"/>
      <h4 class="text-xl font-bold mb-2">
       Collaboration Tools
      </h4>
      <p class="text-gray-700">
       Work together with your team seamlessly with our collaboration features.
      </p>
     </div>
    </div>
   </section>
   <section class="my-8 fade-in">
    <h3 class="text-2xl font-bold mb-4">
     Sample Visualizations
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Sample bar chart with multiple data series" class="mx-auto mb-4 rounded-lg" height="300" src="https://storage.googleapis.com/a1aa/image/k2sN9BaU8ivMIhmcW5CCqLoVphJhbv1XlhNduQZQIj8.jpg" width="400"/>
      <h4 class="text-xl font-bold mb-2">
       Bar Chart
      </h4>
      <p class="text-gray-700">
       A bar chart representing sales data over the past year.
      </p>
     </div>
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Sample pie chart with different segments" class="mx-auto mb-4 rounded-lg" height="300" src="https://storage.googleapis.com/a1aa/image/C9M6Wp163SPCmlHOb3mq3PgfQa_LOHxJwIn-dogsbb4.jpg" width="400"/>
      <h4 class="text-xl font-bold mb-2">
       Pie Chart
      </h4>
      <p class="text-gray-700">
       A pie chart showing the market share of different companies.
      </p>
     </div>
     <div class="bg-white p-4 rounded-lg shadow-lg">
      <img alt="Sample line chart with multiple data points" class="mx-auto mb-4 rounded-lg" height="300" src="https://storage.googleapis.com/a1aa/image/rtdtUE_bhACx3yYFyZIcIzREZ9NNocE_lAkzireccts.jpg" width="400"/>
      <h4 class="text-xl font-bold mb-2">
       Line Chart
      </h4>
      <p class="text-gray-700">
       A line chart depicting the trend of stock prices over time.
      </p>
     </div>
    </div>
   </section>
   <section class="my-8 fade-in">
    <h3 class="text-2xl font-bold mb-4">
     Upload Your Data
    </h3>
    <div class="bg-white p-4 rounded-lg shadow-lg">
     <form class="flex flex-col items-center">
      <label class="block mb-2 text-gray-700 font-bold" for="file-upload">
       Upload Excel File
      </label>
      <input accept=".xlsx, .xls" class="mb-4 p-2 border border-gray-300 rounded" id="file-upload" type="file"/>
      <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700" type="submit">
       Upload
      </button>
     </form>
    </div>
   </section>
  </main>
  <footer class="bg-blue-600 text-white p-4">
   <div class="container mx-auto text-center">
    <p>
     © 2025 YVisuals. All rights reserved.
    </p>
   </div>
  </footer>
 </body>
</html>