118 lines
12 KiB
HTML
118 lines
12 KiB
HTML
<template>
|
|
<!-- The main container for the webpage -->
|
|
<div class="container">
|
|
<!-- The title of the webpage -->
|
|
<h1>Send money with SuprCash®</h1>
|
|
<!-- A brief description of the service -->
|
|
<p>SuprNova GROUP Payment Services and SuprCash®, you can send or receive money safely and securely in minutes.</p>
|
|
<!-- A container for the options -->
|
|
<div class="options">
|
|
<!-- Each option is a clickable div with an SVG icon and some text -->
|
|
<div class="option" onclick={handleclick}>
|
|
<!-- SVG for the "Send money" option -->
|
|
<svg class="logo" xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
|
|
<!-- Path data for the SVG -->
|
|
<path d="M160 0c17.7 0 32 14.3 32 32V67.7c1.6 .2 3.1 .4 4.7 .7c.4 .1 .7 .1 1.1 .2l48 8.8c17.4 3.2 28.9 19.9 25.7 37.2s-19.9 28.9-37.2 25.7l-47.5-8.7c-31.3-4.6-58.9-1.5-78.3 6.2s-27.2 18.3-29 28.1c-2 10.7-.5 16.7 1.2 20.4c1.8 3.9 5.5 8.3 12.8 13.2c16.3 10.7 41.3 17.7 73.7 26.3l2.9 .8c28.6 7.6 63.6 16.8 89.6 33.8c14.2 9.3 27.6 21.9 35.9 39.5c8.5 17.9 10.3 37.9 6.4 59.2c-6.9 38-33.1 63.4-65.6 76.7c-13.7 5.6-28.6 9.2-44.4 11V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V445.1c-.4-.1-.9-.1-1.3-.2l-.2 0 0 0c-24.4-3.8-64.5-14.3-91.5-26.3c-16.1-7.2-23.4-26.1-16.2-42.2s26.1-23.4 42.2-16.2c20.9 9.3 55.3 18.5 75.2 21.6c31.9 4.7 58.2 2 76-5.3c16.9-6.9 24.6-16.9 26.8-28.9c1.9-10.6 .4-16.7-1.3-20.4c-1.9-4-5.6-8.4-13-13.3c-16.4-10.7-41.5-17.7-74-26.3l-2.8-.7 0 0C119.4 279.3 84.4 270 58.4 253c-14.2-9.3-27.5-22-35.8-39.6c-8.4-17.9-10.1-37.9-6.1-59.2C23.7 116 52.3 91.2 84.8 78.3c13.3-5.3 27.9-8.9 43.2-11V32c0-17.7 14.3-32 32-32z"/>
|
|
</svg>
|
|
<!-- Text for the "Send money" option -->
|
|
<div class="option-text">Send money</div>
|
|
</div>
|
|
|
|
<!-- Each option is a clickable div with an SVG icon and some text -->
|
|
<div class="option">
|
|
<!-- SVG for the "Send money" option -->
|
|
<svg class="logo" xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512">
|
|
<!-- Path data for the SVG -->
|
|
<path d="M312 24V34.5c6.4 1.2 12.6 2.7 18.2 4.2c12.8 3.4 20.4 16.6 17 29.4s-16.6 20.4-29.4 17c-10.9-2.9-21.1-4.9-30.2-5c-7.3-.1-14.7 1.7-19.4 4.4c-2.1 1.3-3.1 2.4-3.5 3c-.3 .5-.7 1.2-.7 2.8c0 .3 0 .5 0 .6c.2 .2 .9 1.2 3.3 2.6c5.8 3.5 14.4 6.2 27.4 10.1l.9 .3c11.1 3.3 25.9 7.8 37.9 15.3c13.7 8.6 26.1 22.9 26.4 44.9c.3 22.5-11.4 38.9-26.7 48.5c-6.7 4.1-13.9 7-21.3 8.8V232c0 13.3-10.7 24-24 24s-24-10.7-24-24V220.6c-9.5-2.3-18.2-5.3-25.6-7.8c-2.1-.7-4.1-1.4-6-2c-12.6-4.2-19.4-17.8-15.2-30.4s17.8-19.4 30.4-15.2c2.6 .9 5 1.7 7.3 2.5c13.6 4.6 23.4 7.9 33.9 8.3c8 .3 15.1-1.6 19.2-4.1c1.9-1.2 2.8-2.2 3.2-2.9c.4-.6 .9-1.8 .8-4.1l0-.2c0-1 0-2.1-4-4.6c-5.7-3.6-14.3-6.4-27.1-10.3l-1.9-.6c-10.8-3.2-25-7.5-36.4-14.4c-13.5-8.1-26.5-22-26.6-44.1c-.1-22.9 12.9-38.6 27.7-47.4c6.4-3.8 13.3-6.4 20.2-8.2V24c0-13.3 10.7-24 24-24s24 10.7 24 24zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z"/>
|
|
</svg>
|
|
<!-- Text for the "Request money" option -->
|
|
<div class="option-text">Request money</div>
|
|
|
|
</div>
|
|
<!-- Each option is a clickable div with an SVG icon and some text -->
|
|
<div class="option">
|
|
<!-- SVG for the "Send money" option -->
|
|
<svg class="logo" xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
|
|
<!-- Path data for the SVG -->
|
|
<path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 80c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm128 72c8.8 0 16 7.2 16 16v17.3c8.5 1.2 16.7 3.1 24.1 5.1c8.5 2.3 13.6 11 11.3 19.6s-11 13.6-19.6 11.3c-11.1-3-22-5.2-32.1-5.3c-8.4-.1-17.4 1.8-23.6 5.5c-5.7 3.4-8.1 7.3-8.1 12.8c0 3.7 1.3 6.5 7.3 10.1c6.9 4.1 16.6 7.1 29.2 10.9l.5 .1 0 0 0 0c11.3 3.4 25.3 7.6 36.3 14.6c12.1 7.6 22.4 19.7 22.7 38.2c.3 19.3-9.6 33.3-22.9 41.6c-7.7 4.8-16.4 7.6-25.1 9.1V440c0 8.8-7.2 16-16 16s-16-7.2-16-16V422.2c-11.2-2.1-21.7-5.7-30.9-8.9l0 0 0 0c-2.1-.7-4.2-1.4-6.2-2.1c-8.4-2.8-12.9-11.9-10.1-20.2s11.9-12.9 20.2-10.1c2.5 .8 4.8 1.6 7.1 2.4l0 0 0 0 0 0c13.6 4.6 24.6 8.4 36.3 8.7c9.1 .3 17.9-1.7 23.7-5.3c5.1-3.2 7.9-7.3 7.8-14c-.1-4.6-1.8-7.8-7.7-11.6c-6.8-4.3-16.5-7.4-29-11.2l-1.6-.5 0 0c-11-3.3-24.3-7.3-34.8-13.7c-12-7.2-22.6-18.9-22.7-37.3c-.1-19.4 10.8-32.8 23.8-40.5c7.5-4.4 15.8-7.2 24.1-8.7V232c0-8.8 7.2-16 16-16z"/>
|
|
</svg>
|
|
<!-- Text for the "Split a bill" option -->
|
|
<div class="option-text">Split a bill</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- An accordion for additional options started -->
|
|
<div class="accordion">
|
|
<!-- Each item in the accordion has a button that can be clicked to reveal content -->
|
|
<div class="accordion-item">
|
|
<button class="accordion-button first" id="first" onclick={handleOnClick}>
|
|
<!-- The button contains an SVG icon and some text -->
|
|
<div class="content">
|
|
<span class="icon-circle" >
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
|
|
<path d="M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/>
|
|
</svg>
|
|
</span>Activity
|
|
</div>
|
|
<!-- An arrow indicating that the button can be clicked to reveal content -->
|
|
<span class="arrow right">></span>
|
|
</button>
|
|
<!-- The content that is revealed when the button is clicked -->
|
|
<div class="accordion-content">Content for Activity</div>
|
|
</div>
|
|
<!-- Each item in the accordion has a button that can be clicked to reveal content -->
|
|
<div class="accordion-item">
|
|
<button class="accordion-button" id="Sec" onclick={handleOnClick}>
|
|
<!-- The button contains an SVG icon and some text -->
|
|
<div class="content">
|
|
<span class="icon-circle" >
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 448 512" >
|
|
<path d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM64 96v64h64V96H64zM0 336c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336zm64 16v64h64V352H64zM304 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H304c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm80 64H320v64h64V96zM256 304c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16v96c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16v64c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V304zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z"/>
|
|
</svg>
|
|
</span>SuprCash® QR code
|
|
</div>
|
|
<!-- An arrow indicating that the button can be clicked to reveal content -->
|
|
<span class="arrow right">></span>
|
|
|
|
</button>
|
|
<!-- The content that is revealed when the button is clicked -->
|
|
<div class="accordion-content">Content for SuprCash® QR code</div>
|
|
</div>
|
|
<!-- Each item in the accordion has a button that can be clicked to reveal content -->
|
|
<div class="accordion-item">
|
|
<button class="accordion-button" id="third" onclick={handleOnClick}>
|
|
<!-- The button contains an SVG icon and some text -->
|
|
<div class="content">
|
|
<span class="icon-circle" >
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 448 512">
|
|
<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>
|
|
</svg>
|
|
</span>Manage recipients
|
|
</div>
|
|
<!-- An arrow indicating that the button can be clicked to reveal content -->
|
|
<span class="arrow right">></span>
|
|
</button>
|
|
<!-- The content that is revealed when the button is clicked -->
|
|
<div class="accordion-content">Content for Manage recipients</div>
|
|
</div>
|
|
<!-- Each item in the accordion has a button that can be clicked to reveal content -->
|
|
<div class="accordion-item">
|
|
<button class="accordion-button four" id="forth" onclick={handleOnClick}>
|
|
<!-- The button contains an SVG icon and some text -->
|
|
<div class="content">
|
|
<span class="icon-circle" >
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
|
|
<path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/>
|
|
</svg>
|
|
</span>Preferences
|
|
</div>
|
|
<!-- An arrow indicating that the button can be clicked to reveal content -->
|
|
<span class="arrow right">></span>
|
|
</button>
|
|
<!-- The content that is revealed when the button is clicked -->
|
|
<div class="accordion-content">Content for Preferences</div>
|
|
</div>
|
|
</div>
|
|
<!-- An accordion for additional options Ended -->
|
|
</div>
|
|
</template> |