eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-2565: Apply new design for smart banner

Browse Source
This commit is contained in:
HuyNguyen
2024-02-06 15:52:02 +07:00
committed by Dat PHAM HOANG
parent e7eca92ada
commit 34d7845358
12 changed files with 97 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+24 -32
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<!--
If you are serving your web app in a path other than the root, change the
@@ -38,6 +38,7 @@
<script type="application/javascript" src="assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
<script src="splash/splash.js"></script>
<script src="worker_service/worker_service.js"></script>
<script src="i18n/translater.js"></script>
</head>
<body>
@@ -58,42 +59,33 @@
</div>
</div>
<div class="bottom-sheet">
<div class="sheet-header">
<span class="open_on_mobile_title">Open Twake Mail in...</span>
</div>
<div class="sheet-content">
<span class="open_on_mobile_actions" onclick={hanldeOpenTwakeMailApp()}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#002DDF"
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
<circle cx="12" cy="16" r="1" fill="black" />
<line x1="12" y1="18" x2="12.01" y2="18" />
</svg>
<span style="color: #002DDF">Twake Mail App</span>
<span style="flex: 1"></span>
<button class="button openApp">
Open
</button>
</span>
<span class="open_on_mobile_actions" onclick={handleContinueTwakeMailOnWeb()}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black"
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
<span>Continue on web</span>
<span style="flex: 1"></span>
<Button class="button continueWeb">
Continue
</Button>
</span>
</div>
<div class="smart-banner">
<button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
<picture class="close-icon">
<source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: light)">
<source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: dark)">
<img aria-hidden="true" src="worker_service/img/ic-close-1x.png" alt="">
</picture>
</button>
<div class="banner-content">
<picture class="twake-mail-icon">
<source srcset="worker_service/img/tmail-1x.png 1x, worker_service/img/tmail-2x.png 2x, worker_service/img/tmail-3x.png 3x, worker_service/img/tmail-4x.png 4x" media="(prefers-color-scheme: light)">
<source srcset="worker_service/img/tmail-1x.png 1x, worker_service/img/tmail-2x.png 2x, worker_service/img/tmail-3x.png 3x, worker_service/img/tmail-4x.png 4x" media="(prefers-color-scheme: dark)">
<img aria-hidden="true" src="worker_service/img/tmail-1x.png" alt="">
</picture>
<span>
<div class="banner-title" id="banner-title-id"></div>
<div class="banner-description" id="banner-description-id"></div>
</span>
<span style="flex: 1"></span>
<span class="open-button" id="open-button-id" onClick= {handleOpenTwakeMailApp()}></span>
</div>
</div>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
loadLanguageResources()
initialWorkerService();
</script>
<script src="https://unpkg.com/pica/dist/pica.min.js" ></script>