templates/site/lp/mobile-ads-landing.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block replacestylesheets %}
  4.     <link rel="preload" href="{{ asset('fonts/SFProDisplay-Bold.woff2') }}" as="font" type="font/woff2" crossorigin>
  5.     <link rel="preload" href="{{ asset('fonts/SFProDisplay-Heavy.woff2') }}" as="font" type="font/woff2" crossorigin>
  6.     <link rel="preload" href="{{ asset('/fonts/SFProDisplay-Regular.woff2') }}" as="font" type="font/woff2" crossorigin>
  7.     <link rel="preload" href="{{ asset('fonts/SFProDisplay-Medium.woff2') }}" as="font" type="font/woff2" crossorigin>
  8.     <link rel="preload" href="{{ asset('fonts/SFProDisplay-Semibold.woff2') }}" as="font" type="font/woff2" crossorigin>
  9.     <link rel="preload" href="{{ asset('fonts/SFProDisplay-Bold.woff2') }}" as="font" type="font/woff2" crossorigin>
  10.     <link rel="stylesheet" href="{{ asset('css/main.css') }}?v=3.0.3" type="text/css"/>
  11.     <style>
  12.     *{
  13.         box-sizing: border-box;
  14.     }
  15.     body{
  16.         color: #000000;
  17.         padding-bottom: 40px;
  18.         font-size: 16px;
  19.         font-weight: 500;
  20.         line-height: 20px;
  21.     }
  22.     button{
  23.         cursor: pointer;
  24.     }
  25.     #gradient-bg{
  26.         position: absolute;
  27.         z-index: -1;
  28.         top: 0;
  29.         width: 100vw;
  30.         aspect-ratio: 1;
  31.         display: block;
  32.         background: url(https://dotoast.com/img/mobile-ads-landing/gradient-bg.png) top right no-repeat;
  33.         background-size: cover;
  34.     }
  35.     .content-column{
  36.         padding: 0 32px;
  37.         max-width: 550px;
  38.         margin: auto;
  39.     }
  40.     #header{
  41.         display: flex;
  42.         justify-content: space-between;
  43.         align-items: center;
  44.         padding: 58px 32px 20px;
  45.     }
  46.     #logo{
  47.         display: block;
  48.         height: 32px;
  49.         aspect-ratio: 117 / 32;
  50.         background: url(https://dotoast.com/img/logo.svg) top left no-repeat;
  51.         background-size: contain;
  52.     }
  53.     #producthunt{
  54.         display: block;
  55.         height: 36px;
  56.         aspect-ratio: 116 / 36;
  57.         background: url(https://dotoast.com/img/mobile-ads-landing/producthunt-badge.png) top left no-repeat;
  58.         background-size: contain;
  59.     }
  60.     #hero-image{
  61.         width: 100vw;
  62.         margin: auto;
  63.         margin-bottom: 20px;
  64.         max-width: 550px;
  65.     }
  66.     h1{
  67.         font-size: 32px;
  68.         font-weight: 700;
  69.         line-height: 40px;
  70.         margin: 0;
  71.         margin-bottom: 40px;
  72.     }
  73.     .yellow{
  74.         color: #FFC31E;
  75.     }
  76.     form{
  77.         margin-bottom: 80px;
  78.     }
  79.     input{
  80.         width: 100%;
  81.         padding: 12px 16px;
  82.         border-radius: 10px;
  83.         border: solid 1px rgba(0, 0, 0, .08);
  84.         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  85.         font-size: 16px;
  86.         font-weight: 500;
  87.         line-height: 20px;
  88.         margin-bottom: 20px;
  89.     }
  90.     input:focus{
  91.         border-color: rgba(0, 0, 0, 1);
  92.         outline: none;
  93.     }
  94.     input:user-invalid{
  95.         border-color: #ED254E;
  96.         background-color: rgba(237, 37, 78, .08);
  97.     }
  98.     form button{
  99.         font-size: 16px;
  100.         font-weight: 600;
  101.         line-height: 20px;
  102.         padding: 12px 16px;
  103.         border-radius: 10px;
  104.         color: #FFFFFF;
  105.         background-color: #000000;
  106.         border: none;
  107.         width: 100%;
  108.     }
  109.     form button.clicked{
  110.         background-color: #17B73A;
  111.     }
  112.     .installation-links-container{
  113.         margin-bottom: 40px;
  114.         display: grid;
  115.         row-gap: 20px
  116.     }
  117.     h6{
  118.         font-size: 16px;
  119.         font-weight: 500;
  120.         line-height: 20px;
  121.         color: rgba(0, 0, 0, .4);
  122.         margin: 0;
  123.     }
  124.     h6 a{
  125.         color: #5856D6;
  126.         text-decoration: none;
  127.     }
  128.     .browser-link-block{
  129.         display: flex;
  130.         justify-content: space-between;
  131.         align-items: center;
  132.     }
  133.     .browser-link-block > div{
  134.         display: flex;
  135.         align-items: center;
  136.         gap: 12px;
  137.         font-weight: 600;
  138.     }
  139.     .browser-icon{
  140.         display: block;
  141.         height: 40px;
  142.         aspect-ratio: 1 / 1;
  143.         background-size: contain;
  144.         background-position: center;
  145.     }
  146.     .browser-icon.chrome{
  147.         background-image: url(https://dotoast.com/img/new-home/chrome-logo@2x.png);
  148.     }
  149.     .browser-icon.safari{
  150.         background-image: url(https://dotoast.com/img/new-home/safari-logo@2x.png);
  151.     }
  152.     .browser-icon.edge{
  153.         background-image: url(https://dotoast.com/img/mobile-ads-landing/edge.png);
  154.     }
  155.     .browser-icon.firefox{
  156.         background-image: url(https://dotoast.com/img/mobile-ads-landing/firefox.png);
  157.     }
  158.     .browser-icon.opera{
  159.         background-image: url(https://dotoast.com/img/mobile-ads-landing/opera.png);
  160.     }
  161.     .browser-icon.ios{
  162.         background-image: url(https://dotoast.com/img/mobile-ads-landing/ios.png);
  163.     }
  165.     .browser-link-block button{
  166.         padding: 8px 12px;
  167.         font-size: 14px;
  168.         font-weight: 500;
  169.         line-height: 16px;
  170.         color: rgba(0, 0, 0, .8);
  171.         border-radius: 16px;
  172.         border: solid 1px rgba(0, 0, 0, .08);
  173.         background: transparent;
  174.     }
  175.     .browser-link-block button.clicked{
  176.         background-color: rgba(23, 183, 58, .08);
  177.         border: solid 1px #17B73A;
  178.     }
  179. </style>
  180. {% endblock %}
  181. {% block replacejslib %}{% endblock %}
  182. {% block title %}Toast - Save Tabs for Later{% endblock %}
  185. {% block wrapperExists %}
  186.     <span id="gradient-bg"></span>
  187.     <div id="header" class="content-column">
  188.         <a href="https://dotoast.com"><span id="logo"></span></a>
  189.         <span id="producthunt"></span>
  190.     </div>    
  191.     <img id="hero-image" src="https://dotoast.com/img/mobile-ads-landing/hero-img.png">
  192.     <div class="content-column">
  193.         <h1>Get <span class="yellow">Toast</span> Extension for Your Browser</h1>
  194.         
  195.         <form method="post" action="">
  196.             <input name="email" type="email"
  197.             autocomplete="email"
  198.             placeholder="Enter your email address"
  199.             required>
  200.             <button type="submit">Send Installation Link</button>
  201.             <!-- maybe make green on submit and say Sent -->
  202.         </form>
  204.         <div class="installation-links-container">
  205.             <h6>Or copy installation link for desktop...</h6>
  206.             
  207.             <!-- Chrome broweser link -->
  208.             <div class="browser-link-block" id="chrome-link">
  209.                 <div>
  210.                     <span class="browser-icon chrome"></span>
  211.                     <span>Chrome</span>
  212.                 </div>
  213.                 <a role="button" ping="https://dotoast.com/metric-count?metric=mobile-link-copied-chrome&redirect_url=https%3A%2F%2Fdotoast.com">
  214.                     <button 
  215.                     data-link="https://chrome.google.com/webstore/detail/toast/pejhbjnfifdecpkgcjhgmcaphdobmiie?utm_source=mobile-ads-landing&utm_medium=cpc&utm_campaign=mobile-ads-landing"
  216.                     >Copy Link</button>
  217.                 </a>
  218.             </div>
  220.             <!-- Safari broweser link -->
  221.             <div class="browser-link-block" id="safari-link">
  222.                 <div>
  223.                     <span class="browser-icon safari"></span>
  224.                     <span>Safari</span>
  225.                 </div>
  226.                 <a role="button" ping="https://dotoast.com/metric-count?metric=mobile-link-copied-safari&redirect_url=https%3A%2F%2Fdotoast.com">
  227.                     <button 
  228.                     data-link="https://apps.apple.com/us/app/toast/id1465707487?utm_source=mobile-ads-landing&utm_medium=cpc&utm_campaign=mobile-ads-landing"
  229.                     >Copy Link</button>
  230.                 </a>
  231.             </div>
  233.             <!-- Edge broweser link -->
  234.             <div class="browser-link-block" id="edge-link">
  235.                 <div>
  236.                     <span class="browser-icon edge"></span>
  237.                     <span>Microsoft Edge</span>
  238.                 </div>
  239.                 <a role="button" ping="https://dotoast.com/metric-count?metric=mobile-link-copied-edge&redirect_url=https%3A%2F%2Fdotoast.com">
  240.                     <button 
  241.                     data-link="https://microsoftedge.microsoft.com/addons/detail/toast/llmejgkjpfngebfhcbadinppkmbjbkij?utm_source=mobile-ads-landing&utm_medium=cpc&utm_campaign=mobile-ads-landing"
  242.                     >Copy Link</button>
  243.                 </a>
  244.             </div>
  246.             <!-- Firefox broweser link -->
  247.             <div class="browser-link-block" id="firefox-link">
  248.                 <div>
  249.                     <span class="browser-icon firefox"></span>
  250.                     <span>Firefox</span>
  251.                 </div>
  252.                 <a role="button" ping="https://dotoast.com/metric-count?metric=mobile-link-copied-firefox&redirect_url=https%3A%2F%2Fdotoast.com">
  253.                     <button 
  254.                     data-link="https://addons.mozilla.org/en-US/firefox/addon/dotoast/?utm_source=mobile-ads-landing&utm_medium=cpc&utm_campaign=mobile-ads-landing"
  255.                     >Copy Link</button>
  256.                 </a>
  257.             </div>
  259.             <!-- Opera broweser link -->
  260.             <div class="browser-link-block" id="opera-link">
  261.                 <div>
  262.                     <span class="browser-icon opera"></span>
  263.                     <span>Opera</span>
  264.                 </div>
  265.                 <a role="button" ping="https://dotoast.com/metric-count?metric=mobile-link-copied-opera&redirect_url=https%3A%2F%2Fdotoast.com">
  266.                     <button 
  267.                     data-link="https://addons.opera.com/en/extensions/details/toast?utm_source=mobile-ads-landing&utm_medium=cpc&utm_campaign=mobile-ads-landing"
  268.                     >Copy Link</button>
  269.                 </a>
  270.             </div>
  272.         </div>
  274.         <div class="installation-links-container">
  275.             <h6>Toast is available for mobile</h6>
  277.             <!-- iOS link -->
  278.             <div class="browser-link-block" id="ios-link">
  279.                 <div>
  280.                     <span class="browser-icon ios"></span>
  281.                     <span>Toast for iPhone</span>
  282.                 </div>
  283.                 <a href="https://apps.apple.com/ua/app/toast-for-safari/id1465707487?platform=iphone&utm_source=mobile-ads-landing&utm_medium=cpc&utm_campaign=mobile-ads-landing" target="_blank" ping="https://dotoast.com/metric-count?metric=mobile-link-opened-ios&redirect_url=https%3A%2F%2Fdotoast.com">
  284.                     <button>Download</button>
  285.                 </a>
  286.             </div>
  287.         </div>
  289.         <h6>Reach us at <a href="mailto:dotoast.com@gmail.com" ping="tracking-link-here">dotoast.com@gmail.com</a></h6>
  291.     </div>
  292. {% endblock %}
  294. {% block replacejs %}
  295.     <script src="{{ asset('js/libs/jquery-3.6.0.min.js') }}"></script>
  296.     <script>
  297.     
  298.     $('.browser-link-block:not(#ios-link) button').click((event) => {
  299.         let button = $(event.target);
  300.         let storeLink = button.attr('data-link');
  302.         copyToClipboard(storeLink, () => {
  303.             // set clicked state
  304.             button
  305.             .addClass('clicked')
  306.             .css('width', button.outerWidth())
  307.             .text('Copied!')
  309.             fetch(button.parent().attr('ping'), { method: "POST" })
  311.             // remove clicked state
  312.             setTimeout(() => {
  313.                 button
  314.                 .removeClass('clicked')
  315.                 .css('width', 'auto')
  316.                 .text('Copy Link')
  317.             }, 2000)
  318.         })
  320.     })
  322.     function copyToClipboard(text, callback){
  323.         const el = document.createElement('textarea');
  324.         el.value = text;
  325.         document.body.appendChild(el);
  326.         el.select();
  327.         document.execCommand('copy');
  328.         document.body.removeChild(el);
  330.         typeof callback === 'function' && callback();
  331.     };
  333.     function handleForm(email){
  334.         let payload = {email: email};
  335.         let data = new FormData();
  336.         data.append( "json", JSON.stringify( payload ) );
  338.         fetch("https://dotoast.com/mobile-ads-form-handler.php",
  339.         {
  340.             method: "POST",
  341.             body: data
  342.         })
  343.     }
  345.     $('form').on('submit', (e) =>{
  346.         e.preventDefault();
  347.         let input = $('form input');
  348.         let email = input.val();
  349.         $('form').trigger('reset')
  351.         let button = $('form button');
  352.         // set clicked state
  353.         button
  354.             .addClass('clicked')
  355.             .text("Sent your way! Check Spam too.")
  357.             handleForm(email)
  359.             // remove clicked state
  360.             setTimeout(() => {
  361.                 button
  362.                 .removeClass('clicked')
  363.                 .text('Send Installation Link')
  364.             }, 5000)
  365.     })
  366. </script>
  367. {% endblock %}