This commit is contained in:
Matt Borgerson 2023-01-19 02:16:43 -07:00
parent 282c02446a
commit 2a6b2daf9d
4 changed files with 238 additions and 228 deletions

View File

@ -85,17 +85,16 @@
<main role="main"> <main role="main">
{% block jumbotron %}{% endblock %} {% block jumbotron %}{% endblock %}
<div class="container"> {% block content %}{% endblock %}
<div class="col-lg-10 mx-auto mt-5"> <footer>
{% block content %}{% endblock %} <div class="container text-muted">
<footer class="my-5 text-muted text-center text-small"> {% block append_footer %}{% endblock %}
<p><strong>Disclaimer:</strong> <p><strong>Disclaimer:</strong>
All product names, logos, and brands are property of their respective owners. All company, product and service names and/or images used in this website are for identification purposes only. All product names, logos, and brands are property of their respective owners. All company, product and service names and/or images used in this website are for identification purposes only.
</p> </p>
<p>&copy; 2020-2023 xemu Project</p> <p>&copy; 2023 xemu Project</p>
</footer>
</div> </div>
</div> </footer>
</main> </main>
{% block append_foot %}{% endblock %} {% block append_foot %}{% endblock %}

View File

@ -3,88 +3,16 @@
{% extends "template_base.html" %} {% extends "template_base.html" %}
{% block append_head %} {% block append_head %}
<style type="text/css"> <style type="text/css">
/* https://www.gungorbudak.com/blog/2018/12/12/bootstrap-4-search-box-with-search-icon/ */
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
{% for key in title_status_colors %}
.text-color-{{ key }} {
color: {{ title_status_colors[key] }};
}
.fill-color-{{ key }} {
background-color: {{ title_status_colors[key] }};
color: #fff;
font-weight: bold;
}
{% endfor %}
.title-card a {
color: #fff;
font-weight: bolder;
text-decoration: none;
}
.title-card-container {
width: 10rem;
background-color: #373737;
border-radius: 0.25rem;
overflow: hidden;
}
.title-card-image-container {
background-image: url('cover_front_default.png');
background-size: cover;
width: 100%;
height: 14.18rem;
}
.title-card-image-container img {
height: 100%;
width: 100%;
}
/* Account for the fixed header (which otherwise would occlude anchor targets) */ /* Account for the fixed header (which otherwise would occlude anchor targets) */
/* Via https://stackoverflow.com/a/28824157 */ /* Via https://stackoverflow.com/a/28824157 */
:target::before { :target::before {
content: ""; content: "";
display: block; display: block;
height: 60px; /* fixed header height*/ height: 5rem; /* fixed header height*/
margin: -60px 0 0; /* negative fixed header height */ margin: -5rem 0 0; /* negative fixed header height */
} }
.feature-card {
background-color: #181818;
border: 1px #0e0e0e solid;
border-radius: 5px;
min-height: 100%;
padding: 1rem;
padding-left: 3.5rem;
}
.feature-card p {
margin: 0;
}
.feature-icon {
width: 3.5rem;
margin: 0;
margin-left: -3.5rem;
text-align: center;
}
.button-icon {
display: inline-block;
margin-right: 0.75em;
}
#logo-canvas { #logo-canvas {
display: block; display: block;
@ -119,19 +47,21 @@
} }
} }
h2 { .button-icon {
margin-top: 1em; display: inline-block;
margin-right: 0.75em;
} }
.screenshot-window { .screenshot-window {
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.6); box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.6);
border-radius: 10px; border-radius: 10px;
max-width: 642px; max-width: 642px;
margin: auto; margin: 2em auto;
} }
.screenshot-titlebar { .screenshot-titlebar {
width: 100%; width: 100%;
display: block;
} }
#screenshot-carousel { #screenshot-carousel {
@ -139,6 +69,74 @@ h2 {
border-top: 0; border-top: 0;
width: 100%; width: 100%;
} }
.feature-card {
min-height: 100%;
padding: 1rem 1rem 1rem 4.5rem;
}
.feature-card p {
margin: 0;
}
.feature-icon {
width: 4.5rem;
margin: 0 0 0 -4.5rem;
text-align: center;
color: #888;
}
{% for key in title_status_colors %}
.text-color-{{ key }} {
color: {{ title_status_colors[key] }};
}
.fill-color-{{ key }} {
background-color: {{ title_status_colors[key] }};
color: #fff;
font-weight: bold;
}
{% endfor %}
.title-card a {
color: #fff;
font-weight: bolder;
text-decoration: none;
}
.title-card-container {
width: 10rem;
background-color: #373737;
border-radius: 0.25rem;
overflow: hidden;
}
.title-card-image-container {
background-image: url('cover_front_default.png');
background-size: cover;
width: 100%;
height: 14.18rem;
}
.title-card-image-container img {
height: 100%;
width: 100%;
}
/* https://www.gungorbudak.com/blog/2018/12/12/bootstrap-4-search-box-with-search-icon/ */
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
</style> </style>
{% endblock %} {% endblock %}
@ -156,33 +154,31 @@ h2 {
<img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;"> <img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;">
</h1> </h1>
<h4 class="card-subtitle mb-2">Original Xbox Emulator</h4> <h4 class="card-subtitle mb-2">Original Xbox Emulator</h4>
<p> <p class="lead">
A free and open-source application that emulates the original Microsoft A free and open-source application that emulates the original Microsoft
Xbox game console, enabling people to play their original Xbox games on Xbox game console, enabling people to play their original Xbox games on
Windows, macOS, and Linux systems. Windows, macOS, and Linux systems.
</p> </p>
<div class="container pl-2 p-0"> <div class="d-flex flex-wrap m" style="column-gap: 1em;">
<div class="row"> <div>
<div class="column text-center text-md-left p-2"> <a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download">
<a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download"> <i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options
<i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options </a>
</a> <a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-win-release.zip">
<a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-win-release.zip"> <i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows
<i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows </a>
</a> <a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-macos-universal-release.zip">
<a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/xemu-project/xemu/releases/latest/download/xemu-macos-universal-release.zip"> <i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS
<i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS </a>
</a> <a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
<a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux"> <i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux
<i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux </a>
</a> </div>
</div> <div class="text-nowrap">
<div class="column p-2"> Version {{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
<strong>Latest release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}}) <br />
<br /> <a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
<a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -192,121 +188,119 @@ h2 {
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="screenshot-window"> <div class="body-alt-section">
<img src="linux_title_bar_dark_2x.png" class="screenshot-titlebar" /> <div class="container">
<div id="screenshot-carousel" class="carousel slide" data-ride="carousel"> <div class="screenshot-window">
<div class="carousel-inner"> <img src="linux_title_bar_dark_2x.png" class="screenshot-titlebar" />
<div class="carousel-item active"> <div id="screenshot-carousel" class="carousel slide" data-ride="carousel">
<img src="/screenshots/0.png" class="img-fluid lazy" /> <div class="carousel-inner">
</div> {% for i in range(6) %}
<div class="carousel-item"> <div class="carousel-item {% if i<1 %}active{% endif %}">
<img src="/screenshots/1.png" class="img-fluid lazy" /> <img src="/screenshots/{{ i }}.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/2.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/3.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/4.png" class="img-fluid lazy" />
</div>
<div class="carousel-item">
<img src="/screenshots/5.png" class="img-fluid lazy" />
</div>
</div>
<a class="carousel-control-prev" href="#screenshot-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#screenshot-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h2 class="mb-4 text-center">Features</h2>
<div class="row">
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fab fa-github feature-icon"></i>Open Source</h4>
<p>The source code for xemu is available on <a href="https://github.com/xemu-project/xemu">GitHub</a>. You are invited to help improve the project! Learn more <a href="/docs/dev/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-users feature-icon"></i>Cross Platform</h4>
<p>xemu runs natively on Windows, macOS, and Linux platforms. Binaries are available for all platforms, or you can build from source if desired. Learn more <a href="/docs/download/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-microchip feature-icon"></i>Low Level Emulation</h4>
<p>xemu emulates the hardware of the original Xbox, providing superior compatibility with kernels, titles, and homebrew applications.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-gamepad feature-icon"></i>Controller Support</h4>
<p>Built on <a href="https://www.libsdl.org/">SDL2</a>, xemu supports virtually all controllers. Connect up to 4 controllers at any time, just like a real Xbox. Learn more <a href="/docs/input/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-history feature-icon"></i>Snapshots (Save States)</h4>
<p>No need to wait for game checkpoints. xemu supports saving the current machine state and loading it back up at any time. Learn more <a href="/docs/snapshots/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-expand-alt feature-icon"></i>Render Scaling</h4>
<p>Breathe new life into your original Xbox games by easily increasing the resolution that games render at, on the fly. Scale up from 480p to 1080p at the click of a button.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-people-arrows feature-icon"></i>Networking</h4>
<p>Connect to other instances of xemu and real Xboxes, locally or over the Internet. Supports tunneling services and Xbox Live recreation projects. Learn more <a href="/docs/networking/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fab fa-discord feature-icon"></i>Community</h4>
<p>xemu has a thriving online community of original Xbox fans. Set up multiplayer matches, get help running xemu, and more by joining our community on <a href="https://discord.gg/ayyjsuM">Discord</a>!</p>
</div>
</div>
</div>
<h2 id="compatibility" class="mb-4 text-center">Compatibility</h2>
<p>Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!</p>
<div id="title_stats" style="height: 120px"></div>
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input class="form-control" type="text" placeholder="Search" id="filter">
</div>
<div class="container mt-2">
<div class="row" id="results">
{% for title in titles %}
<div class="col px-1 mb-4 title-card" data-title-name="{{ title.title_name }}" data-title-status="{{ title.status }}">
<a href="{{ title.title_url }}">
<div class="mx-auto title-card-container">
<div class="title-card-image-container">
{% if not title.have_cover %}
<div class="card-body text-center">{{ title.title_name }}</div>
{% else %}
<img data-src="{{ title.cover_thumbnail_url }}" class="img-fluid lazy" title="{{ title.title_name }}">
{% endif %}
</div>
<div class="fill-color-{{ title.status }} card-body text-center py-1 my-0">
<small><strong>{{ title.status }}</strong></small>
</div>
</div> </div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#screenshot-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a> </a>
</div> <a class="carousel-control-next" href="#screenshot-carousel" role="button" data-slide="next">
{% endfor %} <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> </div>
</div> </div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fab fa-github feature-icon"></i>Open Source</h4>
<p>The source code for xemu is available on <a href="https://github.com/xemu-project/xemu">GitHub</a>. You are invited to help improve the project! Learn more <a href="/docs/dev/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-users feature-icon"></i>Cross Platform</h4>
<p>xemu runs natively on Windows, macOS, and Linux platforms. Binaries are available for all platforms, or you can build from source if desired. Learn more <a href="/docs/download/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-microchip feature-icon"></i>Low Level Emulation</h4>
<p>xemu emulates the hardware of the original Xbox, providing superior compatibility with kernels, titles, and homebrew applications.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-gamepad feature-icon"></i>Controller Support</h4>
<p>Built on <a href="https://www.libsdl.org/">SDL2</a>, xemu supports virtually all controllers. Connect up to 4 controllers at any time, just like a real Xbox. Learn more <a href="/docs/input/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-history feature-icon"></i>Snapshots (Save States)</h4>
<p>No need to wait for game checkpoints. xemu supports saving the current machine state and loading it back up at any time. Learn more <a href="/docs/snapshots/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-expand-alt feature-icon"></i>Render Scaling</h4>
<p>Breathe new life into your original Xbox games by easily increasing the resolution that games render at, on the fly. Scale up from 480p to 1080p at the click of a button.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fas fa-people-arrows feature-icon"></i>Networking</h4>
<p>Connect to other instances of xemu and real Xboxes, locally or over the Internet. Supports tunneling services and Xbox Live recreation projects. Learn more <a href="/docs/networking/">here</a>.</p>
</div>
</div>
<div class="col-md-6 p-1">
<div class="feature-card">
<h4><i class="fab fa-discord feature-icon"></i>Community</h4>
<p>xemu has a thriving online community of original Xbox fans. Set up multiplayer matches, get help running xemu, and more by joining our community on <a href="https://discord.gg/ayyjsuM">Discord</a>!</p>
</div>
</div>
</div>
</div>
<div class="body-alt-section">
<div class="container">
<h2 id="compatibility" class="mb-4 text-center">Compatibility</h2>
<div class="col-lg-10 mx-auto mt-2">
<p>
<b>Note:</b> Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!
</p>
<div id="title_stats" style="height: 120px"></div>
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input class="form-control" type="text" placeholder="Search" id="filter">
</div>
<div class="row" id="results">
{% for title in titles %}
<div class="col px-1 mb-4 title-card" data-title-name="{{ title.title_name }}" data-title-status="{{ title.status }}">
<a href="{{ title.title_url }}">
<div class="mx-auto title-card-container">
<div class="title-card-image-container">
{% if not title.have_cover %}
<div class="card-body text-center">{{ title.title_name }}</div>
{% else %}
<img data-src="{{ title.cover_thumbnail_url }}" class="img-fluid lazy" title="{{ title.title_name }}">
{% endif %}
</div>
<div class="fill-color-{{ title.status }} card-body text-center py-1 my-0">
<small><strong>{{ title.status }}</strong></small>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
{% block append_foot %} {% block append_foot %}

View File

@ -23,6 +23,9 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="body-alt-section">
<div class="container">
<!-- Game Identification --> <!-- Game Identification -->
<div class="py-5 row flex-md-nowrap text-center text-md-left align-items-center justify-content-center justify-content-md-start"> <div class="py-5 row flex-md-nowrap text-center text-md-left align-items-center justify-content-center justify-content-md-start">
{% if title.xtimage_url %} {% if title.xtimage_url %}
@ -143,9 +146,14 @@
</div> </div>
</div> </div>
<hr /> </div>
<p class="text-muted mt-5"><b>Note:</b> Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!</p> </div>
<hr /> {% endblock %}
{% block append_footer %}
<p class="text-muted">
<b>Note:</b> Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!
</p>
{% endblock %} {% endblock %}
{% block append_foot %} {% block append_foot %}

View File

@ -49,9 +49,13 @@ $yiq-contrasted-threshold: 175 !default;
// Body // Body
$body-bg: $gray-900 !default; $body-bg: #181818 !default;
$body-color: $gray-400; $body-color: $gray-400;
.body-alt-section {
background-color: $gray-900;
}
// Links // Links
$link-color: $white !default; $link-color: $white !default;
@ -63,10 +67,6 @@ $font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Sego
$font-size-base: 1.025rem !default; $font-size-base: 1.025rem !default;
$h1-font-size: 3rem !default;
$h2-font-size: 2.5rem !default;
$h3-font-size: 2rem !default;
$text-muted: $gray-500 !default; $text-muted: $gray-500 !default;
// Tables // Tables
@ -463,4 +463,13 @@ $pre-color: inherit !default;
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: "Chakra Petch", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: "Chakra Petch", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
}
.container {
padding: 2em 1em;
}
.jumbotron {
margin: 0;
} }