marcuskammer/dev.metalisp.sbt
1
1
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Remove unused files

Browse source
This commit is contained in:
Marcus Kammer 2023-09-15 10:35:20 +02:00
parent 00eed9460a
commit b37397b63c
2 changed files with 0 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/pattern/feature-search-browser.org
View file

@ -1,70 +0,0 @@
#+title: Interaction Pattern: Feature, Search, and Browse
#+author: Marcus Kammer
#+date:[2023-08-15 Tue]
#+email: marcus.kammer@mailbox.org
#+license: MIT
* Introduction
- This design outlines a commonly employed interaction pattern on websites or
apps. This pattern is mainly a trio of elements:
1. Featured content
2. Search box
3. Browsable items/categories
** Key Points
*** What
- The pattern consists of a prominently displayed feature (like an article or
product), a search function, and a list or categories of content for
browsing.
*** When to use
- Suitable for sites/apps with an extensive list of content.
- Engage visitors immediately by presenting captivating content.
- For sites primarily focused on search or transaction functions, the search
box becomes the central feature, with the rest being secondary.
*** Why use this pattern
- Searching & Browsing: They aid users in finding their desired content.
- Engagement through Featured Items: Capture user attention through immediately
accessible content.
** Applications
1. E-commerce sites: For product-specific or category browsing. Featured
products can promote new arrivals or sales.
2. News portals: Users can search for news or navigate through categories.
Highlighted articles can present breaking or vital news.
3. Streaming platforms: Users might search for a show or browse genres.
Featured content can showcase popular or new releases.
** Considerations
- Balance between the three elements is pivotal.
- Design responsiveness is essential for various device compatibility.
- Enhance engagement with personalized content based on user history or
preferences.
* Content centric
#+begin_src lisp
(ql:quickload :cl-sbt)
(defpackage cl-sbt/fsb/content
(:use :cl)
(:import-from
:cl-sbt/form
:ctrl-col))
(in-package :cl-sbt/fsb/content)
#+end_src
#+RESULTS:
| :CL-SBT |
* Commerce centric
* Task centric

132
src/pattern/questionnaire.html
View file

@ -1,132 +0,0 @@
<!DOCTYPE html>
<html lang=en data-bs-theme=dark>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=author content="Marcus Kammer">
<meta name=description content="">
<title>Questionnaire Example</title>
<link rel=stylesheet type=text/css
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css>
</head>
<body>
<h1 class=visually-hidden>Questionnaire Example</h1>
<main>
<!-- START CONTAINER -->
<div class=container>
<form class=py-5 action=/submit method=get>
<fieldset>
<legend>How old are you?</legend>
<ol>
<li>
<label class=form-label>
<input type=radio name=age value=18-24> 18-24</label>
<li>
<label class=form-label>
<input type=radio name=age value=25-34> 25-34</label>
<li>
<label class=form-label>
<input type=radio name=age value=35-44> 35-44</label>
<li>
<label class=form-label>
<input type=radio name=age value=45-54> 45-54</label>
<li>
<label class=form-label>
<input type=radio name=age value=55+> 55+</label>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>Your Gender?</legend>
<ol>
<li>
<label class=form-label>
<input type=radio name=gender value=Male> Male</label>
<li>
<label class=form-label>
<input type=radio name=gender value=Female> Female</label>
<li>
<label class=form-label>
<input type=radio name=gender value=Non-Binary> Non-Binary</label>
<li>
<label class=form-label>
<input type=radio name=gender value="Prefer not to say"> Prefer not to say</label>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>How many hours per day, on average, do you spend browsing the internet?</legend>
<ol>
<li>
<label class=form-label>
<input type=radio name=internet value="Less than 1 hour"> Less than 1 hour</label>
<li>
<label class=form-label>
<input type=radio name=internet value="1-3 hours"> 1-3 hours</label>
<li>
<label class=form-label>
<input type=radio name=internet value="3-5 hours"> 3-5 hours</label>
<li>
<label class=form-label>
<input type=radio name=internet value="5+ hours"> 5+ hours</label>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>Which of the following devices do you regularly use to browse the internet? (Select all that apply)</legend>
<ol>
<li>
<label class=form-label>
<input type=checkbox name=devices value=Desktop> Desktop</label>
<li>
<label class=form-label>
<input type=checkbox name=devices value=Laptop> Laptop</label>
<li>
<label class=form-label>
<input type=checkbox name=devices value=Tablet> Tablet</label>
<li>
<label class=form-label>
<input type=checkbox name=devices value=Smartphone> Smartphone</label>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>Which social media platforms do you use regularly? (Select all that apply)</legend>
<ol>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=Facebook> Facebook</label>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=Twitter> Twitter</label>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=Instagram> Instagram</label>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=LinkedIn> LinkedIn</label>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=TikTok> TikTok</label>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=Snapchat> Snapchat</label>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=Pinterest> Pinterest</label>
<li>
<label class=form-label>
<input type=checkbox name=socialmedia value=Youtube> Youtube</label>
</ol>
<hr class=my-4>
</fieldset>
<button class="btn btn-primary" type=submit>Submit</button>
</form>
</div>
<!-- END CONTAINER -->
</main>
</body>
<script
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js></script>
</html>