-
Notifications
You must be signed in to change notification settings - Fork 7
/
main.html
159 lines (132 loc) · 5.83 KB
/
main.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
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<title>NF3D - Model your NFT</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="css/cover.css" rel="stylesheet">
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/GLTFLoader.js"></script>
<script src="js/GLTFExporter.js"></script>
<script src="js/threed.js" defer></script>
<script type="text/javascript" src="js/main.js"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand" style="text-shadow: 3px -3px 1px #CE0D39, -3px 3px 1px #1E34CE;">NF3D</h3>
<nav class="nav nav-masthead justify-content-center">
<div class="form-group pr-4">
<select class="form-control" id="chain-select"
style="font-weight: bold; color: rgba(255, 255, 255); border-color: #333; background-color: #333;">
<option value="eth" selected><b>Ethereum</b></option>
<option value="rinkeby">Rinkeby</option>
<option value="ropsten">Ropsten</option>
<option value="solana">Solana</option>
<option value="bsc">Binance Chain</option>
<option value="matic">Polygon</option>
<!-- <option value="optimism">Optimism</option> -->
</select>
</div>
<a class="nav-link" id="mode-status" onclick="changeTestingMode()">Testing: ON</a>
<a class="nav-link" href="https://github.com/weronikazak">Github</a>
<a class="nav-link" id="btn-logout" onclick="logOut()">Logout</a>
</nav>
</div>
</header>
<main role="main" class="inner cover row">
<!-- 3D MODEL -->
<div class="col-7 h-100" id="model-container">
<div class="container container-main text-left">
<div class="container-canvas">
<div id="mycanvas">
</div>
</div>
</div>
</div>
<div class="col-5">
<!-- Sidebars -->
<div class="row">
<!-- Nft details -->
<nav class="col-6 border rounded p-4 sidebar">
<div class="sidebar-header text-left">
<h3>NFT Details</h3>
</div>
<div id="nft-details"></div>
<a href="#" class="btn btn-lg btn-secondary"
style="padding: 10px 30px; display: none;"
id="mint" onclick="upload();">Mint 3D Model</a>
<div id="resultSpace">
<a href="#" class="btn btn-lg btn-secondary mt-2"
style="display: none; background-color: #333; border-color: white; color: white;"
id="export" onclick="exportModel();">Export 3D Model</a>
<div id="resultSpace">
</div>
</nav>
<!-- end Nft details -->
<!-- nft gallery -->
<nav class="col-6 border rounded p-4 sidebar">
<div class="sidebar-header text-left">
<h3>Your NFTs</h3>
</div>
<div style="overflow-y: scroll; max-height: 65vh;">
<div id="nft-gallery"></div>
</div>
<a href="#" class="btn btn-lg btn-secondary"
id="nft-button" onclick="getNFTs();">My NFTs</a>
</nav>
<!-- end nft gallery -->
</div>
</div>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Project created for the <a href="https://buildquest.ethglobal.com/">ETH BuildQuest Hakathon</a>, 2022 by <a href="https://www.linkedin.com/in/weronikawzak/">Weronika Zak</a>.</p>
</div>
</footer>
</div>
<script>
$('#chain-select').on('change', function() {
var selected_chain = $(this).find(":selected").val();
CURRENT_CHAIN = selected_chain;
document.getElementById("nft-gallery").innerHTML = "";
getNFTs();
});
$(".nft-image").on("click", () => {
$(this).parent.style.background = "#282828";
})
async function changeTestingMode() {
TEST_MODE = !TEST_MODE;
if (TEST_MODE) {
document.getElementById("mode-status").innerHTML = "Testing: ON"
} else {
document.getElementById("mode-status").innerHTML = "Testing: OFF"
}
document.getElementById("nft-gallery").innerHTML = "";
console.log("Changed to ", CURRENT_CHAIN)
await getNFTs();
}
</script>
</body>
</html>