Skip to content

Commit cd5bea6

Browse files
DataForSolutionDataForSolution
committed
Rebuild Tools page with working CSV profiler
1 parent d385a07 commit cd5bea6

1 file changed

Lines changed: 85 additions & 153 deletions

File tree

‎free-tools.html‎

Lines changed: 85 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,101 @@
11
---
22
layout: default
3-
title: "Free Tools"
3+
title: "Tools"
44
permalink: /free-tools/
55
---
66

7-
<section id="free-tools">
8-
<h1>🚀 Free Tools for Data Scientists</h1>
9-
<p>Explore our **cutting-edge** free tools that enhance your data science projects and research.</p>
10-
11-
<!-- 🔹 Data Cleaning Tool -->
12-
<div class="tool">
13-
<h2>🧹 Data Cleaning Tool</h2>
14-
<p>Upload your CSV file, and our automated system will clean it for you.</p>
15-
<form id="data-cleaning-form" enctype="multipart/form-data">
16-
<input type="file" name="csv-file" accept=".csv" required>
17-
<button type="submit">Clean Dataset</button>
18-
</form>
19-
<div id="cleaning-result"></div>
20-
</div>
21-
22-
<!-- 🔹 AI-Powered Prediction Tool -->
23-
<div class="tool">
24-
<h2>🤖 AI Prediction Tool</h2>
25-
<p>Provide input data and get instant AI predictions.</p>
26-
<form id="prediction-form">
27-
<input type="text" name="input-feature" placeholder="Enter input value" required>
28-
<button type="submit">Predict</button>
29-
</form>
30-
<div id="prediction-result"></div>
7+
<section class="tools-hub">
8+
<header class="tools-hero">
9+
<p class="tools-eyebrow">DataForSolution Tool Lab</p>
10+
<h1>Use practical tools. Understand the result.</h1>
11+
<p>Explore privacy-conscious utilities for data analysis, statistics, machine learning, and learning practice. Every tool is clearly marked as available, in development, or external.</p>
12+
</header>
13+
14+
<section class="tools-section" aria-labelledby="available-tools-heading">
15+
<div class="tools-section-heading">
16+
<div>
17+
<p class="tools-kicker">Available now</p>
18+
<h2 id="available-tools-heading">Working DataForSolution tools</h2>
19+
</div>
20+
<p>These tools run directly in the visitor's browser.</p>
3121
</div>
3222

33-
<!-- 🔹 Data Science Learning & Challenges -->
34-
<div class="tool">
35-
<h2>🎯 Data Science Quizzes & Challenges</h2>
36-
<p>Test your knowledge and skills with our interactive quizzes and coding challenges.</p>
37-
38-
<h3>📘 Quizzes</h3>
39-
<ul>
40-
<li><button class="quiz-btn" data-quiz-id="python">Python Basics Quiz</button></li>
41-
<li><button class="quiz-btn" data-quiz-id="ml">Machine Learning Quiz</button></li>
42-
<li><button class="quiz-btn" data-quiz-id="stats">Statistics for Data Science Quiz</button></li>
43-
</ul>
44-
45-
<h3>💻 Coding Challenges</h3>
46-
<ul>
47-
<li><button class="challenge-btn" data-challenge-id="1">Build a Regression Model</button></li>
48-
<li><button class="challenge-btn" data-challenge-id="2">Classify Images Using CNN</button></li>
23+
<div class="tools-grid">
24+
<article class="tool-card tool-card--featured">
25+
<div class="tool-card-topline">
26+
<span class="tool-icon" aria-hidden="true">📊</span>
27+
<span class="tool-status tool-status--available">Available</span>
28+
</div>
29+
<h3>CSV Data Profiler</h3>
30+
<p>Upload a CSV file and examine rows, columns, missing values, duplicates, inferred data types, unique values, numerical summaries, and a data preview.</p>
31+
<ul class="tool-feature-list">
32+
<li>Runs locally in your browser</li>
33+
<li>No dataset upload</li>
34+
<li>Actionable quality checks</li>
4935
</ul>
36+
<a class="tool-action" href="/tools/csv-profiler/">Open CSV Data Profiler →</a>
37+
</article>
38+
</div>
39+
</section>
40+
41+
<section class="tools-section" aria-labelledby="planned-tools-heading">
42+
<div class="tools-section-heading">
43+
<div>
44+
<p class="tools-kicker">Product roadmap</p>
45+
<h2 id="planned-tools-heading">Tools being developed</h2>
46+
</div>
47+
<p>Shown transparently so visitors know what is not yet active.</p>
48+
</div>
5049

