forked from atherosai/ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
599 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Vertical Tabs</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <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&display=swap" rel="stylesheet" type='text/css'> | ||
| <link rel="stylesheet" type="text/css" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="tabs-container"> | ||
| <div class="tabs-layout"> | ||
| <select class="tabs-select"> | ||
| <option value="tab1">Your Idea & Vision</option> | ||
| <option value="tab2">Product Specification</option> | ||
| <option value="tab3">UX/UI Design</option> | ||
| <option value="tab4">AI & Machine Learning</option> | ||
| <option value="tab5">Architecture & Engineering</option> | ||
| <option value="tab6">MVP Release & Iterations</option> | ||
| </select> | ||
| <ul class="tabs"> | ||
| <li> | ||
| <a id="tab1" title="Your Idea & Vision" href="#tab1"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="24" | ||
| height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" | ||
| stroke-linecap="round" stroke-linejoin="round"> | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||
| <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path> | ||
| <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3"></path> | ||
| <path d="M9.7 17l4.6 0"></path> | ||
| </svg> | ||
| Your Idea & Vision | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a id="tab2" title="Product Specification" href="#tab2"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-description" | ||
| width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" | ||
| fill="none" stroke-linecap="round" stroke-linejoin="round"> | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||
| <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> | ||
| <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path> | ||
| <path d="M9 17h6"></path> | ||
| <path d="M9 13h6"></path> | ||
| </svg> | ||
| Product Specification | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a id="tab3" title="UX/UI Design" href="#tab3"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brush" width="24" | ||
| height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" | ||
| stroke-linecap="round" stroke-linejoin="round"> | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||
| <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path> | ||
| <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path> | ||
| <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path> | ||
| <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path> | ||
| </svg> | ||
| UX/UI Design Prototype | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a id="tab4" title="Software Development" href="#tab4"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-robot" width="24" | ||
| height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" | ||
| stroke-linecap="round" stroke-linejoin="round"> | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||
| <path | ||
| d="M7 7h10a2 2 0 0 1 2 2v1l1 1v3l-1 1v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3l-1 -1v-3l1 -1v-1a2 2 0 0 1 2 -2z"> | ||
| </path> | ||
| <path d="M10 16h4"></path> | ||
| <circle cx="8.5" cy="11.5" r=".5" fill="currentColor"></circle> | ||
| <circle cx="15.5" cy="11.5" r=".5" fill="currentColor"></circle> | ||
| <path d="M9 7l-1 -4"></path> | ||
| <path d="M15 7l1 -4"></path> | ||
| </svg> | ||
| AI & Machine Learning | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a id="tab5" title="Architecture & Engineering" href="#tab5"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="24" | ||
| height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" | ||
| stroke-linecap="round" stroke-linejoin="round"> | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||
| <path | ||
| d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"> | ||
| </path> | ||
| <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path> | ||
| </svg> | ||
| Architecture & Engineering | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a id="tab6" title="MVP Release & Iterations" href="#tab6"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rocket" width="24" | ||
| height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" | ||
| stroke-linecap="round" stroke-linejoin="round"> | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||
| <path | ||
| d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"> | ||
| </path> | ||
| <path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path> | ||
| <path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> | ||
| </svg> | ||
| MVP Release & Iterations | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <div class="tab-content-wrapper"> | ||
| <section id="tab1-content" class="tab-content"> | ||
| <h2>Your Idea & Vision</h2> | ||
| <p> | ||
| Maybe you have an idea and a vision of changing the world, your company want to execute new | ||
| product | ||
| or you just have a unique dataset, but you do not have the knowledge to get the most from your | ||
| data. | ||
| </p> | ||
| <img src="assets/idea.png" alt="idea"> | ||
| </section> | ||
| <section id="tab2-content" class="tab-content"> | ||
| <h2>Product Specification</h2> | ||
| <p> | ||
| In this phase, we will remove vagueness and draft our minimum viable product in as much detail | ||
| as we | ||
| can. We will also evaluate the current capabilities of AI and how we can maximise the power of | ||
| your | ||
| data. This is the key phase and foundation for the future success of your product. | ||
| </p> | ||
| <img src="assets/product.png" alt="product"> | ||
| </section> | ||
| <section id="tab3-content" class="tab-content"> | ||
| <h2>UX/UI Design</h2> | ||
| <p> | ||
| We will start to design UX & UI for already approved features. Our design process includes user | ||
| research and accessibility as well as usability testing. The end goal of this phase is a smooth | ||
| design and an easy-to-use product. We continually iterate over our design features. | ||
| </p> | ||
| <img src="assets/ui.png" alt="ui"> | ||
|
|
||
| </section> | ||
| <section id="tab4-content" class="tab-content"> | ||
| <h2>AI & Machine Learning</h2> | ||
| <p> | ||
| The application of AI & machine learning is the key focus for every modern product. So many new | ||
| market opportunities emerge every day. | ||
| </p> | ||
| <img src="assets/brain.png" alt="brain"> | ||
|
|
||
| </section> | ||
| <section id="tab5-content" class="tab-content"> | ||
| <h2>Architecture & Engineering</h2> | ||
| <p> | ||
| Software architecture and engineering includes designing the database, backend, and frontend | ||
| engineering, as well as preparing the infrastructure and automating your business processes. | ||
| </p> | ||
| <img src="assets/engineer.png" alt="engineer"> | ||
| </section> | ||
| <section id="tab6-content" class="tab-content"> | ||
| <h2>MVP Release & Iterations</h2> | ||
| <p> | ||
| Now the product is finalized and ready for users. The product will continue to be extended in an | ||
| agile way based on customers’ feedback. | ||
| </p> | ||
| <img src="assets/release.png" alt="release"> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.