91 lines
3 KiB
HTML
91 lines
3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Synergy UI</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="./demo.css">
|
||
|
|
<link rel="stylesheet" href="../style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="content">
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>
|
||
|
|
<span class="color">Synergy</span> UI
|
||
|
|
</h1>
|
||
|
|
<p>Simple framework with CSS-only UI components</p>
|
||
|
|
<div class="colorselector">
|
||
|
|
<input type="color" value="#865e3c" title="Main color">
|
||
|
|
<input type="color" value="#63452c" title="Text color">
|
||
|
|
<input type="color" value="#f9f7f4" title="Background color">
|
||
|
|
<div class="config" title="Settings">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.875 22h-3.75q-.375 0-.65-.25t-.325-.625l-.3-2.325q-.325-.125-.613-.3t-.562-.375l-2.175.9q-.35.125-.7.025t-.55-.425L2.4 15.4q-.2-.325-.125-.7t.375-.6l1.875-1.425Q4.5 12.5 4.5 12.337v-.674q0-.163.025-.338L2.65 9.9q-.3-.225-.375-.6t.125-.7l1.85-3.225q.175-.35.537-.438t.713.038l2.175.9q.275-.2.575-.375t.6-.3l.3-2.325q.05-.375.325-.625t.65-.25h3.75q.375 0 .65.25t.325.625l.3 2.325q.325.125.613.3t.562.375l2.175-.9q.35-.125.7-.025t.55.425L21.6 8.6q.2.325.125.7t-.375.6l-1.875 1.425q.025.175.025.338v.674q0 .163-.05.338l1.875 1.425q.3.225.375.6t-.125.7l-1.85 3.2q-.2.325-.563.438t-.712-.013l-2.125-.9q-.275.2-.575.375t-.6.3l-.3 2.325q-.05.375-.325.625t-.65.25Zm-1.825-6.5q1.45 0 2.475-1.025T15.55 12q0-1.45-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12q0 1.45 1.012 2.475T12.05 15.5Z"/></svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<aside class="settings">
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="close" viewBox="0 0 24 24"><path fill="currentColor" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z"/></svg>
|
||
|
|
|
||
|
|
<b>Presets</b>
|
||
|
|
|
||
|
|
<div class="presets"></div>
|
||
|
|
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
|
||
|
|
<form class="form">
|
||
|
|
|
||
|
|
<div class="inp">
|
||
|
|
<input type="text" placeholder=" ">
|
||
|
|
<label>Name</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inp">
|
||
|
|
<input type="text" placeholder=" ">
|
||
|
|
<label>Surname</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inp select">
|
||
|
|
<select>
|
||
|
|
<option disabled>Disabled</option>
|
||
|
|
<option>Guest</option>
|
||
|
|
<option>User</option>
|
||
|
|
<option>Administrator</option>
|
||
|
|
</select>
|
||
|
|
<label>Role</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inp">
|
||
|
|
<textarea placeholder=" ">Some very long text...</textarea>
|
||
|
|
<label>Long text</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toggle-text">
|
||
|
|
<label for="toggle1">Check me! I'm a toggle.</label>
|
||
|
|
<div class="toggle">
|
||
|
|
<input id="toggle1" type="checkbox">
|
||
|
|
<div class="indicator"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="btn-row">
|
||
|
|
<button class="btn btn-primary">
|
||
|
|
Send
|
||
|
|
</button>
|
||
|
|
<button type="reset" class="btn">
|
||
|
|
Reset
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script src="./demo.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|