51-
<h3>🏆 Leaderboard</h3>
52-
<ul id="leaderboard">
53-
<li>Loading leaderboard...</li>
54-
</ul>
50+
<div class="tools-grid tools-grid--three">
51+
<article class="tool-card">
52+
<div class="tool-card-topline"><span class="tool-icon">📈</span><span class="tool-status tool-status--planned">Planned</span></div>
53+
<h3>Descriptive Statistics Calculator</h3>
54+
<p>Calculate mean, median, spread, percentiles, and interpretable summaries from numerical data.</p>
55+
</article>
56+
57+
<article class="tool-card">
58+
<div class="tool-card-topline"><span class="tool-icon">🎯</span><span class="tool-status tool-status--planned">Planned</span></div>
59+
<h3>Interactive Quizzes</h3>
60+
<p>Practice Python, statistics, and machine-learning concepts with explanations and topic-based scoring.</p>
61+
</article>
62+
63+
<article class="tool-card">
64+
<div class="tool-card-topline"><span class="tool-icon">🧠</span><span class="tool-status tool-status--planned">Planned</span></div>
65+
<h3>ML Evaluation Calculator</h3>
66+
<p>Understand accuracy, precision, recall, specificity, F1 score, and confusion matrices.</p>
67+
</article>
68+
</div>
69+
</section>
70+
71+
<section class="tools-section" aria-labelledby="external-tools-heading">
72+
<div class="tools-section-heading">
73+
<div>
74+
<p class="tools-kicker">External resources</p>
75+
<h2 id="external-tools-heading">Trusted platforms for building and learning</h2>
76+
</div>
77+
<p>These links open services maintained by other organizations.</p>
5578
</div>
5679

57-
<!-- 🔹 Must-Have Free Tools for Data Scientists -->
58-
<h2>🔗 Free Resources & Tools</h2>
59-
<ul class="tool-links">
60-
<li>📊 <a href="https://colab.research.google.com/" target="_blank">Google Colab</a> - Free cloud-based Jupyter Notebook.</li>
61-
<li>📂 <a href="https://www.kaggle.com/datasets" target="_blank">Kaggle Datasets</a> - Access free datasets for machine learning.</li>
62-
<li>🖥️ <a href="https://www.tensorflow.org/" target="_blank">TensorFlow</a> - Open-source deep learning framework.</li>
63-
<li>📈 <a href="https://plotly.com/" target="_blank">Plotly</a> - Free interactive visualization library.</li>
64-
<li>🛠️ <a href="https://github.com/" target="_blank">GitHub</a> - Host, collaborate, and contribute to open-source projects.</li>
65-
<li>🖼️ <a href="https://www.openai.com/research" target="_blank">OpenAI Tools</a> - Free AI models, APIs, and research papers.</li>
66-
<li>📡 <a href="https://huggingface.co/models" target="_blank">Hugging Face Models</a> - Free NLP & ML model hub.</li>
67-
</ul>
80+
<div class="external-tools-grid">
81+
<a href="https://colab.research.google.com/" target="_blank" rel="noopener noreferrer"><strong>Google Colab</strong><span>Cloud-based notebooks for Python and data science.</span></a>
82+
<a href="https://www.kaggle.com/datasets" target="_blank" rel="noopener noreferrer"><strong>Kaggle Datasets</strong><span>Public datasets and applied machine-learning resources.</span></a>
83+
<a href="https://github.com/" target="_blank" rel="noopener noreferrer"><strong>GitHub</strong><span>Version control, project publishing, and collaboration.</span></a>
84+
<a href="https://huggingface.co/models" target="_blank" rel="noopener noreferrer"><strong>Hugging Face</strong><span>Open models, datasets, and machine-learning applications.</span></a>
85+
<a href="https://www.tensorflow.org/" target="_blank" rel="noopener noreferrer"><strong>TensorFlow</strong><span>Open-source machine-learning framework and tutorials.</span></a>
86+
<a href="https://plotly.com/" target="_blank" rel="noopener noreferrer"><strong>Plotly</strong><span>Interactive data visualization tools and libraries.</span></a>
87+
</div>
88+
</section>
6889

90+
<section class="tools-principle">
91+
<div>
92+
<p class="tools-kicker">Our principle</p>
93+
<h2>A tool should teach—not only calculate.</h2>
94+
</div>
95+
<p>DataForSolution tools will explain what a result means, identify limitations, and connect users to the lesson or project that helps them understand the method.</p>
96+
</section>
6997
</section>
7098

