Presenting CF-Mobile: Your Ultimate Codeforces Companion for iOS & macOS↵
↵
↵
Hello everyone, it’s been a while!↵
↵
I'm excited to showcase CF-Mobile, the native iOS/macOS app designed to be your comprehensive companion for Codeforces. This application delivers a seamless, feature-rich experience, empowering competitive programmers to train, learn, and track their progress efficiently on the go.↵
↵
GitHub Repository: <a href="https://github.com/Blossoms1010/CF-Mobile" target="_blank">https://github.com/Blossoms1010/CF-Mobile</a>↵
↵
How to Use: Simply open the project in Xcode on your macOS and build it to your iPhone or iPad.↵
↵
CF-Mobile is now fully API-driven, ensuring a stable, efficient, and robust experience across all features. Let's delve into what makes CF-Mobile an essential tool for every competitive programmer:↵
↵
<h3>Contest and Problem Browsing</h3>↵
Navigate the world of competitive programming with an intuitive interface designed for optimal performance.↵
<ul>↵
<li><strong>Comprehensive Contest Listing:</strong> Easily browse live, upcoming, and past contests. Stay informed with real-time updates and essential contest details, ensuring you never miss an event.</li>↵
<li><strong>Extensive Problemset Exploration:</strong> Access the entire Codeforces problemset. Our robust API integration ensures rapid loading and stable performance, even with complex data.</li>↵
<li><strong>Advanced Filtering and Search:</strong> Locate specific contests or problems effortlessly using powerful search functionality. Utilize a flexible filter system to narrow down contests by type, or problems by specific algorithm tags (e.g., Dynamic Programming, Graph Theory, Mathematics).</li>↵
<li><strong>Detailed Problem Information:</strong> Each problem entry provides clear information, including the number of successful submissions, giving you insights into problem popularity and difficulty. Problem status is indicated cleanly with simple checkmarks for accepted solutions and crosses for attempts.</li>↵
<li><strong>Optimized Problem Statement Viewer:</strong> Experience problem statements with full support for LaTeX mathematical formulas, rendered beautifully for clarity. Customize your reading comfort by adjusting font size and line spacing. (Please note that LaTeX rendering can occasionally be unstable and may require a manual refresh).</li>↵
</ul>↵
↵
<h3>Powerful Integrated Code Editor</h3>↵
Practice and develop your solutions directly within the app, featuring a professional-grade coding environment.↵
<ul>↵
<li><strong>VS Code-Inspired Editing:</strong> Our editor is built on the high-performance Monaco engine, similar to VS Code, offering a familiar and efficient coding experience.</li>↵
<li><strong>Syntax Highlighting and Autocompletion:</strong> Enjoy rich syntax highlighting for C++, Python, and Java, alongside intelligent autocompletion features that boost your coding speed and accuracy.</li>↵
<li><strong>Integrated Code Execution:</strong> Test your code instantly with integrated cloud-based judging powered by Judge0, providing quick feedback on your solutions.</li>↵
<li><strong>Robust File Management:</strong> Organize your code files effectively with a stable and reliable file management system. File lists display additional information and intuitive icons for better organization.</li>↵
<li><strong>Secure File Export:</strong> Easily save your current code files from the interface to any desired location on your device, ensuring your work is always accessible and safe.</li>↵
</ul>↵
↵
<h3>Comprehensive Analytics Dashboard</h3>↵
Monitor your competitive programming journey with detailed visual analytics.↵
<ul>↵
<li><strong>Personalized Profile:</strong> Link your Codeforces handle to unlock a personalized dashboard that provides deep insights into your performance.</li>↵
<li><strong>Rating History Chart:</strong> Visualize your rating fluctuations over time with a clear, engaging chart. The rating curve now proudly displays the official Codeforces yellow color.</li>↵
<li><strong>Activity Heatmap:</strong> Review your practice consistency with a GitHub-style activity heatmap. A new year-selection feature allows you to explore your performance trends across different years.</li>↵
<li><strong>Tag and Difficulty Distribution:</strong> Understand your strengths and areas for improvement with charts illustrating your solved problems by algorithm tag and difficulty level.</li>↵
</ul>↵
↵
<h3>Integrated OI Wiki for Learning</h3>↵
Expand your algorithmic knowledge with a directly integrated resource.↵
<ul>↵
<li><strong>Seamless Learning Experience:</strong> Browse the comprehensive Chinese algorithm competition resource, OI Wiki, directly within the app. This integration provides a vast library of algorithmic concepts and solutions at your fingertips.</li>↵
<li><strong>Focused Study Environment:</strong> All external redirects within the OI Wiki browser are blocked, creating a clean, focused, and uninterrupted learning environment free from distractions.</li>↵
</ul>↵
↵
<h3>General Enhancements</h3>↵
<ul>↵
<li><strong>Full Dark Mode Support:</strong> Enjoy a comfortable viewing experience in low-light conditions with nearly full dark mode support across the entire application.</li>↵
<li><strong>Improved User Interface:</strong> The app has undergone numerous minor UI refinements to enhance overall aesthetics and user experience.</li>↵
<li><strong>Language Localization:</strong> Most Chinese prompts and UI elements have been updated to English, making the app more accessible to a global audience.</li>↵
</ul>↵
↵
We invite you to explore the new CF-Mobile and elevate your competitive programming experience!↵
↵
<h3>App Screenshots — Light Mode</h3>↵
<div style="text-align: center;">↵
<table>↵
<tbody>↵
↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1969.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1971.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1973.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1975.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1977.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1979.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1981.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1983.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
↵
↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1911.jpeg?raw=true" style="max-width: 100%;" alt="Contest List Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1913.jpeg?raw=true" style="max-width: 100%;" alt="Problem View Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1915.jpeg?raw=true" style="max-width: 100%;" alt="Problemset with Filters Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1917.jpeg?raw=true" style="max-width: 100%;" alt="Code Editor Light Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1919.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1921.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1925.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1929.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1931.jpeg?raw=true" style="max-width: 100%;" alt="OI Wiki Browser Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1933.jpeg?raw=true" style="max-width: 100%;" alt="File Browser Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1935.jpeg?raw=true" style="max-width: 100%;" alt="App Settings Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1937.jpeg?raw=true" style="max-width: 100%;" alt="AI Model Settings Light Mode"/></td>↵
</tr>↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1963.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1965.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1967.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1989.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
↵
</tbody>↵
</table>↵
</div>↵
↵
<h3>App Screenshots — Dark Mode</h3>↵
<div style="text-align: center;">↵
<table>↵
<tbody>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1938.jpeg?raw=true" style="max-width: 100%;" alt="Contest List Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1941.jpeg?raw=true" style="max-width: 100%;" alt="Problem View Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1943.jpeg?raw=true" style="max-width: 100%;" alt="Problemset with Filters Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1945.jpeg?raw=true" style="max-width: 100%;" alt="Code Editor Dark Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1947.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1949.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1951.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1953.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Dark Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1955.jpeg?raw=true" style="max-width: 100%;" alt="OI Wiki Browser Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1957.jpeg?raw=true" style="max-width: 100%;" alt="File Browser Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1960.jpeg?raw=true" style="max-width: 100%;" alt="App Settings Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1962.jpeg?raw=true" style="max-width: 100%;" alt="Code Templates Dark Mode"/></td>↵
</tr>↵
</tbody>↵
</table>↵
</div>
↵
↵
Hello everyone, it’s been a while!↵
↵
I'm excited to showcase CF-Mobile, the native iOS/macOS app designed to be your comprehensive companion for Codeforces. This application delivers a seamless, feature-rich experience, empowering competitive programmers to train, learn, and track their progress efficiently on the go.↵
↵
GitHub Repository: <a href="https://github.com/Blossoms1010/CF-Mobile" target="_blank">https://github.com/Blossoms1010/CF-Mobile</a>↵
↵
How to Use: Simply open the project in Xcode on your macOS and build it to your iPhone
↵
CF-Mobile is now fully API-driven, ensuring a stable, efficient, and robust experience across all features. Let's delve into what makes CF-Mobile an essential tool for every competitive programmer:↵
↵
<h3>Contest and Problem Browsing</h3>↵
Navigate the world of competitive programming with an intuitive interface designed for optimal performance.↵
<ul>↵
<li><strong>Comprehensive Contest Listing:</strong> Easily browse live, upcoming, and past contests. Stay informed with real-time updates and essential contest details, ensuring you never miss an event.</li>↵
<li><strong>Extensive Problemset Exploration:</strong> Access the entire Codeforces problemset. Our robust API integration ensures rapid loading and stable performance, even with complex data.</li>↵
<li><strong>Advanced Filtering and Search:</strong> Locate specific contests or problems effortlessly using powerful search functionality. Utilize a flexible filter system to narrow down contests by type, or problems by specific algorithm tags (e.g., Dynamic Programming, Graph Theory, Mathematics).</li>↵
<li><strong>Detailed Problem Information:</strong> Each problem entry provides clear information, including the number of successful submissions, giving you insights into problem popularity and difficulty. Problem status is indicated cleanly with simple checkmarks for accepted solutions and crosses for attempts.</li>↵
<li><strong>Optimized Problem Statement Viewer:</strong> Experience problem statements with full support for LaTeX mathematical formulas, rendered beautifully for clarity. Customize your reading comfort by adjusting font size and line spacing. (Please note that LaTeX rendering can occasionally be unstable and may require a manual refresh).</li>↵
</ul>↵
↵
<h3>Powerful Integrated Code Editor</h3>↵
Practice and develop your solutions directly within the app, featuring a professional-grade coding environment.↵
<ul>↵
<li><strong>VS Code-Inspired Editing:</strong> Our editor is built on the high-performance Monaco engine, similar to VS Code, offering a familiar and efficient coding experience.</li>↵
<li><strong>Syntax Highlighting and Autocompletion:</strong> Enjoy rich syntax highlighting for C++, Python, and Java, alongside intelligent autocompletion features that boost your coding speed and accuracy.</li>↵
<li><strong>Integrated Code Execution:</strong> Test your code instantly with integrated cloud-based judging powered by Judge0, providing quick feedback on your solutions.</li>↵
<li><strong>Robust File Management:</strong> Organize your code files effectively with a stable and reliable file management system. File lists display additional information and intuitive icons for better organization.</li>↵
<li><strong>Secure File Export:</strong> Easily save your current code files from the interface to any desired location on your device, ensuring your work is always accessible and safe.</li>↵
</ul>↵
↵
<h3>Comprehensive Analytics Dashboard</h3>↵
Monitor your competitive programming journey with detailed visual analytics.↵
<ul>↵
<li><strong>Personalized Profile:</strong> Link your Codeforces handle to unlock a personalized dashboard that provides deep insights into your performance.</li>↵
<li><strong>Rating History Chart:</strong> Visualize your rating fluctuations over time with a clear, engaging chart. The rating curve now proudly displays the official Codeforces yellow color.</li>↵
<li><strong>Activity Heatmap:</strong> Review your practice consistency with a GitHub-style activity heatmap. A new year-selection feature allows you to explore your performance trends across different years.</li>↵
<li><strong>Tag and Difficulty Distribution:</strong> Understand your strengths and areas for improvement with charts illustrating your solved problems by algorithm tag and difficulty level.</li>↵
</ul>↵
↵
<h3>Integrated OI Wiki for Learning</h3>↵
Expand your algorithmic knowledge with a directly integrated resource.↵
<ul>↵
<li><strong>Seamless Learning Experience:</strong> Browse the comprehensive Chinese algorithm competition resource, OI Wiki, directly within the app. This integration provides a vast library of algorithmic concepts and solutions at your fingertips.</li>↵
<li><strong>Focused Study Environment:</strong> All external redirects within the OI Wiki browser are blocked, creating a clean, focused, and uninterrupted learning environment free from distractions.</li>↵
</ul>↵
↵
<h3>General Enhancements</h3>↵
<ul>↵
<li><strong>Full Dark Mode Support:</strong> Enjoy a comfortable viewing experience in low-light conditions with nearly full dark mode support across the entire application.</li>↵
<li><strong>Improved User Interface:</strong> The app has undergone numerous minor UI refinements to enhance overall aesthetics and user experience.</li>↵
<li><strong>Language Localization:</strong> Most Chinese prompts and UI elements have been updated to English, making the app more accessible to a global audience.</li>↵
</ul>↵
↵
We invite you to explore the new CF-Mobile and elevate your competitive programming experience!↵
↵
<h3>App Screenshots — Light Mode</h3>↵
<div style="text-align: center;">↵
<table>↵
<tbody>↵
↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1969.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1971.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1973.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1975.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1977.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1979.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1981.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1983.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
↵
↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1911.jpeg?raw=true" style="max-width: 100%;" alt="Contest List Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1913.jpeg?raw=true" style="max-width: 100%;" alt="Problem View Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1915.jpeg?raw=true" style="max-width: 100%;" alt="Problemset with Filters Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1917.jpeg?raw=true" style="max-width: 100%;" alt="Code Editor Light Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1919.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1921.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1925.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1929.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1931.jpeg?raw=true" style="max-width: 100%;" alt="OI Wiki Browser Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1933.jpeg?raw=true" style="max-width: 100%;" alt="File Browser Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1935.jpeg?raw=true" style="max-width: 100%;" alt="App Settings Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1937.jpeg?raw=true" style="max-width: 100%;" alt="AI Model Settings Light Mode"/></td>↵
</tr>↵
↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1963.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1965.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1967.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Light Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/light/IMG_1989.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Light Mode"/></td>↵
</tr>↵
↵
</tbody>↵
</table>↵
</div>↵
↵
<h3>App Screenshots — Dark Mode</h3>↵
<div style="text-align: center;">↵
<table>↵
<tbody>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1938.jpeg?raw=true" style="max-width: 100%;" alt="Contest List Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1941.jpeg?raw=true" style="max-width: 100%;" alt="Problem View Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1943.jpeg?raw=true" style="max-width: 100%;" alt="Problemset with Filters Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1945.jpeg?raw=true" style="max-width: 100%;" alt="Code Editor Dark Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1947.jpeg?raw=true" style="max-width: 100%;" alt="User Profile Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1949.jpeg?raw=true" style="max-width: 100%;" alt="Activity Heatmap Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1951.jpeg?raw=true" style="max-width: 100%;" alt="Rating Chart Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1953.jpeg?raw=true" style="max-width: 100%;" alt="Tags Pie Chart Dark Mode"/></td>↵
</tr>↵
<tr>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1955.jpeg?raw=true" style="max-width: 100%;" alt="OI Wiki Browser Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1957.jpeg?raw=true" style="max-width: 100%;" alt="File Browser Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1960.jpeg?raw=true" style="max-width: 100%;" alt="App Settings Dark Mode"/></td>↵
<td style="width: 25%; padding: 5px;"><img src="https://github.com/Blossoms1010/CF-Mobile/blob/main/ScreenShot/dark/IMG_1962.jpeg?raw=true" style="max-width: 100%;" alt="Code Templates Dark Mode"/></td>↵
</tr>↵
</tbody>↵
</table>↵
</div>
