starry-rating
Version:
JavaScript star rating system
112 lines (108 loc) • 4.91 kB
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Starry configurator 🌟🌃💖</title>
<meta name="author" content="Andre Sieverding" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/normalize.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link rel="stylesheet" href="./css/Pixels.css" type="text/css" />
<link rel="stylesheet" href="./css/starry.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/ocean.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="./assets/icons/hover_large.svg" type="image/svg+xml" />
</head>
<body>
<div id="particles-js" class="head">
<div class="menu">
<ul>
<li>
<a href="./index.html" class="smooth"><i class="px px-telescope"></i> Start</a>
</li>
<li>
<a href="https://github.com/Teddy95/Starry/releases/latest" class="smooth"><i class="px px-cloud-download"></i> Download</a>
</li>
<li>
<a href="https://github.com/Teddy95/Starry" class="smooth"><i class="fa fa-github"></i> GitHub</a>
</li>
</ul>
</div>
<div class="space">
<h1>
<p>Playground</p>
</h1>
</div>
<div class="star-rating">
<div>
<div id="StarryPlayground"></div>
</div>
</div>
</div>
<div id="playground" class="content">
<h1>
<p>Coming soon...</p>
<small>The configuration playground is currently in development.</small>
</h1>
<!-- <div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="stars">Stars</label>
<input id="stars" type="number" class="form-control" value="10" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="startVal">Start value</label>
<input id="startVal" type="number" class="form-control" value="0" />
</div>
</div>
</div>
<br />
<button id="destroy" class="btn btn-default">Destroy Starry</button>
<button id="rebuild" class="btn btn-default">Rebuild Starry</button>
<button id="getRating" class="btn btn-default">Get active rating</button>
<button id="enableMultiple" class="btn btn-default">Enable multiple rating</button>
<br />
<br />
<button id="disableMultiple" class="btn btn-default">Disable multiple rating</button>
<button id="enableReadonly" class="btn btn-default">Enable readonly</button>
<button id="disableReadonly" class="btn btn-default">Disable readonly</button>
<button id="enableTooltips" class="btn btn-default">Enable tooltips</button>
<br />
<br />
<button id="disableTooltips" class="btn btn-default">Disable tooltips</button>
<button id="addSuccess" class="btn btn-default">Add success function</button>
<button id="removeSuccess" class="btn btn-default">Remove success function</button>
<button id="switchIcon" class="btn btn-warning"><i class="fa fa-picture-o"></i> Switch icons</button>
<br />
<br />
<button id="getConfig" class="btn btn-default">Get config</button>
</div>
<br />
<div>
<textarea id="code" cols="90" rows="30"></textarea>
</div> -->
</div>
<footer>
<div class="footer">
<div>
<i class="px px-code"></i> with <i class="px px-heart-full" style="color: #B61F15;"></i> in Damme, Germany.
</div>
</div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" language="javascript"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" language="javascript"></script>
<script src="./js/starry.min.js" type="text/javascript" language="javascript"></script>
<script src="./js/playground.js" type="text/javascript" language="javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js" type="text/javascript" language="javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
particlesJS.load('particles-js', './particles.json');
hljs.initHighlightingOnLoad();
</script>
</body>
</html>