71-
<script>
72-
// Load quizzes
73-
document.querySelectorAll('.quiz-btn').forEach(button => {
74-
button.addEventListener('click', async () => {
75-
const quizId = button.dataset.quizId;
76-
const quizContainer = document.getElementById('quiz-container');
77-
78-
quizContainer.innerHTML = "Loading quiz...";
79-
try {
80-
const response = await fetch(`/quiz?quiz_id=${quizId}`);
81-
const data = await response.json();
82-
quizContainer.innerHTML = `<h3>${data.title}</h3>`;
83-
data.questions.forEach((q, index) => {
84-
const questionDiv = document.createElement("div");
85-
questionDiv.innerHTML = `<p><strong>${index + 1}. ${q.question}</strong></p>
86-
${q.options.map(opt => `<button>${opt}</button>`).join("")}`;
87-
quizContainer.appendChild(questionDiv);
88-
});
89-
} catch (err) {
90-
quizContainer.innerHTML = "Error fetching quiz data.";
91-
}
92-
});
93-
});
94-
95-
// Load leaderboard
96-
async function loadLeaderboard() {
97-
const leaderboard = document.getElementById("leaderboard");
98-
leaderboard.innerHTML = "Loading...";
99-
try {
100-
const response = await fetch("/leaderboard");
101-
const data = await response.json();
102-
leaderboard.innerHTML = data.leaderboard
103-
.map((entry, idx) => `<li>${idx + 1}. ${entry.name} - ${entry.score}</li>`)
104-
.join("");
105-
} catch (err) {
106-
leaderboard.innerHTML = "Error loading leaderboard.";
107-
}
108-
}
109-
loadLeaderboard();
110-
</script>
111-
11299
<style>
113-
#free-tools {
114-
padding: 50px 20px;
115-
background-color: #f9f9f9;
116-
color: #333;
117-
text-align: center;
118-
}
119-
120-
.tool {
121-
background: white;
122-
border-radius: 10px;
123-
padding: 20px;
124-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
125-
margin-bottom: 20px;
126-
text-align: left;
127-
max-width: 600px;
128-
margin: auto;
129-
}
130-
131-
.tool h2 {
132-
font-size: 1.5em;
133-
color: #4CAF50;
134-
margin-bottom: 10px;
135-
}
136-
137-
.tool p {
138-
font-size: 1em;
139-
margin-bottom: 10px;
140-
color: #555;
141-
}
142-
143-
.tool-links {
144-
list-style: none;
145-
padding: 0;
146-
text-align: left;
147-
max-width: 600px;
148-
margin: auto;
149-
}
150-
151-
.tool-links li {
152-
font-size: 1.1em;
153-
margin: 10px 0;
154-
color: #333;
155-
background: #eaf7ea;
156-
padding: 10px;
157-
border-radius: 5px;
158-
}
159-
160-
.tool-links a {
161-
color: #007BFF;
162-
text-decoration: none;
163-
font-weight: bold;
164-
}
165-
166-
.tool-links a:hover {
167-
text-decoration: underline;
168-
}
100+
.tools-hub{max-width:1180px;margin:0 auto;padding:52px 20px 80px;color:#172033}.tools-hero{max-width:850px;margin-bottom:58px}.tools-eyebrow,.tools-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:850;color:#1662c6;margin:0 0 10px}.tools-hero h1{font-size:clamp(2.35rem,5.5vw,4.6rem);line-height:1.04;margin:0 0 20px}.tools-hero>p:last-child{font-size:1.15rem;line-height:1.75;color:#536178}.tools-section{margin-top:52px}.tools-section-heading{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:20px}.tools-section-heading h2{font-size:clamp(1.65rem,3vw,2.35rem);margin:0}.tools-section-heading>p{max-width:430px;margin:0;color:#66758b;line-height:1.6}.tools-grid{display:grid;grid-template-columns:minmax(0,760px);gap:18px}.tools-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-card{background:#fff;border:1px solid #dfe6ef;border-radius:17px;padding:24px;box-shadow:0 12px 30px rgba(31,48,76,.06)}.tool-card--featured{border-color:#a8c9f4;background:linear-gradient(145deg,#fff,#f4f8ff)}.tool-card-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.tool-icon{font-size:1.8rem}.tool-status{font-size:.75rem;font-weight:850;padding:6px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}.tool-status--available{background:#e7f7ef;color:#16613e}.tool-status--planned{background:#fff3d8;color:#805b05}.tool-card h3{font-size:1.35rem;margin:0 0 10px}.tool-card p{color:#58677d;line-height:1.65}.tool-feature-list{display:grid;gap:7px;padding-left:20px;color:#3f4f65}.tool-action{display:inline-block;margin-top:10px;font-weight:850;color:#145dcc;text-decoration:none}.external-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.external-tools-grid a{display:flex;flex-direction:column;gap:7px;padding:19px;border:1px solid #dfe6ef;border-radius:13px;background:#fff;text-decoration:none;color:#172033;transition:transform .18s ease,box-shadow .18s ease}.external-tools-grid a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,48,76,.1)}.external-tools-grid span{color:#66758b;line-height:1.5;font-size:.94rem}.tools-principle{display:grid;grid-template-columns:.8fr 1.2fr;gap:35px;background:#102b52;color:#fff;border-radius:20px;padding:34px;margin-top:58px}.tools-principle .tools-kicker{color:#8ec2ff}.tools-principle h2{margin:0;font-size:2rem}.tools-principle>p{margin:0;color:#d9e6f8;line-height:1.75}@media(max-width:850px){.tools-grid--three,.external-tools-grid{grid-template-columns:1fr 1fr}.tools-section-heading{display:block}.tools-section-heading>p{margin-top:9px}.tools-principle{grid-template-columns:1fr}}@media(max-width:580px){.tools-grid--three,.external-tools-grid{grid-template-columns:1fr}.tools-hub{padding-top:32px}.tools-principle{padding:24px}.tools-section{margin-top:42px}}
169101
</style>

0 commit comments

Comments
 (0)