docs/choosealicense.com
docs/choosealicense.com
1
0
Fork 0
mirror of https://github.com/github/choosealicense.com synced 2024-06-09 20:49:51 +02:00
Code Issues Releases Wiki Activity

Almost ready

Browse Source
This commit is contained in:
TGRRRR 2024-05-01 22:11:41 +03:00
parent b603029af5
commit 7bd428910b
1 changed files with 136 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
advisor.html
View File

@ -8,15 +8,15 @@ permalink: /advisor/
<head>
<meta charset="UTF-8">
<title>License Advisor</title>
<style>
#starterScreen,
#wizard {
background-color: #303030;
border-radius: 20px;
padding-top: 0px !important;
padding: 20px;
margin: auto;
min-height: 270px;
min-height: 320px;
text-align: center;
display: none;
flex-direction: column;
@ -32,7 +32,7 @@ permalink: /advisor/
#indicators {
display: flex;
justify-content: center;
padding: 10px;
padding: 20px;
}
#indicators .indicator {
@ -41,22 +41,23 @@ permalink: /advisor/
border-radius: 50%;
background-color: #1b1b1b;
cursor: pointer;
margin: 0 5px;
margin: 0 10px;
}
#indicators .active {
background-color: #007bff;
}
#questionBox {
margin: 20px 0;
}
.buttons {
padding-bottom: 5px;
}
#buttons button {
#starterScreen.active,
#wizard.active {
display: flex; /* Ensure it keeps flex settings */
}
#buttons button, #starterScreen button {
padding: 10px 20px;
border: none;
border-radius: 5px;
@ -68,16 +69,13 @@ permalink: /advisor/
transition: background-color 0.3s, box-shadow 0.3s;
}
#buttons button:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#buttons button.active {
background-color: #3cc636 !important; /* Green */
}
#buttons #backBtn,
#buttons #nextBtn {
#buttons #nextBtn,
#startBtn {
background-color: #0098d7;
/* Blue */
}
@ -92,20 +90,55 @@ permalink: /advisor/
background: #303030;
padding: 10px;
border-radius: 20px;
margin-top: 20px;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.filter-column {
flex: 1;
display: flex;
flex-direction: column;
padding: 10px;
}
.filter-item {
margin-top: 5px; /* Space between items */
display: flex;
justify-content: space-between; /* Aligns label and select to the opposite sides */
}
.filter-item label {
margin-right: 10px; /* Space between label and select */
white-space: nowrap; /* Keeps label text on one line */
color: white;
}
select {
width: 50%; /* Adjust width as necessary */
padding: 3px;
border-radius: 8px;
border: 1px solid #4a4a4a;
background-color: #202120;
color: rgb(185, 185, 185) !important;
cursor: pointer;
}
select:hover {
border-color: #666;
}
select:focus {
border-color: #0098d7; /* Highlight border on focus, similar to your button focus */
box-shadow: 0 0 5px rgba(0, 152, 215, 0.5); /* Soft glow for focus */
}
</style>
</head>
<body>
<p>This wizard is designed to help beginner developers identify the most suitable open source license for their project.</p>
<div id="starterScreen" class="active">
<h2>Welcome to the License Wizard!</h2>
<p>This wizard will guide you through a series of questions. Click start when you're ready!</p>
<h2>License selecting Wizard</h2>
<p><b>If you are working in a community, it is better to not choose.</b> Just use that project's license. To find out what is a community and where to find their license, <a href='/community'>Read more about community</a> <br><br> Follow the wizard to narrow down your options based on your requirements or wishes. You can skip questions if you are not sure. To see a table of all licenses, visit <a href='/appendix'>appendix</a> page. Read more <a href=https://choosealicense.com/about>about the purpose</a> of this site. Also check out the <a href=https://github.com/TGRRRR/choosealicense.com>source code of this site</a>.<br><br>All open source licenses grant to the public <span class='license-permissions'><span class='license-sprite'></span></span> <b>permissions</b> to do things with licensed works which copyright or other IP laws might disallow.<br>Most open source licenses' grants of permissions are subject to compliance with <span class='license-conditions'><span class='license-sprite'></span></span> <b>conditions</b>.<br>Most open source licenses have <span class='license-limitations'><span class='license-sprite'></span></span> <b>limitations</b> that disclaim warranty and liability, or exclude patents or trademarks from licenses' grants.</p>
<button id="startBtn">Start</button>
</div>
@ -116,105 +149,89 @@ permalink: /advisor/
<p id="questionDetail"></p>
</div>
<div id="buttons">
<button id="backBtn">Back</button>
<button id="backBtn">↤ Back</button>
<button id="yesBtn">Yes</button>
<button id="noBtn">No</button>
<button id="nextBtn">Next</button>
<button id="nextBtn">Next ↦</button>
</div>
</div>
<h2>Filters</h2>
<p>If you understand what all these filters mean, then use these filters and you can skip the wizard</p>
<h1>Filters</h1>
<p>If you understand what all these filters mean, then use these filters and skip the wizard.</p>
<div class="filters" id="quiz">
<div class="filter-column">
<!-- Conditions -->
<ul class="license-conditions">
<h3>Conditions</h3>
<li>
<span class="license-sprite"></span>
<label for="same-license-filter">Same license:</label>
<select id="same-license-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include same license</option>
<option value="exclude">Exclude same license</option>
</select>
</li>
<li>
<span class="license-sprite"></span>
<label for="network-use-disclose-filter">Network use:</label>
<select id="network-use-disclose-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include Network use</option>
<option value="exclude">Exclude Network use</option>
</select>
</li>
<li>
<span class="license-sprite"></span>
<label for="document-changes-filter">State Changes:</label>
<select id="document-changes-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include State Changes</option>
<option value="exclude">Exclude State Changes</option>
</select>
</li>
<li>
<span class="license-sprite"></span>
<label for="include-copyright-filter">Copyright notice:</label>
<select id="include-copyright-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include Copyright notice</option>
<option value="exclude">Exclude Copyright notice</option>
</select>
</li>
</ul>
<h3>Conditions</h3>
<div class="filter-item">
<label for="same-license-filter"><span class='license-conditions'><span class='license-sprite'></span></span> Same license:</label>
<select id="same-license-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include same license</option>
<option value="exclude">Exclude same license</option>
</select>
</div>
<div class="filter-item">
<label for="network-use-disclose-filter"><span class='license-conditions'><span class='license-sprite'></span></span> Network use:</label>
<select id="network-use-disclose-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include network use</option>
<option value="exclude">Exclude network use</option>
</select>
</div>
<div class="filter-item">
<label for="document-changes-filter"><span class='license-conditions'><span class='license-sprite'></span></span> State Changes:</label>
<select id="document-changes-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include state changes</option>
<option value="exclude">Exclude state changes</option>
</select>
</div>
<div class="filter-item">
<label for="include-copyright-filter"><span class='license-conditions'><span class='license-sprite'></span></span> Copyright notice:</label>
<select id="include-copyright-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include copyright notice</option>
<option value="exclude">Exclude copyright notice</option>
</select>
</div>
</div>
<div class="filter-column">
<h3>Permission and Limitations</h3>
<!-- Permissions and Limitations -->
<ul class="license-permissions">
<li>
<span class="license-sprite"></span>
<label for="patent-use-filter">Patent Use:</label>
<select id="patent-use-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include Patent Use</option>
<option value="exclude">Exclude Patent Use</option>
</select>
</li>
</ul>
<ul class="license-limitations">
<li>
<span class="license-sprite"></span>
<label for="liability-filter">Liability:</label>
<select id="liability-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include Liability</option>
<option value="exclude">Exclude Liability</option>
</select>
</li>
<li>
<span class="license-sprite"></span>
<label for="warranty-filter">Warranty:</label>
<select id="warranty-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include Warranty</option>
<option value="exclude">Exclude Warranty</option>
</select>
</li>
<li>
<span class="license-sprite"></span>
<label for="trademark-use-filter">Trademark:</label>
<select id="trademark-use-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include Trademark</option>
<option value="exclude">Exclude Trademark</option>
</select>
</li>
</ul>
<h3>Permissions and Limitations</h3>
<div class="filter-item">
<label for="patent-use-filter"><span class='license-permissions'><span class='license-sprite'></span></span> Patent Use:</label>
<select id="patent-use-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include patent use</option>
<option value="exclude">Exclude patent use</option>
</select>
</div>
<div class="filter-item">
<label for="liability-filter"><span class='license-limitations'><span class='license-sprite'></span></span> Liability:</label>
<select id="liability-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include liability</option>
<option value="exclude">Exclude liability</option>
</select>
</div>
<div class="filter-item">
<label for="warranty-filter"><span class='license-limitations'><span class='license-sprite'></span></span> Warranty:</label>
<select id="warranty-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include warranty</option>
<option value="exclude">Exclude warranty</option>
</select>
</div>
<div class="filter-item">
<label for="trademark-use-filter"><span class='license-limitations'><span class='license-sprite'></span></span> Trademark:</label>
<select id="trademark-use-filter" onchange="updateFilters()">
<option value="all">Any</option>
<option value="include">Include trademark use</option>
<option value="exclude">Exclude trademark use</option>
</select>
</div>
</div>
</div>
<h2>Below is a list of licenses that match your needs:</h2>
<h1>Below is a list of licenses that match your filters:</h1>
<div class="license">{% include license-overview.html license-id="0bsd" %}</div>
<div class="license">{% include license-overview.html license-id="afl-3.0" %}</div>
@ -255,12 +272,14 @@ permalink: /advisor/
<div class="license">{% include license-overview.html license-id="upl-1.0" %}</div>
<div class="license">{% include license-overview.html license-id="vim" %}</div>
<p><b>If there are no licenses below, please edit your answers or filters, for example, remove some of the conditions</b></p>
<script>
let currentScreen = "start";
const questions = [
{
title: "1/8 Do you prefer permissive or copyleft licenses?",
detail: "It will affect how restrictive the licensing is regarding how others can use, modify, and redistribute your code. Copyleft license only allows users to use your code with copyleft license as well, which means all modifications will also remain free and open source and no commercial or closed source fork is allowed. Permissive license has no restrictions, so anyone can take your code and use it in their project, be it commercial or open source. If you're using code that's under a copyleft license, your project also has to be licensed under same license or similar terms to comply with those licenses conditions.",
title: " 1/8 Do you prefer permissive or copyleft licenses?",
detail: "It will affect how restrictive the licensing is regarding how others can redistribute your code. Copyleft license only allows users to use your code with copyleft license as well, which means all modifications will also remain free and open source and no commercial or closed source fork is allowed. Permissive license has no restrictions, so anyone can take your code and use it in their project, be it commercial or open source. <br> <b>If you're using code that's under a copyleft license, your project also has to be licensed under same license or similar terms to comply with those licenses conditions.</b>",
filter: "same-license-filter"
},
{
@ -315,6 +334,15 @@ permalink: /advisor/
document.querySelectorAll('#indicators .indicator').forEach((ind, index) => {
ind.classList.toggle('active', index === currentQuestion);
});
// Update button visibility
const nextBtn = document.getElementById("nextBtn");
if (currentQuestion === questions.length - 1) {
nextBtn.style.display = 'none'; // Hide the Next button on the last question
} else {
nextBtn.style.display = 'inline-block'; // Show the Next button if not the last question
}
updateButtonStyles();
linkAnswersToFilters();
}