相关规则
This commit is contained in:
zhx
parent
20bdbc6a37
commit
a23e2a1007
@ -746,6 +746,20 @@ var default_api = 'https://api.global-interaction.com/';
|
||||
body: payload || {},
|
||||
});
|
||||
},
|
||||
create: function (payload) {
|
||||
return request('/api/v1/games/rps/matches', {
|
||||
method: 'POST',
|
||||
body: payload || {},
|
||||
});
|
||||
},
|
||||
join: function (matchID, payload) {
|
||||
return request(
|
||||
'/api/v1/games/rps/matches/' +
|
||||
encodeURIComponent(matchID || '') +
|
||||
'/join',
|
||||
{ method: 'POST', body: payload || {} }
|
||||
);
|
||||
},
|
||||
getMatch: function (matchID) {
|
||||
return request(
|
||||
'/api/v1/games/rps/matches/' +
|
||||
|
||||
9
cp-rules/assets/back.svg
Normal file
9
cp-rules/assets/back.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon_20_返回">
|
||||
<g id="Vector">
|
||||
</g>
|
||||
<g id="Vector_2">
|
||||
</g>
|
||||
<path id="Vector_3" d="M16 4L8 12L16 20" stroke="var(--stroke-0, white)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 419 B |
7
cp-rules/assets/battery.svg
Normal file
7
cp-rules/assets/battery.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24.3307 11.3333" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Battery">
|
||||
<path id="Border" opacity="0.35" d="M2.66699 0.5H19.333C20.5296 0.5 21.5 1.47038 21.5 2.66699V8.66699C21.4998 9.86346 20.5295 10.833 19.333 10.833H2.66699C1.4705 10.833 0.500175 9.86346 0.5 8.66699V2.66699C0.5 1.47038 1.47039 0.5 2.66699 0.5Z" stroke="var(--stroke-0, white)"/>
|
||||
<path id="Cap" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M23.0027 7.66213C23.8074 7.32336 24.3307 6.53526 24.3307 5.66213C24.3307 4.789 23.8074 4.00091 23.0027 3.66213V7.66213V7.66213Z" fill="var(--fill-0, white)"/>
|
||||
<path id="Capacity" fill-rule="evenodd" clip-rule="evenodd" d="M18.666 1.99872C19.4024 1.99872 19.9993 2.59567 19.9993 3.33205V7.99872C19.9993 8.7351 19.4024 9.33205 18.666 9.33205H3.33268C2.5963 9.33205 1.99935 8.7351 1.99935 7.99872V3.33205C1.99935 2.59567 2.5963 1.99872 3.33268 1.99872H18.666V1.99872Z" fill="var(--fill-0, white)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
3
cp-rules/assets/cellular.svg
Normal file
3
cp-rules/assets/cellular.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 17.0001 11.3317" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Cellular Connection" fill-rule="evenodd" clip-rule="evenodd" d="M11.331 2.99835C11.8832 2.99835 12.331 3.44607 12.331 3.99835V10.3317C12.331 10.884 11.8832 11.3317 11.331 11.3317H10.331C9.77867 11.3317 9.33096 10.884 9.33096 10.3317V3.99835C9.33096 3.44607 9.77867 2.99835 10.331 2.99835H11.331V2.99835ZM16.0001 0C16.5524 0 17.0001 0.447712 17.0001 1V9.66667C17.0001 10.219 16.5524 10.6667 16.0001 10.6667H15.0001C14.4479 10.6667 14.0001 10.219 14.0001 9.66667V1C14.0001 0.447712 14.4479 0 15.0001 0V0H16.0001V0ZM2 7.00378C2.55229 7.00378 3 7.4515 3 8.00378V10.0038C3 10.5561 2.55229 11.0038 2 11.0038H0.999999C0.447714 11.0038 0 10.5561 0 10.0038V8.00378C0 7.4515 0.447714 7.00378 0.999999 7.00378H2V7.00378ZM6.66177 4.99767C7.21405 4.99767 7.66177 5.44538 7.66177 5.99767V9.99766C7.66177 10.55 7.21405 10.9977 6.66177 10.9977H5.66177C5.10948 10.9977 4.66177 10.55 4.66177 9.99766V5.99767C4.66177 5.44538 5.10948 4.99767 5.66177 4.99767H6.66177V4.99767Z" fill="var(--fill-0, white)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
cp-rules/assets/gift-panel.png
Normal file
BIN
cp-rules/assets/gift-panel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
cp-rules/assets/gift-room.png
Normal file
BIN
cp-rules/assets/gift-room.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
cp-rules/assets/invitation.png
Normal file
BIN
cp-rules/assets/invitation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
cp-rules/assets/note-bg-main.png
Normal file
BIN
cp-rules/assets/note-bg-main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
cp-rules/assets/panel-bottom.png
Normal file
BIN
cp-rules/assets/panel-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1009 B |
BIN
cp-rules/assets/panel-mid.png
Normal file
BIN
cp-rules/assets/panel-mid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
cp-rules/assets/panel-top.png
Normal file
BIN
cp-rules/assets/panel-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 917 B |
BIN
cp-rules/assets/rights-bg.png
Normal file
BIN
cp-rules/assets/rights-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
3
cp-rules/assets/rights-column.svg
Normal file
3
cp-rules/assets/rights-column.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 117 578" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Rectangle 12114" opacity="0.4" d="M0 0H117V578H0V0Z" fill="var(--fill-0, black)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 272 B |
BIN
cp-rules/assets/rights-vip1.png
Normal file
BIN
cp-rules/assets/rights-vip1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
BIN
cp-rules/assets/rights-vip2.png
Normal file
BIN
cp-rules/assets/rights-vip2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
BIN
cp-rules/assets/scrolled-bg.png
Normal file
BIN
cp-rules/assets/scrolled-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
3
cp-rules/assets/status-frame.svg
Normal file
3
cp-rules/assets/status-frame.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 375 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Frame" opacity="0.01" fill-rule="evenodd" clip-rule="evenodd" d="M375 0V44H0V0H375V0Z" fill="var(--fill-0, white)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 305 B |
BIN
cp-rules/assets/tab-selected-note.png
Normal file
BIN
cp-rules/assets/tab-selected-note.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
BIN
cp-rules/assets/tab-selected-rights.png
Normal file
BIN
cp-rules/assets/tab-selected-rights.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
BIN
cp-rules/assets/tab-unselected-note.png
Normal file
BIN
cp-rules/assets/tab-unselected-note.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
BIN
cp-rules/assets/tab-unselected-rights.png
Normal file
BIN
cp-rules/assets/tab-unselected-rights.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
BIN
cp-rules/assets/title-divider.png
Normal file
BIN
cp-rules/assets/title-divider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
3
cp-rules/assets/wifi.svg
Normal file
3
cp-rules/assets/wifi.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 15.3333 11.0067" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Wifi" fill-rule="evenodd" clip-rule="evenodd" d="M9.99304 8.66064C9.99127 8.57386 9.95373 8.49166 9.8893 8.43345C8.60864 7.35118 6.733 7.35118 5.45234 8.43345C5.38786 8.49162 5.35027 8.57379 5.34843 8.66057C5.34659 8.74735 5.38068 8.83104 5.44263 8.89188L7.44827 10.9139C7.50705 10.9733 7.5872 11.0067 7.67082 11.0067C7.75444 11.0067 7.83458 10.9733 7.89337 10.9139L9.89867 8.89188C9.96067 8.83108 9.99482 8.74742 9.99304 8.66064V8.66064ZM13.6438 4.67028C13.7652 4.78852 13.9593 4.78703 14.0789 4.66693L15.2395 3.4966C15.3 3.43569 15.3338 3.35318 15.3333 3.26733C15.3328 3.18148 15.2981 3.09937 15.2368 3.03917C11.0049 -1.01306 4.32858 -1.01306 0.0966678 3.03917C0.0353653 3.09933 0.00057401 3.18141 6.67831e-06 3.26726C-0.000545321 3.35311 0.0331419 3.43564 0.0936471 3.4966L1.25459 4.66693C1.3741 4.78721 1.56831 4.7887 1.68966 4.67028C3.30222 3.13859 5.44213 2.28447 7.66707 2.28448C9.89181 2.28457 12.0315 3.13869 13.6438 4.67028V4.67028ZM10.9782 7.36722C11.1007 7.48356 11.2938 7.48104 11.4132 7.36153L12.5725 6.1912C12.6336 6.12982 12.6674 6.04654 12.6665 5.96001C12.6657 5.87347 12.6301 5.7909 12.5678 5.73077C9.80866 3.16636 5.53574 3.16636 2.77658 5.73077C2.71425 5.7909 2.67869 5.87351 2.67787 5.96008C2.67706 6.04664 2.71106 6.12991 2.77223 6.1912L3.93117 7.36153C4.05063 7.48104 4.24368 7.48356 4.36623 7.36722C5.2717 6.54799 6.44949 6.09407 7.67102 6.09357C8.89337 6.09349 10.0721 6.54745 10.9782 7.36722V7.36722Z" fill="var(--fill-0, white)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
367
cp-rules/index.html
Normal file
367
cp-rules/index.html
Normal file
@ -0,0 +1,367 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<title>Gifts for Close Friends</title>
|
||||
<link rel="stylesheet" href="../common/theme.css?v=20260606c" />
|
||||
<link rel="stylesheet" href="./style.css?v=20260611a" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-viewport" id="appViewport" data-active-tab="note">
|
||||
<main class="page note-page" data-panel="note">
|
||||
<img
|
||||
class="ambient-bg ambient-bg-note"
|
||||
src="./assets/note-bg-main.png"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<section class="status-bar" aria-hidden="true">
|
||||
<img
|
||||
class="status-frame"
|
||||
src="./assets/status-frame.svg"
|
||||
alt=""
|
||||
/>
|
||||
<span class="status-time">9:41</span>
|
||||
<img
|
||||
class="status-cellular"
|
||||
src="./assets/cellular.svg"
|
||||
alt=""
|
||||
/>
|
||||
<img class="status-wifi" src="./assets/wifi.svg" alt="" />
|
||||
<img
|
||||
class="status-battery"
|
||||
src="./assets/battery.svg"
|
||||
alt=""
|
||||
/>
|
||||
</section>
|
||||
|
||||
<header class="nav-bar" aria-label="Gifts for Close Friends">
|
||||
<button
|
||||
class="back-button"
|
||||
type="button"
|
||||
aria-label="Back"
|
||||
data-i18n-aria="cpRules.back"
|
||||
>
|
||||
<img
|
||||
src="./assets/back.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h1 data-i18n="cpRules.title">Gifts For Close Friends</h1>
|
||||
</header>
|
||||
|
||||
<nav
|
||||
class="top-tabs"
|
||||
aria-label="Rule tabs"
|
||||
data-i18n-aria="cpRules.tabs"
|
||||
>
|
||||
<button
|
||||
class="top-tab top-tab-note"
|
||||
type="button"
|
||||
data-tab-target="note"
|
||||
aria-selected="true"
|
||||
>
|
||||
<img
|
||||
class="tab-img tab-selected"
|
||||
src="./assets/tab-selected-note.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="tab-img tab-unselected"
|
||||
src="./assets/tab-unselected-rights.png"
|
||||
alt=""
|
||||
/>
|
||||
<span data-i18n="cpRules.note">Note</span>
|
||||
</button>
|
||||
<button
|
||||
class="top-tab top-tab-rights"
|
||||
type="button"
|
||||
data-tab-target="rights"
|
||||
aria-selected="false"
|
||||
>
|
||||
<img
|
||||
class="tab-img tab-selected"
|
||||
src="./assets/tab-selected-rights.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="tab-img tab-unselected"
|
||||
src="./assets/tab-unselected-note.png"
|
||||
alt=""
|
||||
/>
|
||||
<span data-i18n="cpRules.rights">Rights</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<section class="tab-panel note-panel" data-tab-panel="note">
|
||||
<article class="ornate-card intro-card">
|
||||
<div class="card-art" aria-hidden="true"></div>
|
||||
<div class="title-rule" aria-hidden="true">
|
||||
<img src="./assets/title-divider.png" alt="" />
|
||||
</div>
|
||||
<h2 data-i18n="cpRules.closeFriendTitle">
|
||||
What is a close friendship?
|
||||
</h2>
|
||||
<p data-i18n="cpRules.closeFriendIntro">
|
||||
The “Best Friends” feature is a brand-new
|
||||
interactive way to celebrate close relationships
|
||||
between users. By sending gifts to someone and
|
||||
requesting to become best friends, you can form a
|
||||
best friend connection once they accept.
|
||||
</p>
|
||||
<p data-i18n="cpRules.closeFriendGender">
|
||||
‘CP’ connections can only be formed between a man
|
||||
and a woman, while “brother” and “sister”
|
||||
connections have no gender restrictions.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="ornate-card form-card">
|
||||
<div class="card-art" aria-hidden="true"></div>
|
||||
<div class="title-rule" aria-hidden="true">
|
||||
<img src="./assets/title-divider.png" alt="" />
|
||||
</div>
|
||||
<h2 data-i18n="cpRules.formTitle">
|
||||
How to Form Relationships?
|
||||
</h2>
|
||||
<h3 data-i18n="cpRules.roomGiftTitle">
|
||||
Request for a Gift Panel in a Group Chat Room
|
||||
</h3>
|
||||
<p data-i18n="cpRules.formStep1">
|
||||
1. In the room, tap [Gift Panel] > select [Best
|
||||
Friends];
|
||||
</p>
|
||||
<figure
|
||||
class="crop-shot gift-panel-shot"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img src="./assets/gift-panel.png" alt="" />
|
||||
</figure>
|
||||
<p data-i18n="cpRules.formStep2">
|
||||
2. Choose a gift tailored to a specific type of
|
||||
close friend; once you send it, a friend request
|
||||
will be automatically sent;
|
||||
</p>
|
||||
<figure
|
||||
class="crop-shot relation-select-shot"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img src="./assets/gift-panel.png" alt="" />
|
||||
</figure>
|
||||
<p data-i18n="cpRules.formStep3">
|
||||
3. The other party must accept the match within 24
|
||||
hours;
|
||||
</p>
|
||||
<figure class="invitation-shot" aria-hidden="true">
|
||||
<img src="./assets/invitation.png" alt="" />
|
||||
</figure>
|
||||
<p class="form-note" data-i18n="cpRules.timeoutNote">
|
||||
*If the other party does not respond within 24 hours
|
||||
of the request being sent, the connection will be
|
||||
automatically declined.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="ornate-card intimacy-card">
|
||||
<div class="card-art" aria-hidden="true"></div>
|
||||
<div class="title-rule" aria-hidden="true">
|
||||
<img src="./assets/title-divider.png" alt="" />
|
||||
</div>
|
||||
<h2 data-i18n="cpRules.intimacyTitle">
|
||||
Intimacy Level
|
||||
</h2>
|
||||
<p data-i18n="cpRules.intimacyBody">
|
||||
Intimacy Points are a numerical representation of
|
||||
the level of closeness between two players. 1 Gold
|
||||
Coin equals 1 Intimacy Point, and you can increase
|
||||
your Intimacy Points by sending gifts to your best
|
||||
friend every day.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="ornate-card faq-card">
|
||||
<div class="card-art" aria-hidden="true"></div>
|
||||
<div class="title-rule" aria-hidden="true">
|
||||
<img src="./assets/title-divider.png" alt="" />
|
||||
</div>
|
||||
<h2 data-i18n="cpRules.faqTitle">FAQ</h2>
|
||||
<dl class="faq-list">
|
||||
<dt data-i18n="cpRules.faqQ1">
|
||||
Q1: Does giving someone a regular gift increase
|
||||
intimacy?
|
||||
</dt>
|
||||
<dd data-i18n="cpRules.faqA1">No increase.</dd>
|
||||
<dt data-i18n="cpRules.faqQ2">
|
||||
Q2: Is there a limit to the number of
|
||||
relationships?
|
||||
</dt>
|
||||
<dd data-i18n="cpRules.faqA2">
|
||||
You can only have one CP, and a maximum of three
|
||||
brothers or sisters. More slots will be added in
|
||||
the future.
|
||||
</dd>
|
||||
<dt data-i18n="cpRules.faqQ3">
|
||||
Q3: Who can I invite to be a CP?
|
||||
</dt>
|
||||
<dd data-i18n="cpRules.faqA3">
|
||||
As long as neither party has a CP, you can send
|
||||
a CP gift to extend a relationship invitation.
|
||||
</dd>
|
||||
<dt data-i18n="cpRules.faqQ4">
|
||||
Q4: If my application is denied, will the Best
|
||||
Friend Gift be refunded?
|
||||
</dt>
|
||||
<dd data-i18n="cpRules.faqA4">
|
||||
Experience points are awarded the moment the
|
||||
gift is sent. If the request expires or is
|
||||
rejected, the gift will not be returned.
|
||||
</dd>
|
||||
<dt data-i18n="cpRules.faqQ5">
|
||||
Q5: Can the termination of the relationship be
|
||||
reversed?
|
||||
</dt>
|
||||
<dd data-i18n="cpRules.faqA5">
|
||||
Once the relationship is dissolved, all rights
|
||||
and interests will be reclaimed by the platform.
|
||||
The action cannot be undone; the relationship
|
||||
can only be reestablished.
|
||||
</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="tab-panel rights-panel"
|
||||
data-tab-panel="rights"
|
||||
hidden
|
||||
>
|
||||
<img
|
||||
class="ambient-bg ambient-bg-rights"
|
||||
src="./assets/rights-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="relation-tabs" aria-label="Relationship types">
|
||||
<button
|
||||
class="is-active"
|
||||
type="button"
|
||||
data-relation-target="cp"
|
||||
aria-selected="true"
|
||||
>
|
||||
CP
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-relation-target="brother"
|
||||
aria-selected="false"
|
||||
data-i18n="cpRules.brother"
|
||||
>
|
||||
Brother
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-relation-target="sisters"
|
||||
aria-selected="false"
|
||||
data-i18n="cpRules.sisters"
|
||||
>
|
||||
Sisters
|
||||
</button>
|
||||
</div>
|
||||
<section
|
||||
class="rights-table"
|
||||
aria-label="CP rights"
|
||||
data-i18n-aria="cpRules.rightsTable"
|
||||
>
|
||||
<img
|
||||
class="rights-column"
|
||||
src="./assets/rights-column.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
class="table-line table-line-head"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div class="table-line row-1" aria-hidden="true"></div>
|
||||
<div class="table-line row-2" aria-hidden="true"></div>
|
||||
<div class="table-line row-3" aria-hidden="true"></div>
|
||||
<div class="table-line row-4" aria-hidden="true"></div>
|
||||
<div class="table-line row-5" aria-hidden="true"></div>
|
||||
<div class="table-line row-6" aria-hidden="true"></div>
|
||||
<div
|
||||
class="table-vline vline-1"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div
|
||||
class="table-vline vline-2"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<span class="head head-level" data-i18n="cpRules.level"
|
||||
>Level</span
|
||||
>
|
||||
<span
|
||||
class="head head-intimacy"
|
||||
data-i18n="cpRules.intimacyLevel"
|
||||
>Intimacy Level</span
|
||||
>
|
||||
<span
|
||||
class="head head-rights"
|
||||
data-i18n="cpRules.rights"
|
||||
>Rights</span
|
||||
>
|
||||
<span class="level level-1">Lv.1</span>
|
||||
<span class="level level-2">Lv.2</span>
|
||||
<span class="intimacy intimacy-1">0</span>
|
||||
<span class="intimacy intimacy-2">1,000,000</span>
|
||||
<img
|
||||
class="badge badge-1"
|
||||
src="./assets/rights-vip1.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="badge badge-2"
|
||||
src="./assets/rights-vip2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="badge badge-3"
|
||||
src="./assets/rights-vip2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="badge badge-4"
|
||||
src="./assets/rights-vip2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="badge badge-5"
|
||||
src="./assets/rights-vip2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="badge badge-6"
|
||||
src="./assets/rights-vip2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="badge badge-7"
|
||||
src="./assets/rights-vip2.png"
|
||||
alt=""
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.HyAppI18nSupported = ['en', 'ar', 'tr', 'es', 'zh', 'id'];
|
||||
</script>
|
||||
<script src="../common/i18n.js?v=20260606c"></script>
|
||||
<script src="../common/jsbridge.js?v=20260611a"></script>
|
||||
<script src="./script.js?v=20260611a"></script>
|
||||
</body>
|
||||
</html>
|
||||
117
cp-rules/script.js
Normal file
117
cp-rules/script.js
Normal file
@ -0,0 +1,117 @@
|
||||
(function () {
|
||||
var DESIGN_WIDTH = 375;
|
||||
var app = document.getElementById('appViewport');
|
||||
var page = app ? app.querySelector('.page') : null;
|
||||
var tabs = app
|
||||
? Array.prototype.slice.call(app.querySelectorAll('[data-tab-target]'))
|
||||
: [];
|
||||
var panels = app
|
||||
? Array.prototype.slice.call(app.querySelectorAll('[data-tab-panel]'))
|
||||
: [];
|
||||
var relationTabs = app
|
||||
? Array.prototype.slice.call(
|
||||
app.querySelectorAll('[data-relation-target]')
|
||||
)
|
||||
: [];
|
||||
var rightsTable = app ? app.querySelector('.rights-table') : null;
|
||||
var backButton = app ? app.querySelector('.back-button') : null;
|
||||
|
||||
function updateScale() {
|
||||
var available = Math.max(320, window.innerWidth || DESIGN_WIDTH);
|
||||
var scale = Math.min(1, available / DESIGN_WIDTH);
|
||||
document.documentElement.style.setProperty(
|
||||
'--app-scale',
|
||||
String(scale)
|
||||
);
|
||||
if (app) {
|
||||
document.body.style.minHeight = app.offsetHeight * scale + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveTab(nextTab) {
|
||||
var tab = nextTab === 'rights' ? 'rights' : 'note';
|
||||
app.setAttribute('data-active-tab', tab);
|
||||
if (page) {
|
||||
page.classList.toggle('note-page', tab === 'note');
|
||||
page.classList.toggle('rights-page', tab === 'rights');
|
||||
}
|
||||
tabs.forEach(function (button) {
|
||||
var active = button.getAttribute('data-tab-target') === tab;
|
||||
button.setAttribute('aria-selected', active ? 'true' : 'false');
|
||||
});
|
||||
panels.forEach(function (panel) {
|
||||
panel.hidden = panel.getAttribute('data-tab-panel') !== tab;
|
||||
});
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||
updateScale();
|
||||
}
|
||||
|
||||
function setActiveRelation(nextRelation) {
|
||||
var relation =
|
||||
nextRelation === 'brother' || nextRelation === 'sisters'
|
||||
? nextRelation
|
||||
: 'cp';
|
||||
if (rightsTable) {
|
||||
rightsTable.setAttribute('data-active-relation', relation);
|
||||
}
|
||||
relationTabs.forEach(function (button) {
|
||||
var active =
|
||||
button.getAttribute('data-relation-target') === relation;
|
||||
button.classList.toggle('is-active', active);
|
||||
button.setAttribute('aria-selected', active ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
|
||||
function closePage() {
|
||||
if (window.HyAppBridge && window.HyAppBridge.back) {
|
||||
window.HyAppBridge.back();
|
||||
return;
|
||||
}
|
||||
if (
|
||||
window.WebViewJavascriptBridge &&
|
||||
window.WebViewJavascriptBridge.callHandler
|
||||
) {
|
||||
window.WebViewJavascriptBridge.callHandler('close');
|
||||
return;
|
||||
}
|
||||
if (window.history.length > 1) {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
tabs.forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
setActiveTab(button.getAttribute('data-tab-target'));
|
||||
});
|
||||
});
|
||||
relationTabs.forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
setActiveRelation(button.getAttribute('data-relation-target'));
|
||||
});
|
||||
});
|
||||
if (backButton) {
|
||||
backButton.addEventListener('click', closePage);
|
||||
}
|
||||
window.addEventListener('resize', updateScale);
|
||||
window.addEventListener('orientationchange', updateScale);
|
||||
}
|
||||
|
||||
function init() {
|
||||
bindEvents();
|
||||
setActiveRelation('cp');
|
||||
setActiveTab('note');
|
||||
updateScale();
|
||||
}
|
||||
|
||||
window.HyCpRules = {
|
||||
setActiveTab: setActiveTab,
|
||||
setActiveRelation: setActiveRelation,
|
||||
};
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
727
cp-rules/style.css
Normal file
727
cp-rules/style.css
Normal file
@ -0,0 +1,727 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:root {
|
||||
--app-scale: 1;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
background: #732cff;
|
||||
color: #fff;
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.app-viewport {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
min-height: 2066px;
|
||||
margin: 0 auto;
|
||||
transform: scale(var(--app-scale));
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
min-height: 2066px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, #732cff 0%, #d369ff 100%);
|
||||
}
|
||||
|
||||
.note-page {
|
||||
background-color: #732cff;
|
||||
background-image:
|
||||
url('./assets/note-bg-main.png'),
|
||||
linear-gradient(180deg, #732cff 0%, #d369ff 100%);
|
||||
background-position:
|
||||
center top,
|
||||
center top;
|
||||
background-repeat: repeat-y, no-repeat;
|
||||
background-size:
|
||||
769px 1367px,
|
||||
100% 100%;
|
||||
}
|
||||
|
||||
.ambient-bg {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
object-fit: cover;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ambient-bg-note {
|
||||
left: -198px;
|
||||
top: -56px;
|
||||
width: 769px;
|
||||
height: 1367px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ambient-bg-rights {
|
||||
left: -82px;
|
||||
top: -71px;
|
||||
width: 537px;
|
||||
height: 954px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 375px;
|
||||
height: 44px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.status-frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 375px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.status-time {
|
||||
position: absolute;
|
||||
left: 33.9px;
|
||||
top: 13px;
|
||||
width: 54px;
|
||||
height: 15px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-cellular {
|
||||
position: absolute;
|
||||
left: 294.34px;
|
||||
top: 15px;
|
||||
width: 17px;
|
||||
height: 11.33px;
|
||||
}
|
||||
|
||||
.status-wifi {
|
||||
position: absolute;
|
||||
left: 316.34px;
|
||||
top: 16.33px;
|
||||
width: 15.33px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.status-battery {
|
||||
position: absolute;
|
||||
left: 336.67px;
|
||||
top: 16.33px;
|
||||
width: 24.33px;
|
||||
height: 11.33px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
left: 0;
|
||||
top: 44px;
|
||||
width: 375px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.nav-bar h1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top-tabs {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
left: 0;
|
||||
top: 95px;
|
||||
width: 375px;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
.top-tab {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 51px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-tab-note {
|
||||
left: 40px;
|
||||
width: 139px;
|
||||
}
|
||||
|
||||
.top-tab-rights {
|
||||
left: 197px;
|
||||
width: 139px;
|
||||
}
|
||||
|
||||
.tab-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tab-unselected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-active-tab='note'] .top-tab-note .tab-selected,
|
||||
[data-active-tab='rights'] .top-tab-rights .tab-selected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-active-tab='note'] .top-tab-note .tab-unselected,
|
||||
[data-active-tab='rights'] .top-tab-rights .tab-unselected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-tab span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 19px;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 375px;
|
||||
}
|
||||
|
||||
.ornate-card {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
width: 350px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-art {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 211, 255, 0.82);
|
||||
border-radius: 20px;
|
||||
background:
|
||||
url('./assets/panel-top.png') left top / 350px 65px no-repeat,
|
||||
url('./assets/panel-bottom.png') left bottom / 350px 73px no-repeat,
|
||||
url('./assets/panel-mid.png') left 65px / 350px 86px repeat-y,
|
||||
radial-gradient(
|
||||
circle at 50% 18%,
|
||||
rgba(255, 255, 255, 0.18),
|
||||
transparent 32%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(231, 90, 255, 0.78) 0%,
|
||||
rgba(194, 55, 255, 0.68) 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 0 18px rgba(255, 255, 255, 0.38),
|
||||
inset 0 0 34px rgba(118, 25, 255, 0.38),
|
||||
0 0 10px rgba(255, 184, 255, 0.56);
|
||||
mix-blend-mode: normal;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-art::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
url('./assets/panel-top.png') left top / 350px 65px no-repeat,
|
||||
url('./assets/panel-bottom.png') left bottom / 350px 73px no-repeat,
|
||||
url('./assets/panel-mid.png') left 65px / 350px 86px repeat-y;
|
||||
mix-blend-mode: multiply;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.title-rule {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 44px;
|
||||
width: 290px;
|
||||
height: 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.title-rule img {
|
||||
display: block;
|
||||
width: 290px;
|
||||
height: 20px;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.ornate-card h2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 19px;
|
||||
width: 350px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.ornate-card p,
|
||||
.ornate-card dt,
|
||||
.ornate-card dd {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
top: 153px;
|
||||
height: 223px;
|
||||
}
|
||||
|
||||
.intro-card p {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
width: 310px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.intro-card p:nth-of-type(1) {
|
||||
top: 88px;
|
||||
}
|
||||
|
||||
.intro-card p:nth-of-type(2) {
|
||||
top: 168px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
top: 388px;
|
||||
height: 846px;
|
||||
}
|
||||
|
||||
.form-card h3 {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 72px;
|
||||
width: 310px;
|
||||
margin: 0;
|
||||
color: #fffb1b;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.form-card > p {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
width: 310px;
|
||||
}
|
||||
|
||||
.form-card > p:nth-of-type(1) {
|
||||
top: 94px;
|
||||
}
|
||||
|
||||
.form-card > p:nth-of-type(2) {
|
||||
top: 244px;
|
||||
}
|
||||
|
||||
.form-card > p:nth-of-type(3) {
|
||||
top: 348px;
|
||||
}
|
||||
|
||||
.form-card .form-note {
|
||||
top: 806px;
|
||||
color: #fffb1b;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.crop-shot {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
width: 310px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.crop-shot img {
|
||||
position: absolute;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gift-panel-shot {
|
||||
top: 114px;
|
||||
height: 122px;
|
||||
}
|
||||
|
||||
.gift-panel-shot img {
|
||||
left: -4px;
|
||||
top: -58px;
|
||||
width: 310px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.relation-select-shot {
|
||||
top: 298px;
|
||||
height: 42px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.relation-select-shot img {
|
||||
left: -5px;
|
||||
top: -28px;
|
||||
width: 310px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.invitation-shot {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 383px;
|
||||
width: 310px;
|
||||
height: 408px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.invitation-shot img {
|
||||
display: block;
|
||||
width: 310px;
|
||||
height: auto;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.intimacy-card {
|
||||
top: 1251px;
|
||||
height: 174px;
|
||||
}
|
||||
|
||||
.intimacy-card p {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 69px;
|
||||
width: 310px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.faq-card {
|
||||
top: 1437px;
|
||||
height: 456px;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 68px;
|
||||
width: 310px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.faq-list dt {
|
||||
color: #fffb1b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.faq-list dd {
|
||||
margin: 2px 0 8px;
|
||||
}
|
||||
|
||||
.rights-panel {
|
||||
min-height: 812px;
|
||||
}
|
||||
|
||||
[data-active-tab='rights'] .page {
|
||||
min-height: 812px;
|
||||
}
|
||||
|
||||
[data-active-tab='rights'] {
|
||||
min-height: 812px;
|
||||
}
|
||||
|
||||
.relation-tabs {
|
||||
position: absolute;
|
||||
left: 52px;
|
||||
top: 154px;
|
||||
width: 292px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.relation-tabs button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
min-width: 40px;
|
||||
height: 25px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.relation-tabs button:nth-child(1) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.relation-tabs button:nth-child(2) {
|
||||
left: 107px;
|
||||
}
|
||||
|
||||
.relation-tabs button:nth-child(3) {
|
||||
left: 236px;
|
||||
}
|
||||
|
||||
.relation-tabs .is-active {
|
||||
color: #fffb1b;
|
||||
}
|
||||
|
||||
.relation-tabs .is-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 22px;
|
||||
width: 16px;
|
||||
height: 3px;
|
||||
border-radius: 32px;
|
||||
background: #fffb1b;
|
||||
}
|
||||
|
||||
.rights-table {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 191px;
|
||||
width: 351px;
|
||||
height: 579px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.rights-column {
|
||||
position: absolute;
|
||||
left: 117px;
|
||||
top: 0;
|
||||
width: 117px;
|
||||
height: 578px;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.table-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 351px;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.table-line-head {
|
||||
top: 39px;
|
||||
}
|
||||
|
||||
.row-1 {
|
||||
top: 116px;
|
||||
left: 234px;
|
||||
width: 117px;
|
||||
}
|
||||
|
||||
.row-2 {
|
||||
top: 193px;
|
||||
left: 234px;
|
||||
width: 117px;
|
||||
}
|
||||
|
||||
.row-3 {
|
||||
top: 270px;
|
||||
left: 234px;
|
||||
width: 117px;
|
||||
}
|
||||
|
||||
.row-4 {
|
||||
top: 347px;
|
||||
}
|
||||
|
||||
.row-5 {
|
||||
top: 424px;
|
||||
left: 234px;
|
||||
width: 117px;
|
||||
}
|
||||
|
||||
.row-6 {
|
||||
top: 501px;
|
||||
left: 234px;
|
||||
width: 117px;
|
||||
}
|
||||
|
||||
.table-vline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 579px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.vline-1 {
|
||||
left: 117px;
|
||||
}
|
||||
|
||||
.vline-2 {
|
||||
left: 234px;
|
||||
}
|
||||
|
||||
.rights-table span {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 14.5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.head {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.head-level {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.head-intimacy {
|
||||
left: 134px;
|
||||
}
|
||||
|
||||
.head-rights {
|
||||
left: 276px;
|
||||
}
|
||||
|
||||
.level-1 {
|
||||
left: 46px;
|
||||
top: 186px;
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
left: 46px;
|
||||
top: 455px;
|
||||
}
|
||||
|
||||
.intimacy-1 {
|
||||
left: 172px;
|
||||
top: 186px;
|
||||
}
|
||||
|
||||
.intimacy-2 {
|
||||
left: 147px;
|
||||
top: 455px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
left: 262px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.badge-1 {
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.badge-2 {
|
||||
top: 125px;
|
||||
}
|
||||
|
||||
.badge-3 {
|
||||
top: 202px;
|
||||
}
|
||||
|
||||
.badge-4 {
|
||||
top: 279px;
|
||||
}
|
||||
|
||||
.badge-5 {
|
||||
top: 356px;
|
||||
}
|
||||
|
||||
.badge-6 {
|
||||
top: 433px;
|
||||
}
|
||||
|
||||
.badge-7 {
|
||||
top: 510px;
|
||||
}
|
||||
|
||||
[data-active-tab='rights'] .note-panel,
|
||||
[data-active-tab='note'] .rights-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir='rtl'] .faq-list,
|
||||
[dir='rtl'] .ornate-card p,
|
||||
[dir='rtl'] .form-card h3 {
|
||||
text-align: right;
|
||||
}
|
||||
9
game/dicetips/assets/figma/back.svg
Normal file
9
game/dicetips/assets/figma/back.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon_20_返回">
|
||||
<g id="Vector">
|
||||
</g>
|
||||
<g id="Vector_2">
|
||||
</g>
|
||||
<path id="Vector_3" d="M16 4L8 12L16 20" stroke="var(--stroke-0, white)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 419 B |
9
game/dicetips/assets/figma/bg-mask.svg
Normal file
9
game/dicetips/assets/figma/bg-mask.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 375 812" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect id="Rectangle 346254241" width="375" height="812" fill="url(#paint0_linear_0_25)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_0_25" x1="187.5" y1="0" x2="187.5" y2="812" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.520973" stop-color="#D9D9D9"/>
|
||||
<stop offset="0.823544" stop-color="#737373" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 523 B |
328
game/dicetips/index.html
Normal file
328
game/dicetips/index.html
Normal file
@ -0,0 +1,328 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
||||
/>
|
||||
<title data-i18n="diceTips.pageTitle">Game Instructions</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--tips-frame-width: 375px;
|
||||
--tips-frame-height: 812px;
|
||||
--tips-scale: 1;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #030623;
|
||||
font-family:
|
||||
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: geometricprecision;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tips-stage {
|
||||
position: relative;
|
||||
width: calc(var(--tips-frame-width) * var(--tips-scale));
|
||||
height: calc(var(--tips-frame-height) * var(--tips-scale));
|
||||
overflow: hidden;
|
||||
background: #030623;
|
||||
}
|
||||
|
||||
.tips-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--tips-frame-width);
|
||||
height: var(--tips-frame-height);
|
||||
overflow: hidden;
|
||||
background: #030623;
|
||||
transform: scale(var(--tips-scale));
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.tips-bg {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: -47px;
|
||||
width: 470px;
|
||||
height: 834px;
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-mask-image: url('assets/figma/bg-mask.svg');
|
||||
mask-image: url('assets/figma/bg-mask.svg');
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: 47px -16px;
|
||||
mask-position: 47px -16px;
|
||||
-webkit-mask-size: 375px 812px;
|
||||
mask-size: 375px 812px;
|
||||
}
|
||||
|
||||
.tips-bg img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
width: 375px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 187px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family:
|
||||
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.rules {
|
||||
position: absolute;
|
||||
top: 104px;
|
||||
left: 16px;
|
||||
z-index: 3;
|
||||
width: 343px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family:
|
||||
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: justify;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.rules p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rules p + p {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.rules-line {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rules-line-justify {
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.home-indicator {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 9px;
|
||||
z-index: 6;
|
||||
width: 135px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main
|
||||
class="tips-stage"
|
||||
aria-label="Game Instructions"
|
||||
data-i18n-aria="diceTips.pageTitle"
|
||||
>
|
||||
<section class="tips-frame" data-figma-node-id="491:358">
|
||||
<div class="tips-bg" aria-hidden="true">
|
||||
<img src="../touzi/assets/figma/bg-arena.png" alt="" />
|
||||
</div>
|
||||
|
||||
<nav class="nav" aria-label="Navigation">
|
||||
<button
|
||||
class="back-button"
|
||||
type="button"
|
||||
aria-label="Back"
|
||||
data-back-button
|
||||
>
|
||||
<img src="assets/figma/back.svg" alt="" />
|
||||
</button>
|
||||
<h1 class="nav-title" data-i18n="diceTips.pageTitle">
|
||||
Game Instructions
|
||||
</h1>
|
||||
</nav>
|
||||
|
||||
<div class="rules">
|
||||
<p>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="diceTips.ruleOneLineA"
|
||||
>1. Players who correctly predict the winner</span
|
||||
>
|
||||
<span
|
||||
class="rules-line"
|
||||
data-i18n="diceTips.ruleOneLineB"
|
||||
>will receive coins.</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="diceTips.ruleTwoLineA"
|
||||
>2. The ranking of card values is:6 > 5 > 4
|
||||
> 3 > 2</span
|
||||
>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="diceTips.ruleTwoLineB"
|
||||
>> 1. The player with the higher card wins;
|
||||
if</span
|
||||
>
|
||||
<span
|
||||
class="rules-line"
|
||||
data-i18n="diceTips.ruleTwoLineC"
|
||||
>the cards are of equal value, it is a tie.</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="diceTips.ruleThreeLineA"
|
||||
>3. The winner of each game pays a 5%</span
|
||||
>
|
||||
<span
|
||||
class="rules-line"
|
||||
data-i18n="diceTips.ruleThreeLineB"
|
||||
>transaction fee.</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="diceTips.ruleFourLineA"
|
||||
>4. This game is provided by the Lalu Party</span
|
||||
>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="diceTips.ruleFourLineB"
|
||||
>app. Google Play is not a sponsor and is not</span
|
||||
>
|
||||
<span
|
||||
class="rules-line"
|
||||
data-i18n="diceTips.ruleFourLineC"
|
||||
>involved in this activity in any way.</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator" aria-hidden="true"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="../../common/jsbridge.js"></script>
|
||||
<script src="../../common/i18n.js?v=dicetips-20260611"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var DESIGN_WIDTH = 375;
|
||||
var DESIGN_HEIGHT = 812;
|
||||
var root = document.documentElement;
|
||||
var backButton = document.querySelector('[data-back-button]');
|
||||
|
||||
function updateScale() {
|
||||
var scale = Math.min(
|
||||
window.innerWidth / DESIGN_WIDTH,
|
||||
window.innerHeight / DESIGN_HEIGHT
|
||||
);
|
||||
root.style.setProperty(
|
||||
'--tips-scale',
|
||||
String(Math.max(scale, 0.1))
|
||||
);
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (window.HyAppBridge && window.HyAppBridge.back) {
|
||||
window.HyAppBridge.back();
|
||||
return;
|
||||
}
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
updateScale();
|
||||
if (backButton) backButton.addEventListener('click', goBack);
|
||||
window.addEventListener('resize', updateScale);
|
||||
window.addEventListener('orientationchange', updateScale);
|
||||
|
||||
if (window.HyAppBridge && window.HyAppBridge.ready) {
|
||||
window.HyAppBridge.ready({
|
||||
page: 'game/dicetips',
|
||||
figma_node_id: '491:358',
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1551,7 +1551,7 @@
|
||||
var DESIGN_WIDTH = 375;
|
||||
var DESIGN_HEIGHT = 812;
|
||||
var GAME_ID = 'rock';
|
||||
var GAME_CODE = 'rock';
|
||||
var GAME_CODE = 'game_rock';
|
||||
var root = document.documentElement;
|
||||
var frame = document.querySelector('.rps-frame');
|
||||
var timers = [];
|
||||
@ -1682,6 +1682,33 @@
|
||||
: '';
|
||||
}
|
||||
|
||||
function entryMatchID() {
|
||||
var raw = currentParams();
|
||||
return raw && raw.get
|
||||
? raw.get('match_id') || raw.get('matchId') || ''
|
||||
: '';
|
||||
}
|
||||
|
||||
function matchRequestMode() {
|
||||
var raw = currentParams();
|
||||
var mode =
|
||||
raw && raw.get
|
||||
? String(
|
||||
raw.get('rps_mode') ||
|
||||
raw.get('match_mode') ||
|
||||
raw.get('mode') ||
|
||||
''
|
||||
)
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
: '';
|
||||
if (entryMatchID()) return 'join';
|
||||
if (mode === 'create' || mode === 'waiting') {
|
||||
return 'create';
|
||||
}
|
||||
return 'match';
|
||||
}
|
||||
|
||||
function currentParams() {
|
||||
var params =
|
||||
(window.HyAppParams && window.HyAppParams.current) ||
|
||||
@ -1840,14 +1867,16 @@
|
||||
);
|
||||
}
|
||||
);
|
||||
var matchedStake = false;
|
||||
each(
|
||||
document.querySelectorAll('[data-action="stake"]'),
|
||||
function (button) {
|
||||
var selected =
|
||||
!matchedStake &&
|
||||
Number(
|
||||
button.getAttribute('data-stake') || 0
|
||||
) === state.selectedStake &&
|
||||
button.getAttribute('aria-pressed') === 'true';
|
||||
) === state.selectedStake;
|
||||
if (selected) matchedStake = true;
|
||||
button.setAttribute(
|
||||
'aria-pressed',
|
||||
selected ? 'true' : 'false'
|
||||
@ -2295,18 +2324,31 @@
|
||||
game_code: GAME_CODE,
|
||||
game_id: GAME_ID,
|
||||
room_id: currentRoomID(),
|
||||
match_id: entryMatchID(),
|
||||
mode: matchRequestMode(),
|
||||
stake_coin: state.selectedStake,
|
||||
gesture: state.selectedGesture,
|
||||
});
|
||||
rpsAPI()
|
||||
.match({
|
||||
var payload = {
|
||||
game_id: GAME_ID,
|
||||
room_id: currentRoomID(),
|
||||
stake_coin: state.selectedStake,
|
||||
gesture: state.selectedGesture,
|
||||
})
|
||||
.then(handleMatchData)
|
||||
.catch(function (error) {
|
||||
};
|
||||
var mode = matchRequestMode();
|
||||
var request;
|
||||
// H5 默认走快速匹配；分享或指定局入口带 match_id 时只加入该局，后台仍会校验 rock 边界和预选手势。
|
||||
if (mode === 'join') {
|
||||
request = rpsAPI().join(entryMatchID(), {
|
||||
game_id: GAME_ID,
|
||||
gesture: state.selectedGesture,
|
||||
});
|
||||
} else if (mode === 'create') {
|
||||
request = rpsAPI().create(payload);
|
||||
} else {
|
||||
request = rpsAPI().match(payload);
|
||||
}
|
||||
request.then(handleMatchData).catch(function (error) {
|
||||
state.busy = false;
|
||||
showMessage(error.message);
|
||||
setScreen('lobby');
|
||||
|
||||
9
game/rocktips/assets/figma/back.svg
Normal file
9
game/rocktips/assets/figma/back.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon_20_返回">
|
||||
<g id="Vector">
|
||||
</g>
|
||||
<g id="Vector_2">
|
||||
</g>
|
||||
<path id="Vector_3" d="M16 4L8 12L16 20" stroke="var(--stroke-0, white)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 419 B |
7
game/rocktips/assets/figma/battery.svg
Normal file
7
game/rocktips/assets/figma/battery.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24.3307 11.3333" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Battery">
|
||||
<path id="Border" opacity="0.35" d="M2.66699 0.5H19.333C20.5296 0.5 21.5 1.47038 21.5 2.66699V8.66699C21.4998 9.86346 20.5295 10.833 19.333 10.833H2.66699C1.4705 10.833 0.500175 9.86346 0.5 8.66699V2.66699C0.5 1.47038 1.47039 0.5 2.66699 0.5Z" stroke="var(--stroke-0, white)"/>
|
||||
<path id="Cap" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M23.0027 7.66213C23.8074 7.32336 24.3307 6.53526 24.3307 5.66213C24.3307 4.789 23.8074 4.00091 23.0027 3.66213V7.66213V7.66213Z" fill="var(--fill-0, white)"/>
|
||||
<path id="Capacity" fill-rule="evenodd" clip-rule="evenodd" d="M18.666 1.99872C19.4024 1.99872 19.9993 2.59567 19.9993 3.33205V7.99872C19.9993 8.7351 19.4024 9.33205 18.666 9.33205H3.33268C2.5963 9.33205 1.99935 8.7351 1.99935 7.99872V3.33205C1.99935 2.59567 2.5963 1.99872 3.33268 1.99872H18.666V1.99872Z" fill="var(--fill-0, white)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
9
game/rocktips/assets/figma/bg-mask.svg
Normal file
9
game/rocktips/assets/figma/bg-mask.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 375 812" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect id="Rectangle 346254241" width="375" height="812" fill="url(#paint0_linear_0_25)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_0_25" x1="187.5" y1="0" x2="187.5" y2="812" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.520973" stop-color="#D9D9D9"/>
|
||||
<stop offset="0.823544" stop-color="#737373" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 523 B |
3
game/rocktips/assets/figma/cellular.svg
Normal file
3
game/rocktips/assets/figma/cellular.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 17.0001 11.3317" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Cellular Connection" fill-rule="evenodd" clip-rule="evenodd" d="M11.331 2.99835C11.8832 2.99835 12.331 3.44607 12.331 3.99835V10.3317C12.331 10.884 11.8832 11.3317 11.331 11.3317H10.331C9.77867 11.3317 9.33096 10.884 9.33096 10.3317V3.99835C9.33096 3.44607 9.77867 2.99835 10.331 2.99835H11.331V2.99835ZM16.0001 0C16.5524 0 17.0001 0.447712 17.0001 1V9.66667C17.0001 10.219 16.5524 10.6667 16.0001 10.6667H15.0001C14.4479 10.6667 14.0001 10.219 14.0001 9.66667V1C14.0001 0.447712 14.4479 0 15.0001 0V0H16.0001V0ZM2 7.00378C2.55229 7.00378 3 7.4515 3 8.00378V10.0038C3 10.5561 2.55229 11.0038 2 11.0038H0.999999C0.447714 11.0038 0 10.5561 0 10.0038V8.00378C0 7.4515 0.447714 7.00378 0.999999 7.00378H2V7.00378ZM6.66177 4.99767C7.21405 4.99767 7.66177 5.44538 7.66177 5.99767V9.99766C7.66177 10.55 7.21405 10.9977 6.66177 10.9977H5.66177C5.10948 10.9977 4.66177 10.55 4.66177 9.99766V5.99767C4.66177 5.44538 5.10948 4.99767 5.66177 4.99767H6.66177V4.99767Z" fill="var(--fill-0, white)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
game/rocktips/assets/figma/wifi.svg
Normal file
3
game/rocktips/assets/figma/wifi.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 15.3333 11.0067" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Wifi" fill-rule="evenodd" clip-rule="evenodd" d="M9.99304 8.66064C9.99127 8.57386 9.95373 8.49166 9.8893 8.43345C8.60864 7.35118 6.733 7.35118 5.45234 8.43345C5.38786 8.49162 5.35027 8.57379 5.34843 8.66057C5.34659 8.74735 5.38068 8.83104 5.44263 8.89188L7.44827 10.9139C7.50705 10.9733 7.5872 11.0067 7.67082 11.0067C7.75444 11.0067 7.83458 10.9733 7.89337 10.9139L9.89867 8.89188C9.96067 8.83108 9.99482 8.74742 9.99304 8.66064V8.66064ZM13.6438 4.67028C13.7652 4.78852 13.9593 4.78703 14.0789 4.66693L15.2395 3.4966C15.3 3.43569 15.3338 3.35318 15.3333 3.26733C15.3328 3.18148 15.2981 3.09937 15.2368 3.03917C11.0049 -1.01306 4.32858 -1.01306 0.0966678 3.03917C0.0353653 3.09933 0.00057401 3.18141 6.67831e-06 3.26726C-0.000545321 3.35311 0.0331419 3.43564 0.0936471 3.4966L1.25459 4.66693C1.3741 4.78721 1.56831 4.7887 1.68966 4.67028C3.30222 3.13859 5.44213 2.28447 7.66707 2.28448C9.89181 2.28457 12.0315 3.13869 13.6438 4.67028V4.67028ZM10.9782 7.36722C11.1007 7.48356 11.2938 7.48104 11.4132 7.36153L12.5725 6.1912C12.6336 6.12982 12.6674 6.04654 12.6665 5.96001C12.6657 5.87347 12.6301 5.7909 12.5678 5.73077C9.80866 3.16636 5.53574 3.16636 2.77658 5.73077C2.71425 5.7909 2.67869 5.87351 2.67787 5.96008C2.67706 6.04664 2.71106 6.12991 2.77223 6.1912L3.93117 7.36153C4.05063 7.48104 4.24368 7.48356 4.36623 7.36722C5.2717 6.54799 6.44949 6.09407 7.67102 6.09357C8.89337 6.09349 10.0721 6.54745 10.9782 7.36722V7.36722Z" fill="var(--fill-0, white)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
372
game/rocktips/index.html
Normal file
372
game/rocktips/index.html
Normal file
@ -0,0 +1,372 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
||||
/>
|
||||
<title data-i18n="rockTips.pageTitle">Game Instructions</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--tips-frame-width: 375px;
|
||||
--tips-frame-height: 812px;
|
||||
--tips-scale: 1;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #030623;
|
||||
font-family:
|
||||
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: geometricprecision;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tips-stage {
|
||||
position: relative;
|
||||
width: calc(var(--tips-frame-width) * var(--tips-scale));
|
||||
height: calc(var(--tips-frame-height) * var(--tips-scale));
|
||||
overflow: hidden;
|
||||
background: #030623;
|
||||
}
|
||||
|
||||
.tips-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--tips-frame-width);
|
||||
height: var(--tips-frame-height);
|
||||
overflow: hidden;
|
||||
background: #030623;
|
||||
transform: scale(var(--tips-scale));
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.tips-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -47px;
|
||||
width: 470px;
|
||||
height: 834px;
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-mask-image: url('assets/figma/bg-mask.svg');
|
||||
mask-image: url('assets/figma/bg-mask.svg');
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: 47px 0;
|
||||
mask-position: 47px 0;
|
||||
-webkit-mask-size: 375px 812px;
|
||||
mask-size: 375px 812px;
|
||||
}
|
||||
|
||||
.tips-bg img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.status-time {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 33.87px;
|
||||
z-index: 4;
|
||||
width: 54px;
|
||||
height: 15px;
|
||||
color: #fff;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
display: block;
|
||||
max-width: none;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.status-cellular {
|
||||
top: 15px;
|
||||
left: 294.34px;
|
||||
width: 17px;
|
||||
height: 11.33px;
|
||||
}
|
||||
|
||||
.status-wifi {
|
||||
top: 16.33px;
|
||||
left: 316.34px;
|
||||
width: 15.33px;
|
||||
height: 11.01px;
|
||||
}
|
||||
|
||||
.status-battery {
|
||||
top: 16.33px;
|
||||
left: 336.67px;
|
||||
width: 24.33px;
|
||||
height: 11.33px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
width: 375px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 187px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family:
|
||||
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.rules {
|
||||
position: absolute;
|
||||
top: 104px;
|
||||
left: 16px;
|
||||
z-index: 3;
|
||||
width: 343px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family:
|
||||
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: justify;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.rules p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rules p + p {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.rules-line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rules-line-justify {
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.home-indicator {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 9px;
|
||||
z-index: 6;
|
||||
width: 135px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main
|
||||
class="tips-stage"
|
||||
aria-label="Game Instructions"
|
||||
data-i18n-aria="rockTips.pageTitle"
|
||||
>
|
||||
<section class="tips-frame" data-figma-node-id="491:391">
|
||||
<div class="tips-bg" aria-hidden="true">
|
||||
<img src="../rock/assets/figma/bg-arena.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="status-time" aria-hidden="true">9:41</div>
|
||||
<img
|
||||
class="status-icon status-cellular"
|
||||
src="assets/figma/cellular.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<img
|
||||
class="status-icon status-wifi"
|
||||
src="assets/figma/wifi.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<img
|
||||
class="status-icon status-battery"
|
||||
src="assets/figma/battery.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<nav class="nav" aria-label="Navigation">
|
||||
<button
|
||||
class="back-button"
|
||||
type="button"
|
||||
aria-label="Back"
|
||||
data-back-button
|
||||
>
|
||||
<img src="assets/figma/back.svg" alt="" />
|
||||
</button>
|
||||
<h1 class="nav-title" data-i18n="rockTips.pageTitle">
|
||||
Game Instructions
|
||||
</h1>
|
||||
</nav>
|
||||
|
||||
<div class="rules">
|
||||
<p>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="rockTips.ruleOneLineA"
|
||||
>1. Players choose a rock-paper-scissors move,</span
|
||||
>
|
||||
<span
|
||||
class="rules-line"
|
||||
data-i18n="rockTips.ruleOneLineB"
|
||||
>and the winner receives coins.</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="rockTips.ruleTwoLineA"
|
||||
>2. The winner pays a 5% transaction fee for</span
|
||||
>
|
||||
<span
|
||||
class="rules-line"
|
||||
data-i18n="rockTips.ruleTwoLineB"
|
||||
>each game.</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="rockTips.ruleThreeLineA"
|
||||
>3. This game is provided by the Lalu Party</span
|
||||
>
|
||||
<span
|
||||
class="rules-line rules-line-justify"
|
||||
data-i18n="rockTips.ruleThreeLineB"
|
||||
>app. Google Play is not a sponsor and is not</span
|
||||
>
|
||||
<span
|
||||
class="rules-line"
|
||||
data-i18n="rockTips.ruleThreeLineC"
|
||||
>involved in this activity in any way.</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator" aria-hidden="true"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="../../common/jsbridge.js"></script>
|
||||
<script src="../../common/i18n.js?v=rocktips-20260611"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var DESIGN_WIDTH = 375;
|
||||
var DESIGN_HEIGHT = 812;
|
||||
var root = document.documentElement;
|
||||
var backButton = document.querySelector('[data-back-button]');
|
||||
|
||||
function updateScale() {
|
||||
var scale = Math.min(
|
||||
window.innerWidth / DESIGN_WIDTH,
|
||||
window.innerHeight / DESIGN_HEIGHT
|
||||
);
|
||||
root.style.setProperty(
|
||||
'--tips-scale',
|
||||
String(Math.max(scale, 0.1))
|
||||
);
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (window.HyAppBridge && window.HyAppBridge.back) {
|
||||
window.HyAppBridge.back();
|
||||
return;
|
||||
}
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
updateScale();
|
||||
if (backButton) backButton.addEventListener('click', goBack);
|
||||
window.addEventListener('resize', updateScale);
|
||||
window.addEventListener('orientationchange', updateScale);
|
||||
|
||||
if (window.HyAppBridge && window.HyAppBridge.ready) {
|
||||
window.HyAppBridge.ready({
|
||||
page: 'game/rocktips',
|
||||
figma_node_id: '491:391',
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user