Files
omnivore/pkg/extension/src/views/cta-popup.html
2023-11-15 11:44:22 +08:00

100 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnivore</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
.cta-container {
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 24px 12px;
background: linear-gradient(150deg, #fff 55%, #ffde8c 55%);
background-color: #fff;
color: #3d3d3d;
font-family: sans-serif;
text-align: center;
}
.cta-container__wrapper {
position: relative;
z-index: 1;
}
.cta-container__title {
padding: 0 24px 24px;
font-weight: 600;
font-size: 16px;
}
.cta-container__icon {
vertical-align: unset;
margin-bottom: -4px;
fill: none;
}
.cta-container__link {
display: flex;
align-items: center;
justify-content: center;
width: 184px;
height: 34px;
margin: 36px auto 14px;
border-radius: 40px;
background-color: #fff;
color: inherit;
font-weight: 700;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.cta-container__text {
margin: 0;
font-size: 12px;
}
.cta-container__textlink {
color: inherit;
font-weight: 700;
}
</style>
</head>
<body>
<div class="cta-container">
<div class="cta-container__wrapper">
<div class="cta-container__title">Click the <svg class="cta-container__icon" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path d="M8.39569 17.0262V9.97149C8.39569 9.3683 9.10379 9.02736 9.57585 9.44698L11.7526 12.6203C12.1984 12.9875 12.8278 12.9875 13.2737 12.6203L15.398 9.4732C15.87 9.07981 16.5781 9.39452 16.5781 9.99772V13.7218C16.5781 15.5314 17.7845 17 19.5941 17H19.6465C21.1939 17 22.5314 15.951 22.8985 14.4561C23.0821 13.6693 23.2395 12.8563 23.2395 12.2269C23.2133 6.06385 17.9943 1.39566 11.7526 1.81528C6.45498 2.18244 2.18018 6.45724 1.81302 11.7548C1.39341 17.9966 6.32386 23.2155 12.5131 23.2155" stroke="#3D3D3D" stroke-width="2.09091" stroke-miterlimit="10"/>
</svg> icon to save articles to Omnivore.
</div>
<div class="cta-container__image">
<img src="/images/devices.png" alt="screenshot">
</div>
<a href="#" target="_blank" class="cta-container__link" id="get-omnivore-link">Get Omnivore</a>
<div class="cta-container__text">Already have an account? <a href="#" target="_blank" id="omnivore-login" class="cta-container__textlink">Log in</a></div>
</div>
</div>
<script src="/scripts/cta-popup.js"></script>
</body>
</html>