app/template/default/refer_friend_lp.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}
  4. <script>
  5.     const INVITE_URL = '{{ referralLink }}';
  7.     // 反映
  8.     const input = document.getElementById('invite-url');
  9.     const copyBtn = document.getElementById('copy-btn');
  10.     const toast = document.getElementById('copy-toast');
  11.     input.value = INVITE_URL;
  13.     // コピー動作
  14.     if({{ availableCount }} > 0) {
  15.         copyBtn.addEventListener('click', async () => {
  16.         console.log('copying...');
  17.         try {
  18.             await navigator.clipboard.writeText(input.value);
  19.             toast.textContent = 'リンクをコピーしました';
  20.             setTimeout(() => toast.textContent = '', 2000);
  21.         } catch (e) {
  22.             input.select();
  23.             document.execCommand('copy');
  24.             toast.textContent = 'コピーしました（互換モード）';
  25.             setTimeout(() => toast.textContent = '', 2000);
  26.         }
  27.         });
  29.         // 共有リンク（必要に応じてエンコード）
  30.         const shareMessage = `【シコメルストア】
  31. お友達から3,000円の割引クーポンが届きました！
  32. さっそく、有名店の仕込み済みメニューを試してみましょう。
  33. 下記URLから登録するだけで、クーポンがもらえます。
  34. ` + INVITE_URL;
  35.         const shareText = encodeURIComponent(shareMessage);
  36.         const shareUrl  = encodeURIComponent(INVITE_URL);
  38.         const lineShareLink = (isMobile()) 
  39.             ?`https://line.me/R/share?text=${shareText}`
  40.                 : `https://social-plugins.line.me/lineit/share?url=${shareUrl}&text=${shareText}`
  41.         // LINE (line.me)
  42.         document.getElementById('share-line').href = lineShareLink;
  43.         
  44.         // Facebook (シェアダイアログ。ドメインが公開到達可能である必要あり)
  45.         document.getElementById('share-fb').href =
  46.         // `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`;
  47.         `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(getFaceBookShareLink())}`;
  49.         // メール（mailto）
  50.         document.getElementById('share-mail').href =
  51.         `mailto:?subject=${encodeURIComponent('招待リンクの共有')}&body=${shareText}`;
  53.     } else {
  54.         // リンクを無効化
  55.         document.getElementById('share-line').style.pointerEvents = "none";
  56.         document.getElementById('share-fb').style.pointerEvents = "none";
  57.         document.getElementById('share-mail').style.pointerEvents = "none";
  58.     }
  59.     function getFaceBookShareLink() {
  60.         const url = new URL(INVITE_URL);
  61.         const params = url.searchParams;
  62.         const origin = url.origin;
  63.         return url.origin + "/user_data/share-entry-before?rc=" + params.get('rc');    
  64.     }
  66.     function isMobile() {
  67.         return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
  68.     }
  69. </script>
  70. {% endblock javascript %}
  72. {% block stylesheet %}
  73. <style>
  74.     .ec-layoutRole {
  75.         background: #ffffffff;
  76.     }
  77.     .main_content {
  78.         width: 375px;
  79.         margin: auto;
  80.     }
  81.     .main_content h1 {
  82.         font-size: 22px;
  83.         font-weight: bold;
  84.         margin: 0px;
  85.     }
  86.     .section1 {
  87.         --bg: #fff7d6;         /* パネル背景（薄いきいろ） */
  88.         --ink: #2b2b2b;        /* 文字色 */
  89.         --muted: #6b7280;      /* 補助文字色 */
  90.         --pill: #f3f4f6;       /* 入力背景 */
  91.         --copy: #e5e7eb;       /* コピーボタン背景 */
  92.         --danger: #ef4444;     /* 残回数の赤 */
  93.         --border: #e5e7eb;     /* 枠線 */
  94.     }
  96.     /* カード本体 */
  97.     .section1 .invite-card {
  98.         margin: 0 auto;
  99.         background: var(--bg);
  100.         padding: 20px 20px 16px;
  101.         box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.06);
  102.     }
  104.     /* タイトル */
  105.     .section1 .invite-title {
  106.         text-align: center;
  107.         font-weight: 700;
  108.         font-size: 18px;
  109.         margin: 2px 0 16px;
  110.         letter-spacing: .02em;
  111.         color: var(--ink);
  112.     }
  114.     /* 入力 + コピー */
  115.     .section1 .copy-row {
  116.         display: grid;
  117.         grid-template-columns: 1fr auto;
  118.         align-items: center;
  119.         width: 327px;
  120.     }
  121.     @media screen and (max-width: 767px) {
  122.         .main_content {
  123.             width: 100%
  124.         }
  125.         .section1 .copy-row {
  126.             width: 100%;
  127.         }
  128.     }
  130.     .section1 .copy-input {
  131.         width: 100%;
  132.         background: #ffffff;
  133.         border: 1px solid #d1d5db;
  134.         border-right-color: #ffff;
  135.         height: 48px;
  136.         padding: 0 12px;
  137.         font-size: 14px;
  138.         color: var(--ink);
  139.         outline: none;
  140.     }
  142.     .section1 .copy-btn {
  143.         background: #ffffff;
  144.         border: 1px solid #d1d5db;
  145.         border-left-color: #ffff;
  146.         padding: 0 12px;
  147.         height: 48px;
  148.         font-size: 14px;
  149.         cursor: pointer;
  150.         color: #1F9FCB;
  151.         font-weight: bold;
  152.         white-space: nowrap;
  153.     }
  154.     .section1 span {
  155.         font-weight: bold;
  156.     }
  157.     .section1 .copy-btn:hover { filter: brightness(0.98); }
  159.     .section1 .copy-toast {
  160.         font-size: 12px;
  161.         color: var(--muted);
  162.         min-height: 16px;
  163.         text-align: left;
  164.     }
  166.     /* 共有ボタン群 */
  167.     .section1 .share-row {
  168.         display: flex;
  169.         justify-content: space-between;
  170.         gap: 10px;
  171.         padding: 0 0 16px;
  172.     }
  173.     .section1 .share-row span {
  174.         font-size: 12px;
  175.     }
  177.     .section1 .share-btn {
  178.         flex: 1 1 0;
  179.         display: flex;
  180.         flex-direction: column;
  181.         align-items: center;
  182.         gap: 6px;
  183.         text-decoration: none;
  184.         color: var(--ink);
  185.         font-size: 12px;
  186.         text-align: center;
  187.         transition: background-color .12s ease;
  188.     }
  189.     
  190.     /* アイコンサイズ（SVG） */
  191.     .section1 .icon {
  192.         width: 28px;
  193.         height: 28px;
  194.         display: inline-block;
  195.     }
  197.     /* 残回数テキスト */
  198.     .section1 .note {
  199.         text-align: center;
  200.         font-size: 16px;
  201.         color: var(--muted);
  202.         margin-top: 16px;
  203.         font-weight: bold;
  204.     }
  205.     .section1 .note .count {
  206.         color: var(--danger);
  207.         font-weight: 700;
  208.         font-size: 28px;
  209.         margin: 0 2px;
  210.     }
  212.     /* スマホ最適化（狭い端末での余白最適化） */
  213.     @media (max-width: 380px) {
  214.         .section1 .invite-card { padding: 16px 14px; }
  215.         .section1 .share-row { gap: 8px; }
  216.         .section1 .invite-title { font-size: 17px; }
  217.     }
  218.     /* ===== ダークセクション（section2専用） ===== */
  219.     .section2 {
  220.         --bg: #ffffffff;          /* 背景（黒） */
  221.         --ink: #000000ff;         /* 文字（明） */
  222.         --muted: #cbd5e1;       /* 補助文字 */
  223.         --line: #1f2937;        /* 区切り線 */
  224.         --primary: #22d3ee;     /* アクセント（シアン） */
  225.         --primary-ink: #0b0b0b; /* ボタン文字（濃） */
  227.         background: var(--bg);
  228.         color: var(--ink);
  229.         padding: 48px 20px;
  230.     }
  231.     .section2 ul {
  232.         list-style: disc;
  233.     }
  235.     .section2__inner{
  236.         max-width: 960px;
  237.         margin: 0 auto;
  238.         text-align: left;
  239.     }
  240.     .section2__title h2{
  241.         text-align: center;
  242.     }
  244.     .section2__title h2{
  245.         font-size: 24px;
  246.         line-height: 1.2;
  247.         font-weight: 800;
  248.         letter-spacing: .01em;
  249.         margin: 0 0 10px;
  250.     }
  252.     .section2__subtitle{
  253.         font-size: 15px;
  254.         line-height: 1.9;
  255.         font-weight: bold;
  256.         max-width: 680px;
  257.     }
  259.     .section2__btn{
  260.         display: inline-flex;
  261.         align-items: center;
  262.         justify-content: center;
  263.         padding: 12px 18px;
  264.         border-radius: 999px;
  265.         font-weight: 700;
  266.         text-decoration: none;
  267.         border: 1px solid var(--line);
  268.         transition: transform .08s ease, filter .12s ease, background-color .12s ease;
  269.     }
  270.     .section2__btn:active{ transform: translateY(1px); }
  272.     .section2__btn--primary{
  273.         background: var(--primary);
  274.         color: var(--primary-ink);
  275.         border-color: transparent;
  276.     }
  277.     .section2__btn--primary:hover{ filter: brightness(0.96); }
  279.     .section2__btn--ghost{
  280.         background: transparent;
  281.         color: var(--ink);
  282.     }
  283.     .section2__btn--ghost:hover{ background: rgba(255,255,255,.06); }
  285.     /* アイコン付き特徴 */
  286.     .section2__features{
  287.         grid-template-columns: repeat(3, minmax(0,1fr));
  288.         gap: 12px;
  289.         padding: 0; 
  290.         margin: 0 auto 0;
  291.         max-width: 780px;
  292.     }
  293.     .feature{
  294.         align-items: center; 
  295.         gap: 10px;
  296.         background: rgba(255,255,255,.04);
  297.         padding: 4px 0px 4px 0;
  298.         margin-left: 18px;
  299.     }
  300.     .feature__icon{
  301.         width: 28px; height: 28px; border-radius: 8px;
  302.         background: rgba(255,255,255,.08);
  303.         display: grid; place-items: center;
  304.         font-size: 14px;
  305.     }
  306.     .feature__text{ font-size: 13px; color: var(--muted); }
  307.     
  308.     .share_line,
  309.     .share_facebook,
  310.     .share_mail {
  311.         width: 100px;
  312.         text-align: center;
  313.     }
  314.     .share_line .share-btn,
  315.     .share_facebook .share-btn,
  316.     .share_mail .share-btn
  317.     {
  318.         margin-bottom: 4px;
  319.     }
  320.     /* SP */
  321.     @media (max-width: 640px){
  322.         .section2{ padding: 36px 16px; }
  323.         .section2__title{ font-size: 22px; }
  324.         .section2__lead{ font-size: 14px; }
  325.         .section2__features{ grid-template-columns: 1fr; }
  326.     }
  328. </style>
  329. {% endblock stylesheet %}
  330. {% block main %}
  332.     <div class="main_content">
  334.         <header id="header_content" style="position: relative;">
  335.             <h1><img src="{{ asset('assets/img/refer_friend/top.webp', 'user_data') }}" alt="友達紹介でクーポンがもらえる" style="max-width: 100%;"></h1>
  336.         </header>
  338.         <section class="section1" style="">
  339.             <div class="invite-card" role="region" aria-labelledby="invite-title">
  340.             <h2 id="invite-title" class="invite-title">招待リンク</h2>
  342.             <div class="copy-row" style="{% if availableCount is same as (0) %} opacity: 0.4; {% endif %}">
  343.                 <input id="invite-url" class="copy-input" type="text"
  344.                     value="" aria-label="招待リンクURL" readonly />
  345.                 <button id="copy-btn" class="copy-btn" type="button" aria-label="リンクをコピー">コピー</button>
  346.             </div>
  347.             <div id="copy-toast" class="copy-toast" aria-live="polite"></div>
  349.             <div class="share-row" style="{% if availableCount is same as (0) %} opacity: 0.4; {% endif %}">
  350.                 <!-- LINE -->
  351.                 <div class="share_line">
  352.                     <a class="share-btn" id="share-line" href="#" target="_blank" rel="noopener">
  353.                     <img src="{{ asset('assets/img/refer_friend/line_logo.png', 'user_data') }}" style="max-width: 50px;">
  354.                     </a>
  355.                     <span>LINEで共有</span>
  356.                 </div>
  357.                 <!-- Facebook -->
  358.                 <div class="share_facebook">
  359.                     <a class="share-btn" id="share-fb" href="#" target="_blank" rel="noopener">
  360.                     <img src="{{ asset('assets/img/refer_friend/facebook_logo.png', 'user_data') }}" style="max-width: 50px;">
  361.                     </a>
  362.                     <span>Facebookで共有</span>
  363.                 </div>
  365.                 <!-- Mail -->
  366.                 <div class="share_mail">
  367.                     <a class="share-btn" id="share-mail" href="#" target="_blank" rel="noopener">
  368.                     <img src="{{ asset('assets/img/refer_friend/mail_icon.png', 'user_data') }}" style="max-width: 50px;">
  369.                     </a>
  370.                     <span>メールで共有</span>
  371.                 </div>
  372.             </div>
  373.             {% if app.user %}
  374.             <p class="note">あと <span id="remain-count" class="count">{{ availableCount }} 回</span> 招待できます</p>
  375.             {% else %}
  376.             <p class="note"><a href="{{ path('mypage_login', {'_target_path': app.request.uri }) }}">ログインする</a>と共有できます</p>
  377.             {% endif %}
  378.             </div>
  379.         </section>
  380.         <section class="section2">
  381.             <div class="section2__title">
  382.                 <h2>注意事項</h2>
  383.             </div>
  384.             <div class="section2__inner">
  385.                 <p class="section2__subtitle">1.クーポンの進呈・利用条件について</p>
  387.                 <ul class="section2__features">
  388.                     <li class="feature">本紹介システムを通じて紹介される方（新規会員）は、必ず紹介専用URLから遷移し、新規会員登録を完了してください。専用URL以外からの登録は特典の対象外となります。</li> 
  389.                     <li class="feature">特典の3,000円クーポン（紹介された方）は、新規会員登録完了後にその場で自動で付与されます。</li>
  390.                     <li class="feature">特典の1,000円クーポン（紹介した方）は、紹介された方が初回購入を完了し、その商品が発送された時点で自動で付与されます。クーポン獲得はLINEまたはメールで通知いたします。</li>
  391.                     <li class="feature">特典の1,000円クーポン（紹介した方）は、最大５枚まで獲得が可能です。</li> 
  392.                     <li class="feature">クーポンはシコメルストア内でのみ利用可能です。 </li>
  393.                     <li class="feature">3,000円クーポンは3,000円以上のご購入で、1,000円クーポンは1,000円以上のご購入で利用が可能です。クーポンの併用はできません。</li> 
  394.                     <li class="feature">過去にシコメルストアに会員登録されていた方の再登録は、紹介特典の対象外となります。</li> 
  395.                     <li class="feature">アプリでの会員登録はクーポン付与の対象外です。Webからのご登録をお願いいたします。</li>
  396.   
  397.                 </ul>
  398.                 <p class="section2__subtitle">2. 禁止事項について</p>
  399.                 <ul class="section2__features">
  400.                     <li class="feature">紹介する人・される人が同一と見なされる場合、特典を剥奪させていただく場合がございます。</li> 
  401.                     <li class="feature">不特定多数への営利目的での紹介、またはスパム行為と見なされるような紹介活動は固く禁止いたします。</li>
  402.                     <li class="feature">紹介システムを悪用した不正行為が確認された場合、特典の無効化、クーポンの失効、または強制退会の措置をとる場合があります。</li>
  403.                 </ul>
  404.                 <p class="section2__subtitle">3. その他</p>
  405.                 <ul class="section2__features">
  406.                     <li class="feature">本紹介システムの内容は、予告なく変更または終了する場合があります。その際、取得したクーポンを破棄させていただく場合がございます。</li>
  407.                     <li class="feature">クーポンの換金・返金はできません。</li> 
  408.                     <li class="feature">本システムについてご不明な点がある場合は、シコメルストアのお問い合わせ窓口までご連絡ください。</li>
  409.                 </ul>
  410.             </div>
  411.             </section>
  412.     </div>
  413. {% endblock %}