nickly-generator/index.html at main · juicebct/nickly-generator · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NickLy - RolePlay Nickname Generator</title>
    <meta name="description" content="RolePlay Nickname Generator for GTA - SAMP, CRMP, GTA 5, GTA ONLINE, Garry's Mod...">

    <!-- Styles and icons -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css/css/flag-icons.min.css">
    <link rel="icon" href="icons/favicon.ico" type="image/x-icon">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

</head>
    <body>
        <div class="main-container">

        <!-- Information container -->
            <div class="left-container">
                <!-- Navigation menu -->
                <header>
                        <!-- Logo -->
                        <div class="logo"></div>

                        <!-- Mobile menu -->
                        <button class="nav-toggle">&#9776;</button>

                        <!-- Navigation elements -->
                        <nav class="nav">

                            <ul>
                                <!-- Link to GitHub -->
                                <li><a href="https://github.com/juicebucket/nickly-generator" target="_blank" rel="noopener noreferrer">GITHUB</a></li>

                                <!-- Theme toggle -->
                                <button id="theme-button" class="btn theme">Dark Mode</button>

                                <!-- Language selection -->
                                <div class="lang-selector dropdown">
                                    <button class="lang-btn" onclick="toggleDropdown('.lang-selector')">
                                        <img src="icons/globe-icon.svg" alt="Language"> <span id="selected-lang">ENG</span> &#9207;
                                    </button>
                                    <ul class="lang-dropdown">
                                        <li onclick="changeSelection('.lang-selector', 'selected-lang', 'ENG')"><span class="flag-icon flag-icon-gb"></span> ENG</li>
                                        <li onclick="changeSelection('.lang-selector', 'selected-lang', 'RUS')"><span class="flag-icon flag-icon-ru"></span> RUS</li>
                                        <li onclick="changeSelection('.lang-selector', 'selected-lang', 'POR')"><span class="flag-icon flag-icon-pt"></span> POR</li>
                                        <li onclick="changeSelection('.lang-selector', 'selected-lang', 'ESP')"><span class="flag-icon flag-icon-es"></span> ESP</li>
                                    </ul>
                                </div>
                            </ul>
                        </nav>
                </header>

                <div class="information">
                    <h1 lang="maintitle">ROLEPLAY <br> NICKNAME <br> GENERATOR</h1>
                    <p lang="description-1">Looking for the perfect RP Nickname for your character in <span>GTA SAMP</span> or <span>GTA 5 RP</span>? Our generator will help you create <span>a unique, stylish, and memorable name</span> that will be perfect <span>for any RolePlay server</span>.</p>
                    <p lang="description-2">Customize the parameters to your preferences: <span>choose the gender and nationality of your character</span>, and then run the generation. You will get an <span>original nickname</span> that will emphasize the personality of your character and help you stand out in the game.</p>
                </div>

            </div>

            <!-- Generator container -->
            <div class="right-container">
                <div class="generator-container">

                    <!-- Nickname box -->
                    <h2 lang="your-nickname">YOUR NICKNAME</h2>
                    <div class="nickname-box" onclick="copyNickname()">
                        <img src="icons/person-icon.svg" alt="Person Icon">
                        <input type="text" id="nickname" value="IVAN_IVANOV" readonly>
                    </div>

                    <!-- Character gender selection -->
                    <h2 lang="character-gender">CHARACTER GENDER</h2>
                    <div class="gender-selection">
                        <input type="radio" id="male" name="gender" class="gender-input" hidden>
                        <label for="male" class="gender-card male"></label>

                        <input type="radio" id="female" name="gender" class="gender-input" hidden>
                        <label for="female" class="gender-card female"></label>
                    </div>

                    <!-- Character nationality selection -->
                    <h2 lang="character-nationality">CHARACTER NATIONALITY</h2>
                    <div class="nationality-selector dropdown">
                        <button class="nationality-btn" onclick="toggleDropdown('.nationality-selector')">
                            <span lang="selected-nationality" id="selected-nationality">Select option</span> ▼
                        </button>
                        <ul class="nationality-dropdown">
                            <li lang="nationality-american" onclick="changeSelection('.nationality-selector', 'selected-nationality', 'American')">American</li>
                            <li lang="nationality-russian" onclick="changeSelection('.nationality-selector', 'selected-nationality', 'Russian')">Russian</li>
                            <li lang="nationality-japanese" onclick="changeSelection('.nationality-selector', 'selected-nationality', 'Japanese')">Japanese</li>
                            <li lang="nationality-italian" onclick="changeSelection('.nationality-selector', 'selected-nationality', 'Italian')">Italian</li>
                            <li lang="nationality-spanish" onclick="changeSelection('.nationality-selector', 'selected-nationality', 'Spanish')">Spanish</li>
                            <li lang="nationality-german" onclick="changeSelection('.nationality-selector', 'selected-nationality', 'German')">German</li>
                        </ul>
                    </div>

                    <!-- Nickname generate button -->
                    <button lang="generate-btn" class="generate-btn" onclick="generateNickname()">Generate</button>

                    <!-- Copyright -->
                    <p class="copyright">CREATED & DESIGNED BY <a href="https://juicebct.dev/" target="_blank" rel="noopener noreferrer">JUICEBCT</a> WITH ❤️ </p>
                </div>
            </div>
        </div>

        <!-- Scripts -->
        <script src="js/generator.js"></script>
        <script src="js/addons.js"></script>
        <script src="js/translation.js"></script>

    </body>
</html>