Css links

Add templates
2024-09-08 20:00:37 +02:00 · 2024-09-08 20:00:29 +02:00 · 2024-09-08 20:00:17 +02:00
9 changed files with 402 additions and 12 deletions
--- a/src/applets/webui/routes.py
+++ b/src/applets/webui/routes.py
@@ -47,3 +47,40 @@ def webui_welcome():
    """
    return render_template('welcome.html')

+
+@bp.route('/webui/users')
+def webui_users():
+    """
+    Users screen for the webui.
+
+    It's job right now is to:
+
+    - Set up an initial user
+
+    More functions will follow at a later stage
+    """
+    return render_template('users.html')
+
+
+@bp.route('/webui/disks')
+def webui_disks():
+    """
+    Disks screen for the webui.
+    """
+    return render_template('disks.html')
+
+
+@bp.route('/webui/software')
+def webui_software():
+    """
+    Software screen for the webui.
+    """
+    return render_template('software.html')
+
+
+@bp.route('/webui/summary')
+def webui_summary():
+    """
+    Summary screen for the webui.
+    """
+    return render_template('summary.html')
--- a/src/static/bulma.css
+++ b/src/static/bulma.css
@@ -0,0 +1 @@
+/usr/share/bulma/css/bulma.css
--- a/src/static/material.css
+++ b/src/static/material.css
@@ -1 +0,0 @@
-/usr/share/javascript/libjs-material-design-lite/css/material.css
--- a/src/static/welcome.css
+++ b/src/static/welcome.css
@@ -1 +1,20 @@
-test:
+@mixin glassmorphism() {
+    background: rgba(255,255,255,0.05);
+    backdrop-filter: blur(10px);
+}
+
+.bg {
+  position: absolute;
+  z-index:-1;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  
+background-image: radial-gradient(circle at 30% 86%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 55% 100%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 40% 75%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 7% 99%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 69% 76%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 2% 35%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 14% 48%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 28% 87%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 65% 14%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 51% 36%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 6% 93%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),linear-gradient(135deg, rgb(23, 233, 173),rgb(29, 24, 208));
+}
+
+body {
+  display: flex;
+}
+
--- a/src/templates/disks.html
+++ b/src/templates/disks.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/static/bulma.css" rel="stylesheet">
+  <link href="/static/welcome.css" rel="stylesheet">
+</head>
+<body>
+
+	<div class="bg"></div>
+
+
+<div style="margin-top: 50px;" class="container">
+  <div class="notification is-dark">
+
+<h1 class="is-size-3"> Disks and Partitions </h1>
+
+<br>
+
+
+<div class="tabs">
+  <ul>
+    <li><a href="./welcome">Welcome</a></li>
+    <li><a href="./users">Users</a></li>
+    <li class="is-active"><a href="./disks">Disks</a></li>
+    <li><a href="./software">Software</a></li>
+    <li><a href="./summary">Summary</a></li>
+  </ul>
+</div>
+
+<br>
+
+<p> How would you like to install Debian?</p>
+
+<br>
+
+<div class="radios">
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Erase entire disk
+  </label>
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Install alongside another operating system
+  </label>
+  <label class="radio">
+    <input type="radio" name="rsvp" disabled />
+    Define your own disk and partitioning setup
+  </label>
+</div>
+
+<br>
+
+<p> Proposed layout: </p>
+<br>
+<div style="background-color: gray; padding: 15px; border-radius: 15px;">
+
+
+<p> <span style="width: 100%;" class="tag is-black">Physical disk: TOSHIBA HDWD120 (20 GB)</span> </p>
+<div class="columns">
+  <div class="column is-narrow is-primary">
+    <div class="box" style="width: 220px;">
+      <p class="subtitle">/dev/sda1</p>
+      <p class="title is-5"><span class="tag is-black">/boot/efi</span> <span class="tag is-dark">200 MB</span> <span class="tag is-link">vfat</span></p>
+    </div>
+  </div>
+  <div class="column">
+    <div class="box">
+      <p class="subtitle">/dev/sda2</p>
+      <p class="title is-5"><span class="tag is-black">/</span> <span class="tag is-dark">18 GB</span> <span class="tag is-link">btrfs</span></p>
+    </div>
+  </div>
+</div>
+</div>
+
+
+<div class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <!-- Any other Bulma elements you want -->
+    <p>Welcome to partition disk editor.</p>
+    <p>This is quite cool.</p>
+    <div class="columns">
+      <div class="column"><button class="button is-light">Back</button></div>
+      <a href="./software"><div class="column"><button class="button is-link">Next</button></div></a>
+    </div>
+  </div>
+</div>
+
+
+<br><br><br>
+
+<div class="columns">
+  <div class="column"><button class="button is-light">Back</button></div>
+  <a href="./software"><div class="column"><button class="button is-link">Next</button></div></a>
+</div>
+
+</div>
+</div>
+
+
+</body>
+</html>
--- a/src/templates/software.html
+++ b/src/templates/software.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/static/bulma.css" rel="stylesheet">
+  <link href="/static/welcome.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="bg"></div>
+
+
+<div style="margin-top: 50px; color: white;" class="container">
+  <div class="notification is-dark">
+
+<h1 class="is-size-3"> Select Software </h1>
+
+<br>
+
+
+<div class="tabs">
+  <ul>
+    <li><a href="./welcome">Welcome</a></li>
+    <li><a href="./users">Users</a></li>
+    <li><a href="./disks">Disks</a></li>
+    <li class="is-active"><a href="./software">Software</a></li>
+    <li><a href="./summary">Summary</a></li>
+  </ul>
+</div>
+
+<br>
+
+<p> Would you like fries with that?</p>
+
+<br>
+
+<ul>
+<li>Desktop environment</li>
+<li>Server software</li>
+</ul>
+<br><br>
+
+<div class="columns">
+  <div class="column"><button class="button is-light">Back</button></div>
+  <a href="./summary"><div class="column"><button class="button is-link">Next</button></div></a>
+</div>
+
+</div>
+</div>
+
+</body>
+</html>
--- a/src/templates/summary.html
+++ b/src/templates/summary.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/static/bulma.css" rel="stylesheet">
+  <link href="/static/welcome.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="bg"></div>
+
+
+<div style="margin-top: 50px; color: white;" class="container">
+  <div class="notification is-dark">
+
+<h1 class="is-size-3"> Summary </h1>
+
+<br>
+
+
+<div class="tabs">
+  <ul>
+    <li><a href="./welcome">Welcome</a></li>
+    <li><a href="./users">Users</a></li>
+    <li><a href="./disks">Disks</a></li>
+    <li><a href="./software">Software</a></li>
+    <li class="is-active"><a href="./summary">Summary</a></li>
+  </ul>
+</div>
+
+<br>
+
+<p> Ready to install.</p>
+
+<br>
+
+<br><br>
+
+<div class="columns">
+  <div class="column"><button class="button is-light">Back</button></div>
+  <a href="./install"><div class="column"><button class="button is-link">Start Install</button></div></a>
+</div>
+
+</div>
+</div>
+
+</body>
+</html>
--- a/src/templates/users.html
+++ b/src/templates/users.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/static/bulma.css" rel="stylesheet">
+  <link href="/static/welcome.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="bg"></div>
+
+
+<div style="margin-top: 50px; color: white;" class="container">
+  <div class="notification is-dark">
+
+<h1 class="is-size-3"> Configure User </h1>
+
+<br>
+
+
+<div class="tabs">
+  <ul>
+    <li><a href="./welcome">Welcome</a></li>
+    <li class="is-active"><a href="./users">Users</a></li>
+    <li><a href="./disks">Disks</a></li>
+    <li><a href="./software">Software</a></li>
+    <li><a href="./summary">Summary</a></li>
+  </ul>
+</div>
+
+<br>
+
+<p> Let's set up an initial user.</p>
+
+<br>
+
+<div class="field">
+  <label class="label">Name</label>
+  <div class="control">
+    <input class="input" type="text" placeholder="Text input">
+  </div>
+</div>
+
+<div class="field">
+  <label class="label">Username</label>
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-success" type="text" placeholder="Text input" value="user">
+    <span class="icon is-small is-left">
+      <i class="fas fa-user"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fas fa-check"></i>
+    </span>
+  </div>
+  <p class="help is-success">This username is available</p>
+</div>
+
+<br><br>
+
+<div class="columns">
+	<div class="column"><button class="button is-light">Back</button> <button class="button is-light">Connect Active Directory</button> <button class="button is-light">Connect LDAP</button></div>
+  <a href="./disks"><div class="column"><button class="button is-link">Next</button></div></a>
+</div>
+
+</div>
+</div>
+
+</body>
+</html>
--- a/src/templates/welcome.html
+++ b/src/templates/welcome.html
@@ -3,20 +3,78 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="/static/material.css" rel="stylesheet">
+  <link href="/static/bulma.css" rel="stylesheet">
  <link href="/static/welcome.css" rel="stylesheet">
 </head>
 <body>
-	<div class="bg">
-        </div>
-  <h1 class="text-3xl font-bold underline">
-    Hello world!
-  </h1>

-    <div class="lg:content-auto">
-	    Welcome to system installer daemon
-	    BLK is BLK 
-    </div>
+	<div class="bg"></div>
+
+
+<div style="min-height: 80%; left: 22%; right: 22%; top: 50px; bottom: 50px;  position: absolute;" class="container">
+  <div class="notification is-dark">
+
+<h1 class="is-size-3"> Welcome to System Installer </h1>
+
+<br>
+
+
+<div class="tabs">
+  <ul>
+    <li class="is-active"><a href="./welcome">Welcome</a></li>
+    <li><a href="./users">Users</a></li>
+    <li><a href="./disks">Disks</a></li>
+    <li><a href="./software">Software</a></li>
+    <li><a href="./summary">Summary</a></li>
+  </ul>
+</div>
+
+<br>
+
+<p> Welcome! This setup program will install Debian on to your system.</p>
+
+<br>
+
+<div class="control is-link">
+  <div class="select">
+    <select>
+      <option>English</option>
+      <option>Afrikaans</option>
+    </select>
+  </div>
+</div>
+
+<br>
+
+<div class="control is-link">
+  <div class="select">
+    <select>
+      <option>en-us</option>
+      <option>en-uk</option>
+    </select>
+  </div>
+</div>
+
+<br>
+
+<div class="control is-link">
+  <div class="select">
+    <select>
+      <option>Africa/Johannesburg</option>
+      <option>UTC</option>
+    </select>
+  </div>
+</div>
+
+<br><br><br><br><br><br>
+
+<div class="columns">
+  <div class="column"><button class="button is-light">Quit</button></div>
+  <a href="./users"><div class="column"><button class="button is-link">Next</button></div></a>
+</div>
+
+</div>
+</div>

 </body>
 </html>
Author	SHA1	Message	Date
Jonathan Carter	c86661f375	Css links	2024-09-08 20:00:37 +02:00
Jonathan Carter	e852109f65	Css links	2024-09-08 20:00:29 +02:00
Jonathan Carter	b448cfce51	Add templates	2024-09-08 20:00:17 +02:00
				`@@ -1 +0,0 @@`
				`/usr/share/javascript/libjs-material-design-lite/css/material.css`