sascha
/
difftastic
mirror of https://github.com/Wilfred/difftastic/
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
difftastic/demo_files/2/index.html

625 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Difftastic, a structural diff</title>
<meta name="description" content="" />
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="icon.png" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
/>
<style>
html,
body,
.fw-bold,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #f8f8f2 !important;
}
h1 {
font-family: "Fontdiner Swanky", serif;
text-shadow: 5px 5px #1d1b22;
}
html,
body {
background-color: #282a36;
}
object {
background-color: #f8f8f2;
border-radius: 25% 25%;
padding: 5px;
}
.red {
color: #ff5555;
}
.green {
color: #50fa7b;
}
.cyan {
color: #8be9fd;
}
.btn {
box-shadow: 5px 5px #1d1b22;
}
.btn.gray {
color: #f8f8f2;
background-color: #1d1b22;
border-color: #1d1b22;
}
.btn.red {
color: #282a36;
background-color: #ff5555;
border-color: #ff5555;
}
.btn.green {
color: #282a36;
background-color: #50fa7b;
border-color: #50fa7b;
}
a {
color: #50fa7b;
}
code {
color: #ff5555;
}
h3 {
line-height: 45px;
}
@media only screen and (min-width: 900px) {
.screenshot {
max-width: 800px;
}
}
</style>
</head>
<!-- simple project description website, in the style of
https://popper.js.org/ or
https://cdnjs.com/libraries/font-awesome TODO: Prefer a dark
theme. It feels more like code, and less like vanilla
boostrap. -->
<!-- Use https://devicon.dev/ for PL icons. -->
<body>
<div class="px-4 pt-5 text-center">
<h1 class="display-4 text-body-emphasis">
<span class="red">diff</span><span class="green">tastic</span>
</h1>
<div class="container-sm">
<img
src="difft_screenshot.png"
class="screenshot img-fluid mb-4"
alt="screenshot"
/>
</div>
</div>
<div class="container px-4 py-5">
<h2>
focus on <span class="red">what</span>
<span class="green">changed</span>
</h2>
<img
src="difft_screenshot.png"
class="screenshot img-fluid mb-4"
alt="screenshot"
/>
</div>
<div class="container px-4 py-5">
<h2>
ignore <span class="red">formatting</span>
<span class="green">changes</span>
</h2>
<div class="container-sm">
<img
src="difft_screenshot.png"
class="screenshot img-fluid mb-4"
alt="screenshot"
/>
</div>
</div>
<div class="container px-4 py-5">
<h2>
understand <span class="red">wrapping</span>
<span class="green">changes</span>
</h2>
<img
src="difft_screenshot.png"
class="screenshot"
/>
</div>
<div class="container px-4 py-5">
<h2>
<span class="red">align</span>
<span class="green">content</span>
</h2>
<div class="container-sm">
<img
src="difft_screenshot.png"
class="screenshot img-fluid mb-4"
alt="screenshot"
/>
</div>
<p>
difftastic uses real line numbers, not
<code>@@ 123</code> syntax.
</p>
</div>
<div class="container px-4 py-5">
<h2>programming languages</h2>
<div
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"
>
<div class="col d-flex align-items-start">
<div class="foo">
<object
class="me-3"
width="45px"
height="45px"
data="cplusplus.svg"
type="image/svg+xml"
></object>
</div>
<div>
<h3 class="fw-bold mb-0 fs-4">
C++
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="csharp.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
C#
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="clojure.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Clojure
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="lisp.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Common Lisp
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="dart.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Dart
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="erlang.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Erlang
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="go.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Go
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="haskell.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Haskell
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="java.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Java
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="javascript.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
JavaScript
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="kotlin.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Kotlin
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="lua.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Lua
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="ocaml.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
OCaml
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="php.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
PHP
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="python.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Python
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="r.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
R
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="ruby.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Ruby
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="rust.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Rust
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="scala.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Scala
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="typescript.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
TypeScript
</h3>
</div>
</div>
<!-- end languages -->
</div>
<p>
See the full
<a href="https://difftastic.wilfred.me.uk/languages_supported.html"
>list of supported languages</a
>
in the manual.
</p>
</div>
<div class="container px-4 py-5">
<h2 class="pb-2">file formats</h2>
<div
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"
>
<div class="col d-flex align-items-start">
<!-- https://www.svgrepo.com/svg/371192/curly-brackets -->
<object
class="me-3"
width="45px"
height="45px"
data="braces.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
HCL
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="html5.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
HTML
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="json.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
JSON
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object
class="me-3"
width="45px"
height="45px"
data="yaml.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
YAML
</h3>
</div>
</div>
<!-- end formats -->
</div>
<p>
See the full
<a
href="https://difftastic.wilfred.me.uk/languages_supported.html#structured-text-formats"
>list of supported file formats</a
>
in the manual.
</p>
</div>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink