solidify/index.html at main · nikhilrado/solidify · 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
<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

	<script src="/ex-scripts/three.min.js"></script>
	<script src="/ex-scripts/STLLoader.js"></script>
	<script src="/ex-scripts/OrbitControls.js"></script>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Solidify</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script src="script.js"></script>
</head>

<body>

	<div class="header">
		<div id="logo">
			<p><a href="/">Home</a></p>
		</div>
		<div id="menu">
			<p><a href="/about">About</a></p>
			<p><a href='https://doc.clickup.com/10552948/p/h/a21km-408/5a9010c6cb9cd39' target="_blank">Roadmap</a></p>
			<p><a href='/tutorial'>Tutorial</a></p>
		</div>
	</div>

	<div class="row">
		<div class="column left">
			<div id="test">
				<h1 id='main-header'>Solidify</h1>
				<h2>Gain a solid understanding of your data by visualizing it in three dimensions.</h2>
			</div>


			<div class="container">
				<div class="dropdown">
					<!-- Default icon and text for GitHub, with dropdown icon -->
					<button class="dropbtn" id="left-dropdown">
						<i class="fab fa-github"></i>
						Github
						<i class="fas fa-chevron-down dropdown-icon"></i>
					</button>
					<div id="feed-picker-dropdown-content" class="dropdown-content">
						<p onclick="changeButtonText(this, '<i class=\'fab fa-github\'></i> Github')">
							<i class="fab fa-github"></i>
							<span>Github</span>
						</p>
						<p onclick="changeButtonText(this, '<i class=\'fas fa-map-marker-alt\'></i> Location')">
							<i class="fas fa-map-marker-alt"></i>
							<span>Location</span>
						</p>
						<p onclick="openFileSelector()">
							<i class="fas fa-paperclip"></i>
							<span>File Upload</span>
						</p>
					</div>
				</div>
				<input id="filenameInput" placeholder="github_username">
				<button class="dropbtn" id="right-dropdown" onclick="go()">Go</button>
			</div>

			<input type="file" id="fileInput" accept=".csv" onchange="setFileName()">
			<!-- <p>Go to Nikhil's website: <a href="https://www.nikhilrado.com">nikhilrado.com</a></p> -->
		</div>
		<div class="column right">
			<div id="model" style="width: 100%; height: 700px; padding: 0px;"> </div>
		</div>
	</div>


</body>

<script>
	function changeButtonText(element, textWithIcon) {
		// Update the dropdown button text and icon
		document.getElementById("left-dropdown").innerHTML = textWithIcon + ' <i class="fas fa-chevron-down dropdown-icon"></i>';
		document.getElementById('filenameInput').placeholder = 'github_username';
		document.getElementById('filenameInput').value = '';
		document.getElementById('filenameInput').focus();
		document.getElementById('filenameInput').removeAttribute('readonly');
		// Hide the dropdown after selection
		document.getElementById('feed-picker-dropdown-content').style.display = 'none';
	}

	function openFileSelector() {
		document.getElementById('fileInput').click();
	}

	function setFileName() {
		const fileInput = document.getElementById('fileInput');
		const filename = fileInput.files[0].name;
		document.getElementById('filenameInput').placeholder = filename;
		document.getElementById('filenameInput').setAttribute('readonly', 'readonly');
		document.getElementById("left-dropdown").innerHTML = '<i class="fas fa-paperclip"></i> File Upload <i class="fas fa-chevron-down dropdown-icon"></i>';
	}

	const button = document.querySelector('.dropbtn');
	const dropdown = document.getElementById('feed-picker-dropdown-content');

	button.addEventListener('mouseover', function () {
		dropdown.style.display = 'block';
	});

	button.addEventListener('mouseout', function () {
		dropdown.style.display = 'none';
	});

	dropdown.addEventListener('mouseover', function () {
		dropdown.style.display = 'block';
	});

	dropdown.addEventListener('mouseout', function () {
		dropdown.style.display = 'none';
	});
</script>

</html>