Rewaa-Team.github.io/index.html at main · Rewaa-Team/Rewaa-Team.github.io · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>App Download Page</title>

    <!-- Favicon for the browser tab -->
    <link rel="icon" href="image.webp" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif; /* Set font to Roboto */
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-size: 50px 50px; /* 1. Makes the image smaller */
            animation: moveBackground 120s linear infinite; /* 2. Slower animation */
            position: relative; /* Necessary for overlay positioning */

            overflow: hidden; /* Prevent scrollbars from appearing */
            background: url('image.webp') repeat; /* Tiled background */


        }

        /* Animation for scrolling diagonally */
        @keyframes moveBackground {
            from {
                background-position: 0 0; /* Start position */
            }
            to {
                background-position: 100% 100%; /* 3. Moves diagonally */
            }
        }

        /* Optional overlay over tiled background */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(105, 129, 119, 0.9); /* Dark translucent overlay */
            pointer-events: none; /* Allows interactions with content below */
            z-index: 1;
        }
        .container {
            text-align: center;
            background: linear-gradient(135deg, #00A5A3, #00807D);
            padding: 40px;
            z-index: 2;
            border-radius: 12px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            width: 60%; /* Adjust width of the container */
            max-width: 500px; /* Limit max width */
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 0.5em;
            letter-spacing: 1px;
        }

        p {
            font-size: 1.2em;
            margin-bottom: 1.5em;
        }

        .download-button {
            background: linear-gradient(135deg, #8D508C, #561157);
            border: none;
            color: #fff;
            padding: 15px 30px;
            font-size: 1.2em;

            letter-spacing: 1px;
            border-radius: 8px;
            cursor: pointer;
            display: block;
            width: 100%;
            max-width: 300px;
            margin: 10px auto;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .download-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .download-button:active {
            transform: translateY(1px);
            box-shadow: none;
        }

        /* Styling for the image */
        .image-container {
            margin-bottom: 20px; /* Margin below the image */
        }

        .image-container img {
            width: 100%; /* Make the image responsive */
            max-width: 200px; /* Set a max width */
            height: auto;
            border-radius: 12px; /* Rounded corners for the image */
        }
    </style>
</head>
<body>

    <div class="overlay"></div>
    <div class="container">
        <!-- Image Container -->
        <div class="image-container">
            <img src="image.webp" alt="App Image">
        </div>

        <h1>Rewaa Apps</h1>
        <p>
            Introducing the Rewaa Cashier App. Now you can streamline product sales, and enhance customer experience with efficient invoicing.
        </p>


        <button id="apk-link" class="download-button" onclick="window.location.href='https://github.com/Rewaa-Team/Rewaa-Team.github.io/releases/download/v20260414220637/rewaaAndroid-1.0.0-beta.104-prod-release.apk';">
            Cashier Android
        </button>
    </div>
</body>

</html>