{"content": "\n
\n \n

Template source: index.html

\n
\n
\n
\n 
{% extends "base.html" %}\n{% load static %}\n\n{% block leftnav %}\n{% endblock %}\n\n{% block header %}\n    <!-- Google Fonts for Serif -->\n    <style>\n        html, body {\n            background-color: #000; /* Black background */\n            color: #fff; /* White text for contrast */\n            height: 100%;\n            margin: 0;\n            padding: 0;\n            min-height: 100vh;\n            display: flex;\n            flex-direction: column;\n        }\n        .uk-heading-serif {\n            font-family: 'New Times Roman', serif;\n            color: #ffa500; /* Bright orange for the heading */\n        }\n        .uk-text-lead {\n            color: #f0f0f0; /* Slightly off-white for readability */\n            text-align: left;\n        }\n        .uk-button-default {\n            color: #fff;\n            background-color: transparent;\n            border-color: #ffa500; /* Orange border */\n        }\n        .uk-button-default:hover {\n            color: #000;\n            background-color: #ffa500; /* Orange background on hover */\n        }\n        .uk-button-primary {\n            background-color: #ffa500; /* Bright orange button */\n            color: #000;\n        }\n        .uk-button-primary:hover {\n            background-color: #ffcc70; /* Lighter orange on hover */\n        }\n        .uk-section-primary {\n            padding: 20px;\n        }\n        .volatility-image {\n            display: block;\n            margin: 20px auto;\n            max-width: 300px;\n        }\n    </style>\n{% endblock %}\n\n{% block content %}\n\n    <div class="uk-container" style="text-align:center;">\n        <a href="/" title="PennyLoupe.com">\n            <img src="{% static 'img/penny_loupe_logo.png' %}" alt="PennyLoupe" style="max-height:150px;"/>\n        </a>\n\n\n        <section class="uk-section">\n            <div class="uk-flex uk-flex-middle uk-flex-between">\n                <!-- Left: Text Content -->\n                <div class="uk-width-1-2" style="text-align:left;">\n                    <h1 class="uk-heading-medium uk-heading-serif">Trade on Volatility</h1>\n                    <p><b>Gain a smarter edge with PennyLoupe.</b></p>\n                    <p class="uk-text-lead">\n                        PennyLoupe's AI-driven volatility-based stock picks\n                        leverage advanced analytics and proprietary scoring to\n                        examine and rank over 25,000 daily insights.\n                        We source data from over 90,000 trusted news outlets, private finance forums,\n                        and more to help you make informed trading decisions.\n                    </p>\n                    <div class="uk-flex uk-flex-left uk-margin">\n                        <a href="https://forms.gle/D4RhVRnFXKbsXp9h9" target="_blank" class="uk-button uk-button-primary">Join Waitlist</a>\n\n                        <a href="{% url 'trade_bots' %}" class="uk-button uk-button-default uk-margin-small-left">View Performance</a>\n                    </div>\n                </div>\n\n                <!-- Right: Volatility Image -->\n                <div class="uk-width-1-2 uk-text-right">\n                    <img src="{% static 'img/volatility.png' %}" alt="Market Volatility" class="volatility-image">\n                </div>\n            </div>\n        </section>\n\n\n        <img src="{% static 'img/how-it-works.png' %}" alt="PennyLoupe" style="max-height:370px;" />\n\n    </div>\n\n    <div class="uk-container uk-margin-large-top">\n        <h1 class="uk-heading-medium uk-text-center uk-heading-serif">Prediction Models</h1>\n        <p class="uk-text-center">\n            Explore and analyze our cutting-edge AI-driven volatility prediction models.\n        </p>\n\n        <div class="uk-grid-medium uk-child-width-1-2@s uk-child-width-1-2@m uk-grid-match" uk-grid>\n            {% for model in models %}\n                <div>\n                    <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-padding-small">\n                        <div class="uk-flex uk-flex-middle">\n                            <!-- Circular Logo -->\n                            <div class="uk-border-circle uk-flex uk-flex-center uk-flex-middle"\n                                style="width: 50px; height: 50px; background-color: #ffa500; color: #000;">\n                                <span uk-icon="icon: server; ratio: 1.5"></span>\n                            </div>\n\n                            <!-- Model Details -->\n                            <div class="uk-margin-small-left">\n                                <h3 class="uk-card-title uk-margin-remove">{{ model.name }}</h3>\n                                <p class="uk-margin-remove"><b>Version:</b> {{ model.version }}</p>\n                                <p class="uk-margin-remove"><b>Last Run:</b> {{ model.last_run_dt|date:"Y-m-d" }}</p>\n                                <p class="uk-margin-remove"><b>Last Trained:</b> {{ model.last_trained_dt|date:"Y-m-d" }}</p>\n                            </div>\n                        </div>\n\n                        <!-- View Picks Button -->\n                        <a href="{% url 'model_picks' %}?pick_date={{ model.last_run_dt|date:'Y-m-d' }}&model_id={{ model.id }}"\n                        class="uk-button uk-button-primary uk-margin-small-top">\n                            View Picks\n                        </a>\n                    </div>\n                </div>\n        {% endfor %}\n        </div>\n    </div>\n\n{% endblock %}\n
\n\n
\n
\n"}