Skip to content

Commit

Permalink
AI section
Browse files Browse the repository at this point in the history
  • Loading branch information
@DmitryBorodiy
DmitryBorodiy committed Oct 2, 2023
1 parent 958ec97 commit e967880
Show file tree
Hide file tree
Showing 2 changed files with 233 additions and 4 deletions.
136 changes: 133 additions & 3 deletions Web/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,11 +211,141 @@ <h2 class="section-title">Make you search easily with extensions</h2>
</div>
</section>
<br />
<hr class="section-separator" style="margin-top: 60px;" />
<hr class="section-separator" style="margin-top: 80px;" />
<br />
<section id="ai-features">

<section id="ai-features" class="centerized-section">
<img alt="assistant-logo" height="60px" width="60px" src="assets/Assistant.png" /><br /><br />
<span class="fluent-badge" style="top: 10px; position: relative;">
<a class="label">Personal AI assistant</a>
</span>
<h2 id="ai-features-title">Get helpful AI answers on your questions</h2>
<p id="ai-features-description" class="placeholder">
Assistant is a smart, friendly and helpful voice assistant that helps you in your daily life. You can communicate with the assistant by voice or text using natural language. The assistant can help you with a variety of tasks, such as finding information, managing your calendar, reminders, entertainment, and more. The assistant can also provide you with personalized recommendations and advice, tailored to your preferences and interests.
</p>
<br />
<div id="what-can-ai">
<div class="fluent-card" style="flex-basis: 200px;">
<i class="card-icon icon icon-ic_fluent_chat_12_regular"></i>
<h3>AI-powered answers</h3>
<p class="placeholder">
Get answers to questions that are not so easy to find. Generative AI allows you to find information by asking just one question.
</p>
</div>
<div class="fluent-card" style="flex-basis: 200px;">
<i class="card-icon icon icon-ic_fluent_chess_20_regular"></i>
<h3>Entertainment and relaxation</h3>
<p class="placeholder">
Use the capabilities of a personal assistant to relax and escape from everyday tasks.
</p>
</div>
<div class="fluent-card" style="flex-basis: 200px;">
<i class="card-icon icon icon-ic_fluent_briefcase_24_regular"></i>
<h3>Organizing tasks</h3>
<p class="placeholder">
The assistant can help you plan events, manage email, organize to-do lists, and more. The assistant can also integrate with various apps and services to make your work easier.
</p>
</div>
<div class="fluent-card" style="flex-basis: 200px;">
<i class="card-icon icon-ic_fluent_globe_search_24_regular"></i>
<h3>Searching and analyzing</h3>
<p class="placeholder">
Searching and analyzing information on the Internet on sites and web resources is an important task that the assistant does well.
</p>
</div>
<div class="fluent-card" style="flex-basis: 200px;">
<i class="card-icon icon-ic_fluent_circle_image_24_regular"></i>
<h3>Image searching and generation</h3>
<p class="placeholder">
Searching for images is easier than ever, find everything you need thanks to integration with popular image search and processing services, or generate the image you need using DALLE from OpenAI.
</p>
</div>
</div>
<br />
<br />
<h3 style="font-size: 26px;">Integration with popular services</h3>
<p class="placeholder">
The assistant is compatible with popular services that people use and value. This helps you get better results and work easier. The Assistant can connect to multiple apps and platforms to give you easy access to the information and features you need. You can use the assistant to communicate, search, book, listen, browse, and more.
</p>
<br />
<div id="ai-integrated">
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://logosandtypes.com/wp-content/uploads/2022/07/OpenAI.png');"></span>
<h3>OpenAI</h3>
<p class="placeholder" style="font-size: 14px;">
Integration with AI services to provide accurate and detailed answers based on ChatGPT. Generating images and searching by image. Analysis of search results and websites.
</p>
<a href="https://openai.com/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://brandlogos.net/wp-content/uploads/2022/07/google_cloud-logo_brandlogos.net_qxnsy.png'); background-size: 70%;"></span>
<h3>Google Cloud</h3>
<p class="placeholder" style="font-size: 14px;">
Using cloud technologies and Google services for Internet search, using AI from Google to provide the best results.
</p>
<a href="https://cloud.google.com/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Microsoft_Azure.svg/1200px-Microsoft_Azure.svg.png'); background-size: 60%;"></span>
<h3>Azure</h3>
<p class="placeholder" style="font-size: 14px;">
Microsoft Azure, often referred to as Azure, is a cloud computing platform run by Microsoft. It offers access, management, and the development of applications and services through global data centers. It also provides a range of capabilities, including software as a service, platform as a service, and infrastructure as a service. Microsoft Azure supports many programming languages, tools, and frameworks, including Microsoft-specific and third-party software and systems.
</p>
<a href="https://portal.azure.com/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Microsoft_365_%282022%29.svg/1200px-Microsoft_365_%282022%29.svg.png'); background-size: 60%;"></span>
<h3>Microsoft 365</h3>
<p class="placeholder" style="font-size: 14px;">
Microsoft 365 is a product family of productivity software, collaboration and cloud-based services owned by Microsoft. It encompasses online services such as Outlook.com, OneDrive, Microsoft Teams, programs formerly marketed under the name Microsoft Office, enterprise products and services associated with these products such as Exchange Server, SharePoint, and Yammer.More at Wikipedia
</p>
<a href="https://www.office.com/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'); background-size: 60%;"></span>
<h3>Wikipedia</h3>
<p class="placeholder" style="font-size: 14px;">
Wikipedia is a free-content online encyclopedia written and maintained by a community of volunteers, collectively known as Wikipedians, through open collaboration and using a wiki-based editing system called MediaWiki. Wikipedia is the largest and most-read reference work in history, and has consistently been one of the 10 most popular websites. Founded by Jimmy Wales and Larry Sanger on January 15, 2001, it is hosted by the Wikimedia Foundation, an American nonprofit organization.
</p>
<a href="https://www.wikipedia.org/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://play-lh.googleusercontent.com/cShys-AmJ93dB0SV8kE6Fl5eSaf4-qMMZdwEDKI5VEmKAXfzOqbiaeAsqqrEBCTdIEs=w240-h480-rw'); border: none;"></span>
<h3>Spotify</h3>
<p class="placeholder" style="font-size: 14px;">
Spotify is a Swedish audio streaming and media services provider founded on 23 April 2006 by Daniel Ek and Martin Lorentzon. It is one of the largest music streaming service providers, with over 551 million monthly active users, including 220 million paying subscribers, as of June 2023. Spotify is listed on the New York Stock Exchange in the form of American depositary receipts.More at Wikipedia
</p>
<a href="https://www.spotify.com/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png'); background-size: 56%;"></span>
<h3>YouTube</h3>
<p class="placeholder" style="font-size: 14px;">
YouTube is an American online video sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website in the world, after Google Search. YouTube has more than 2.5 billion monthly users, who collectively watch more than one billion hours of videos every day.
</p>
<a href="https://www.youtube.com/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
<div class="fluent-card flat-card">
<span class="app-logo" style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbp6fN-itWjYEd-UOxsi6zYjumhJTHyFFRFW9v5cc&s=0');"></span>
<h3>UnoPlatform</h3>
<p class="placeholder" style="font-size: 14px;">
Uno Platform is an open source cross-platform graphical user interface that allows WinUI and Universal Windows Platform (UWP) - based code to run on iOS, macOS, Linux, Android, and WebAssembly. Uno Platform is released under the Apache 2.0 license.
</p>
<a href="https://platform.uno/" target="_blank" class="fluent-hyperlink-control">Learn more</a>
</div>
</div>
</section>
<br />
<hr class="section-separator" />
<br />
<section id="premium-section">
<div id="premium-card">

