kopia lustrzana https://github.com/msurguy/SquiggleCam
65 wiersze
2.6 KiB
HTML
65 wiersze
2.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SquiggleCam - capture a selfie, turn it into art</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
|
<link rel="stylesheet" href="app.css">
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="800" height="600" style="display: none;"></canvas>
|
|
<div class="actions">
|
|
<div class="settings-container">
|
|
<div id="settings">
|
|
<div class="sliders">
|
|
<div class="col-50">
|
|
<label for="lineCount">Line Count (1...200):</label> <span id="lineCountValue">90</span>
|
|
<input id="lineCount" name="lineCount" type="range" min="1" max="200" value="90" step="1">
|
|
</div>
|
|
<div class="col-50">
|
|
<label for="amplitude">Amplitude (0.1...5): </label> <span id="amplitudeValue">1.2</span>
|
|
<input name="amplitude" id="amplitude" type="range" min="0.1" max="5" value="1.2" step="0.05">
|
|
</div>
|
|
</div>
|
|
<div class="sliders">
|
|
<div class="col-50">
|
|
<label for="lineSpacing">Pixel Spacing (0.5...5):</label> <span id="lineSpacingValue">1</span>
|
|
<input id="lineSpacing" name="lineSpacing" type="range" min="0.5" max="5" value="1" step="0.5">
|
|
</div>
|
|
<div class="col-50">
|
|
<label for="frequency">Frequency (5...256): </label> <span id="frequencyValue">135</span>
|
|
<input name="frequency" id="frequency" type="range" min="5" max="256" value="135" step="1">
|
|
</div>
|
|
</div>
|
|
<div class="sliders">
|
|
<div class="col-50">
|
|
<label for="brightness">Brightness (-100...100):</label> <span id="brightnessValue">0</span>
|
|
<input id="brightness" name="brightness" type="range" min="-100" max="100" value="0" step="1">
|
|
</div>
|
|
<div class="col-50">
|
|
<label for="contrast">Contrast (-100...100): </label> <span id="contrastValue">0</span>
|
|
<input id="contrast" name="contrast" type="range" min="-100" max="100" value="0" step="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-container">
|
|
<div id="status">
|
|
<video autoplay width="800" height="600"></video>
|
|
|
|
<a href="#" id="captureButton" class="btn btn-lg btn-success">Capture</a>
|
|
|
|
<a href="#" id="drawButton" class="btn btn-lg btn-primary" style="display: none;">Download</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="svg-placeholder"></div>
|
|
<script src="app.js"></script>
|
|
|
|
<script src="//localhost:35729/livereload.js"></script>
|
|
</body>
|
|
</html> |