Skip to content

Commit 92ae562

Browse files
wyndchymewyndchyme
committed
Testing seeds page
1 parent f622e82 commit 92ae562

File tree

1 file changed

+145
-0
lines changed

1 file changed

+145
-0
lines changed

‎seeds/index.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link href="/style.css" rel="stylesheet">
7+
<link rel="icon" type="image/x-icon" href="/img/favicon.ico?">
8+
<link rel="stylesheet" href="/plugins/flickity/flickity.css" media="screen">
9+
<script src="/plugins/flickity/flickity.pkgd.js"></script>
10+
<title>Seeds &#8226 Minecraft 3DS Community</title>
11+
<style>
12+
.header {
13+
overflow: visible;
14+
}
15+
#vines {
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
height: 100%;
20+
pointer-events: none;
21+
}
22+
body {
23+
background: linear-gradient(rgba(2, 17, 25, 0.2), rgba(2, 56, 83, 0.2)), url(/img/bg/chiseled_quartz_block_top.png);
24+
background-size: 32px;
25+
}
26+
.tab-container {
27+
color: white;
28+
width: 100%;
29+
}
30+
.tab-buttons {
31+
display: flex;
32+
width: calc(100% - 4px);
33+
gap: 7px;
34+
margin-left: 2px;
35+
margin-right: 2px;
36+
}
37+
.tab-btn {
38+
flex: 1;
39+
background: #336699;
40+
color: white;
41+
border: none;
42+
padding: 0.5em 1em;
43+
cursor: pointer;
44+
font-family: 'Minecraft Regular';
45+
text-align: center;
46+
font-size: 1em;
47+
border: 2px solid black;
48+
outline: 2px solid #667C96;
49+
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
50+
}
51+
.tab-btn:hover {
52+
background: #5588cc;
53+
}
54+
.tab-btn.active {
55+
background: #225588;
56+
border-bottom: none;
57+
}
58+
.tab-panel {
59+
display: none;
60+
padding: 1em;
61+
height: calc(100vh - 9.5em);
62+
}
63+
.tab-panel.active {
64+
display: block;
65+
background: #225588;
66+
position: relative;
67+
box-shadow:
68+
-2px 0 0 #667C96,
69+
2px 0 0 #667C96,
70+
0 2px 0 #667C96;
71+
width: calc(100% - 4px);
72+
position: relative;
73+
left: 2px;
74+
border: 2px solid black;
75+
border-top: none;
76+
margin-bottom: 2px;
77+
}
78+
79+
</style>
80+
</head>
81+
<body>
82+
<div style="position: absolute; top: 0; left: 0; width: 100vw; height: 3.5em; display: flex; align-items: center;" class="header">
83+
<a href="/index.html" style="text-indent: 1rem;">
84+
<span style="color: white; font-size: 20pt; filter: drop-shadow(0 3px 3px black); margin-left: 45px;" class="logo">
85+
<img src="/img/New_Nintendo_3DS_Edition.webp" style="width: 180px; vertical-align: middle; position: relative; bottom: 3px; image-rendering: auto;">
86+
<span style="position: absolute; display: inline-block; color: yellow; transform-origin: left; transform: translateX(-100px) translateY(25px) scale(0.65) rotate(-15deg); animation: scaleText 2s ease-in-out infinite;">
87+
Community
88+
</span>
89+
</span>
90+
</a>
91+
92+
<div id="vines" class="vines">
93+
</div>
94+
95+
<div class="vines" id="leftVines">
96+
<img src="/img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 0;">
97+
<img src="/img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 32px;">
98+
</div>
99+
<!--wyndchyme was here. These left vines will only appear on smaller video widths.-->
100+
</div>
101+
102+
103+
<div class="dropDownContainer closed">
104+
<div class="dropDown">
105+
<div id="dropDownContent"></div>
106+
</div>
107+
<div class="dropDownButton" id="dropDownToggle">
108+
<img src="/img/gui/arrow.png" style="width: 32px;" id="dropDownArrow">
109+
</div>
110+
</div>
111+
112+
<div class="tab-container" style="margin-top: 7em;">
113+
<div class="tab-buttons">
114+
<button class="tab-btn active" data-tab="tab1">Terrain</button>
115+
<button class="tab-btn" data-tab="tab2">Structures</button>
116+
<button class="tab-btn" data-tab="tab3">Other</button>
117+
</div>
118+
<div class="tab-content">
119+
<div class="tab-panel active" id="tab1">Content for Tab 1</div>
120+
<div class="tab-panel" id="tab2">Content for Tab 2</div>
121+
<div class="tab-panel" id="tab3">Content for Tab 3</div>
122+
</div>
123+
</div>
124+
125+
126+
<script src="/scripts/main/dropdown.js"></script>
127+
<script src="/scripts/main/vines.js"></script>
128+
<script src="/scripts/main/header.js"></script>
129+
<script>
130+
document.querySelectorAll('.tab-btn').forEach(button => {
131+
button.addEventListener('click', () => {
132+
const tabId = button.dataset.tab;
133+
134+
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
135+
document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
136+
137+
button.classList.add('active');
138+
document.getElementById(tabId).classList.add('active');
139+
});
140+
});
141+
</script>
142+
143+
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)