Skip to content

Commit

Permalink
refactor: refactor UI (#6)
Browse files Browse the repository at this point in the history 
* feat: add fade-in-out animation

* feat: add avatar

* refactors: set hover for all download icons

* optimize: optimize cover first showing speed
  • Loading branch information
@syt-honey
syt-honey authored Sep 4, 2023
1 parent 96fa09b commit 8fcd012
Show file tree
Hide file tree
Showing 22 changed files with 190 additions and 111 deletions.
Binary file added image/avatar1.webp
View file
Binary file not shown.
Binary file added image/avatar10.webp
View file
Binary file not shown.
Binary file added image/avatar11.webp
View file
Binary file not shown.
Binary file added image/avatar12.webp
View file
Binary file not shown.
Binary file added image/avatar2.webp
View file
Binary file not shown.
Binary file added image/avatar3.webp
View file
Binary file not shown.
Binary file added image/avatar4.webp
View file
Binary file not shown.
Binary file added image/avatar5.webp
View file
Binary file not shown.
Binary file added image/avatar6.webp
View file
Binary file not shown.
Binary file added image/avatar7.webp
View file
Binary file not shown.
Binary file added image/avatar8.webp
View file
Binary file not shown.
Binary file added image/avatar9.webp
View file
Binary file not shown.
Binary file added image/hero-image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed image/hero-image.webp
View file
Binary file not shown.
Binary file added image/hero-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed image/hero-mobile.webp
View file
Binary file not shown.
58 changes: 15 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</li> -->
<li class="pl2">
<a href="https://flat-web.whiteboard.agora.io/" target="_blank" class="try-btn inline-flex">
<span>Try for free</span>
<span>Try for free with web</span>
</a>
</li>
<li class="pl2">
Expand All @@ -58,7 +58,7 @@
<p class="center f2 subtitle">Simple, refreshing online teaching tool that focuses on the in-class interactive experience</p>
<div class="center mt4">
<a href="https://flat-web.whiteboard.agora.io/" target="_blank" class="try-btn inline-flex">
<span>Try for free</span>
<span>Try for free with web</span>
</a>
<a href="#download" class="download-btn inline-flex ml1">
Download
Expand All @@ -67,8 +67,8 @@
</div>

<div class="center">
<img class="cover desktop mobile-disabled" src="./image/hero-image.webp" alt="cover">
<img class="cover mobile desktop-disabled" src="./image/hero-mobile.webp" alt="cover">
<img class="cover desktop mobile-disabled" loading="lazy" src="./image/hero-image.png" alt="cover">
<img class="cover mobile desktop-disabled" loading="lazy" src="./image/hero-mobile.png" alt="cover">
</div>
</header>

Expand All @@ -93,9 +93,9 @@
<section class="carousel carousel-1 flex pa3">
<div class="images flex flex-align-center">
<img src="./image/carousel-1-interactive.webp" alt="interactive whiteboard">
<img class="disabled" src="./image/carousel-1-video.webp" alt="audio&video">
<img class="disabled" src="./image/carousel-1-courseware.webp" alt="courseware sharing">
<img class="disabled" src="./image/carousel-1-record.webp" alt="record&replace">
<img src="./image/carousel-1-video.webp" alt="audio&video">
<img src="./image/carousel-1-courseware.webp" alt="courseware sharing">
<img src="./image/carousel-1-record.webp" alt="record&replace">
</div>
<div class="carousel-keys pa2">
<p class="subtitle">A professional online teaching tool</p>
Expand Down Expand Up @@ -125,20 +125,20 @@
</div>
<div class="images flex flex-align-center">
<img src="./image/carousel-2-class.webp" alt="book classes">
<img class="disabled" src="./image/carousel-2-upload.webp" alt="upload file">
<img class="disabled" src="./image/carousel-2-qa.webp" alt="q&a">
<img class="disabled" src="./image/carousel-2-rewards.webp" alt="issue rewards">
<img class="disabled" src="./image/carousel-2-authority.webp" alt="authority manage">
<img src="./image/carousel-2-upload.webp" alt="upload file">
<img src="./image/carousel-2-qa.webp" alt="q&a">
<img src="./image/carousel-2-rewards.webp" alt="issue rewards">
<img src="./image/carousel-2-authority.webp" alt="authority manage">
</div>
</section>

<section class="carousel carousel-3 flex pa3">
<div class="images flex flex-align-center">
<img src="./image/carousel-3-hand.webp" alt="raise hand">
<img class="disabled" src="./image/carousel-3-doodle.webp" alt="doodle">
<img class="disabled" src="./image/carousel-3-chat.webp" alt="group chat">
<img class="disabled" src="./image/carousel-3-replay.webp" alt="view replay">
<img class="disabled" src="./image/carousel-3-img.webp" alt="upload images">
<img src="./image/carousel-3-doodle.webp" alt="doodle">
<img src="./image/carousel-3-chat.webp" alt="group chat">
<img src="./image/carousel-3-replay.webp" alt="view replay">
<img src="./image/carousel-3-img.webp" alt="upload images">
</div>
<div class="carousel-keys pa2">
<p class="subtitle">Stimulate students' interest in learning</p>
Expand Down Expand Up @@ -234,34 +234,6 @@
</div>
<div class="center mt1 f1">Copyright © 2023 Flat. All Rights Reserved</div>
</footer>

<div id="download-modal" class="disabled">
<div class="modal-mask"></div>
<div class="modal-wrap">
<div class="modal-header">
<img class="modal-close-btn" src="./image/close.svg" alt="close modal">
</div>
<div class="modal-body">
<p class="f3">Download the suitable Agora Flat version for your Mac</p>

<div class="pa3">
<a href="https://flat-storage.oss-accelerate.aliyuncs.com/versions/latest/stable/mac/Flat-arm64-2.2.4.dmg" target="_blank" class="try-btn inline-flex">
Download Apple Silicon
</a>

<a href="https://flat-storage.oss-accelerate.aliyuncs.com/versions/latest/stable/mac/Flat-x64-2.2.4.dmg" class="download-btn inline-flex ml1">
Download Intel Chip
</a>
</div>
</div>
<div class="modal-footer mt4">
<ul>
<li>Click the Apple menu at the top left, then choose "About This Mac"</li>
<li>chip type ("Apple" or "Intel") and choose correct version for download</li>
</ul>
</div>
</div>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>
42 changes: 30 additions & 12 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import {
isChinese,
getCurrentLanguage,
generateModalItem,
addModal
addModal,
macDownloadBody
} from "./utils/index.js"

void (function () {
Expand All @@ -20,7 +21,10 @@ void (function () {
const fragment = currentComment.map(i => {
const comment = document.createElement("div")
comment.innerHTML = `
<span>${i.name}</span>
<div>
<img src="${i.src}" alt="${i.name}" width=30 style="vertical-align: middle">
<span style="vertical-align: middle">${i.name}</span>
</div>
<p class="subtitle">${i.content}</p>
`
return comment
Expand Down Expand Up @@ -80,8 +84,9 @@ void (function () {

function updateTab(activeTab) {
tabs.forEach((tab, i) => {
const visible = tab.classList.toggle("active", tab === activeTab)
imgs[i].style.display = visible ? "inline-block" : "none"
tab.classList.toggle("active", tab === activeTab)
imgs[i].style.opacity = tab === activeTab ? 1 : 0
imgs[i].style.transform = `translateX(-${i * 100}%)`
})
}
tabs.forEach(tab => tab.on("click", updateTab.bind(null, tab)))
Expand Down Expand Up @@ -229,13 +234,24 @@ void (function () {
}

function initMacDownloadModal() {
const { macId, closeCls, modalId } = $CONFIG.download
const macDownloadBtn = $(macId)
const closeBtn = $(closeCls)
const modal = $(modalId)
const { target, closeCls, id, bodyCls, queryBodyCls } = $CONFIG.download

macDownloadBtn.on("click", () => modal.classList.add("active"))
closeBtn.on("click", () => modal.classList.remove("active"))
$(target).on("click", e => {
foldingCallback()
e.stopPropagation()
})

function foldingCallback() {
if (!$(id)) {
addModal({ id: id.substring(1), bodyCls }, "desktop")

const foldingModalBody = $(queryBodyCls)
foldingModalBody.innerHTML = macDownloadBody()
$(closeCls)?.on("click", foldingCallback)
} else {
document.body.removeChild($(id))
}
}
}

function main() {
Expand Down Expand Up @@ -273,9 +289,11 @@ void (function () {
intervals: [4000, 5000, 6000]
},
download: {
macId: "#mac-download",
id: "#download-modal",
target: "#mac-download",
bodyCls: "download",
queryBodyCls: ".modal-wrap.download",
closeCls: ".modal-close-btn",
modalId: "#download-modal",
},
cover: {
cls: ".cover",
Expand Down
40 changes: 28 additions & 12 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ p {
.subtitle { margin-top: 0.625em; color: var(--gray-color, #586376); line-height: 1.5; }
.grid-2c { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em; }
.grid-3c { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; }
.disabled { display: none; }
.disabled { visibility: hidden; opacity: 0; transition: opacity .5s, visibility .5s; }
.active { visibility: visible; opacity: 1; }

/*===========================================================================*/

Expand Down Expand Up @@ -156,19 +157,31 @@ p {
padding: 0.563em 1.25em;
}

.carousel {
overflow: hidden;
}

.carousel .carousel-keys {
max-width: 60%;
width: 50%;
padding: 2em;
background-color: var(--light-blue-2, #e8faff);
border-radius: 20px;
z-index: 1;
}

.images {
flex-shrink: 0;
width: 50%;
min-width: 40%;
}

.images img {
width: 100%;
transition: opacity .3s ease;
}

.images img:not(:first-child) {
opacity: 0;
}

.items .item {
Expand Down Expand Up @@ -215,17 +228,17 @@ p {
margin-left: 10px;
}

.scroll .scroll-content div {
.scroll .scroll-content > div {
padding: 1.875em;
background-color: var(--light-blue-2, #e8faff);
border-radius: 20px;
}

.scroll .scroll-content div + div {
.scroll .scroll-content > div + div {
margin-top: 10px;
}

.scroll .scroll-content div:nth-child(odd) {
.scroll .scroll-content > div:nth-child(odd) {
background-color: var(--light-blue-3, "#bbedff");
border-radius: 20px;
}
Expand Down Expand Up @@ -290,6 +303,8 @@ p {
color: inherit;
}

.modal-root { position: relative; z-index: 1000; }

.modal-mask {
height: 100%;
position: fixed;
Expand Down Expand Up @@ -448,10 +463,15 @@ p {

.cover {
display: inline-block;
margin-top: -158px;
margin-top: -130px;
margin-bottom: 1.875em;
transition: transform 0.1s ease-in-out;
will-change: transform;
cursor: pointer;
border-radius: 6px;
box-shadow: 0px 20px 40px 0px #00000040,
0px 4px 10px 0px #00000040;

}

.try-btn, .download-btn {
Expand All @@ -462,7 +482,7 @@ p {
margin-bottom: 20px;
}

.download-list #mac-download .icon-container::after {
.download-list .icon-container::after {
content: "";
opacity: 0;
position: absolute;
Expand All @@ -478,14 +498,10 @@ p {
transition: opacity .7s ease-in-out;
}

.download-list #mac-download .icon-container:hover::after {
.download-list .icon-container:hover::after {
opacity: 1;
}

#download-modal.active {
display: block;
}

.modal-wrap {
position: fixed;
top: 50%; left: 50%;
Expand Down
Loading

0 comments on commit 8fcd012

Please sign in to comment.