</div>
</section>
<br />
<footer>

</footer>
</div>
</fluent-design-system-provider>
</body>
Expand Down
101 changes: 100 additions & 1 deletion Web/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ body{
background-color: #00000006;
}

.fluent-hyperlink-control{
color: #084daf;
}

.icon-button{
color: #5f5f5f;
}
Expand Down Expand Up @@ -129,6 +133,11 @@ body{
fluent-option{
color: rgb(30, 30, 30);
}

.app-logo{
background-color: rgb(250, 250, 250);
border: 0.6px solid rgba(30, 30, 30, 20%);
}
}

@media(prefers-color-scheme: dark){
Expand Down Expand Up @@ -181,6 +190,10 @@ body{
background-color: #FFFFFF0B;
}

.fluent-hyperlink-control{
color: #99EBFF;
}

.icon-button{
color: #d2d2d2;
}
Expand Down Expand Up @@ -234,6 +247,11 @@ body{
fluent-option{
color: rgb(240, 240, 240);
}

.app-logo{
background-color: rgb(42, 42, 42);
border: 0.6px solid rgba(255, 255, 255, 12%);
}
}

header{
Expand Down Expand Up @@ -486,7 +504,6 @@ em{

#addons-section{
padding-top: 30px;
height: 380px;
}

.section-column{
Expand Down Expand Up @@ -609,4 +626,86 @@ fluent-option{
top: 10px;
font-size: 16px;
z-index: 1111111111;
}

.centerized-section{
text-align: center;
display: block;
align-items: center;
padding-top: 50px;
padding-bottom: 50px;
}

#ai-features{
padding-left: 60px;
padding-right: 60px;
}

#ai-features-description{
position: relative;
}

#what-can-ai{
display: flex;
flex-grow: 1;
flex-basis: 130px;
flex-wrap: wrap;
gap: 16px;
position: relative;
top: 12px;
}

#ai-integrated{
display: flex;
flex-grow: 1;
flex-wrap: wrap;
gap: 20px;
position: relative;
}

.flat-card{
background: transparent;
border: none;
box-shadow: none;
}

.flat-card:hover{
background: transparent;
border: none;
box-shadow: none;
}

.app-logo{
border-radius: 12px;
padding: 20px;
min-height: 40px;
min-width: 40px;
background-position: center center;
background-size: cover;
display: inline-block;
position: relative;
align-items: center;
background-repeat: no-repeat;
}

#ai-integrated{
position: relative;
margin-top: 12px;
}

.fluent-hyperlink-control{
padding: 8px;
border-radius: 4px;
text-align: center;
display: inline-flex;
align-items: center;
text-decoration: none;
}

.fluent-hyperlink-control:hover{
background-color: rgba(230, 230, 230, 0.1);
}

.fluent-hyperlink-control:active{
background-color: rgba(230, 230, 230, 0.3);
}

0 comments on commit e967880

Please sign in to comment.