rushilwiz/robot-gui
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/robot-gui.git synced 2025-04-20 19:00:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

(manually) merged option bar and input

Browse Source
This commit is contained in:
FluffyCube9343 2022-10-15 14:58:33 -04:00
parent d037b15cf0
commit def4a9eea5
2 changed files with 81 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
static/src/main.css
View File

@ -4,6 +4,7 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* common.css import */
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -11,6 +12,25 @@
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
} }
.main-container {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color: black;
gap: 0.33333333vw;
height: 99.5vh;
}
.main-element {
display: inline-block;
height: 99.5vh;
width: 32vw;
text-align: center;
background-color: #181c20;
position: relative;
}
/*style.css import*/
.robotimg { .robotimg {
height: 99.5vh; height: 99.5vh;
width: 32vw; width: 32vw;
@ -194,28 +214,3 @@ a:link,
a:visited { a:visited {
text-decoration: none; text-decoration: none;
} }
* {
padding: 0;
margin: 0;
background-color: #181c20;
color: white;
box-sizing: border-box;
}
.main-container {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color: black;
gap: 0.33333333vw;
height: 99.5vh;
}
.main-element {
display: inline-block;
height: 99.5vh;
width: 32vw;
text-align: center;
background-color: #181c20;
position: relative;
}

100
templates/base.html
View File

@ -12,7 +12,7 @@
<title>Potentia Robotics GUI</title> <title>Potentia Robotics GUI</title>
</head> </head>
<body> <body>
<div class="main-container ifsmall"> <div class="main-container">
<div class="main-element e1"> <div class="main-element e1">
<img src="robot.png" class="robotimg" /> <img src="robot.png" class="robotimg" />
</div> </div>
@ -21,43 +21,68 @@
<div class="dropdown d1"> <div class="dropdown d1">
<img src="img-knee.png" class="img-part" /> <img src="img-knee.png" class="img-part" />
<p class="measure">360</p> <p class="measure">360</p>
<label for="fname">Input</label>
<input
class="inputbox"
type="text"
id="fname"
name="fname"
/>
<button class="button">Enter</button>
<p class="units">Deg</p> <p class="units">Deg</p>
<img src="drop-img.png" class="img-part img-dd" /> <select name="input" id="unit">
</div> <option value="Position">Position</option>
<div class="dddown1"> <option value="Percent">Percent</option>
<a class="delement" href="#">Position</> <option value="Velocity">Velocity</option>
<a class="delement" href="#">Percent</a> <option value="Voltage">Voltage</option>
<a class="delement" href="#">Velocity</a> <option value="Force">Force</option>
<a class="delement" href="#">Force</p> </select>
<a class="delement" href="#">Voltage</a>
</div> </div>
<div class="dropdown d2"> <div class="dropdown d2">
<img src="img-knee.png" class="img-part" /> <img src="img-knee.png" class="img-part" />
<p class="measure">360</p> <p class="measure">360</p>
<label for="fname">Input</label>
<input
class="inputbox"
type="text"
id="fname"
name="fname"
/>
<button class="button">Enter</button>
<p class="units">Deg</p> <p class="units">Deg</p>
<img src="drop-img.png" class="img-part img-dd" /> <select name="input" id="unit">
</div> <option value="Position">Position</option>
<div class="dddown2"> <option value="Percent">Percent</option>
<a class="delement" href="#">Position</> <option value="Velocity">Velocity</option>
<a class="delement" href="#">Percent</a> <option value="Voltage">Voltage</option>
<a class="delement" href="#">Velocity</a> <option value="Force">Force</option>
<a class="delement" href="#">Force</p> </select>
<a class="delement" href="#">Voltage</a>
</div> </div>
<div class="dropdown d3"> <div class="dropdown d3">
<img src="img-knee.png" class="img-part" /> <img src="img-knee.png" class="img-part" />
<p class="measure">360</p> <p class="measure">360</p>
<p class="units">Deg</p> <label for="fname">Input</label>
<img src="drop-img.png" class="img-part img-dd" />
</div>
<div class="dddown3">
<a class="delement" href="#">Position</>
<a class="delement" href="#">Percent</a>
<a class="delement" href="#">Velocity</a>
<a class="delement" href="#">Force</p>
<a class="delement" href="#">Voltage</a>
</div>
<input
class="inputbox"
type="text"
id="fname"
name="fname"
/>
<button class="button">Enter</button>
<p class="units">Deg</p>
<select name="input" id="unit">
<option value="Position">Position</option>
<option value="Percent">Percent</option>
<option value="Velocity">Velocity</option>
<option value="Voltage">Voltage</option>
<option value="Force">Force</option>
</select>
</div>
</div> </div>
<div class="panel2-btns"> <div class="panel2-btns">
@ -83,8 +108,6 @@
</div> </div>
<div class="angle-rot-header"> <div class="angle-rot-header">
<p class="angle-rot">Angle Rotation</p> <p class="angle-rot">Angle Rotation</p>
</div> </div>
<div class="position-grid"> <div class="position-grid">
<div class="pos-num"> <div class="pos-num">
@ -98,66 +121,65 @@
<p class="pos-angle-num">2</p> <p class="pos-angle-num">2</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">3</p> <p class="pos-angle-num">3</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">4</p> <p class="pos-angle-num">4</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">5</p> <p class="pos-angle-num">5</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">6</p> <p class="pos-angle-num">6</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">7</p> <p class="pos-angle-num">7</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">8</p> <p class="pos-angle-num">8</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">9</p> <p class="pos-angle-num">9</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
<div class="pos-num"> <div class="pos-num">
<p class="pos-angle-num">10</p> <p class="pos-angle-num">10</p>
</div> </div>
<div class="pos-angle"> <div class="pos-angle">
<img src="img-knee.png" class="pos-img"/> <img src="img-knee.png" class="pos-img" />
<p class="pos-angle-num">57</p> <p class="pos-angle-num">57</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>