P4GPauseMenu/index.html at main · Simplezes/P4GPauseMenu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/data.js"></script>
    <script src="js/ui-render.js"></script>
    <script src="js/animations.js"></script>
    <script src="js/systems.js"></script>
    <script src="js/main.js"></script>
</head>

<body>

    <div class="background">
        <video class="bg-video active" id="video1" autoplay muted loop playsinline></video>
        <video class="bg-video" id="video2" autoplay muted loop playsinline></video>
    </div>

    <div class="left-banner">
        <div class="banner-expand-bg"></div>
        <div class="banner-glow-overlay"></div>
    </div>

    <div class="menu-overlay">
        <div class="menu-items">
            <div data-menu="Use/view skills" class="menu-item active">Skill</div>
            <div data-menu="Use/view items" class="menu-item">Item</div>
            <div data-menu="Change/view equipment" class="menu-item">Equip</div>
            <div data-menu="Change/view Personas" class="menu-item">Persona</div>
            <div data-menu="View team member status" class="menu-item">Status</div>
            <div data-menu="View Social Links details" class="menu-item">S.Link</div>
            <div data-menu="View quest info" class="menu-item">Quest</div>
            <div data-menu="Config/Data management" class="menu-item">System</div>
        </div>
        <div class="menu-footer">Use/view skills</div>
    </div>

    <div class="hud-container">
        <div class="date-bar">
            <div class="numbers">08/10</div>
            <div class="day">WED</div>
        </div>
        <div class="time-of-day">Daytime</div>
        <div class="weather-container">
            <img class="weather-icon" src="assets/imgs/weather/cloudy.svg" alt="Weather">
        </div>
    </div>

    <div class="corner-circle-container">
        <div class="corner-circle-inner">
            <div class="ring ring-1"></div>
            <div class="ring ring-2"></div>
            <div class="ring ring-3"></div>
            <div class="ring ring-4"></div>
            <div class="ring ring-5"></div>
            <div class="circle-fill"></div>
        </div>
    </div>

    <div class="currency-banner">
        <div class="currency-symbol-container">
            <svg class="currency-symbol-svg" version="1.0" xmlns="http://www.w3.org/2000/svg" width="75" height="110"
                viewBox="0 0 75 110">
                <g transform="translate(0,110) scale(0.1,-0.1)">
                    <path class="symbol-path"
                        d="M139 963 c-55 -53 -99 -99 -99 -102 1 -3 22 -16 49 -29 100 -46 249 -195 267 -265 l6 -27 -141 0 -141 0 0 -40 0 -40 131 0 c72 0 129 -3 127 -7 -3 -5 -10 -23 -17 -41 l-13 -32 -114 0 -114 0 0 -40 0 -40 101 0 c92 0 101 -2 94 -17 -4 -10 -12 -31 -18 -48 -5 -16 -23 -49 -39 -72 -36 -54 -39 -113 -5 -113 36 0 44 11 75 95 16 44 37 97 46 118 l16 37 125 0 125 0 0 40 0 40 -100 0 c-55 0 -100 3 -100 8 0 4 9 22 20 40 20 32 20 32 100 32 l80 0 0 40 0 40 -55 0 c-30 0 -55 3 -55 6 0 3 34 70 74 148 41 78 91 177 111 221 l36 79 -53 -49 c-29 -27 -83 -83 -119 -123 -37 -41 -71 -74 -75 -74 -4 0 -15 18 -23 39 -44 108 -161 273 -193 273 -6 0 -55 -44 -109 -97z" />
                </g>
            </svg>
        </div>

        <div class="currency-amount" id="click-counter">0</div>
    </div>


    <div class="button-prompts">
        <div class="button-prompt">
            <div class="btn-circle">A</div>
            <span class="btn-label">Ok</span>
        </div>
        <div class="button-prompt">
            <div class="btn-circle">B</div>
            <span class="btn-label">Back</span>
        </div>
    </div>
</body>

</html>