-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
149 lines (129 loc) · 8.42 KB
/
index.html
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
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pokémon Virtual Trading Card Binder</title>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9589606860210507"
crossorigin="anonymous"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css"></link>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
</head>
<body onload="generateCardSetOptions()">
<div class="navigation-menu">
<img src="android-chrome-512x512.png" alt="PKMN Logo" class="logo">
<div class="pkmnbinder">
<a href="index.html">pkmnbinder</a>
</div>
<div class="nav-menu">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="buy.html">Buy</a>
</div>
</div>
<div class="content">
<div class="menu">
<h1><center>Pokémon Virtual Trading Card Binder</center></h1>
<label for="cardSet">Card Set</label>
<select id="cardSet" name="cardSet"></select>
<p class="option-description">Select the Pokémon card set you want to generate a binder layout for</p><br>
<label for="numPerPage">Binder Page Size</label>
<select id="numPerPage" name="numPerPage">
<option value="4">2x2 (4 cards / page)</option>
<option value="9">3x3 (9 cards / page)</option>
<option value="12" selected>3x4 (12 cards / page)</option>
<option value="16">4x4 (16 cards / page)</option>
</select>
<p class="option-description">Choose the number of cards per page in your binder</p><br>
<div class="advanced-options">
<button class="advanced-options-toggle" onclick="toggleAdvancedOptions()">
<span class="advanced-options-text">Advanced Options</span>
<span class="arrow">▼</span>
</button>
<div class="advanced-options-content hide">
<label for="startPosition">1st card starting position offset</label>
<select id="startPosition" name="startPosition"></select>
<p class="option-description">Set the starting position for the first card in the binder (Position 1 is default)</p><br>
<div id="rVariantContainer" class="hide">
<label for="rVariantDisplay">Display Reverse holo cards</label>
<select id="rVariantDisplay" name="rVariantDisplay">
<option value="noR" selected>No Reverse holo cards</option>
<option value="atEnd">Reverse holo cards at end</option>
<option value="interleaved">Reverse holo cards interleaved</option>
</select>
<p class="option-description">Choose how to display reverse holo cards in your binder</p><br>
</div>
<div id="pVariantContainer" class="hide">
<label for="pVariantDisplay">Display Poké Ball holo cards</label>
<select id="pVariantDisplay" name="pVariantDisplay">
<option value="noP" selected>No Poké Ball holo cards</option>
<option value="atEnd">Poké Ball holo cards at end</option>
<option value="interleaved">Poké Ball holo cards interleaved</option>
</select>
<p class="option-description">Choose how to display Poké Ball holo cards in your binder</p><br>
</div>
<div id="mVariantContainer" class="hide">
<label for="mVariantDisplay">Display Master Ball holo cards</label>
<select id="mVariantDisplay" name="mVariantDisplay">
<option value="noM" selected>No Master Ball holo cards</option>
<option value="atEnd">Master Ball holo cards at end</option>
<option value="interleaved">Master Ball holo cards interleaved</option>
</select>
<p class="option-description">Choose how to display Master Ball holo cards in your binder</p><br>
</div>
<div id="interleaveContainer" class="hide">
<label for="interleaveHolos">Interleave parallel holo cards at end</label>
<select id="interleaveHolos" name="interleaveHolos">
<option value="no" selected>No</option>
<option value="yes">Yes</option>
</select>
<p class="option-description">Interleave parallel sets when adding them at the end</p><br>
</div>
</div>
</div>
</div>
<div class="generate" onclick="generatePages()">
<h2>Generate Binder</h2>
</div>
<div class="options hide">
<div class="save-print" onclick="window.print()"><h4>Print Binder</h4></div>
<div class="save-print" onclick="exportPDF()"><h4></h4></div>
<div class="search">
<form class="search-box">
<input class="search-input" type="text" placeholder="###" oninput="formatInputValue(this)">
<button class="search-btn" type="button" onclick="search()"></button>
</form>
</div>
</div>
<div id="printable">
<div id="cardPages" class="cardPages"></div>
</div>
</div>
<div class="text-section">
<p>Pokémon and its trademarks are ©1995-2025 Nintendo, Creatures, and GAMEFREAK. Related media appearing on this site are the property of The Pokémon Company International, Inc.</p>
<p>This is an unofficial site produced by Luma, who is neither affiliated with nor endorsed by Nintendo, Creatures, GAMEFREAK, or The Pokémon Company International, Inc.</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('rVariantDisplay').addEventListener('change', checkInterleaveCondition);
document.getElementById('pVariantDisplay').addEventListener('change', checkInterleaveCondition);
document.getElementById('mVariantDisplay').addEventListener('change', checkInterleaveCondition);
});
document.getElementById("numPerPage").addEventListener("change", function() {
populateStartPositionOptions(); // Update startPosition options when numPerPage changes
});
document.getElementById("cardSet").addEventListener("change", function() {
updateVariantDropdowns(); // Call the function when the selection changes
});
// Call populateStartPositionOptions on page load to initialize the dropdown
window.onload = function() {
generateCardSetOptions();
populateStartPositionOptions();
updateVariantDropdowns();
};
</script>
</body>
</html>